:root{
      --bg:#fbf7ef;
      --paper:#fffaf2;
      --card:#ffffff;
      --ink:#1b2430;
      --muted:#697386;
      --soft:#e9dfd1;
      --line:#eadfce;
      --brand:#1f3a5f;
      --brand2:#284b78;
      --gold:#c89b3c;
      --gold2:#f2d58d;
      --green:#2f8f6b;
      --red:#c94a4a;
      --blue:#4578c8;
      --shadow:0 18px 60px rgba(30,44,62,.12);
      --radius:24px;
      --radius-sm:16px;
      --sidebar:292px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at top left, rgba(242,213,141,.38), transparent 32rem),
        radial-gradient(circle at top right, rgba(69,120,200,.13), transparent 28rem),
        linear-gradient(180deg,#fffaf2,#fbf7ef 48%,#f4efe7);
      overflow-x:hidden;
    }
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    a{color:inherit;text-decoration:none}
    .hidden{display:none!important}
    .muted{color:var(--muted)}
    .small{font-size:.86rem}
    .mini{font-size:.78rem}
    .strong{font-weight:800}
    .pill{
      display:inline-flex;align-items:center;gap:.42rem;
      padding:.35rem .72rem;border-radius:999px;
      background:#f7f0e4;border:1px solid var(--line);
      color:#4b5565;font-weight:800;font-size:.76rem;
      white-space:nowrap;
    }
    .pill.ok{background:#eaf8f2;color:#176346;border-color:#c8eadb}
    .pill.warn{background:#fff4d9;color:#815e10;border-color:#f3d892}
    .pill.bad{background:#fff0ef;color:#9d2f2f;border-color:#f2c7c3}
    .pill.blue{background:#edf4ff;color:#245da8;border-color:#cae0ff}
    .pill.gold{background:#fff7df;color:#8a6410;border-color:#edd58e}
    .login-wrap{
      min-height:100%;
      display:grid;
      grid-template-columns: 1.06fr .94fr;
      padding:28px;
      gap:28px;
    }
    .login-hero{
      position:relative;
      border-radius:34px;
      background:
        linear-gradient(135deg,rgba(31,58,95,.93),rgba(42,75,120,.86)),
        radial-gradient(circle at 20% 20%, rgba(242,213,141,.7), transparent 20rem);
      color:white;
      min-height:680px;
      overflow:hidden;
      box-shadow:var(--shadow);
      padding:42px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .login-hero:before{
      content:"";position:absolute;inset:-20%;
      background:
        radial-gradient(circle at 80% 20%,rgba(255,255,255,.12),transparent 18rem),
        radial-gradient(circle at 35% 85%,rgba(200,155,60,.32),transparent 18rem);
      pointer-events:none;
    }
    .brand-row{position:relative;display:flex;align-items:center;gap:14px;z-index:1}
    .brand-mark{
      width:58px;height:58px;border-radius:18px;
      display:grid;place-items:center;
      background:linear-gradient(145deg,#fff5d0,#c89b3c);
      color:#15243a;
      box-shadow:0 12px 36px rgba(0,0,0,.18);
      font-size:1.55rem;font-weight:900;
      flex:0 0 auto;
    }
    .brand-word b{display:block;letter-spacing:.04em;font-size:1.05rem}
    .brand-word span{display:block;color:rgba(255,255,255,.72);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
    .hero-copy{position:relative;z-index:1;max-width:720px}
    .hero-copy h1{font-size:clamp(2.3rem,5vw,5.6rem);line-height:.92;margin:0 0 22px;letter-spacing:-.06em}
    .hero-copy p{font-size:1.12rem;color:rgba(255,255,255,.78);line-height:1.7;max-width:680px}
    .hero-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .hero-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:18px;backdrop-filter:blur(12px)}
    .hero-stat b{display:block;font-size:1.4rem}
    .hero-stat span{font-size:.78rem;color:rgba(255,255,255,.75);font-weight:700}
    .login-card{
      border-radius:34px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(234,223,206,.95);
      box-shadow:var(--shadow);
      padding:42px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      backdrop-filter: blur(16px);
    }
    .login-card h2{font-size:2.1rem;line-height:1;margin:0 0 8px;letter-spacing:-.04em}
    .login-card p{margin:0 0 28px;color:var(--muted);line-height:1.6}
    .field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
    .field label{font-size:.78rem;font-weight:900;color:#445066;text-transform:uppercase;letter-spacing:.08em}
    input,select,textarea{
      width:100%;
      border:1px solid #e2d7c7;
      background:#fffdf8;
      color:var(--ink);
      border-radius:16px;
      padding:13px 14px;
      outline:none;
      transition:.18s ease;
    }
    textarea{min-height:96px;resize:vertical}
    input:focus,select:focus,textarea:focus{
      border-color:rgba(200,155,60,.8);
      box-shadow:0 0 0 4px rgba(200,155,60,.14);
    }
    .btn{
      border:0;
      border-radius:16px;
      padding:12px 16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-weight:900;
      background:#f2eadc;
      color:#263244;
      min-height:44px;
      transition:.18s ease;
    }
    .btn:hover{transform:translateY(-1px);filter:brightness(.99)}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:white}
    .btn.gold{background:linear-gradient(135deg,#d6aa48,#f1d48a);color:#2d2513}
    .btn.green{background:linear-gradient(135deg,#24815f,#50b78a);color:white}
    .btn.red{background:#ffe9e7;color:#a63838}
    .btn.ghost{background:transparent;border:1px solid var(--line)}
    .btn.block{width:100%}
    .btn.sm{min-height:36px;padding:8px 10px;border-radius:12px;font-size:.82rem}
    .app{
      display:grid;
      grid-template-columns:var(--sidebar) minmax(0,1fr);
      min-height:100%;
    }
    .sidebar{
      position:sticky;top:0;height:100vh;
      padding:22px 18px;
      border-right:1px solid var(--line);
      background:rgba(255,250,242,.88);
      backdrop-filter:blur(18px);
      overflow:auto;
      z-index:30;
    }
    .side-brand{
      display:flex;align-items:center;gap:12px;
      padding:12px 10px 22px;
      border-bottom:1px solid var(--line);
      margin-bottom:14px;
    }
    .side-brand .brand-mark{width:48px;height:48px;border-radius:16px;font-size:1.25rem}
    .side-brand b{font-size:.92rem;letter-spacing:.02em}
    .side-brand span{font-size:.72rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.12em}
    .nav{display:flex;flex-direction:column;gap:6px}
    .nav button{
      width:100%;
      border:0;
      background:transparent;
      text-align:left;
      display:flex;
      align-items:center;
      gap:10px;
      padding:11px 12px;
      border-radius:15px;
      color:#4a5568;
      font-weight:850;
      transition:.15s ease;
    }
    .nav button span:first-child{width:24px;text-align:center}
    .nav button:hover{background:#f6efe3;color:#182438}
    .nav button.active{
      background:linear-gradient(135deg,#1f3a5f,#2b517e);
      color:white;
      box-shadow:0 10px 28px rgba(31,58,95,.18);
    }
    .side-footer{
      margin-top:18px;padding:14px;border-radius:20px;
      background:#f7f0e4;border:1px solid var(--line);
    }
    .main{min-width:0;padding:22px 28px 38px}
    .topbar{
      position:sticky;top:0;z-index:25;
      margin:-22px -28px 24px;
      padding:16px 28px;
      display:flex;align-items:center;justify-content:space-between;gap:18px;
      background:rgba(251,247,239,.76);
      border-bottom:1px solid rgba(234,223,206,.72);
      backdrop-filter:blur(18px);
    }
    .top-title h1{margin:0;font-size:1.38rem;letter-spacing:-.03em}
    .top-title p{margin:4px 0 0;color:var(--muted);font-size:.86rem}
    .top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .hamb{display:none}
    .grid{display:grid;gap:16px}
    .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .card{
      background:rgba(255,255,255,.88);
      border:1px solid rgba(234,223,206,.92);
      border-radius:var(--radius);
      box-shadow:0 12px 40px rgba(31,58,95,.06);
      padding:20px;
      min-width:0;
    }
    .card.soft{background:#fffaf2}
    .card h2,.card h3{margin:0 0 12px;letter-spacing:-.03em}
    .card h2{font-size:1.25rem}
    .card h3{font-size:1.04rem}
    .section{display:none}
    .section.active{display:block;animation:fade .18s ease}
    @keyframes fade{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
    .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
    .kpi{
      padding:20px;border-radius:24px;
      background:linear-gradient(180deg,#fff,#fff9ef);
      border:1px solid var(--line);
      box-shadow:0 10px 36px rgba(31,58,95,.06);
    }
    .kpi .icon{font-size:1.4rem;margin-bottom:12px}
    .kpi b{display:block;font-size:1.8rem;letter-spacing:-.05em}
    .kpi span{display:block;color:var(--muted);font-weight:800;font-size:.8rem;margin-top:4px}
    .form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
    .form-grid .span-2{grid-column:span 2}
    .form-grid .span-3{grid-column:span 3}
    .form-grid .span-4{grid-column:1/-1}
    .toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
    .toolbar .left,.toolbar .right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .search{max-width:320px}
    table{width:100%;border-collapse:separate;border-spacing:0 10px}
    th{
      color:var(--muted);
      font-size:.73rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      text-align:left;
      padding:0 12px;
    }
    td{
      background:#fffdf8;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:12px;
      vertical-align:middle;
      font-size:.9rem;
    }
    tr td:first-child{border-left:1px solid var(--line);border-radius:16px 0 0 16px}
    tr td:last-child{border-right:1px solid var(--line);border-radius:0 16px 16px 0}
    .avatar{
      width:44px;height:44px;border-radius:15px;object-fit:cover;
      background:linear-gradient(135deg,#f7ead1,#d6aa48);
      display:grid;place-items:center;font-weight:900;color:#32405a;
      overflow:hidden;flex:0 0 auto;
    }
    .person{display:flex;align-items:center;gap:12px;min-width:190px}
    .person b{display:block}
    .person span{display:block;color:var(--muted);font-size:.78rem}
    .actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
    .empty{
      padding:28px;border:1px dashed #dacdb9;border-radius:22px;
      background:#fffaf2;color:var(--muted);text-align:center;font-weight:750;
    }
    .kanban{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;overflow:auto;padding-bottom:4px}
    .lane{background:#fffaf2;border:1px solid var(--line);border-radius:24px;padding:14px;min-height:260px}
    .lane h3{display:flex;justify-content:space-between;align-items:center}
    .lead-card{background:white;border:1px solid var(--line);border-radius:18px;padding:13px;margin:10px 0;box-shadow:0 8px 24px rgba(31,58,95,.05)}
    .lead-card b{display:block;margin-bottom:4px}
    .phone-wrap{
      display:grid;
      grid-template-columns: minmax(280px,400px) 1fr;
      gap:18px;align-items:start;
    }
    .phone{
      width:100%;max-width:390px;margin:auto;
      border-radius:42px;
      padding:14px;
      background:#19263a;
      box-shadow:0 26px 80px rgba(31,58,95,.22);
    }
    .phone-screen{
      border-radius:32px;
      background:linear-gradient(180deg,#fffaf2,#f5efe6);
      min-height:680px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.32);
      display:flex;flex-direction:column;
    }
    .phone-head{
      padding:22px 20px 16px;
      background:linear-gradient(135deg,#1f3a5f,#315b8c);
      color:white;
      position:relative;
    }
    .phone-head:after{
      content:"";position:absolute;right:-40px;top:-80px;width:180px;height:180px;border-radius:999px;background:rgba(242,213,141,.22)
    }
    .phone-head b{display:block;font-size:1.05rem;position:relative}
    .phone-head span{display:block;color:rgba(255,255,255,.72);font-size:.8rem;margin-top:4px;position:relative}
    .phone-body{padding:16px;flex:1}
    .quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .quick{
      border:1px solid var(--line);
      background:#fffdf8;
      border-radius:18px;
      padding:14px;text-align:left;font-weight:900;
      min-height:86px;
    }
    .quick em{font-style:normal;display:block;font-size:1.35rem;margin-bottom:8px}
    .bottom-nav{
      margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);
      border-top:1px solid var(--line);background:rgba(255,255,255,.82);
    }
    .bottom-nav button{border:0;background:transparent;padding:10px 4px;font-size:.72rem;color:var(--muted);font-weight:900}
    .bottom-nav button.active{color:var(--brand)}
    .progress{
      height:10px;background:#efe5d5;border-radius:999px;overflow:hidden;
    }
    .bar{height:100%;background:linear-gradient(90deg,#1f3a5f,#d6aa48);border-radius:999px;transition:.25s ease}
    .report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .chart{height:240px;border-radius:20px;background:#fffdf8;border:1px solid var(--line);padding:16px;display:flex;align-items:end;gap:10px}
    .chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
    .chart-bar{width:100%;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,#315b8c,#1f3a5f);min-height:8px}
    .chart-label{font-size:.68rem;color:var(--muted);font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
    .toast{
      position:fixed;right:18px;bottom:18px;z-index:1000;
      background:#1f3a5f;color:white;border-radius:18px;padding:13px 16px;
      box-shadow:0 20px 60px rgba(31,58,95,.24);
      max-width:420px;
      transform:translateY(18px);opacity:0;pointer-events:none;transition:.2s ease;
    }
    .toast.show{transform:none;opacity:1}
    .drawer-mask{display:none}
    .modal-mask{
      position:fixed;inset:0;background:rgba(13,22,35,.32);
      z-index:90;display:none;align-items:center;justify-content:center;padding:18px;
      backdrop-filter:blur(8px);
    }
    .modal-mask.show{display:flex}
    .modal{max-width:760px;width:100%;max-height:90vh;overflow:auto;background:#fffaf2;border:1px solid var(--line);border-radius:28px;box-shadow:0 34px 100px rgba(31,58,95,.28);padding:22px}
    .modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
    .modal-head h2{margin:0}
    .file-hint{padding:12px;border-radius:16px;background:#f7f0e4;color:var(--muted);font-weight:750}
    @media (max-width:1180px){
      .grid.cols-4,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
      .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
      .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .form-grid .span-3,.form-grid .span-4{grid-column:1/-1}
      .report-grid{grid-template-columns:1fr}
      .login-wrap{grid-template-columns:1fr}
      .login-hero{min-height:520px}
    }
    @media (max-width:860px){
      .app{display:block}
      .sidebar{
        position:fixed;left:0;top:0;bottom:0;height:auto;width:min(86vw,320px);
        transform:translateX(-105%);transition:.22s ease;box-shadow:0 24px 80px rgba(31,58,95,.22);
      }
      .sidebar.open{transform:none}
      .drawer-mask.show{display:block;position:fixed;inset:0;background:rgba(13,22,35,.26);z-index:20}
      .hamb{display:inline-flex}
      .main{padding:18px 14px calc(110px + var(--safe-bottom))}
      .topbar{margin:-18px -14px 18px;padding:12px 14px}
      .top-actions .pill{display:none}
      .kpis,.grid.cols-2,.grid.cols-3,.grid.cols-4,.form-grid{grid-template-columns:1fr}
      .form-grid .span-2,.form-grid .span-3,.form-grid .span-4{grid-column:1/-1}
      .login-wrap{padding:12px}
      .login-hero{padding:28px;min-height:430px;border-radius:26px}
      .login-card{padding:28px;border-radius:26px}
      .hero-stats{grid-template-columns:1fr}
      table{display:block;overflow:auto}
      .phone-wrap{grid-template-columns:1fr}
      .kanban{grid-template-columns:repeat(4,280px)}
    }

/* ===== V11 style refresh with official CSF logos ===== */
:root{
  --bg:#eff4fb;
  --bg-soft:#f7f9fc;
  --card:#ffffff;
  --line:#dde6f1;
  --text:#1d2b3e;
  --muted:#66788f;
  --brand:#17365d;
  --brand-2:#2a4f80;
  --gold:#caa24d;
  --gold-soft:#f6edd8;
  --danger:#c94949;
  --success:#1f8f67;
  --radius:26px;
  --shadow:0 18px 50px rgba(16,35,64,.08);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
html,body{background:
  radial-gradient(circle at top left, rgba(202,162,77,.16), transparent 26%),
  radial-gradient(circle at top right, rgba(23,54,93,.09), transparent 28%),
  linear-gradient(180deg,#f9fbff 0%, #eff4fb 55%, #f6f7fa 100%);
  color:var(--text);
}
body{font-smoothing:antialiased;-webkit-font-smoothing:antialiased;}
.login-wrap{max-width:1420px;grid-template-columns:minmax(0,1.18fr) minmax(360px,470px);padding:22px;}
.login-hero, .login-card, .sidebar, .card, .kpi, .modal{backdrop-filter:blur(14px);}
.login-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border:1px solid rgba(221,230,241,.95);
  box-shadow:0 28px 80px rgba(16,35,64,.10);
}
.login-hero::before{content:"";position:absolute;inset:auto auto -70px -70px;width:240px;height:240px;border-radius:999px;background:rgba(202,162,77,.18);filter:blur(6px);}
.login-hero::after{content:"";position:absolute;right:-60px;top:-55px;width:240px;height:240px;border-radius:999px;background:rgba(23,54,93,.09);}
.login-card{background:rgba(255,255,255,.94);border:1px solid rgba(221,230,241,.95);box-shadow:var(--shadow);}
.brand-row.logo-only{margin-bottom:32px;}
.brand-logo-full{display:block;max-width:min(100%,480px);width:100%;height:auto;filter:drop-shadow(0 10px 24px rgba(17,24,39,.08));}
.hero-copy h1{font-size:clamp(2rem,3vw,3.35rem);line-height:1.03;}
.hero-copy p{max-width:720px;font-size:1.02rem;color:#506177;}
.hero-stats{max-width:780px;gap:14px;}
.hero-stat{background:rgba(255,255,255,.68);border:1px solid rgba(221,230,241,.95);box-shadow:0 12px 35px rgba(16,35,64,.05);}
.hero-stat b{color:var(--brand);}
input,select,textarea{background:#fbfdff;border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
input:focus,select:focus,textarea:focus{border-color:#8aa3c8;box-shadow:0 0 0 4px rgba(42,79,128,.12);}
.btn{border-radius:16px;font-weight:850;letter-spacing:.01em;box-shadow:none;}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:#24446d;box-shadow:0 12px 24px rgba(23,54,93,.22);}
.btn.primary:hover{filter:brightness(1.03);transform:translateY(-1px);}
.btn.ghost{background:#ffffff;border-color:var(--line);color:var(--brand);}
.btn.red{background:linear-gradient(135deg,#d05353,#b93c3c);}
.pill{background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(16,35,64,.05);}
.pill.gold{background:linear-gradient(180deg,#fff6dc,#f3e2a8);border-color:#ecd387;color:#6b5313;}
.sidebar{background:rgba(255,255,255,.88);border-right:1px solid rgba(221,230,241,.95);box-shadow:10px 0 35px rgba(16,35,64,.05);}
.side-brand{padding:16px 14px;border-radius:22px;background:linear-gradient(145deg,#17365d,#294d7e);color:#fff;box-shadow:0 18px 32px rgba(23,54,93,.18);}
.side-brand b{font-size:1rem;letter-spacing:.01em}
.side-brand span{color:rgba(255,255,255,.7)}
.brand-icon-img{width:48px;height:48px;object-fit:contain;border-radius:16px;background:rgba(255,255,255,.10);padding:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.nav button{padding:12px 13px;border-radius:16px;}
.nav button:hover{background:#f3f7fc;color:var(--brand);}
.nav button.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 14px 28px rgba(23,54,93,.18);}
.side-footer{background:#f5f8fc;border-color:var(--line);}
.main{padding:24px 30px 42px;}
.topbar{margin:-24px -30px 24px;padding:16px 24px;background:rgba(255,255,255,.7);border-bottom:1px solid rgba(221,230,241,.88);box-shadow:0 8px 30px rgba(16,35,64,.04);}
.top-title h1{font-size:1.5rem;color:#13263f;}
.card{background:rgba(255,255,255,.90);border:1px solid rgba(221,230,241,.96);box-shadow:var(--shadow);}
.card.soft{background:linear-gradient(180deg,#ffffff,#f7f9fd);}
.kpi{background:linear-gradient(180deg,#fff,#f8fbff);border-color:rgba(221,230,241,.96);box-shadow:var(--shadow);}
.kpi:nth-child(1){border-top:4px solid #3d77c6;}
.kpi:nth-child(2){border-top:4px solid #1f8f67;}
.kpi:nth-child(3){border-top:4px solid #caa24d;}
.kpi:nth-child(4){border-top:4px solid #8a66db;}
.kpi .icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:#f3f7fc;border:1px solid var(--line);}
.kpi b{color:#0f2440;}
.kpi span{font-size:.82rem;}
.empty{background:#f9fbff;border-color:#d7e1ec;}
th{color:#6d7d92;}
td{background:#ffffff;border-top:1px solid #e2ebf5;border-bottom:1px solid #e2ebf5;}
tr td:first-child{border-left:1px solid #e2ebf5;}
tr td:last-child{border-right:1px solid #e2ebf5;}
.avatar{background:linear-gradient(135deg,#f7edd4,#cfab56);color:#17365d;box-shadow:0 10px 18px rgba(202,162,77,.16);}
.lane{background:#fbfdff;border-color:#e0e8f2;}
.lead-card{border-color:#e0e8f2;background:linear-gradient(180deg,#fff,#fbfdff);}
.phone{background:linear-gradient(180deg,#16283f,#233c5d);box-shadow:0 28px 90px rgba(16,35,64,.24);}
.phone-screen{background:linear-gradient(180deg,#ffffff,#f7f9fd);}
.phone-head{background:linear-gradient(135deg,#17365d,#30588c);padding-left:86px;}
.phone-head::before{content:"";position:absolute;left:20px;top:18px;width:46px;height:46px;background:url('assets/app-icon.png') center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.24));}
.phone-head::after{background:rgba(202,162,77,.18);}
.quick{background:#fff;border-color:#e0e8f2;box-shadow:0 10px 20px rgba(16,35,64,.04);}
.quick:hover{transform:translateY(-1px);box-shadow:0 14px 24px rgba(16,35,64,.08);}
.bottom-nav{background:rgba(255,255,255,.94);}
.bottom-nav button.active{color:var(--brand);}
.progress{background:#eaf0f7;}
.bar{background:linear-gradient(90deg,var(--brand),var(--gold));}
.chart{background:#fff;border-color:#e0e8f2;}
.chart-bar{background:linear-gradient(180deg,#4873af,#17365d);}
.toast{background:#17365d;}
.modal{background:rgba(255,255,255,.96);border-color:#dbe4ef;}
.file-hint{background:#f4f7fb;}
@media (max-width:860px){
  .main{padding:18px 14px calc(110px + var(--safe-bottom));}
  .topbar{margin:-18px -14px 18px;padding:12px 14px;}
  .login-wrap{padding:12px;}
  .brand-logo-full{max-width:100%;}
}


/* ===== V12 direct member app page ===== */
.member-app-page{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(202,162,77,.20), transparent 30%),
    radial-gradient(circle at top right, rgba(23,54,93,.12), transparent 32%),
    linear-gradient(180deg,#f9fbff 0%, #eff4fb 55%, #f7f8fb 100%);
  padding-bottom:calc(92px + var(--safe-bottom));
}
.member-shell{max-width:720px;margin:0 auto;padding:18px 16px 30px;}
.member-hero{display:grid;gap:16px;margin-bottom:16px;}
.member-brand{background:rgba(255,255,255,.76);border:1px solid var(--line);border-radius:26px;padding:16px 18px;box-shadow:var(--shadow);}
.member-brand img{display:block;width:min(100%,430px);height:auto;margin:auto;}
.member-hero-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#17365d,#2e5688);color:#fff;border-radius:30px;padding:24px;box-shadow:0 26px 70px rgba(23,54,93,.24);}
.member-hero-card::after{content:"";position:absolute;right:-44px;top:-72px;width:190px;height:190px;border-radius:999px;background:rgba(202,162,77,.20);}
.member-hero-card h1{position:relative;margin:14px 0 10px;font-size:clamp(1.75rem,7vw,2.55rem);line-height:1.04;letter-spacing:-.05em;}
.member-hero-card p{position:relative;margin:0;color:rgba(255,255,255,.80);line-height:1.55;}
.member-actions{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.member-actions .btn.ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff;}
.member-card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:28px;padding:20px;box-shadow:var(--shadow);margin-bottom:14px;}
.member-card h2{margin:0 0 10px;letter-spacing:-.04em;}
.next-card{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.member-date-box{width:76px;height:76px;border-radius:24px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;align-content:center;box-shadow:0 14px 30px rgba(23,54,93,.20);flex:0 0 auto;}
.member-date-box b{font-size:1.65rem;line-height:1;}
.member-date-box span{text-transform:uppercase;font-size:.78rem;font-weight:900;color:rgba(255,255,255,.78);}
.member-grid-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.member-action{text-decoration:none;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 12px 34px rgba(16,35,64,.06);}
.member-action em{font-style:normal;font-size:1.55rem;display:block;margin-bottom:10px;}
.member-action b{display:block;font-size:1rem;}
.member-action span{display:block;color:var(--muted);font-weight:750;font-size:.82rem;margin-top:4px;}
.live-card{background:linear-gradient(180deg,#fff,#f8fbff);}
.live-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.live-top img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(23,54,93,.18));}
.live-badge{display:inline-flex;align-items:center;gap:6px;background:#ffe8e8;color:#b93030;border:1px solid #ffd0d0;border-radius:999px;padding:7px 10px;font-size:.72rem;font-weight:950;letter-spacing:.08em;}
.youtube-frame{height:188px;border-radius:24px;background:linear-gradient(135deg,#13263f,#1f3a5f);margin:16px 0;padding:20px;color:#fff;display:grid;place-items:center;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.youtube-frame b{display:block;font-size:1.35rem;margin-bottom:5px;}
.youtube-frame span{color:rgba(255,255,255,.72);}
.member-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.member-list{display:grid;gap:10px;}
.member-list-item{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:#fbfdff;border-radius:20px;padding:12px;}
.member-list-item b{display:block;}
.member-list-item p{margin:3px 0 0;color:var(--muted);font-size:.86rem;line-height:1.45;}
.mini-date{width:54px;height:54px;border-radius:17px;background:#f0f5fb;display:grid;place-items:center;align-content:center;flex:0 0 auto;color:var(--brand);}
.mini-date b{font-size:1.1rem;line-height:1;}
.mini-date span{text-transform:uppercase;font-size:.67rem;font-weight:950;}
.notice-icon{width:42px;height:42px;border-radius:15px;background:var(--gold-soft);display:grid;place-items:center;flex:0 0 auto;}
.member-form{display:grid;gap:12px;}
.member-form label{display:grid;gap:7px;color:var(--muted);font-size:.84rem;font-weight:850;}
.pix-box{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px dashed #c9d6e6;background:#fbfdff;border-radius:20px;padding:14px;}
.pix-box b{word-break:break-all;}
.verse-card{background:linear-gradient(135deg,#17365d,#30588c);color:#fff;}
.verse-card span{display:block;color:#f0d58f;font-weight:950;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;margin-bottom:8px;}
.verse-card p{margin:0;color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.6;}
.member-bottom-nav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(680px,calc(100vw - 22px));z-index:80;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px;background:rgba(255,255,255,.90);border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 60px rgba(16,35,64,.18);backdrop-filter:blur(18px);}
.member-bottom-nav a{text-decoration:none;color:var(--muted);display:grid;place-items:center;gap:2px;font-weight:900;font-size:1.05rem;padding:8px 4px;border-radius:18px;}
.member-bottom-nav a span{font-size:.68rem;}
.member-bottom-nav a.main{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 10px 22px rgba(23,54,93,.20);}
@media (max-width:520px){
  .member-shell{padding:12px 12px 26px;}
  .member-card{border-radius:24px;padding:16px;}
  .member-hero-card{border-radius:26px;padding:20px;}
  .member-grid-actions{grid-template-columns:1fr 1fr;gap:10px;}
  .member-action{border-radius:20px;padding:14px;}
  .next-card{align-items:flex-start;}
  .youtube-frame{height:158px;}
}

/* V14: previews de arte no CRM */
.thumb-preview{width:100%;max-width:240px;margin-top:10px;border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 26px rgba(16,35,64,.08);object-fit:cover;display:block;}


/* ===== V15 Pix da Igreja ===== */
.pix-admin-callout{border:1px solid rgba(202,162,77,.42);background:linear-gradient(180deg,#fff,#fff9eb)}
.pix-phone-preview{background:linear-gradient(180deg,#f8fbff,#ffffff);border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:0 14px 30px rgba(16,35,64,.06)}
.pix-preview-top{display:flex;align-items:center;gap:10px;font-weight:1000;color:var(--brand);margin-bottom:12px}
.pix-preview-top img{width:44px;height:44px;object-fit:contain;border-radius:16px;background:#eef4fb;padding:6px}
#pix .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
#pix .span-2{grid-column:span 2;}
@media(max-width:760px){#pix .form-grid{grid-template-columns:1fr}#pix .span-2{grid-column:span 1}}


/* ===== V16 Culto Online automático ===== */
.live-admin-card .pix-box{margin-top:14px}
.admin-live-preview{aspect-ratio:16/9;border-radius:26px;background:linear-gradient(135deg,#1f3a5f,#101827);display:grid;place-items:center;color:white;box-shadow:var(--shadow);margin:14px 0 18px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.admin-live-preview iframe{width:100%;height:100%;border:0;display:block;background:#101827}
.admin-live-fallback{text-align:center;padding:22px;color:#fff}
.admin-live-fallback p{color:rgba(255,255,255,.76);margin:0}
.live-help{font-size:.78rem;color:#66788f;line-height:1.45}


/* ===== V18: visual mais limpo + solicitações oficiais ===== */
.request-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.request-summary .mini-card{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 12px 28px rgba(16,35,64,.06)}
.pix-admin-callout,.card{border-radius:24px}
@media(max-width:860px){.request-summary{grid-template-columns:repeat(2,1fr)}}


/* ===== V23 HOTFIX: modal, cache e foto da igreja no CRM ===== */
.modal-mask:not(.show){display:none!important;pointer-events:none!important;}
.modal-mask.show{display:flex!important;}
.login-photo-card{
  position:relative;z-index:1;margin:24px 0 6px;border-radius:28px;overflow:hidden;
  border:1px solid rgba(221,230,241,.9);box-shadow:0 18px 50px rgba(16,35,64,.10);
  background:#0b1725;min-height:220px;display:flex;align-items:flex-end;
}
.login-photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(.96);}
.login-photo-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,17,.08),rgba(5,10,17,.78));}
.login-photo-card div{position:relative;z-index:2;padding:18px;color:#fff;display:grid;gap:5px;}
.login-photo-card b{color:#ffd36b;letter-spacing:.04em;font-size:.9rem;}
.login-photo-card span{color:rgba(255,255,255,.78);font-weight:750;}
.thumb-preview{max-width:180px;max-height:120px;object-fit:cover;border-radius:16px;border:1px solid var(--line);display:block;margin-top:10px;background:#f3f6fb;}


/* ===== V24 HOTFIX: layout estável do CRM/login e ícone controlado ===== */
html, body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
body{min-width:0!important;}

/* Login do CRM sem imagem gigante/cortada */
#loginScreen.login-wrap{
  width:100%!important;
  max-width:1180px!important;
  min-height:100vh!important;
  margin:0 auto!important;
  padding:32px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(380px,460px)!important;
  align-items:center!important;
  gap:24px!important;
  overflow:hidden!important;
}
#loginScreen .login-hero{
  min-height:560px!important;
  padding:46px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 18% 10%, rgba(202,162,77,.18), transparent 34%),
    linear-gradient(135deg,#08111e 0%,#17365d 62%,#07101b 100%)!important;
  color:#fff!important;
  border-radius:34px!important;
  overflow:hidden!important;
}
#loginScreen .brand-logo-full{
  max-width:420px!important;
  width:100%!important;
  height:auto!important;
  filter:brightness(0) invert(1) drop-shadow(0 18px 36px rgba(0,0,0,.28))!important;
}
#loginScreen .hero-copy h1{color:#fff!important;max-width:720px!important;}
#loginScreen .hero-copy p{color:rgba(255,255,255,.82)!important;max-width:690px!important;}
#loginScreen .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:760px!important;}
#loginScreen .hero-stat{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.16)!important;color:#fff!important;}
#loginScreen .hero-stat b{color:#f4c867!important;}
#loginScreen .hero-stat span{color:rgba(255,255,255,.76)!important;}
#loginScreen .login-photo-card{display:none!important;}
#loginScreen .login-card{
  width:100%!important;
  max-width:460px!important;
  margin:0!important;
  align-self:center!important;
}

/* CRM depois do login: sidebar fixa, sem ícone explodido */
#appScreen.app{
  width:100vw!important;
  max-width:100vw!important;
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:280px minmax(0,1fr)!important;
  overflow:hidden!important;
}
#appScreen.hidden{display:none!important;}
#appScreen .sidebar{
  width:280px!important;
  min-width:280px!important;
  max-width:280px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  box-sizing:border-box!important;
}
#appScreen .sidebar *{box-sizing:border-box!important;max-width:100%!important;}
#appScreen .side-brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:84px!important;
  overflow:hidden!important;
}
#appScreen .side-brand img,
#appScreen .brand-icon-img{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  max-width:52px!important;
  min-height:52px!important;
  max-height:52px!important;
  object-fit:contain!important;
  display:block!important;
  flex:0 0 52px!important;
  padding:4px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.10)!important;
}
#appScreen .side-brand div{min-width:0!important;overflow:hidden!important;}
#appScreen .side-brand b,
#appScreen .side-brand span{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;}
#appScreen .main{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
#appScreen .topbar{max-width:100%!important;}
#appScreen img{max-width:100%;}

/* Evita barras horizontais em cards/tabelas grandes */
.card,.kpi,.topbar,.toolbar{min-width:0!important;}
.grid,.kpis,.form-grid{min-width:0!important;}

@media (max-width:900px){
  #loginScreen.login-wrap{
    grid-template-columns:1fr!important;
    max-width:720px!important;
    padding:16px!important;
  }
  #loginScreen .login-hero{min-height:auto!important;padding:30px!important;}
  #loginScreen .hero-stats{grid-template-columns:1fr!important;}
  #loginScreen .login-card{max-width:none!important;}
}
@media (max-width:860px){
  #appScreen.app{display:block!important;overflow-x:hidden!important;}
  #appScreen.hidden{display:none!important;}
  #appScreen .sidebar{
    width:min(86vw,320px)!important;
    min-width:0!important;
    max-width:min(86vw,320px)!important;
  }
}


/* ===== V25: limpeza visual do CRM e separação do app dos fiéis ===== */
/* O escudo/leão não pode virar imagem gigante dentro da lateral do CRM. */
#appScreen .sidebar{
  background:rgba(255,250,242,.94)!important;
  background-image:none!important;
  width:280px!important;
  min-width:280px!important;
  max-width:280px!important;
  overflow-x:hidden!important;
}
#appScreen .sidebar::before,
#appScreen .sidebar::after,
#appScreen .side-brand::before,
#appScreen .side-brand::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
#appScreen .sidebar > img,
#appScreen #sidebar > img,
#appScreen .side-brand > img,
#appScreen .brand-icon-img{
  display:none!important;
  width:0!important;
  height:0!important;
  max-width:0!important;
  max-height:0!important;
  opacity:0!important;
  visibility:hidden!important;
}
#appScreen .crm-side-brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:76px!important;
  padding:12px 10px 18px!important;
  overflow:hidden!important;
}
#appScreen .crm-brand-shield{
  width:46px!important;
  height:46px!important;
  flex:0 0 46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#17365d,#274f82)!important;
  color:#f4c867!important;
  font-size:1.25rem!important;
  box-shadow:0 12px 26px rgba(23,54,93,.18)!important;
}
#appScreen .crm-side-brand div:not(.crm-brand-shield){
  min-width:0!important;
  overflow:hidden!important;
}
#appScreen .crm-side-brand b,
#appScreen .crm-side-brand span{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  display:block!important;
}
@media (max-width:860px){
  #appScreen .sidebar{
    width:min(86vw,320px)!important;
    min-width:0!important;
    max-width:min(86vw,320px)!important;
  }
}


/* ===== V34: login realmente some após autenticar ===== */
#loginScreen.hidden,
body.is-logged-in #loginScreen,
#loginScreen.login-wrap.hidden{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  height:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.is-logged-in #appScreen.app:not(.hidden){display:grid!important;}

/* ===== V34: prévia da carteira digital no CRM ===== */
.wallet-preview-admin-card{overflow:hidden;}
.admin-wallet-wrap{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:18px;align-items:stretch;}
.admin-wallet-card{position:relative;overflow:hidden;border-radius:30px;background:linear-gradient(135deg,#07101b 0%,#10243b 52%,#1b3654 100%);border:1px solid rgba(215,168,70,.34);padding:18px;color:#fff;box-shadow:0 24px 70px rgba(7,16,27,.28)}
.admin-wallet-card:after{content:"";position:absolute;right:-54px;top:-74px;width:190px;height:190px;border-radius:999px;background:rgba(215,168,70,.16);filter:blur(2px)}
.admin-wallet-head{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.admin-wallet-head img{width:64px;height:64px;border-radius:20px;object-fit:contain;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.admin-wallet-head h3{margin:0;color:#fff;font-size:1.1rem}.admin-wallet-head span{color:rgba(255,255,255,.72);font-weight:800;font-size:.78rem}
.admin-wallet-body{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;position:relative;z-index:1;margin-top:16px}.admin-wallet-photo{width:92px;height:116px;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(215,168,70,.28);display:grid;place-items:center;color:#f4c867;font-weight:1000;font-size:1.5rem}.admin-wallet-photo img{width:100%;height:100%;object-fit:cover}.admin-wallet-name{font-size:1.25rem;font-weight:1000;letter-spacing:-.035em;color:#fff}.admin-wallet-sub{color:rgba(255,255,255,.72);font-weight:800;font-size:.78rem;margin-top:3px}.admin-wallet-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.admin-wallet-meta div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);border-radius:15px;padding:9px}.admin-wallet-meta small{display:block;color:rgba(255,255,255,.62);font-weight:900;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}.admin-wallet-meta b{display:block;color:#fff;margin-top:2px}.admin-wallet-qr{width:122px;height:122px;border-radius:18px;background:#fff;padding:8px;display:block;margin:14px auto 0}.admin-wallet-hash{text-align:center;color:#f4c867;font-weight:1000;letter-spacing:.12em;font-size:.72rem;margin-top:12px}.admin-wallet-info{border:1px solid var(--line);border-radius:26px;padding:18px;background:#fff}.admin-wallet-info ul{margin:10px 0 0 18px;color:var(--muted);line-height:1.7}.admin-wallet-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
@media(max-width:980px){.admin-wallet-wrap{grid-template-columns:1fr}.admin-wallet-card{max-width:440px}}