:root{
    --bg:#080B0F;
    --bg-grid: radial-gradient(circle at 18% 12%, rgba(53,220,234,0.10), transparent 40%),
               radial-gradient(circle at 85% 0%, rgba(182,225,61,0.08), transparent 35%),
               #080B0F;
    --panel:#101720;
    --panel-2:#0C121A;
    --line:rgba(255,255,255,0.08);
    --line-strong:rgba(255,255,255,0.16);
    --text:#E8EDF1;
    --muted:#8593A1;
    --lime:#B6E13D;
    --lime-soft:rgba(182,225,61,0.14);
    --teal:#35DCEA;
    --teal-soft:rgba(53,220,234,0.14);
    --amber:#F2B84B;
    --amber-soft:rgba(242,184,75,0.14);
    --red:#FF6B6B;
    --red-soft:rgba(255,107,107,0.14);

    /* ---------------- DESIGN SYSTEM (item 1 do pedido de identidade visual) ----------------
       Nomes alinhados ao pedido, mapeados sobre as cores que já existiam (teal/lime já eram a
       identidade da marca — não recriei do zero). --accent-blue é novo: uso pontual em ações
       específicas de Auditoria, sem reescrever os componentes compartilhados por módulo, porque
       Card/Button/Table/Badge são os MESMOS componentes reaproveitados nas ~28 telas do sistema
       (é assim que uma mudança aqui reflete em tudo, em vez de precisar tocar tela por tela). */
    --bg-primary:var(--bg);
    --bg-secondary:var(--panel-2);
    --bg-card:var(--panel);
    --bg-card-hover:#141D28;
    --border:var(--line);
    --border-strong:var(--line-strong);
    --text-primary:var(--text);
    --text-secondary:var(--muted);
    --accent-blue:#4F9CFF;
    --accent-blue-soft:rgba(79,156,255,0.14);
    --accent-cyan:var(--teal);
    --accent-cyan-soft:var(--teal-soft);
    --accent-green:var(--lime);
    --accent-green-soft:var(--lime-soft);
    --accent-success:var(--lime);
    --accent-warning:var(--amber);
    --accent-danger:var(--red);
    --accent-info:var(--accent-blue);
    --brand-gradient:linear-gradient(90deg, rgb(var(--mod-rgb)), rgba(var(--mod-rgb), .18));
    --shadow:0 22px 48px rgba(0,0,0,0.45);
    --shadow-lift:0 30px 64px rgba(0,0,0,0.55);
    --glow-blue:0 0 22px rgba(79,156,255,0.30);
    --glow-cyan:0 0 22px rgba(53,220,234,0.28);
    --glow-green:0 0 22px rgba(182,225,61,0.28);
    --radius-card:20px;
    --radius-button:100px;
    --radius-input:10px;
    --ease-premium:cubic-bezier(.2,.8,.2,1);

    /* ---- TIPOGRAFIA (trocar a fonte do sistema inteiro = mudar só estas 3 linhas + o <link> no <head>) ----
       Sora      → destaque: títulos, números dos KPIs, marca, botões (geométrica, com caráter técnico;
                   o l/I têm serifas discretas, então não se confunde com 1 ou I em chaves e valores).
       Manrope   → texto de interface e tabelas (limpa, sofisticada, com NÚMEROS TABULARES nativos —
                   colunas de R$ alinham perfeitamente).
       JetBrains Mono → CNPJ, chaves de acesso e códigos.
       O fallback é de sistema (Segoe UI/Roboto etc.), usado se as fontes não carregarem (ex: sem internet). */
    --font-display:'Sora','Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-body:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

    /* Cor de destaque DO MÓDULO ATIVO (o JS só marca <html data-modulo="...">, ver ativarModulo):
       Auditoria = azul, Recuperação = turquesa, Reforma = verde-lima. Botões, menu lateral, abas,
       foco de campos e linha dos cards leem estas variáveis — trocar a cor de um módulo é mudar
       UMA linha aqui embaixo. Sem módulo escolhido (ex: tela de login) vale o ciano da marca. */
    --mod-rgb:53,220,234;
    --mod-hi:#7FF0FA;
    --mod-ink:#FFFFFF;
    --arrow-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --glow-mod:0 0 22px rgba(var(--mod-rgb), .28);
  }
  html[data-modulo="auditoria"]{   --mod-rgb:47,140,255;  --mod-hi:#7CC4FF; }
  html[data-modulo="recuperacao"]{ --mod-rgb:20,224,200;  --mod-hi:#5CF5E0; }
  html[data-modulo="reforma"]{     --mod-rgb:182,225,61;  --mod-hi:#D6FF6A; --mod-ink:#10200A; --arrow-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310200A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg-grid);
    background-attachment:fixed;
    color:var(--text);
    font-family:var(--font-body);
    font-size:14px;
    line-height:1.5;
  }
  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{ font-family:var(--font-mono); letter-spacing:0.2px; }

  /* header */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 28px; background:rgba(8,11,15,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:20;
    transform:translateY(0);
    transition:transform .28s ease, box-shadow .28s ease;
  }
  .topbar.oculto{
    transform:translateY(-100%);
  }
  .topbar.com-sombra{
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
  }
  .topbar .brand{ display:flex; flex-direction:row; align-items:center; gap:16px; }

  .topbar .brand .logo{
    width:88px; height:88px; display:block; position:relative; z-index:2;
    object-fit:contain; border-radius:50%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.45));
  }

  .brand-text{ display:flex; flex-direction:column; gap:3px; }
  .topbar .brand h1{
    font-size:22px;
    background:linear-gradient(90deg, #F2F6F4 10%, var(--teal) 55%, var(--lime) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .topbar .brand span{
    font-size:12px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase;
  }

  .topbar-right{ display:flex; align-items:center; gap:12px; }

  /* Chip do cliente ativo — o JS só escreve o texto; o ícone vem do ::before (não é apagado) */
  .cnpj-pill{
    position:relative; display:block; max-width:min(440px, 100%); min-width:0;
    padding:11px 22px 11px 52px; border-radius:var(--radius-button);
    font-family:var(--font-mono); font-size:12.5px; line-height:20px; color:#E4F4F7;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border:1px solid rgba(var(--mod-rgb), .5);
    background:linear-gradient(90deg, rgba(var(--mod-rgb), .14), rgba(var(--mod-rgb), .03)), #09111A;
    box-shadow:inset 0 0 14px rgba(var(--mod-rgb), .09), 0 0 16px rgba(var(--mod-rgb), .12);
  }
  .cnpj-pill::before{
    content:""; position:absolute; left:5px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%;
    background-color:rgba(var(--mod-rgb), .2); border:1px solid rgba(var(--mod-rgb), .6);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:16px 16px;
    box-shadow:0 0 12px rgba(var(--mod-rgb), .35);
  }

  /* Sair — pílula escura com borda vermelha controlada e ícone em círculo */
  .btn-logout{
    display:inline-flex; align-items:center; gap:12px; padding:5px 20px 5px 5px; cursor:pointer;
    font-family:var(--font-body); font-size:13px; font-weight:600; color:#FFE3E3;
    border-radius:var(--radius-button); border:1.5px solid rgba(255,107,107,.65);
    background:linear-gradient(90deg, rgba(255,107,107,.18), rgba(255,107,107,.04) 72%), #120B0E;
    box-shadow:0 0 16px rgba(255,107,107,.22), inset 0 0 12px rgba(255,107,107,.08);
    transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
  }
  .btn-logout .tb-ico{ background:rgba(255,107,107,.22); border:1px solid rgba(255,107,107,.6); color:#FF9E9E; }
  .btn-logout:hover{ transform:translateY(-2px) scale(1.03); border-color:#FF6B6B; box-shadow:0 0 30px rgba(255,107,107,.5), inset 0 0 16px rgba(255,107,107,.14); }
  .btn-logout:hover .tb-ico svg{ transform:translateX(2px); }
  .btn-logout i{ font-size:14px; }

  /* layout */
  .layout{ display:flex; min-height:calc(100vh - 70px); }
  .ledger-nav{
    width:216px; flex-shrink:0; background:var(--panel-2);
    border-right:1px solid var(--line); padding:20px 0;
    position:sticky; top:70px; align-self:flex-start;
    height:calc(100vh - 70px); overflow-y:auto;
  }
  .tab-btn{
    display:flex; align-items:center; width:100%; text-align:left; background:transparent;
    border:none; border-left:3px solid transparent; padding:12px 20px;
    font-family:var(--font-body); font-size:13.3px; color:var(--muted);
    cursor:pointer; position:relative; transition:background .15s ease, color .15s ease;
  }
  .tab-btn .num{
    font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
    margin-right:10px; width:20px; height:20px; border-radius:6px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.04); border:1px solid var(--line);
  }
  .tab-btn:hover{ background:rgba(255,255,255,0.03); color:var(--text); }
  .tab-btn.active{
    color:#EAFBFC; font-weight:500; border-left:3px solid rgb(var(--mod-rgb));
    background:linear-gradient(90deg, rgba(var(--mod-rgb), 0.16), transparent 72%);
    box-shadow:inset 0 0 20px rgba(var(--mod-rgb), 0.07);
  }
  .tab-btn.active .num{
    color:var(--mod-ink); background:rgb(var(--mod-rgb)); border-color:rgb(var(--mod-rgb));
    box-shadow:0 0 12px rgba(var(--mod-rgb), 0.55);
  }

  main{ flex:1; min-width:0; padding:32px 40px; max-width:none; }
  .panel{ display:none; }
  .panel.active{ display:block; }
  .panel-head{ margin-bottom:22px; }
  .panel-head h2{ font-size:23px; margin-bottom:7px; }
  .panel-head p{ color:var(--muted); max-width:660px; font-size:13.5px; }

  .card{
    background:linear-gradient(155deg, rgba(53,220,234,.05) 0%, rgba(255,255,255,0.025) 40%, rgba(255,255,255,0));
    background-color:var(--bg-card);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid var(--border); border-radius:var(--radius-card);
    padding:24px 26px; margin-bottom:20px;
    position:relative; overflow:hidden;
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
    transition:border-color .25s var(--ease-premium), box-shadow .25s var(--ease-premium), transform .25s var(--ease-premium);
  }
  .card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--brand-gradient);
    opacity:0.55;
  }
  .card:hover{
    border-color:var(--border-strong);
    box-shadow:var(--shadow-lift), var(--glow-mod), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .card h3{ font-size:14.5px; margin-bottom:14px; color:#F2F5F7; }
  label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; margin-top:14px; }
  label:first-of-type{ margin-top:0; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=hidden]), select{
    width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-input);
    font-family:var(--font-body); font-size:13.5px;
    background:rgba(255,255,255,0.03); color:var(--text);
    transition:border-color .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
  }
  input[type=date], input[type=month]{ color-scheme: dark; } /* ícone do calendário nativo legível no tema escuro */
  html[data-theme="light"] input[type=date], html[data-theme="light"] input[type=month]{ color-scheme: light; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=hidden]):focus, select:focus{
    outline:none; border-color:rgb(var(--mod-rgb)); box-shadow:0 0 0 3px rgba(var(--mod-rgb), 0.18), var(--glow-mod);
  }
  input::placeholder{ color:var(--text-secondary); opacity:.75; }
  input[type=checkbox], input[type=radio]{ width:auto; padding:0; margin:0 8px 0 0; accent-color:rgb(var(--mod-rgb)); cursor:pointer; vertical-align:middle; }
  .senha-wrap{ position:relative; }
  .senha-wrap input[type=password], .senha-wrap input[type=text]{ padding-right:40px; }
  .btn-mostrar-senha{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:transparent; border:none; cursor:pointer; font-size:15px; padding:6px;
    color:var(--muted); line-height:1; opacity:0.7;
  }
  .btn-mostrar-senha:hover{ opacity:1; }

  /* Campo de dinheiro: prefixo "R$" fixo à esquerda + máscara de centavos aplicada via JS
     (classe .input-money, ver 06-xml-parsing.js). */
  .money-wrap{ position:relative; }
  .money-wrap input{ padding-left:34px !important; }
  .money-prefix{
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    color:var(--muted); font-size:13.5px; font-weight:600; pointer-events:none;
  }

  /* Upload: o botão "Escolher arquivos" nativo vira a mesma pílula escura do restante do sistema */
  input[type=file]{ font-size:13px; color:var(--muted); width:100%; }
  input[type=file]::file-selector-button{
    margin-right:14px; padding:9px 20px; border-radius:var(--radius-button); cursor:pointer;
    font-family:var(--font-body); font-size:12.5px; font-weight:600; color:#EAF1F5;
    border:1.5px solid rgba(var(--mod-rgb), .7);
    background:linear-gradient(90deg, rgba(var(--mod-rgb), .2), rgba(var(--mod-rgb), .05) 72%), #09111A;
    box-shadow:0 0 14px rgba(var(--mod-rgb), .22);
    transition:box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
  }
  input[type=file]::file-selector-button:hover{ border-color:rgb(var(--mod-rgb)); box-shadow:0 0 26px rgba(var(--mod-rgb), .5); }
  .row{ display:flex; gap:18px; }
  .row > div{ flex:1; }
  /* ================= BOTÕES — mesma linguagem do "Acessar módulo →" dos cards =================
     Pílula escura (opaca, então o texto branco funciona em tema claro e escuro), borda na cor do
     módulo ativo, glow e círculo com seta à direita. Secundário e perigo perdem a seta. */
  .btn{
    position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:16px;
    padding:6px 6px 6px 22px; border-radius:var(--radius-button);
    border:1.5px solid rgba(var(--mod-rgb), .8);
    background:linear-gradient(90deg, rgba(var(--mod-rgb), .22), rgba(var(--mod-rgb), .05) 72%), #09111A;
    color:#FFFFFF; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.01em; line-height:1.2;
    cursor:pointer; margin-top:16px; white-space:nowrap;
    box-shadow:0 0 18px rgba(var(--mod-rgb), .28), inset 0 0 14px rgba(var(--mod-rgb), .10);
    transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
  }
  .btn::after{
    content:""; flex:0 0 auto; width:34px; height:34px; border-radius:50%;
    background-image:var(--arrow-icon), linear-gradient(145deg, var(--mod-hi), rgb(var(--mod-rgb)) 70%);
    background-repeat:no-repeat; background-position:center; background-size:17px 17px, 100% 100%;
    box-shadow:0 0 14px rgba(var(--mod-rgb), .7);
    transition:transform .3s var(--ease-premium);
  }
  .btn:hover{
    transform:translateY(-2px) scale(1.03); border-color:rgb(var(--mod-rgb));
    box-shadow:0 0 32px rgba(var(--mod-rgb), .55), inset 0 0 18px rgba(var(--mod-rgb), .18);
  }
  .btn:hover::after{ transform:translateX(3px); }
  .btn + .btn, .btn + .btn-export, .btn-export + .btn, .btn-export + .btn-export{ margin-left:10px; }
  .btn:active{ transform:translateY(0) scale(.99); }
  .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--mod-rgb), .45), 0 0 26px rgba(var(--mod-rgb), .5); }
  .btn:disabled{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }
  .btn:disabled:hover::after{ transform:none; }

  .btn.secondary{
    padding:11px 22px; gap:8px; color:#EAF1F5;
    border:1px solid var(--border-strong);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), #0A1118;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .btn.secondary::after{ display:none; }
  .btn.secondary:hover{ transform:translateY(-1px); border-color:rgba(var(--mod-rgb), .75); box-shadow:0 0 22px rgba(var(--mod-rgb), .28), inset 0 1px 0 rgba(255,255,255,.07); }
  .status-line{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--muted); }
  .dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
  .dot.on{ background:var(--lime); box-shadow:0 0 8px rgba(182,225,61,0.7); }
  .note{
    font-size:12px; color:var(--muted); border-left:2px solid rgb(var(--mod-rgb));
    padding-left:12px; margin-top:16px; opacity:0.85;
  }

  .dropzone{
    border:1.5px dashed var(--border-strong); border-radius:var(--radius-card); padding:32px 20px;
    text-align:center; color:var(--muted); font-size:13px; cursor:pointer;
    background:rgba(255,255,255,0.02);
    transition:border-color .2s var(--ease-premium), background .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
  }
  .dropzone.drag{ border-color:var(--lime); background:var(--lime-soft); color:var(--text); box-shadow:var(--glow-green); }

  table{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
  th{
    text-align:left; padding:12px 10px; border-bottom:1px solid var(--border-strong);
    background:rgba(255,255,255,0.02);
    color:var(--text-secondary); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
    white-space:nowrap;
  }
  th:first-child{ border-top-left-radius:10px; }
  th:last-child{ border-top-right-radius:10px; }
  td{ padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:top; white-space:nowrap; }
  tr:hover td{ background:rgba(53,220,234,0.05); }
  .tbl-wrap{ overflow-x:auto; border-radius:12px; }

  .badge{
    display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--radius-button); font-size:11px; font-weight:600;
    border:1px solid transparent;
  }
  .badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; flex-shrink:0; }
  .badge.ok{ background:var(--accent-green-soft); color:#D4F493; border-color:rgba(182,225,61,0.35); }
  .badge.warn{ background:var(--amber-soft); color:var(--amber); border-color:rgba(242,184,75,0.35); }
  .badge.alert{ background:var(--red-soft); color:var(--red); border-color:rgba(255,107,107,0.35); }
  .badge.info{ background:var(--accent-blue-soft); color:#BFDCFF; border-color:rgba(79,156,255,0.35); }
  .badge.analise{ background:var(--accent-cyan-soft); color:#BFF6FB; border-color:rgba(53,220,234,0.35); }

  .stat-grid{ display:flex; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
  .stat{
    flex:1; min-width:160px; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:18px 20px;
    position:relative; overflow:hidden;
    box-shadow:var(--shadow);
    transition:border-color .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
  }
  .stat::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--brand-gradient); opacity:0.5;
  }
  .stat:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-lift), var(--glow-mod); }
  .stat.ok::before{ background:var(--accent-green); }
  .stat.warn::before{ background:var(--amber); }
  .stat.alert::before{ background:var(--red); }
  .stat .n{ font-family:var(--font-display); font-size:27px; font-weight:600; color:#F2F5F7; text-shadow:0 0 18px rgba(53,220,234,.16); }
  .stat .l{ font-size:12px; color:var(--muted); margin-top:3px; }
  .stat.alert .n{ color:var(--red); }
  .stat.warn .n{ color:var(--amber); }

  .empty{
    color:var(--muted); font-size:13px; padding:30px 0; text-align:center;
    border:1px dashed var(--border); border-radius:14px; background:rgba(255,255,255,0.015);
  }
  .rs-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .rs-memoria{ width:100%; border-collapse:collapse; }
  .rs-memoria td{ padding:6px 10px; font-size:13px; border-bottom:1px solid var(--line); }
  .rs-memoria td:last-child{ text-align:right; font-family:var(--font-mono); }
  .rs-memoria tr.rs-total td{ font-weight:600; color:var(--text); border-bottom:1px solid var(--line-strong); }
  .rs-label{ width:280px; font-size:12.5px; flex-shrink:0; color:var(--text); }
  .rs-bar{ flex:1; background:rgba(255,255,255,0.05); height:14px; border-radius:100px; overflow:hidden; }
  .rs-bar-fill{ height:100%; background:linear-gradient(90deg, var(--teal), var(--lime)); border-radius:100px; }
  .rs-val{ width:120px; text-align:right; font-size:12px; font-family:var(--font-mono); flex-shrink:0; color:var(--muted); }
  .small-input{ width:70px; padding:6px 8px; font-size:12px; }
  .uf-cell{ font-family:var(--font-mono); color:var(--teal); }

  code{ background:rgba(255,255,255,0.06); padding:1px 6px; border-radius:4px; font-family:var(--font-mono); }
  ::selection{ background:rgba(53,220,234,0.3); }

  .subtabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
  .subtab-btn{
    padding:9px 18px; border-radius:var(--radius-button); border:1px solid var(--border-strong);
    background:rgba(255,255,255,0.03); color:var(--muted); font-size:12.5px;
    cursor:pointer; font-weight:500; font-family:var(--font-body);
    transition:background .2s var(--ease-premium), color .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
  }
  .subtab-btn:hover{ background:rgba(255,255,255,0.06); color:var(--text); }
  .subtab-btn.active{
    color:#FFFFFF; border-color:rgba(var(--mod-rgb), .85);
    background:linear-gradient(90deg, rgba(var(--mod-rgb), .24), rgba(var(--mod-rgb), .06) 78%), #09111A;
    box-shadow:0 0 20px rgba(var(--mod-rgb), .35), inset 0 0 12px rgba(var(--mod-rgb), .1);
  }
  .subpanel{ display:none; }
  .subpanel.active{ display:block; }
  .ap-subpanel{ display:none; } /* sub-sub-abas de "Apuração IBS/CBS" (Resumo/CBS/IBS/Ajustes/Memória) */
  .ap-subpanel.active{ display:block; }


  :root{
    --bg:#080B0F;
    --bg-grid: radial-gradient(circle at 15% 10%, rgba(53,220,234,0.22), transparent 42%),
               radial-gradient(circle at 88% 6%, rgba(182,225,61,0.20), transparent 40%),
               radial-gradient(circle at 50% 100%, rgba(53,220,234,0.12), transparent 45%),
               #080B0F;
    --panel:#101720;
    --line:rgba(255,255,255,0.08);
    --line-strong:rgba(255,255,255,0.16);
    --text:#E8EDF1;
    --muted:#8593A1;
    --lime:#B6E13D;
    --lime-soft:rgba(182,225,61,0.14);
    --teal:#35DCEA;
    --teal-soft:rgba(53,220,234,0.14);
    --red:#FF6B6B;
    --red-soft:rgba(255,107,107,0.14);
    --green:#3DDC84;
  }
  *{box-sizing:border-box;}
  h1,h2{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }

  .wrap{ width:100%; max-width:440px; }
  .brand{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:32px; }
  .logo-ring{
    position:relative; width:176px; height:176px; display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.06),
      0 0 0 6px rgba(8,11,15,0.9),
      0 0 55px rgba(53,220,234,0.30),
      0 0 95px rgba(182,225,61,0.20),
      0 24px 48px rgba(0,0,0,0.55);
  }
  .brand .mark{
    position:relative; width:88px; height:88px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #101720, #080B0F);
    box-shadow:0 0 0 3px rgba(8,11,15,0.9), 0 0 40px rgba(53,220,234,0.55), 0 0 70px rgba(182,225,61,0.35);
    font-family:var(--font-display); font-weight:700; font-size:34px;
    background-clip:text; -webkit-background-clip:text; color:transparent;
    background-image:linear-gradient(135deg, var(--teal), var(--lime));
  }
  .login-logo{
    width:176px; height:176px;
    object-fit:cover; display:block;
    border-radius:50%;
    image-rendering:auto;
  }
  .brand h1{
    font-size:32px;
    background:linear-gradient(90deg, #FFFFFF 0%, var(--teal) 45%, var(--lime) 90%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .brand span{ font-size:13px; color:var(--muted); letter-spacing:0.04em; }
  .login-subtitle{ font-family:var(--font-body); font-weight:700; color:#FFFFFF !important; }

  /* card do login: só o espaçamento próprio — o visual vem do .card do design system (acima) */
  #telaLogin .card{ padding:28px 28px 26px; margin-bottom:0; }
  /* a linha do topo do card também usa --mod-rgb (herdado do último módulo visitado) — aqui fica
     fixa no azul, mesma razão do switch button.active acima */
  #telaLogin .card::before{ background:linear-gradient(90deg, #2F8CFF, rgba(47,140,255,.18)); }

  .switch{ display:flex; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:100px; padding:3px; margin-bottom:22px; }
  .switch button{
    flex:1; border:none; background:transparent; color:var(--muted); font-family:var(--font-body);
    font-size:13px; font-weight:600; padding:9px 0; border-radius:100px; cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .switch button.active{
    /* Azul fixo (o mesmo da Auditoria) — de propósito, NÃO usa --mod-rgb: essa variável guarda o
       último módulo usado (fica em <html data-modulo="..."> e não se reseta ao sair), então antes
       "Entrar" podia herdar a cor de um módulo anterior por engano. Aqui sempre é azul. */
    color:#FFFFFF; background:linear-gradient(90deg, rgba(47,140,255,.28), rgba(47,140,255,.08)), #09111A;
    box-shadow:0 0 16px rgba(47,140,255,.35), inset 0 0 0 1px rgba(47,140,255,.7);
  }
  /* "Criar conta" ativo usa o verde-lima do sistema (Reforma Tributária) em vez do azul de "Entrar" */
  #btnShowSignup.active{
    background:linear-gradient(90deg, rgba(182,225,61,.28), rgba(182,225,61,.08)), #09111A;
    box-shadow:0 0 16px rgba(182,225,61,.35), inset 0 0 0 1px rgba(182,225,61,.7);
  }

  form{ display:none; }
  form.active{ display:block; }

  /* O <select> em si respeita o CSS acima, mas a lista de opções (quando aberta)
     usa renderização nativa do navegador, que ignora o "background" do select e
     cai no branco padrão — por isso o texto claro ficava invisível até passar
     o mouse. Definindo o option explicitamente resolve nos principais navegadores. */
  select option{
    background:var(--panel-2); color:var(--text);
  }
  select option:disabled{ color:var(--muted); }
  select:invalid, select option[value=""]{ color:var(--muted); }
  .row{ display:flex; gap:14px; }
  .row > div{ flex:1; }
  .error-msg{ font-size:12px; color:var(--red); margin-top:5px; display:none; }
  .error-msg.show{ display:block; }
  input.invalid{ border-color:var(--red); box-shadow:0 0 0 3px rgba(255,107,107,0.12); }

  /* botões do login: mesma pílula premium do sistema (.btn), só que ocupando a largura toda */
  #telaLogin .btn{ width:100%; margin-top:20px; padding-left:24px; }
  .btn-secondary{
    display:flex; align-items:center; justify-content:center; width:100%; margin-top:10px; padding:12px 22px;
    border-radius:var(--radius-button); border:1px solid var(--border-strong);
    font-family:var(--font-body); font-size:13px; font-weight:600; color:#EAF1F5; cursor:pointer;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), #0A1118;
    transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
  }
  .btn-secondary:hover{ transform:translateY(-1px); border-color:rgba(var(--mod-rgb), .75); box-shadow:0 0 22px rgba(var(--mod-rgb), .28); }

  .link{ color:var(--teal); text-decoration:none; cursor:pointer; }
  .link:hover{ text-decoration:underline; }
  .foot-line{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:16px; }

  .toast{
    margin-top:16px; font-size:12px; padding:10px 12px; border-radius:8px;
    display:none; line-height:1.5;
  }
  .toast.show{ display:block; }
  .toast.info{ color:var(--muted); border-left:2px solid var(--teal); background:rgba(53,220,234,0.06); }
  .toast.success{ color:var(--green); border-left:2px solid var(--green); background:rgba(61,220,132,0.08); }
  .toast.error{ color:var(--red); border-left:2px solid var(--red); background:var(--red-soft); }

  .plan-options{ display:flex; gap:10px; margin-top:14px; }
  .plan-card{
    flex:1; border:1px solid var(--line); border-radius:10px; padding:12px 10px; text-align:center;
    cursor:pointer; background:rgba(255,255,255,0.02); transition:border-color .15s ease, background .15s ease;
  }
  .plan-card.selected{ border-color:var(--lime); background:var(--lime-soft); }
  .plan-card .p-name{ font-size:12.5px; font-weight:600; color:var(--text); }
  .plan-card .p-desc{ font-size:11px; color:var(--muted); margin-top:3px; }

  .checkbox-line{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--muted); }
  .checkbox-line input{ width:auto; margin:0; }

  .session-banner{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:rgba(182,225,61,0.08); border:1px solid rgba(182,225,61,0.3);
    border-radius:10px; padding:12px 14px; margin-bottom:18px; font-size:12.5px;
  }
  .session-banner.show{ display:flex; }
  .session-banner b{ color:var(--lime); }
  .session-banner button{
    border:none; background:transparent; color:var(--teal); font-size:12px; cursor:pointer; font-weight:600;
  }

#telaLogin{
  /* Reafirma os valores ESCUROS destes tokens aqui dentro, nos dois temas — a tela de login inteira
     (fundo, card, campos) é sempre escura, mesma decisão já tomada pra escolha de módulo.
     Precisa repetir tanto os tokens base quanto os apelidos do design system (--bg-card, --border
     etc.): um apelido como "--bg-card:var(--panel)" é resolvido lá no :root/<html>, então só
     redeclarar --panel aqui dentro não bastaria — o valor já resolvido (claro) já teria "descido"
     por herança antes de chegar neste elemento. */
  --bg:#080B0F; --panel:#101720; --panel-2:#0C121A;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.16);
  --text:#E8EDF1; --muted:#8593A1;
  --bg-primary:#080B0F; --bg-secondary:#0C121A; --bg-card:#101720; --bg-card-hover:#141D28;
  --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16);
  --text-primary:#E8EDF1; --text-secondary:#8593A1;
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(53,220,234,0.10), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(182,225,61,0.08), transparent 35%),
    #080B0F;
  padding:32px 16px;
}
#telaApp{ display:none; }

/* ==================== TELA DE ESCOLHA DE MÓDULO — cards premium ====================
   Só visual: os cliques continuam ligados pelos IDs #btnEscolherAuditoria/Recuperacao/Reforma
   (03-nav.js). Tudo prefixado com #telaSelecaoModulo pra vencer os overrides do tema claro —
   esta tela é sempre escura, independente do tema escolhido no app. */
#telaSelecaoModulo{
  align-items:center; justify-content:center; /* o display:flex vem inline do JS (01-auth/03-nav) */
  min-height:100vh; padding:40px 20px 56px; box-sizing:border-box;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(47,140,255,.16), transparent 62%),
    radial-gradient(900px 520px at 50% 112%, rgba(20,224,200,.09), transparent 60%),
    radial-gradient(1000px 560px at 104% 108%, rgba(182,225,61,.13), transparent 60%),
    #04080c;
}
#telaSelecaoModulo .mc-wrap{ margin:0 auto; }
#telaSelecaoModulo .brand{ text-align:center; }
#telaSelecaoModulo .brand span{ color:#9fb3bf !important; font-weight:500; }

#telaSelecaoModulo .mc-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px;
  margin-top:10px; align-items:stretch;
}
@media (max-width:1120px){
  #telaSelecaoModulo .mc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #telaSelecaoModulo .mc-badge{ font-size:10.5px; letter-spacing:.04em; padding:6px 11px; gap:7px; }
}
@media (max-width:720px){  #telaSelecaoModulo .mc-grid{ grid-template-columns:minmax(0,1fr); gap:22px; margin-top:32px; } }

/* paleta por card: --mc = rgb do cor principal, --mc-hi = tom claro para destaques */
#telaSelecaoModulo .mc-auditoria{    --mc:47,140,255;  --mc-hi:#7cc4ff; }
#telaSelecaoModulo .mc-recuperacao{  --mc:20,224,200;  --mc-hi:#5cf5e0; }
#telaSelecaoModulo .mc-reforma{      --mc:182,225,61;  --mc-hi:#d6ff6a; }

#telaSelecaoModulo .modulo-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:18px; text-align:left; cursor:pointer;
  min-height:344px; padding:26px 26px 26px; border-radius:22px; font-family:inherit;
  border:1px solid rgba(var(--mc), .6);
  background:
    linear-gradient(155deg, rgba(var(--mc), .16) 0%, rgba(var(--mc), .04) 38%, rgba(6,11,16,.72) 100%),
    rgba(8,14,20,.66);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(var(--mc), .10),
    0 24px 60px rgba(0,0,0,.6),
    0 0 42px rgba(var(--mc), .17);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
/* grid tecnológico bem sutil no canto superior direito */
#telaSelecaoModulo .modulo-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(var(--mc), .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--mc), .10) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 92% 6%, #000 0, transparent 52%);
          mask-image:radial-gradient(circle at 92% 6%, #000 0, transparent 52%);
}
/* reflexo de vidro no topo */
#telaSelecaoModulo .modulo-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:46%; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.055), transparent);
  border-radius:24px 24px 0 0;
}
#telaSelecaoModulo .modulo-card:hover,
#telaSelecaoModulo .modulo-card:focus-visible{
  transform:translateY(-8px);
  border-color:rgba(var(--mc), .95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(var(--mc), .22),
    0 34px 70px rgba(0,0,0,.65),
    0 0 70px rgba(var(--mc), .34);
  outline:none;
}
#telaSelecaoModulo .modulo-card:focus-visible{ box-shadow:0 0 0 3px rgba(var(--mc), .55), 0 34px 70px rgba(0,0,0,.65), 0 0 70px rgba(var(--mc), .34); }

/* decoração de fundo (curvas/pontos), embaixo à direita — discreta */
#telaSelecaoModulo .mc-deco{
  position:absolute; right:0; bottom:0; width:78%; height:60%; z-index:-1; pointer-events:none;
  color:rgb(var(--mc)); opacity:.9; filter:drop-shadow(0 0 6px rgba(var(--mc), .55));
}
#telaSelecaoModulo .mc-deco svg{ width:100%; height:100%; display:block; }

/* cabeçalho: ícone grande + (badge, título, linha neon) */
#telaSelecaoModulo .mc-head{ display:flex; align-items:center; gap:18px; min-height:104px; }
#telaSelecaoModulo .mc-icon{
  flex:0 0 auto; width:84px; height:84px; border-radius:24px; display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--mc), .38), rgba(var(--mc), .08) 62%),
    rgba(6,12,18,.85);
  border:1px solid rgba(var(--mc), .55);
  box-shadow:inset 0 0 22px rgba(var(--mc), .28), 0 0 26px rgba(var(--mc), .35);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
#telaSelecaoModulo .mc-icon svg{ width:56px; height:56px; filter:drop-shadow(0 4px 10px rgba(var(--mc), .55)); }
#telaSelecaoModulo .modulo-card:hover .mc-icon{
  transform:translateY(-3px) scale(1.07) rotate(-3deg);
  box-shadow:inset 0 0 26px rgba(var(--mc), .38), 0 0 40px rgba(var(--mc), .6);
}
#telaSelecaoModulo .mc-headtext{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }

#telaSelecaoModulo .mc-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap; color:var(--mc-hi); background:rgba(var(--mc), .10); border:1px solid rgba(var(--mc), .55);
  box-shadow:0 0 14px rgba(var(--mc), .22);
}
#telaSelecaoModulo .mc-badge i{
  width:8px; height:8px; border-radius:50%; background:rgb(var(--mc)); box-shadow:0 0 10px rgb(var(--mc));
  animation:mcPulse 2.4s ease-in-out infinite;
}
@keyframes mcPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.8); } }

#telaSelecaoModulo .modulo-card-titulo{
  font-family:var(--font-display); font-weight:700; font-size:clamp(21px, 1.8vw, 26px);
  line-height:1.08; letter-spacing:-.015em; color:#F4F8FA !important;
  text-shadow:0 0 24px rgba(var(--mc), .28);
}
#telaSelecaoModulo .mc-line{
  display:block; width:64px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, rgb(var(--mc)), rgba(var(--mc), .25));
  box-shadow:0 0 14px rgba(var(--mc), .8);
  transition:width .35s ease;
}
#telaSelecaoModulo .modulo-card:hover .mc-line{ width:96px; }

#telaSelecaoModulo .modulo-card-desc{
  font-size:13.5px; line-height:1.6; color:rgba(226,238,244,.84) !important; max-width:52ch;
}

/* botão pill "Acessar módulo →" (é um <span>: o card inteiro é o <button> clicável) */
#telaSelecaoModulo .mc-cta{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; justify-content:space-between; gap:34px;
  min-width:206px; padding:6px 6px 6px 22px; border-radius:999px;
  border:1.5px solid rgba(var(--mc), .8);
  background:linear-gradient(90deg, rgba(var(--mc), .20), rgba(var(--mc), .05) 70%), rgba(5,10,15,.55);
  box-shadow:0 0 18px rgba(var(--mc), .30), inset 0 0 14px rgba(var(--mc), .10);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
#telaSelecaoModulo .mc-cta-label{ color:#fff !important; font-size:14px; font-weight:600; letter-spacing:.01em; }
#telaSelecaoModulo .mc-cta-arrow{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg, var(--mc-hi), rgb(var(--mc)) 70%);
  box-shadow:0 0 16px rgba(var(--mc), .75);
  transition:transform .3s ease;
}
#telaSelecaoModulo .mc-cta-arrow svg{ width:19px; height:19px; }
#telaSelecaoModulo .modulo-card:hover .mc-cta,
#telaSelecaoModulo .modulo-card:focus-visible .mc-cta{
  transform:scale(1.045);
  box-shadow:0 0 34px rgba(var(--mc), .6), inset 0 0 18px rgba(var(--mc), .18);
}
#telaSelecaoModulo .modulo-card:hover .mc-cta-arrow{ transform:translateX(3px); }

@media (max-width:720px){
  #telaSelecaoModulo{ padding:28px 14px 44px; }
  #telaSelecaoModulo .modulo-card{ min-height:0; padding:22px 20px; gap:16px; }
  #telaSelecaoModulo .mc-icon{ width:72px; height:72px; border-radius:22px; }
  #telaSelecaoModulo .mc-icon svg{ width:48px; height:48px; }
  #telaSelecaoModulo .mc-head{ min-height:0; }
  #telaSelecaoModulo .mc-badge{ font-size:10px; letter-spacing:.03em; padding:5px 10px; }
  #telaSelecaoModulo .mc-head{ gap:16px; }
}
@media (prefers-reduced-motion:reduce){
  #telaSelecaoModulo .modulo-card, #telaSelecaoModulo .mc-icon, #telaSelecaoModulo .mc-cta,
  #telaSelecaoModulo .mc-cta-arrow, #telaSelecaoModulo .mc-line{ transition:none; }
  #telaSelecaoModulo .mc-badge i{ animation:none; }
  #telaSelecaoModulo .modulo-card:hover{ transform:none; }
}


  /* ---------------- FASE 1: dashboard, pendências, risco, modal, filtros ---------------- */
  .stat.ok .n{ color:var(--lime); }

  .risco-tag{
    display:inline-flex; align-items:center; padding:4px 10px; border-radius:100px;
    font-size:11.5px; font-weight:600; white-space:nowrap;
  }
  .risco-baixo{ background:var(--lime-soft); color:var(--lime); }
  .risco-atencao{ background:var(--teal-soft); color:var(--teal); }
  .risco-medio{ background:var(--amber-soft); color:var(--amber); }
  .risco-alto{ background:var(--red-soft); color:var(--red); }

  .risco-banner{ padding:10px 14px; border-radius:10px; font-weight:600; margin:10px 0 16px; }
  .risco-banner.risco-baixo{ background:var(--lime-soft); color:var(--lime); }
  .risco-banner.risco-atencao{ background:var(--teal-soft); color:var(--teal); }
  .risco-banner.risco-medio{ background:var(--amber-soft); color:var(--amber); }
  .risco-banner.risco-alto{ background:var(--red-soft); color:var(--red); }

  .problem-row{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:10px;
    padding:12px 14px; margin-bottom:8px; cursor:pointer; font-family:inherit; color:var(--text);
    transition:background .15s ease, border-color .15s ease;
  }
  .problem-row:hover{ background:rgba(255,255,255,0.05); border-color:var(--line-strong); }
  .problem-count{ font-family:var(--font-display); font-weight:700; font-size:16px; min-width:26px; }
  .problem-label{ flex:1; font-size:13px; }

  .filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:0; align-items:flex-end; }
  .filter-bar > div{ display:flex; flex-direction:column; gap:4px; }
  .filter-bar label{ margin:0; }
  .filter-bar input, .filter-bar select{ min-width:140px; }
  .btn.btn-sm{ padding:7px 15px; font-size:12px; margin-top:0; gap:8px; }
  .btn.btn-sm::after{ display:none; }
  .btn.danger{
    padding:11px 22px; gap:8px; color:#FFE3E3;
    border-color:rgba(255,107,107,.7);
    background:linear-gradient(90deg, rgba(255,107,107,.20), rgba(255,107,107,.05) 72%), #120B0E;
    box-shadow:0 0 18px rgba(255,107,107,.25), inset 0 0 14px rgba(255,107,107,.08);
  }
  .btn.danger::after{ display:none; }
  .btn.danger.btn-sm{ padding:7px 15px; }
  .btn.danger:hover{ border-color:#FF6B6B; box-shadow:0 0 30px rgba(255,107,107,.5), inset 0 0 16px rgba(255,107,107,.14); }
  .btn.danger:disabled{ opacity:0.35; cursor:not-allowed; box-shadow:none; }
  #notasTable td:first-child, #notasTable th:first-child{ text-align:center; }

  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px);
    align-items:center; justify-content:center; z-index:100; padding:24px;
  }
  .modal-overlay.show{ display:flex; animation:mcFadeIn .2s var(--ease-premium); }
  .modal-box{
    background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius-card);
    padding:26px 28px; max-width:640px; width:100%; max-height:85vh; overflow-y:auto; position:relative;
    box-shadow:var(--shadow-lift);
    animation:mcSlideUp .25s var(--ease-premium);
  }
  @keyframes mcFadeIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes mcSlideUp{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .modal-close{
    position:absolute; top:14px; right:14px; background:transparent; border:none; color:var(--muted);
    font-size:22px; line-height:1; cursor:pointer;
  }
  .modal-close:hover{ color:var(--text); }
  .detalhe-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 6px; font-size:13px; }
  .problemas-list{ list-style:none; margin:0; padding:0; }
  .problemas-list li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .problemas-list li:last-child{ border-bottom:none; }
  .muted-text{ color:var(--muted); font-size:12px; }

  .donut-wrap{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
  .donut-legend{ display:flex; flex-direction:column; gap:8px; }
  .donut-legend-item{ font-size:13px; color:var(--text); display:flex; align-items:center; gap:8px; }
  .donut-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }

  @media print{
    .topbar, .ledger-nav, .modal-overlay { display:none !important; }
    main{ padding:0; max-width:100%; }
    #tab-relatorio .card:not(#relatorioPrintArea){ display:none !important; }
    #tab-relatorio > .note{ display:none !important; }
    #tab-relatorio .panel-head button{ display:none !important; }
    #relatorioPrintArea{ border:none !important; box-shadow:none !important; }
    .relatorio-nota{ page-break-inside:avoid; }
    .relatorio-secao-titulo, .relatorio-secao{ page-break-after:avoid; }
    .relatorio-linha-clicavel{ cursor:default; }
  }
  @page{
    margin: 18mm 14mm;
    @bottom-center{ content: "Página " counter(page) " de " counter(pages); font-size:10px; color:#666; }
  }

  .relatorio-cabecalho{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .relatorio-cabecalho img{ width:48px; height:48px; border-radius:50%; }
  .relatorio-nota{
    border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:14px;
  }
  .relatorio-nota-titulo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:8px; }
  .relatorio-nota-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px 18px; font-size:12.5px; margin-bottom:10px; }
  .relatorio-nota-grid div span{ display:block; color:var(--muted); font-size:11px; }
  .relatorio-pendencia{ background:rgba(255,255,255,0.02); border-left:3px solid var(--amber); border-radius:6px; padding:10px 14px; margin-top:10px; }
  .relatorio-pendencia.alto{ border-left-color:var(--red); }
  .relatorio-pendencia.baixo{ border-left-color:var(--lime); }
  .relatorio-pendencia h5{ margin:0 0 6px; font-size:13px; }
  .relatorio-pendencia .rot{ font-weight:600; color:var(--text); }
  .relatorio-difal-box{ background:var(--teal-soft); border-radius:8px; padding:10px 14px; margin-top:10px; font-size:12.5px; }
  .relatorio-ok-table td, .relatorio-ok-table th{ font-size:12.5px; }

  /* ---- redesenho do Relatório de Auditoria Fiscal ---- */
  .relatorio-topo{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
  .relatorio-topo h2{ margin:0 0 6px; font-size:20px; }
  .relatorio-topo-info{ font-size:13px; color:var(--muted); line-height:1.7; }
  .relatorio-topo-info b{ color:var(--text); font-weight:500; }
  .relatorio-status{
    display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
    font-weight:600; font-size:13px; white-space:nowrap;
  }
  .relatorio-status.verde{ background:var(--lime-soft); color:var(--lime); }
  .relatorio-status.laranja{ background:var(--amber-soft); color:var(--amber); }
  .relatorio-status.vermelho{ background:var(--red-soft); color:var(--red); }
  .relatorio-status.cinza{ background:rgba(255,255,255,0.05); color:var(--muted); }

  .relatorio-secao{ margin:26px 0 12px; font-size:15px; }
  .relatorio-mini-resumo{ width:100%; border-collapse:collapse; margin-bottom:4px; }
  .relatorio-mini-resumo td{ padding:7px 10px; font-size:12.5px; border-bottom:1px solid var(--line); }
  .relatorio-mini-resumo td:last-child{ text-align:right; font-family:var(--font-mono); }

  .relatorio-tabela-pend{ width:100%; border-collapse:collapse; }
  .relatorio-tabela-pend th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line-strong); }
  .relatorio-tabela-pend td{ padding:10px; font-size:13px; border-bottom:1px solid var(--line); }
  .relatorio-linha-clicavel{ cursor:pointer; transition:background .12s ease; }
  .relatorio-linha-clicavel:hover{ background:rgba(255,255,255,0.03); }

  .etapa-titulo{ display:flex; align-items:center; gap:12px; margin:0 0 6px; }
  .etapa-titulo h3{ margin:0; }
  .etapa-numero{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:14px;
    background:linear-gradient(145deg, var(--mod-hi), rgb(var(--mod-rgb)) 75%); color:var(--mod-ink);
    box-shadow:0 0 14px rgba(var(--mod-rgb), .55);
  }

  .relatorio-botoes-exportar{ display:flex; gap:10px; flex-shrink:0; }
  .btn-export{
    display:inline-flex; align-items:center; gap:9px;
    padding:11px 22px; border-radius:var(--radius-button); font-size:13.5px; font-weight:600; color:#EAF1F5;
    border:1px solid var(--border-strong); cursor:pointer;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), #0A1118;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
  }
  .btn-export span{ color:rgb(var(--mod-rgb)); font-size:14px; }
  .btn-export:hover{ transform:translateY(-1px); border-color:rgba(var(--mod-rgb), .75); box-shadow:0 0 22px rgba(var(--mod-rgb), .28); }


  /* Ícone em círculo — usado nos botões do topo (Trocar módulo / Sair) */
  .tb-ico{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; }
  .tb-ico svg{ width:17px; height:17px; transition:transform .45s var(--ease-premium); }

  /* Trocar módulo — mesma pílula do "Acessar módulo →", com o ícone de troca girando no hover */
  .btn-recuperacao-topbar{
    display:inline-flex; align-items:center; gap:14px; padding:5px 5px 5px 20px;
    border-radius:var(--radius-button); border:1.5px solid rgba(var(--mod-rgb), .8);
    background:linear-gradient(90deg, rgba(var(--mod-rgb), .22), rgba(var(--mod-rgb), .05) 72%), #09111A;
    color:#FFFFFF; font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
    margin-right:4px;
    box-shadow:0 0 18px rgba(var(--mod-rgb), .28), inset 0 0 14px rgba(var(--mod-rgb), .10);
    transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
  }
  .btn-recuperacao-topbar .tb-ico{
    background:linear-gradient(145deg, var(--mod-hi), rgb(var(--mod-rgb)) 70%);
    color:var(--mod-ink); box-shadow:0 0 14px rgba(var(--mod-rgb), .7);
  }
  .btn-recuperacao-topbar:hover{
    transform:translateY(-2px) scale(1.03); border-color:rgb(var(--mod-rgb));
    box-shadow:0 0 32px rgba(var(--mod-rgb), .55), inset 0 0 18px rgba(var(--mod-rgb), .18);
  }
  .btn-recuperacao-topbar:hover .tb-ico svg{ transform:rotate(180deg); }
  .btn-recuperacao-topbar:focus-visible, .btn-logout:focus-visible, .btn-theme-toggle:focus-visible{
    outline:none; box-shadow:0 0 0 3px rgba(var(--mod-rgb), .5), 0 0 26px rgba(var(--mod-rgb), .5);
  }

  /* Alternar tema — botão circular de vidro escuro com ícone SVG */
  .btn-theme-toggle{
    width:42px; height:42px; border-radius:50%; margin-right:6px; cursor:pointer;
    display:grid; place-items:center; color:var(--mod-hi);
    border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), #09111A;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
  }
  .btn-theme-toggle svg{ width:19px; height:19px; }
  .btn-theme-toggle:hover{ transform:rotate(-14deg) scale(1.08); border-color:rgba(var(--mod-rgb), .85); box-shadow:0 0 24px rgba(var(--mod-rgb), .45); }

  /* ---------------- MODO CLARO ----------------
     Sobrescreve as variáveis dos dois blocos :root acima (mantém as tabelas, cards, gráficos,
     modais, relatórios, menus, botões e formulários funcionando sem alteração — eles já usam
     var(--...) em vez de cor fixa, então só trocar as variáveis já propaga pra tudo). */
  html[data-theme="light"]{
    --bg:#F3F5F7;
    --bg-grid:#F3F5F7;
    --panel:#FFFFFF;
    --panel-2:#F7F9FA;
    --line:rgba(10,20,30,0.09);
    --line-strong:rgba(10,20,30,0.18);
    --text:#000000;
    --muted:#333333;
    --lime:#527018;
    --lime-soft:rgba(127,168,42,0.14);
    --teal:#0A6670;
    --teal-soft:rgba(14,140,153,0.12);
    --amber:#8A5D0A;
    --amber-soft:rgba(181,121,14,0.14);
    --red:#C33A30;
    --red-soft:rgba(214,73,63,0.12);
    --green:#1F8F52;
  }
  html[data-theme="light"] body{ background:var(--bg); font-weight:600; }
  html[data-theme="light"] p, html[data-theme="light"] span, html[data-theme="light"] td,
  html[data-theme="light"] label, html[data-theme="light"] div,
  html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] option,
  html[data-theme="light"] th, html[data-theme="light"] li, html[data-theme="light"] a{ font-weight:600; }
  html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3{ font-weight:800; }
  /* Estas classes usam cor de texto fixa (não variável) pensada pro fundo escuro — no fundo
     branco do modo claro ficavam quase invisíveis (números dos cards, títulos, pills, badge OK,
     aba ativa do menu, botão sair). Sobrescrevendo especificamente essas aqui. */
  html[data-theme="light"] .stat .n{ color:#000000; font-weight:800; }
  html[data-theme="light"] .card h3{ color:#000000; }
  html[data-theme="light"] .tab-btn.active{ color:#000000; font-weight:700; }
  html[data-theme="light"] .badge.ok{ color:#000000; font-weight:700; }
  /* Os badges de risco (risco-tag/risco-banner) e o restante dos badges continuam com a cor de
     status (vermelho/âmbar/verde) — isso é sinalização visual intencional de gravidade, não texto
     "apagado"; já passam no contraste mínimo calculado antes. Deixei só em negrito pra reforçar. */
  html[data-theme="light"] .risco-tag, html[data-theme="light"] .risco-banner,
  html[data-theme="light"] .badge{ font-weight:700; }

  /* Reforçando prefers-reduced-motion pro conjunto novo de transições/animações do design system
     (cards, botões, inputs, modal, sidebar) — a regra já existente cobria só os cards do seletor
     de módulo; esta cobre o restante do sistema. */
  @media (prefers-reduced-motion:reduce){
    .card, .btn, .stat, .subtab-btn, .tab-btn, .dropzone,
    input[type=text], input[type=password], input[type=date], select{ transition:none !important; }
    .btn:hover{ transform:none !important; }
    .modal-overlay.show, .modal-box{ animation:none !important; }
  }

  /* O topo é escuro nos dois temas: o subtítulo da marca precisa de cor fixa (o --muted do tema
     claro é escuro e ficava ilegível sobre o fundo escuro). */
  .topbar .brand span{ color:#8593A1; }


  /* ==================== TIPOGRAFIA GLOBAL ==================== */
  html{ -webkit-text-size-adjust:100%; }
  body{
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
    font-feature-settings:"kern","liga","calt";
  }
  button, input, select, textarea{ font-family:inherit; }

  /* Fonte de destaque (Sora): títulos, KPIs e todos os botões — é o que dá a "cara tech" ao produto */
  h1, h2, h3, h4,
  .stat .n, .brand h1, .modulo-card-titulo,
  .btn, .btn-secondary, .btn-export, .btn-recuperacao-topbar, .btn-logout, .switch button,
  #telaSelecaoModulo .mc-cta-label, #telaSelecaoModulo .mc-badge{ font-family:var(--font-display); }
  h1, h2, h3, h4{ letter-spacing:-0.012em; }
  .btn, .btn-secondary, .btn-export, .btn-recuperacao-topbar, .btn-logout{ letter-spacing:.005em; }

  /* Números: largura igual em todos os dígitos (tabular) — valores em R$ e datas alinham em coluna,
     sem "dançar" quando o conteúdo muda. */
  td, th, .stat .n, .stat .l, .mono, .cnpj-pill, .money-wrap input, .input-money, input[type=date], input[type=month]{
    font-variant-numeric:tabular-nums; font-feature-settings:"tnum","kern";
  }
  .mono, .cnpj-pill, code, pre, kbd{ font-family:var(--font-mono); font-variant-ligatures:none; }
  th{ font-weight:700; }


  /* ==================== RESPONSIVIDADE DO APP ====================
     Antes só a tela de escolha de módulo era responsiva; topo, menu lateral e conteúdo não eram. */
  @media (max-width:1100px){
    .topbar{ flex-wrap:wrap; gap:12px 18px; padding:16px 20px; }
    .topbar-right{ flex-wrap:wrap; justify-content:flex-end; row-gap:10px; min-width:0; max-width:100%; }
  }
  @media (max-width:900px){
    /* menu lateral vira uma barra horizontal rolável no topo do conteúdo */
    .layout{ flex-direction:column; min-height:0; }
    .ledger-nav{
      width:100%; height:auto; position:static; padding:0; display:flex; flex-direction:row;
      overflow-x:auto; overflow-y:hidden; border-right:none; border-bottom:1px solid var(--line);
      -webkit-overflow-scrolling:touch; scrollbar-width:thin;
    }
    .tab-btn{
      width:auto; flex:0 0 auto; white-space:nowrap; padding:13px 16px;
      border-left:none !important; border-bottom:3px solid transparent;
    }
    .tab-btn.active{ border-bottom-color:rgb(var(--mod-rgb)); background:linear-gradient(180deg, rgba(var(--mod-rgb), .14), transparent 80%); }
    main{ padding:24px 20px; max-width:100%; }
    .topbar-right{ width:100%; justify-content:flex-start; }
  }
  @media (max-width:720px){
    .topbar{ padding:12px 14px; gap:10px; }
    .topbar .brand{ gap:12px; }
    .topbar .brand .logo{ width:52px; height:52px; }
    .topbar .brand h1{ font-size:18px; }
    .topbar .brand span{ font-size:10px; letter-spacing:.08em; }
    .topbar-right{ gap:8px; }
    .btn-recuperacao-topbar, .btn-logout{ font-size:12px; }
    .cnpj-pill{ max-width:100%; flex:1 1 100%; order:5; }
    main{ padding:18px 14px; }
    .card{ padding:20px 18px; }
    .row{ flex-direction:column; gap:0; align-items:stretch !important; } /* !important: várias .row têm align-items inline pensado pro layout horizontal */
    .row > div{ min-width:0; width:100%; }
    .panel-head h2{ font-size:20px; }
    .stat{ min-width:calc(50% - 8px); }
  }


  /* KPIs: o número se ajusta sozinho à largura do cartão (container query), então valores grandes como
     R$ 1.234.567,89 nunca são cortados — em cartão largo fica em 27px, em cartão estreito encolhe até 15px.
     Navegador sem suporte a 'cqw' ignora a 2ª linha e mantém o tamanho fixo de 22px. */
  .stat{ container-type:inline-size; }
  .stat .n{
    font-size:22px;
    font-size:clamp(15px, 12cqw, 27px);
    line-height:1.15; white-space:nowrap;
  }

  /* ==================== TOAST (avisos, substitui alert() nativo) ==================== */
  #toastArea{
    position:fixed; top:20px; right:20px; z-index:200;
    display:flex; flex-direction:column; gap:10px; max-width:min(420px, calc(100vw - 40px));
    pointer-events:none;
  }
  .toast{
    pointer-events:auto; display:flex; align-items:flex-start; gap:12px;
    padding:14px 16px; border-radius:14px; border:1px solid var(--border-strong);
    background:linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--bg-card);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:var(--shadow-lift);
    font-size:13px; color:var(--text-primary); line-height:1.5;
    animation:toastIn .28s var(--ease-premium);
  }
  .toast.saindo{ animation:toastOut .22s var(--ease-premium) forwards; }
  @keyframes toastIn{ from{ opacity:0; transform:translateX(24px) scale(.97); } to{ opacity:1; transform:translateX(0) scale(1); } }
  @keyframes toastOut{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(24px); } }
  .toast-icone{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; }
  .toast-icone svg{ width:100%; height:100%; }
  .toast.info .toast-icone{ color:var(--accent-cyan); }
  .toast.sucesso .toast-icone{ color:var(--accent-green); }
  .toast.erro .toast-icone{ color:var(--red); }
  .toast-texto{ flex:1; white-space:pre-line; }
  .toast-fechar{
    flex:0 0 auto; background:none; border:none; color:var(--text-secondary); cursor:pointer;
    font-size:16px; line-height:1; padding:0 0 0 6px;
  }
  .toast-fechar:hover{ color:var(--text-primary); }
  @media (max-width:720px){ #toastArea{ left:14px; right:14px; top:14px; max-width:none; } }
  @media (prefers-reduced-motion:reduce){ .toast{ animation:none; } .toast.saindo{ animation:none; display:none; } }