:root{
  --ink:#15243a; --ink-soft:#475569; --muted:#8a97a8; --line:#e2e8f0;
  --brand:#005c84; --brand-2:#00a5e4; --brand-dark:#004080; --ok:#16a34a; --warn:#f59e0b; --danger:#ef4444;
  --bg:#0b1220; --surface:#fff; --radius:16px; --mono:'JetBrains Mono',ui-monospace,monospace;
  --font:'Roboto',system-ui,-apple-system,Segoe UI,sans-serif; --head:'Montserrat',var(--font);
  --shadow:0 18px 40px -22px rgba(15,40,76,.4); --shadow-sm:0 6px 18px -8px rgba(15,40,76,.22);
}
*{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:#eef3f8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} h1,h2,h3{margin:0;line-height:1.15;font-family:var(--head)}
.muted{color:var(--muted)} .small{font-size:.82rem} .center{justify-content:center}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem}
.brand-name{color:var(--brand);letter-spacing:-.02em} .logo-mark svg{display:block}
.btn-primary{border:0;border-radius:11px;padding:.75rem 1.3rem;font-weight:700;font-size:.95rem;color:#fff;background:var(--brand);transition:background .15s}
.btn-primary:hover{background:#0d645d} .btn-primary:disabled{opacity:.6}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:11px;padding:.6rem 1.1rem;font-weight:600;font-size:.9rem;display:inline-block}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)} .btn-dark{}
.alert{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;padding:.7rem .9rem;font-size:.88rem;margin:.6rem 0}

/* ===== Público (landing, fatura, 404) ===== */
.pub{min-height:100vh;display:flex;flex-direction:column;background:#eef2f6}
.pub-head{display:flex;align-items:center;padding:.9rem clamp(1rem,5vw,3rem);background:#fff;border-bottom:1px solid var(--line)}
.pub-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(1.4rem,5vh,3rem) 1.1rem}
.pub-foot{text-align:center;padding:1.2rem;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);background:#fff}
.state-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:2.4rem 2rem;text-align:center;max-width:480px;margin:1.5rem auto 0;box-shadow:var(--shadow)}
.state-ic{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:16px;background:#ccfbf1;color:var(--brand);margin-bottom:1rem}
.state-ic svg{width:28px;height:28px} .state-ic.state-warn{background:#fff4e6;color:#d97706}
.state-card h1{font-size:1.3rem;color:#102a4c;margin-bottom:.5rem}

/* ===== Fatura ===== */
.invoice{width:min(560px,96vw);margin-top:.5rem}
.paid-banner{display:flex;align-items:center;gap:.9rem;background:#dcfce7;border:1px solid #86efac;border-radius:14px;padding:1rem 1.2rem;margin-bottom:1.2rem}
.paid-ic{flex:none;width:42px;height:42px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.paid-ic svg{width:22px;height:22px} .paid-banner strong{display:block;color:#15803d} .paid-banner span{font-size:.88rem;color:#3f6212}
.inv-head{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm)}
.inv-kicker{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.inv-head h1{font-size:1.4rem;color:#102a4c;margin:.3rem 0 1rem}
.inv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid var(--line);padding-top:1rem}
.inv-meta span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.inv-meta strong{font-size:.95rem;font-weight:700;color:var(--ink)} .inv-amount{color:var(--brand)!important;font-size:1.15rem!important}
.pay-block{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.6rem;margin-top:1.1rem;box-shadow:var(--shadow-sm)}
.pay-title{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;margin-bottom:1rem}
.pay-ic{font-size:.7rem;font-weight:800;color:#fff;padding:.25rem .5rem;border-radius:7px;letter-spacing:.03em}
.pay-ic.pix{background:var(--brand)} .pay-ic.boleto{background:#334155}
.pay-fast{font-size:.72rem;font-weight:700;color:var(--ok);background:#dcfce7;padding:.2rem .55rem;border-radius:999px;margin-left:auto}
.pay-fast.muted{color:var(--muted);background:#f1f5f9}
.copy-box{background:#f0fdfa;border:1px solid #99f6e4;border-radius:10px;padding:.9rem 1rem;margin-bottom:.8rem}
.copy-box code{font-family:var(--mono);font-size:.82rem;word-break:break-all;color:#0f3d39;display:block}
.btn-copy{margin-right:.5rem} .pix-exp{margin:.7rem 0 0;font-size:.85rem;color:#b45309;font-weight:600}
.pix-log{margin-top:.8rem;background:#fef2f2;color:#b91c1c;border-radius:10px;padding:.8rem;font-size:.82rem;white-space:pre-wrap}
.inv-foot{margin-top:1.2rem;text-align:center;font-size:.82rem}

/* ===== Página de fatura (estilo concessionária / Sabesp) ===== */
.sb{min-height:100vh;display:flex;flex-direction:column;background:#eef3f8;border-top:3px solid var(--brand-2)}
.sb-head{background:#fff;border-bottom:1px solid #dbe6ef;box-shadow:0 1px 3px rgba(0,60,128,.06)}
.sb-head-in{max-width:600px;margin:0 auto;display:flex;align-items:center;gap:.7rem;padding:.85rem clamp(1rem,5vw,1.5rem)}
.sb .brand-name{color:var(--brand);font-family:var(--head);font-weight:800;font-size:1.18rem}
.sb-head-tag{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--brand-2);text-transform:uppercase;letter-spacing:.04em}
.sb-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(1.2rem,4vh,2.2rem) 1rem 2.5rem}
.sb-foot{text-align:center;padding:1.1rem;color:var(--muted);font-size:.8rem;border-top:1px solid #dbe6ef;background:#fff}
.inv2{width:min(600px,96vw)}
.inv2-card{background:#fff;border:1px solid #dbe6ef;border-radius:14px;box-shadow:var(--shadow-sm);padding:1.5rem 1.6rem;border-top:4px solid var(--brand)}
.inv2-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.inv2-kicker{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-2)}
.inv2-top h1{font-size:1.4rem;color:var(--brand-dark);margin-top:.25rem}
.inv2-status{font-size:.74rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;white-space:nowrap;flex:none}
.inv2-status.is-open{background:#fff4e6;color:#b45309} .inv2-status.is-paid{background:#dcfce7;color:#15803d}
.inv2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid #eef2f6}
.inv2-f span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.inv2-f strong{font-size:.95rem;font-weight:700;color:var(--ink);font-family:var(--mono)}
.inv2-amount{display:flex;align-items:center;justify-content:space-between;margin-top:1.2rem;background:#eaf6fc;border:1px solid #bfe6f6;border-radius:12px;padding:1rem 1.3rem}
.inv2-amount span{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);font-weight:700}
.inv2-amount strong{font-family:var(--head);font-size:1.7rem;font-weight:800;color:var(--brand-dark)}
.pay2{background:#fff;border:1px solid #dbe6ef;border-radius:14px;box-shadow:var(--shadow-sm);padding:1.4rem 1.6rem;margin-top:1.1rem}
.pay2-pix{border:1px solid #9bd9f1;background:linear-gradient(180deg,#f4fbff,#fff)}
.pay2-h{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.pay2-tag{font-family:var(--head);font-size:.7rem;font-weight:800;color:#fff;padding:.28rem .55rem;border-radius:7px;letter-spacing:.04em}
.pay2-tag.pix{background:var(--brand)} .pay2-tag.boleto{background:#334155}
.pay2-title{font-family:var(--head);font-weight:700;font-size:1.08rem;color:var(--brand-dark)}
.pay2-fast{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--ok);background:#dcfce7;padding:.22rem .6rem;border-radius:999px}
.pay2-fast.muted{color:var(--muted);background:#f1f5f9}
.pay2-desc{font-size:.92rem;color:var(--ink-soft);margin:0 0 1rem;line-height:1.5}
.copy-box{background:#f6fafd;border:1px solid #cfe3f0;border-radius:10px;padding:.9rem 1rem;margin-bottom:.85rem}
.copy-box code{font-family:var(--mono);font-size:.82rem;word-break:break-all;color:var(--brand-dark);display:block;line-height:1.5}
.btn-blue{border:0;border-radius:10px;padding:.8rem 1.4rem;font-weight:700;font-size:.95rem;color:#fff;background:var(--brand);transition:background .15s}
.btn-blue:hover{background:#00496b} .btn-blue:disabled{opacity:.6}
.btn-copy{margin-right:.5rem} .pix-exp{margin:.7rem 0 0;font-size:.85rem;color:#b45309;font-weight:600}
.pix-log{margin-top:.8rem;background:#fef2f2;color:#b91c1c;border-radius:10px;padding:.8rem;font-size:.82rem;white-space:pre-wrap}
.paid-banner{display:flex;align-items:center;gap:.9rem;background:#dcfce7;border:1px solid #86efac;border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.1rem}
.paid-ic{flex:none;width:42px;height:42px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.paid-ic svg{width:22px;height:22px} .paid-banner strong{display:block;color:#15803d} .paid-banner span{font-size:.88rem;color:#3f6212}
.sb-trust{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-top:1.4rem;font-size:.82rem;color:var(--muted)}
.sb-trust svg{width:15px;height:15px;color:var(--ok);flex:none}

/* Modal preview do boleto */
.pdf-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1rem;background:rgba(15,40,76,.6)}
.pdf-card{background:#fff;border-radius:12px;width:min(820px,96vw);height:min(92vh,1000px);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.pdf-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:var(--brand);color:#fff;font-weight:600;font-size:.9rem}
.pdf-bar-actions{display:flex;align-items:center;gap:1rem}
.pdf-open{color:#cdebfa;font-size:.85rem;font-weight:600} .pdf-open:hover{color:#fff}
.pdf-bar .modal-x{border:0;background:none;color:#cdebfa;font-size:1.5rem;line-height:1;cursor:pointer} .pdf-bar .modal-x:hover{color:#fff}
#pdf-frame{flex:1;width:100%;border:0;background:#525659}
@media(max-width:520px){.inv2-grid{grid-template-columns:1fr 1fr}.inv2-amount strong{font-size:1.4rem}}

/* ===== Auth ===== */
.auth-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(800px 400px at 50% -10%,#134e4a,var(--bg));padding:1.5rem}
.auth-card{width:min(400px,94vw);background:#fff;border-radius:18px;padding:2.2rem;box-shadow:var(--shadow);text-align:center}
.auth-card h1{font-size:1.3rem;margin-top:1rem;color:#102a4c} .auth-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem;text-align:left}
.auth-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.auth-form input,.cfg-form input,.cfg-form select,.grid-form input,.table-tools input,.table-tools select,.smtp-test input{border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;outline:none}
.auth-form input:focus,.cfg-form input:focus,.cfg-form select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,118,110,.15)}

/* ===== Dashboard ===== */
.dash{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.dash-side{background:linear-gradient(180deg,#0f172a,#0b1220);color:#fff;padding:1.6rem 1.1rem;display:flex;flex-direction:column}
.dash-side .brand{margin-bottom:1.8rem} .dash-side .brand-name{color:#5eead4}
.side-nav{display:flex;flex-direction:column;gap:.2rem;flex:1}
.side-nav a{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:10px;color:#cbd5e1;font-weight:500;font-size:.92rem}
.side-nav a:hover{background:rgba(255,255,255,.06);color:#fff} .side-nav a.active{background:rgba(20,184,166,.2);color:#fff}
.side-logout{color:#94a3b8;font-size:.9rem;padding:.6rem .8rem} .side-logout:hover{color:#fca5a5}
.dash-main{padding:2rem clamp(1.2rem,4vw,2.6rem);background:#eef2f6;overflow-x:hidden}
.dash-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.dash-top h1{font-size:1.5rem} .top-actions{display:flex;gap:.6rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.6rem}
.stats.stats-6{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat{background:#fff;border-radius:14px;padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.25rem}
.stat .num{font-size:1.5rem;font-weight:800} .stat .lbl{color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat.s-ok .num{color:var(--ok)} .stat.s-warn .num{color:var(--warn)} .stat.s-fail .num{color:var(--danger)} .stat.s-route .num{color:#0891b2}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm)} .table-card{overflow:hidden}
.table-tools{padding:1rem 1.2rem;border-bottom:1px solid var(--line);display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.table-tools input[type=search]{flex:1;min-width:200px}
.table-scroll{overflow-x:auto} .data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.data-table td{padding:.8rem 1rem;border-bottom:1px solid #f1f5f9;font-size:.9rem;vertical-align:middle}
.data-table tr:last-child td{border-bottom:0} .data-table tbody tr:hover{background:#f8fafc}
.data-table .empty{text-align:center;color:var(--muted);padding:2.4rem}
.mini-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.35rem .7rem;font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.mini-btn:hover{border-color:var(--brand);color:var(--brand)}
.mail-st{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:700;padding:.2rem .6rem;border-radius:999px}
.mail-st::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.mail-st.ok{background:#dcfce7;color:#15803d} .mail-st.pend{background:#e0f2fe;color:#0369a1} .mail-st.fail{background:#fef2f2;color:#b91c1c}
.vtag{font-size:.74rem;font-weight:800;padding:.15rem .5rem;border-radius:6px} .vtag.vA{background:#cffafe;color:#0e7490} .vtag.vB{background:#ede9fe;color:#6d28d9}
.ltag{font-size:.74rem;font-weight:700;color:var(--ink-soft);background:#f1f5f9;padding:.15rem .5rem;border-radius:6px}
.mail-report{max-width:220px;font-size:.82rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.worker-status{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;border-radius:12px;font-size:.9rem;font-weight:500;margin-bottom:1.4rem}
.worker-status .ws-dot{width:10px;height:10px;border-radius:50%;flex:none}
.worker-status.ok{background:#dcfce7;color:#15803d} .worker-status.ok .ws-dot{background:var(--ok)}
.worker-status.warn{background:#fef3c7;color:#92560a} .worker-status.warn .ws-dot{background:var(--warn)}
.ab-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem}
.ab-card{background:#fff;border-radius:14px;padding:1.3rem 1.4rem;box-shadow:var(--shadow-sm)}
.ab-h{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem} .ab-big{font-size:2.2rem;font-weight:800;color:var(--brand);margin:.3rem 0} .ab-sub{font-size:.82rem;color:var(--muted)}

/* Config */
.cfg-card{padding:1.4rem 1.5rem;margin-bottom:1.4rem}
.cfg-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem} .cfg-head h2{font-size:1.05rem}
.cfg-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .cfg-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--ink-soft)} .cfg-form .col-2{grid-column:1/-1}
.cfg-actions{display:flex;justify-content:flex-end}
.smtp-badge{font-size:.76rem;font-weight:700;padding:.25rem .7rem;border-radius:999px} .smtp-badge.on{background:#dcfce7;color:#15803d} .smtp-badge.off{background:#fef3c7;color:#b45309}
.smtp-test{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem} .smtp-test input{flex:1;min-width:200px}
.smtp-log{margin-top:1rem;padding:.9rem 1rem;border-radius:10px;background:#0f172a;color:#cbd5e1;font-family:var(--mono);font-size:.78rem;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto}
.smtp-log.ok{box-shadow:inset 3px 0 0 var(--ok)} .smtp-log.err{box-shadow:inset 3px 0 0 var(--danger)}
.cfg-inline{display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin:.4rem 0}
.copy-field{display:flex;align-items:center;gap:.5rem;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem}
.copy-field code{flex:1;font-family:var(--mono);font-size:.8rem;word-break:break-all} .cfg-worker-meta{margin-top:.8rem;font-size:.85rem;color:var(--ink-soft)}

/* Modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1.2rem;background:rgba(15,23,42,.55)}
.modal-card{background:#fff;border-radius:16px;width:min(560px,96vw);box-shadow:var(--shadow);max-height:92vh;overflow:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)} .modal-head h2{font-size:1.15rem}
.modal-x{border:0;background:none;font-size:1.5rem;color:var(--muted)} .modal-x:hover{color:var(--ink)}
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.4rem} .grid-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--ink-soft)} .grid-form .col-2{grid-column:1/-1}
.grid-form input[type=file]{border:1px dashed var(--line);border-radius:10px;padding:.7rem;background:#f8fafc;font-size:.85rem}
.modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.7rem} #import-report{margin:0 1.4rem 1.4rem}
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-size:.88rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:820px){.dash{grid-template-columns:1fr}.dash-side{flex-direction:row;align-items:center;gap:1rem;padding:.9rem 1.1rem}.dash-side .brand{margin-bottom:0}.side-nav{flex-direction:row;overflow-x:auto}.side-nav a span{display:none}.cfg-form,.grid-form{grid-template-columns:1fr}.ab-cards{grid-template-columns:1fr}.inv-meta{grid-template-columns:1fr}}