@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('../fonts/material-symbols-rounded.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
}


:root{
  --bg:#181a1d; --bg2:#202326; --bg3:#252a2e;
  --surface:#2a2f34; --surface2:#30363c;
  --border:#353c42; --border2:#424b53;
  --ink:#f2f6fa; --ink2:#b8c8d8; --ink3:#7a8fa0; --muted:#90a0b0;
  --red:#2563eb; --red-d:#1d4ed8; --red-l:rgba(37,99,235,.14);
  --danger:#ef4444; --danger-d:#dc2626; --danger-l:rgba(239,68,68,.14);
  --blue:#3b82f6; --blue-l:rgba(59,130,246,.12);
  --green:#22c55e; --green-l:rgba(34,197,94,.12);
  --amber:#f59e0b; --amber-l:rgba(245,158,11,.12);
  --purple:#a855f7; --purple-l:rgba(168,85,247,.12);
  --cyan:#06b6d4; --cyan-l:rgba(6,182,212,.12);
  --sh:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.25);
  --sh2:0 8px 32px rgba(0,0,0,.45);
}
[data-theme="light"]{
  --bg:#f0f4f8; --bg2:#ffffff; --bg3:#edf1f7;
  --surface:#ffffff; --surface2:#f4f7fb;
  --border:#c8d5e0; --border2:#a8bece;
  --ink:#0d1a26; --ink2:#2a3f55; --ink3:#3d5570; --muted:#4a6280;
  --red:#1d4ed8; --red-d:#1e40af; --red-l:rgba(29,78,216,.10);
  --danger:#ef4444; --danger-d:#dc2626; --danger-l:rgba(239,68,68,.14);
  --blue:#2563eb; --blue-l:rgba(37,99,235,.10);
  --green:#15803d; --green-l:rgba(21,128,61,.10);
  --amber:#92400e; --amber-l:rgba(146,64,14,.10);
  --purple:#6d28d9; --purple-l:rgba(109,40,217,.10);
  --cyan:#0e6e8e; --cyan-l:rgba(14,110,142,.10);
  --sh:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --sh2:0 8px 32px rgba(0,0,0,.12);
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea{background:#fff;border-color:var(--border);color:var(--ink)}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder{color:#6b8499}
[data-theme="light"] .field-hint{color:var(--ink3)}
[data-theme="light"] .sc-lbl{color:var(--ink2)}
[data-theme="light"] .sc-tag{font-weight:700}
[data-theme="light"] .nl{color:var(--ink2)}
[data-theme="light"] .ch-ttl{color:var(--ink)}
[data-theme="light"] .ch-ttl *{color:inherit}
[data-theme="light"] .ph-sub{color:var(--ink2)}
[data-theme="light"] .urole{color:var(--ink3)}
[data-theme="light"] .logo-ver{color:var(--ink3)}
[data-theme="light"] .cfg-card-sub{color:var(--ink2)}
[data-theme="light"] .td-s{color:var(--ink3)}
[data-theme="light"] thead th{color:var(--ink2)}
[data-theme="light"] .empty{color:var(--ink2)}
[data-theme="light"] .comp-sub{color:var(--ink2)}
[data-theme="light"] .upd-changelog{color:var(--ink2)}
[data-theme="light"] .ibox h4{color:var(--ink2)}
[data-theme="light"] .tab{background:var(--surface2);color:var(--ink2)}
[data-theme="light"] .tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
[data-theme="light"] .mh-ttl{color:var(--ink)}
[data-theme="light"] .mh-x{color:var(--ink2)}
[data-theme="light"] .mh-x:hover{background:var(--surface2);color:var(--ink)}
[data-theme="light"] .a-ok{background:#dcfce7;border-color:#86efac;color:#14532d}
[data-theme="light"] .a-err{background:#fee2e2;border-color:#fca5a5;color:#7f1d1d}
[data-theme="light"] .a-warn{background:#fef3c7;border-color:#fde68a;color:#78350f}
[data-theme="light"] .a-info{background:#dbeafe;border-color:#93c5fd;color:#1e3a8a}
[data-theme="light"] .b-ghost{background:transparent;color:var(--ink2);border-color:var(--border2)}
[data-theme="light"] .b-ghost:hover{background:#edf1f7;color:var(--ink)}
[data-theme="light"] 
[data-theme="light"] 
[data-theme="light"] .ni{color:var(--ink2)}
[data-theme="light"] .ni:hover{background:var(--surface2);color:var(--ink)}
[data-theme="light"] .ni.on{background:var(--red-l);color:var(--red);border-color:rgba(29,78,216,.2)}
[data-theme="light"] .sb{background:#f8fafd;border-right-color:var(--border)}
[data-theme="light"] .sb-logo{}
[data-theme="light"] 
[data-theme="light"] .upill{background:var(--surface2)}
[data-theme="light"] .upill:hover{background:#e8eef5}
[data-theme="light"] .uname{color:var(--ink)}
[data-theme="light"] .cfg-card:hover{background:#edf1f7}
[data-theme="light"] .theme-toggle-wrap{background:var(--surface2)}
[data-theme="light"] .theme-btn{color:var(--ink2)}
[data-theme="light"] .theme-btn.active{background:#fff;color:var(--ink)}
[data-theme="light"] .kcard{background:var(--surface2)}
[data-theme="light"] .kcard-label{color:var(--ink2)}
[data-theme="light"] 
[data-theme="light"] .comp-btn:hover{background:var(--surface2)}
[data-theme="light"] .ir:hover{background:var(--surface2)}
[data-theme="light"] .login-sub{color:var(--ink2)}
[data-theme="light"] .tw{color:var(--ink)}
[data-theme="light"] td{color:var(--ink2)}
[data-theme="light"] .br{background:var(--danger-l);color:var(--danger)}
[data-theme="light"] .br::before{background:var(--danger)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:14px;min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ── LAYOUT ── */
.app{display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sb{width:220px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;height:100vh;z-index:100;overflow-y:auto}
.sb-logo{padding:22px 18px 18px}
.logo-row{display:flex;align-items:center;gap:9px}
.logo-ico{width:32px;height:32px;background:linear-gradient(135deg,var(--red),#60a5fa);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 16px rgba(37,99,235,.4)}
.logo-txt{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;font-weight:800;font-size:18px;color:var(--ink)}
.logo-txt span{color:var(--red)}
.logo-ver{font-size:9px;color:var(--ink3);letter-spacing:1.5px;text-transform:uppercase;margin-top:4px}
.cfg-card{display:flex;align-items:center;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:background .15s,border-color .15s}
.cfg-card:hover{background:var(--surface2);border-color:var(--border2)}
.cfg-card-info{flex:1;min-width:0}
.cfg-card-title{font-size:13px;font-weight:700;color:var(--ink)}
.cfg-card-sub{font-size:11px;color:var(--ink3);margin-top:2px}
/* UPDATE */


@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}50%{box-shadow:0 0 0 4px rgba(34,197,94,.1)}}
.upd-dot{width:7px;height:7px;background:var(--green);border-radius:50%;flex-shrink:0;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.upd-changelog{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;max-height:200px;overflow-y:auto;font-size:11px;color:var(--ink2);line-height:1.7;margin:12px 0}
.sb-nav{padding:14px 10px;flex:1}
.nl{font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink3);padding:0 10px;margin:14px 0 4px;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif}
.nl:first-child{margin-top:0}
.ni{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--ink2);transition:all .15s;font-size:13px;font-weight:600;margin-bottom:1px;user-select:none;position:relative;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif}
.ni:hover{background:var(--surface);color:var(--ink)}
.ni.on{background:var(--red-l);color:var(--red);border:1px solid rgba(37,99,235,.25)}
.ni .ic{font-size:14px;width:16px;text-align:center}
.ms{font-family:'Material Symbols Rounded';font-size:17px;font-weight:400;line-height:1;font-style:normal;letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;word-wrap:normal;direction:ltr;width:18px;text-align:center;vertical-align:middle;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}


.upill{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);border-radius:7px;cursor:pointer;transition:background .15s}
.upill:hover{background:var(--surface2)}
.uav{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--red),#60a5fa);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;color:#fff;flex-shrink:0}
.uname{font-size:12px;font-weight:700;color:var(--ink)}
.urole{font-size:10px;color:var(--ink3)}

/* ── MAIN ── */
.main{margin-left:220px;flex:1;min-height:100vh;padding-top:72px}
.page{display:none;padding:28px 30px;animation:fu .22s ease}
.page.on{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── PAGE HEADER ── */
.ph{margin-bottom:24px}
.ph-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ph-ttl{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.3px;color:var(--ink)}
.ph-ttl em{color:var(--red);font-style:normal}
.ph-sub{color:var(--ink3);margin-top:2px;font-size:12px}
.ph-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── STATS ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.sc{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;cursor:default}
.sc:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.sc-ico{font-size:20px}
.sc-tag{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:20px}
.sc-val{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.3px;color:var(--ink)}
.sc-lbl{font-size:11px;font-weight:500;color:var(--ink3);margin-top:3px;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif}
.sc.c1 .sc-ico,.sc.c1 .sc-val{color:var(--blue)}
.sc.c2 .sc-ico,.sc.c2 .sc-val{color:var(--purple)}
.sc.c3 .sc-ico,.sc.c3 .sc-val{color:var(--green)}
.sc.c4 .sc-ico,.sc.c4 .sc-val{color:var(--amber)}
.sc::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px}
.sc.c1::before{background:var(--blue)}.sc.c2::before{background:var(--purple)}.sc.c3::before{background:var(--green)}.sc.c4::before{background:var(--amber)}

/* ── CARD ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--sh)}
.card+.card{margin-top:16px}
.ch{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg3)}
.ch-ttl{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;font-weight:700;font-size:14px;color:var(--ink)}


.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.g2>.card{height:100%;box-sizing:border-box}
.g2>.card+.card{margin-top:0}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* ── FORMS ── */
.fg{margin-bottom:14px}
.fr{display:grid;gap:10px}
.fr.c2{grid-template-columns:1fr 1fr}
.fr.c3{grid-template-columns:1fr 1fr 1fr}
.fr.c4{grid-template-columns:1fr 1fr 1fr 1fr}
label{display:block;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink2);margin-bottom:5px}
input,select,textarea{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:7px;padding:8px 11px;color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:13px;font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-l);background:var(--bg2)}
input::placeholder,textarea::placeholder{color:var(--ink3);font-weight:400}
select{cursor:pointer}
select option{background:var(--bg2)}
textarea{resize:vertical;min-height:68px}
.pfx{position:relative}.pfx .ps{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--red);font-weight:700;font-size:12px;pointer-events:none;font-family:Consolas,monospace}
.pfx input{padding-left:32px}
.sfx{position:relative}.sfx .ss{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:11px;pointer-events:none}
.sfx input{padding-right:30px}
.field-hint{font-size:10px;color:var(--ink3);margin-top:3px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:7px;border:none;cursor:pointer;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:12px;font-weight:700;transition:all .15s;white-space:nowrap;text-decoration:none}
.b-red{background:var(--red);color:#fff}.b-red:hover{background:var(--red-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.35)}
.b-blue{background:var(--blue);color:#fff}.b-blue:hover{background:#2563eb;transform:translateY(-1px)}
.b-green{background:var(--green);color:#fff}.b-green:hover{background:#16a34a;transform:translateY(-1px)}
.b-amber{background:var(--amber);color:#fff}.b-amber:hover{background:#d97706;transform:translateY(-1px)}

.b-ghost{background:transparent;color:var(--ink2);border:1.5px solid var(--border)}.b-ghost:hover{background:var(--surface2);color:var(--ink);border-color:var(--border2)}
.b-danger{background:var(--danger);color:#fff;border:none}.b-danger:hover{background:#dc2626;transform:translateY(-1px)}
.b-sm{padding:5px 10px;font-size:11px;gap:4px}
.b-xs{padding:5px 12px;font-size:11px;gap:4px}
.tw thead th{text-align:center!important}.tw tbody td{text-align:center}
.b-full{width:100%;justify-content:center;padding:10px}


/* ── TABLE ── */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;padding:9px 14px;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--border);background:var(--bg3);white-space:nowrap}
tbody tr{border-bottom:1px solid rgba(45,55,72,.6);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--bg3)}
td{padding:11px 14px;vertical-align:middle;font-size:13px}
.td-m{font-weight:700;color:var(--ink)}
.td-s{font-size:11px;color:var(--ink3);margin-top:1px}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap}
.badge::before{content:'';width:4px;height:4px;border-radius:50%;flex-shrink:0}
.obs-tip{cursor:default;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.bg{background:var(--green-l);color:var(--green)}.bg::before{background:var(--green)}
.br{background:var(--danger-l);color:var(--danger)}.br::before{background:var(--danger)}
.bw{background:var(--amber-l);color:var(--amber)}.bw::before{background:var(--amber)}


.bp{background:var(--purple-l);color:var(--purple)}.bp::before{background:var(--purple)}
.bc{background:var(--cyan-l);color:var(--cyan)}.bc::before{background:var(--cyan)}

/* ── MONO ── */
.mn{font-family:Consolas,monospace;font-size:12px}

/* ── ALERT ── */
.alert{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:7px;margin-bottom:14px;font-size:12px;font-weight:700;border:1px solid;animation:fu .2s}
.a-ok{background:#14532d;border-color:#22c55e;color:#86efac}
.a-err{background:#7f1d1d;border-color:#2563eb;color:#fca5a5}
.a-warn{background:#78350f;border-color:#f59e0b;color:#fde68a}
#al-emp .alert{margin-bottom:0}

hr{border:none;border-top:1px solid var(--border);margin:16px 0}

/* ── SEARCH ── */
.sw{position:relative}.sw input{padding-left:30px}
.sw::before{content:'search';font-family:'Material Symbols Rounded';font-size:15px;position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink3);font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20}

/* ── EMPTY ── */
.empty{text-align:center;padding:44px 20px;color:var(--ink3)}
.ei{font-size:32px;margin-bottom:10px;opacity:.4}
.et{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;font-size:13px;color:var(--ink2);margin-bottom:4px}

/* ── MODAL ── */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;padding:16px}
.ov.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;width:100%;max-width:520px;box-shadow:var(--sh2);animation:fu .2s;max-height:92vh;overflow-y:auto}
.modal.w600{max-width:600px}.modal.w700{max-width:700px}.modal.w800{max-width:800px}
.mh{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:1}
.mh-ttl{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:6px}
.mh-ttl .ms{font-size:18px;color:var(--ink);flex-shrink:0}
.mh-x{background:none;border:none;cursor:pointer;font-size:16px;color:var(--ink3);padding:3px 6px;border-radius:5px;transition:all .15s}
.mh-x:hover{background:var(--surface);color:var(--ink)}
.mb{padding:20px}

/* ── INFO BOX ── */
.ibox{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:14px}
.ibox h4{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.irow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.irow:last-child{border-bottom:none}
.irow-lbl{font-size:12px;color:var(--ink2)}
.irow-val{font-family:Consolas,monospace;font-size:13px;font-weight:600;color:var(--ink)}

/* ── TABS ── */
.tabs{display:flex;gap:4px;background:var(--bg3);padding:4px;border-radius:10px;margin-bottom:18px}
.tab{flex:1;text-align:center;padding:8px 12px;border-radius:7px;cursor:pointer;font-size:11px;font-weight:700;color:var(--ink3);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.3px}
.tab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tab .ms{font-size:15px}

/* ── PROGRESS ── */
.prog{background:var(--bg3);border-radius:4px;height:4px;overflow:hidden;margin-top:6px}
.pf{height:100%;border-radius:4px;transition:width .5s}

/* ── AVATAR ── */
.av{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;color:#fff;flex-shrink:0}

/* ── RECEIPT PRINT ── */
@media print {
  @page { margin: 0; }
  .sb,.ph-acts,.btn,.mh-x,.no-print{display:none!important}
  .main{margin:0!important}
  .page{display:none!important}
  .page.on{display:block!important;padding:20px!important}
  body{background:#fff!important;color:#000!important}
  .card{border:1px solid #ccc!important;box-shadow:none!important;background:#fff!important}
  .receipt-area{display:block!important}
}
.receipt-area{display:none}

/* ── KPI CARD ── */
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;position:relative;overflow:hidden}
.kcard-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink3);margin-bottom:8px;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif}
.kcard-val{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.5px}
.kcard-sub{font-size:11px;color:var(--ink3);margin-top:4px}

/* ── INSTALLMENT ROW ── */
.ir{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(45,55,72,.5);transition:background .1s}
.ir:last-child{border-bottom:none}
.ir:hover{background:var(--bg3)}
.ir-num{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0;font-family:Consolas,monospace}

/* ── MOBILE TOPBAR ── */

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999}
.login-box{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:36px 40px;width:100%;max-width:380px;box-shadow:var(--sh2)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo .logo-ico{width:52px;height:52px;margin:0 auto 12px;border-radius:12px;font-size:26px}
.login-title{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;font-weight:800;font-size:24px;color:var(--ink)}
.login-sub{font-size:12px;color:var(--ink3);margin-top:4px}

/* ── THEME TOGGLE ── */
.theme-toggle-wrap{display:flex;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:4px}
.theme-btn{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:7px;border:none;cursor:pointer;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:12px;font-weight:700;color:var(--ink2);background:transparent;transition:all .18s}
.theme-btn .ms{font-size:16px}
.theme-btn.active{background:var(--surface2);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.theme-btn:hover:not(.active){color:var(--ink)}
[data-theme="light"] .theme-btn.active{box-shadow:0 1px 4px rgba(0,0,0,.1)}
/* ── COMPROVANTES ── */
.comp-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;text-align:left;transition:all .15s;width:100%}
.comp-btn:hover{background:var(--surface2);border-color:var(--border2);transform:translateY(-1px)}
.comp-ico{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.comp-ico .ms{font-size:18px;color:#fff}
.comp-lbl{font-size:13px;font-weight:700;color:var(--ink);display:block}
.comp-sub{font-size:10px;color:var(--ink3);display:block;margin-top:1px}

/* ── NUMBER SPINNER ── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface2);
  border-left: 1px solid var(--border);
  border-radius: 0 6px 6px 0;
  width: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  opacity: 1;
}
input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button:hover,
input[type=number]::-webkit-inner-spin-button:hover {
  background: var(--border2);
}

  /* ===== TOPBAR GLOBAL ===== */
  #main-topbar {
    position: fixed;
    top: 0;
    left: 220px;
    right: 0;
    height: 72px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    z-index: 150;
    box-shadow: var(--sh);
  }
  .topbar-left {
    font-family: Trebuchet MS, Segoe UI, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink3);
  }
  .topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .topbar-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    position: relative;
    transition: all .15s;
    flex-shrink: 0;
  }
  .topbar-btn:hover { background: var(--surface2); color: var(--ink); }
  .topbar-btn .ms { font-size: 18px; }
  .notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: #ef4444;
    border-radius: 8px;
    border: 2px solid var(--bg2);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    font-family: 'Segoe UI', system-ui, sans-serif;
    line-height: 1;
    padding: 0 3px;
    pointer-events: none;
    letter-spacing: 0;
  }
  .topbar-user { position: relative; }
  .topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    padding: 5px 10px 5px 6px;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: all .15s;
  }
  .topbar-user-btn:hover { background: var(--surface2); }
  .topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--red), #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    color: #fff;
    flex-shrink: 0;
  }
  .topbar-uname { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--sh2);
    min-width: 210px;
    z-index: 9000;
    animation: fu .15s ease;
  }
  .user-dropdown.open { display: block; }
  .user-dropdown-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
  }
  .user-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
  .user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink2);
    text-align: left;
    transition: background .12s;
  }
  .user-dropdown-item:hover { background: var(--surface2); color: var(--ink); }
  .user-dropdown-item.dd-danger { color: var(--red); }
  .user-dropdown-item.dd-danger:hover { background: var(--red-l); }
  .user-dropdown-item .ms { font-size: 17px; }
  .user-dropdown-footer { padding: 4px 0 6px; }


  

  

#ov-cobrar-total .ct-modal{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  width:100%;max-width:500px;box-shadow:var(--sh2);
  animation:fu .2s;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
}
#ov-cobrar-total .ct-header{
  flex-shrink:0;padding:16px 20px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
#ov-cobrar-total .ct-header-left{display:flex;align-items:center;gap:10px}
#ov-cobrar-total .ct-header-icon{
  width:32px;height:32px;background:var(--red);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(37,99,235,.35);flex-shrink:0;
}
#ov-cobrar-total .ct-header-info{}
#ov-cobrar-total .ct-header-title{font-size:15px;font-weight:700;color:var(--ink);font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif}
#ov-cobrar-total .ct-header-sub{font-size:12px;color:var(--ink3);font-weight:500;margin-top:1px}
#ov-cobrar-total .ct-close{
  background:none;border:none;cursor:pointer;width:28px;height:28px;border-radius:5px;
  color:var(--ink3);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .15s;
}
#ov-cobrar-total .ct-close:hover{background:var(--surface);color:var(--ink)}
/* Abas pill-style */
#ov-cobrar-total .ct-tabs{
  flex-shrink:0;padding:10px 16px;background:var(--bg2);
  border-bottom:1px solid var(--border);display:flex;gap:6px;
}
#ov-cobrar-total .ct-tab{
  display:flex;align-items:center;gap:5px;padding:6px 14px;
  border-radius:20px;border:1.5px solid transparent;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--ink3);background:var(--surface);
  transition:all .18s;
}
#ov-cobrar-total .ct-tab:hover{color:var(--ink);border-color:var(--border2)}
#ov-cobrar-total .ct-tab.on{
  background:var(--red-l);color:var(--red);border-color:rgba(37,99,235,.25);
}
#ov-cobrar-total .ct-tab .ms{font-size:14px}
#ov-cobrar-total .ct-badge{
  background:#00b386;color:#fff;border-radius:10px;
  font-size:10px;font-weight:700;padding:1px 6px;min-width:18px;text-align:center;
}
/* Lista */
#ov-cobrar-total .ct-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#ov-cobrar-total .ct-lista{flex:1;min-height:0;overflow-y:auto;padding:10px 14px 8px;display:flex;flex-direction:column;gap:5px}
/* Cabeçalho de contrato */
#ov-cobrar-total .ct-contrato-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 4px 5px;margin-bottom:1px;
}
#ov-cobrar-total .ct-contrato-lbl{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px;
}
#ov-cobrar-total .ct-contrato-dot{width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.7}
/* Card de parcela */
#ov-cobrar-total .ct-card{
  display:flex;align-items:stretch;gap:0;
  border-radius:8px;background:var(--surface);border:1px solid var(--border);
  transition:border-color .15s,background .15s,box-shadow .15s;cursor:pointer;overflow:hidden;
  min-height:46px;position:relative;
}
#ov-cobrar-total .ct-card:hover{border-color:var(--border2);background:var(--surface2);box-shadow:0 2px 8px rgba(0,0,0,.06)}
#ov-cobrar-total .ct-card.ct-checked{border-color:rgba(37,99,235,.3);background:var(--red-l);box-shadow:0 2px 8px rgba(37,99,235,.08)}
#ov-cobrar-total .ct-card.ct-atrasada{border-color:rgba(239,68,68,.4)}
#ov-cobrar-total .ct-card.ct-atrasada.ct-checked{border-color:rgba(239,68,68,.6);background:var(--danger-l);box-shadow:0 2px 8px rgba(239,68,68,.1)}
#ov-cobrar-total .ct-card.ct-hoje{border-color:rgba(245,158,11,.4)}
#ov-cobrar-total .ct-card.ct-hoje.ct-checked{border-color:rgba(245,158,11,.6);background:var(--amber-l);box-shadow:0 2px 8px rgba(245,158,11,.1)}
/* Barra colorida lateral esquerda por status */
#ov-cobrar-total .ct-card-stripe{
  width:3px;min-width:3px;flex-shrink:0;background:var(--border);
  transition:background .15s;align-self:stretch;
}
#ov-cobrar-total .ct-card.ct-atrasada .ct-card-stripe{background:var(--danger)}
#ov-cobrar-total .ct-card.ct-hoje .ct-card-stripe{background:var(--amber)}
#ov-cobrar-total .ct-card.ct-checked .ct-card-stripe{background:var(--red)}
#ov-cobrar-total .ct-card.ct-atrasada.ct-checked .ct-card-stripe{background:var(--danger)}
#ov-cobrar-total .ct-card.ct-hoje.ct-checked .ct-card-stripe{background:var(--amber)}
/* Checkbox lateral */
#ov-cobrar-total .ct-card-check{
  width:40px;min-width:40px;display:flex;align-items:center;justify-content:center;
  align-self:stretch;background:transparent;transition:background .15s;
}
#ov-cobrar-total .ct-card.ct-checked .ct-card-check{background:rgba(37,99,235,.05)}
#ov-cobrar-total .ct-card.ct-atrasada.ct-checked .ct-card-check{background:rgba(239,68,68,.05)}
#ov-cobrar-total .ct-card.ct-hoje.ct-checked .ct-card-check{background:rgba(245,158,11,.05)}
/* Conteúdo central */
#ov-cobrar-total .ct-card-body{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:0 10px 0 6px;min-width:0;
}
#ov-cobrar-total .ct-card-left{display:flex;align-items:center;gap:8px;min-width:0}
#ov-cobrar-total .ct-card-num{
  font-size:11px;font-weight:700;color:var(--ink2);white-space:nowrap;
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  padding:2px 6px;line-height:1;
}
#ov-cobrar-total .ct-card.ct-checked .ct-card-num{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.2);color:var(--red)}
#ov-cobrar-total .ct-card.ct-atrasada.ct-checked .ct-card-num{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:var(--danger)}
#ov-cobrar-total .ct-card.ct-hoje.ct-checked .ct-card-num{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3);color:var(--amber)}
#ov-cobrar-total .ct-card-sep{width:1px;height:14px;background:var(--border);flex-shrink:0}
/* Input valor */
#ov-cobrar-total .ct-card-val{
  display:flex;align-items:center;gap:3px;
  border-left:1px solid var(--border);padding:0 12px;align-self:stretch;
  background:transparent;min-width:115px;transition:background .12s;
}
#ov-cobrar-total .ct-card-val:focus-within{background:var(--surface2)}
/* Paginação de contratos */
#ov-cobrar-total .ct-pager{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 2px 4px;gap:8px;
}
#ov-cobrar-total .ct-pager-info{text-align:center;flex:1}
#ov-cobrar-total .ct-pager-title{font-size:11px;font-weight:700;color:var(--ink)}
#ov-cobrar-total .ct-pager-sub{font-size:10px;color:var(--ink3);margin-top:1px}
#ov-cobrar-total .ct-pager-btn{
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:var(--ink2);transition:all .12s;flex-shrink:0;
}
#ov-cobrar-total .ct-pager-btn:hover:not(:disabled){background:var(--surface2);border-color:var(--border2);color:var(--ink)}
#ov-cobrar-total .ct-pager-btn:disabled{opacity:.25;cursor:default}
/* Rodapé */
#ov-cobrar-total .ct-footer{
  flex-shrink:0;padding:12px 14px 16px;border-top:1px solid var(--border);background:var(--bg2);
}
#ov-cobrar-total .ct-footer-summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-radius:9px;
  background:linear-gradient(135deg,rgba(0,179,134,.07) 0%,rgba(0,179,134,.03) 100%);
  border:1px solid rgba(0,179,134,.2);margin-bottom:10px;
}
#ov-cobrar-total .ct-footer-left{display:flex;flex-direction:column;gap:2px}
#ov-cobrar-total .ct-footer-count{font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.6px}
#ov-cobrar-total .ct-total-val{font-size:20px;font-weight:800;color:#00b386;letter-spacing:-.3px;line-height:1.1}
#ov-cobrar-total .ct-footer-icon{
  width:36px;height:36px;border-radius:8px;
  background:rgba(0,179,134,.12);
  display:flex;align-items:center;justify-content:center;color:#00b386;
}
#ov-cobrar-total .ct-btn-pix{
  width:100%;padding:11px 15px;border-radius:8px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#00b386 0%,#009970 100%);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 3px 12px rgba(0,179,134,.35);transition:all .18s;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;letter-spacing:.1px;
}
#ov-cobrar-total .ct-btn-pix:hover{background:linear-gradient(135deg,#00c799 0%,#00b386 100%);transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,179,134,.45)}
#ov-cobrar-total .ct-btn-pix:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,179,134,.3)}
#ov-cobrar-total .ct-btn-pix .ms{font-size:16px}
/* Aba links */
#ov-cobrar-total .ct-links-panel{flex:1;min-height:0;overflow-y:auto;padding:0;display:flex;flex-direction:column}


/* ============================================================= */
/* CLASSES REFATORADAS — centralizadas a partir dos estilos inline */
/* ============================================================= */

/* --- Tela de Loading / Splash --- */
.setup-screen {
  display:none;
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:1000;
  overflow-y:auto;
  align-items:flex-start;
  justify-content:center;
  padding:24px 12px;
}

.spinner-red {
  width:34px;
  height:34px;
  border:3px solid var(--border);
  border-top-color:var(--red);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

.splash-icon {
  font-size:72px;
  color:var(--red);
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.splash-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
}

.splash-screen {
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:20px;
}


/* --- Setup / Instalação --- */
.brand-name-green {
  font-family:'Trebuchet MS',sans-serif;
  font-weight:900;
  font-size:13px;
  color:var(--green);
}

.brand-title {
  font-family:'Trebuchet MS',Segoe UI,Arial,sans-serif;
  font-weight:800;
  font-size:17px;
  color:var(--ink);
  letter-spacing:-.2px;
}

.info-box-green {
  font-size:11px;
  color:var(--ink3);
  margin-bottom:16px;
  padding:10px 12px;
  background:rgba(34,197,94,.06);
  border:1px solid rgba(34,197,94,.2);
  border-radius:8px;
  line-height:1.8;
}

.info-box-green-mb14 {
  font-size:11px;
  color:var(--ink3);
  margin-bottom:14px;
  line-height:1.7;
  padding:10px 12px;
  background:rgba(34,197,94,.06);
  border:1px solid rgba(34,197,94,.2);
  border-radius:8px;
}

.info-box-purple {
  font-size:11px;
  color:var(--ink3);
  margin-bottom:16px;
  padding:10px 12px;
  background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.2);
  border-radius:8px;
  line-height:1.8;
}

.info-box-red {
  font-size:11px;
  color:var(--ink3);
  margin-bottom:16px;
  padding:10px 12px;
  background:rgba(239,68,68,.06);
  border:1px solid rgba(239,68,68,.15);
  border-radius:8px;
  line-height:1.5;
}

.setup-card {
  width:100%;
  max-width:480px;
  margin:auto;
}

.setup-card-body {
  padding:32px 28px;
  max-width:none;
}

.setup-step-active {
  flex:1;
  height:4px;
  border-radius:4px;
  background:var(--red);
  transition:background .3s;
}

.setup-steps {
  display:flex;
  gap:6px;
  margin-bottom:24px;
}

.step-icon-amber {
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(245,158,11,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.step-icon-blue {
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(59,130,246,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.step-icon-dark {
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.step-icon-green {
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(34,197,94,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}


/* --- Modais --- */
.modal-body-pad {
  padding:20px 24px;
}

.modal-body-text {
  font-size:13px;
  color:var(--ink2);
  line-height:1.8;
  margin:0 0 20px;
}

.modal-box {
  max-width:460px;
  padding:0;
  overflow:hidden;
}

.modal-box-lg {
  max-width:640px;
  padding:0;
  overflow:hidden;
}

.modal-feature-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:24px;
}

.modal-footer {
  padding:12px 20px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:flex-end;
  gap:8px;
  background:var(--bg2);
}

.modal-footer-alt {
  padding:12px 24px 20px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
  border-top:1px solid var(--border);
}

.modal-header-body {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.modal-header-dark {
  background:linear-gradient(135deg,#1a1a2e,#0f3460);
  padding:24px 28px 20px;
  text-align:center;
  position:relative;
}

.modal-header-glow-red {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 60% 20%,rgba(239,68,68,.18),transparent 60%);
}

.modal-header-pad {
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
}

.modal-header-sticky {
  padding:12px 16px 10px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  background:var(--surface2);
  z-index:1;
}

.modal-icon-box-red {
  width:56px;
  height:56px;
  background:rgba(239,68,68,.15);
  border:2px solid rgba(239,68,68,.3);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.modal-icon-red {
  font-size:30px;
  color:var(--red);
  line-height:1;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal-overlay-top {
  display:none;
  z-index:5000;
}

.modal-subtitle {
  font-size:11px;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:.5px;
}

.modal-title {
  font-size:19px;
  font-weight:800;
  color:#fff;
  margin-bottom:2px;
}

.print-doc {
  background:#fff;
  border-radius:2px;
  box-shadow:0 4px 32px rgba(0,0,0,.3);
  overflow:hidden;
}

.print-preview-body {
  padding:20px;
  max-height:78vh;
  overflow-y:auto;
  background:#d1d5db;
}


/* --- Dropdowns & Menus --- */
.autocomplete-dropdown-abs {
  display:none;
  position:absolute;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:7px;
  max-height:160px;
  overflow-y:auto;
  z-index:9999;
  width:100%;
  margin-top:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

.autocomplete-list {
  display:none;
  margin-top:6px;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:8px;
  overflow:hidden;
  max-height:150px;
  overflow-y:auto;
}

.context-menu-md {
  display:none;
  position:fixed;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.7);
  z-index:9999;
  width:320px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
}

.context-menu-sm {
  display:none;
  position:fixed;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.7);
  z-index:9999;
  width:260px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
}

.dropdown-header {
  padding:12px 16px 10px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:12px 12px 0 0;
  background:var(--surface2);
}

.dropdown-panel {
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.7);
  z-index:9999;
  width:360px;
}


/* --- Cards & Seções --- */
.alert-amber {
  display:none;
  font-size:12px;
  color:var(--amber);
  background:rgba(245,158,11,.08);
  border:1.5px solid rgba(245,158,11,.35);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:12px;
  line-height:1.8;
}

.alert-cyan {
  display:none;
  margin-bottom:10px;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(6,182,212,.08);
  border:1px solid rgba(6,182,212,.25);
  align-items:center;
  gap:8px;
}

.alert-green {
  display:none;
  font-size:11px;
  padding:8px 12px;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.25);
  border-radius:8px;
  margin-bottom:10px;
  color:var(--green);
}

.card-blue-soft {
  background:rgba(37,99,235,.07);
  border:1px solid rgba(37,99,235,.25);
  border-radius:10px;
  padding:14px 16px;
}

.card-cyan-row {
  background:rgba(6,182,212,.06);
  border:1px solid rgba(6,182,212,.18);
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.card-cyan-soft {
  background:rgba(6,182,212,.07);
  border:1px solid rgba(6,182,212,.2);
  border-radius:10px;
  padding:14px 16px;
}

.card-min320-overflow {
  min-height:320px;
  margin-top:0!important;
  overflow:visible;
}

.card-status-amber {
  background:rgba(245,158,11,.08);
  border:1.5px solid rgba(245,158,11,.35);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:16px;
}

.card-status-green {
  background:rgba(34,197,94,.08);
  border:1.5px solid rgba(34,197,94,.35);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:12px;
}

.card-surface-mb18 {
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:10px;
  padding:16px;
  margin-bottom:18px;
}

.feature-icon-amber {
  font-size:20px;
  color:var(--amber);
  flex-shrink:0;
}

.feature-icon-blue {
  font-size:20px;
  color:var(--blue);
  flex-shrink:0;
}

.feature-icon-green {
  font-size:20px;
  color:var(--green);
  flex-shrink:0;
}

.feature-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:8px;
}

.feature-item-amber {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.15);
  border-radius:8px;
}

.feature-item-blue {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.15);
  border-radius:8px;
}

.feature-item-green {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:rgba(34,197,94,.06);
  border:1px solid rgba(34,197,94,.15);
  border-radius:8px;
}

.info-card-sm {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  margin-bottom:10px;
}

.info-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
}

.inline-tip {
  margin:16px 24px 0;
  padding:12px 14px;
  border-radius:8px;
  background:rgba(37,99,235,.07);
  border:1px solid rgba(37,99,235,.25);
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.kcard-label {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--ink3);
  margin-bottom:10px;
}

.kpi-row-card {
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:10px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.kpi-row-label {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--ink3);
}

.list-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
}

.log-box {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-size:11px;
  color:var(--ink2);
  max-height:160px;
  overflow-y:auto;
  white-space:pre-wrap;
  line-height:1.5;
  margin-bottom:14px;
  font-family:inherit;
}

.notif-header {
  padding:12px 16px 10px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.pix-key-box {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  font-size:10px;
  color:var(--ink3);
  word-break:break-all;
  text-align:left;
  max-height:60px;
  overflow-y:auto;
  margin-bottom:14px;
  font-family:'DM Mono',monospace;
}

.pix-key-display {
  font-size:26px;
  font-weight:800;
  color:var(--green);
  font-family:'DM Mono',monospace;
  margin-bottom:16px;
}

.qrcode-img {
  border-radius:8px;
  border:1px solid var(--border);
  width:200px;
  height:200px;
  image-rendering:pixelated;
}

.tile-btn-blue {
  background:rgba(59,130,246,.12);
  color:var(--blue);
  border:1px solid rgba(59,130,246,.25);
  padding:12px;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.tile-btn-green {
  background:rgba(34,197,94,.12);
  color:var(--green);
  border:1px solid rgba(34,197,94,.25);
  padding:12px;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:20px;
}


/* --- Formulários & Inputs --- */
.field-label {
  font-size:12px;
  font-weight:600;
  color:var(--ink2);
  display:block;
  margin-bottom:6px;
}

.form-label {
  font-size:11px;
  font-weight:700;
  color:var(--ink2);
  display:block;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.input-btn-right {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink3);
  padding:0;
  display:flex;
  align-items:center;
}

.input-clear-btn {
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  color:var(--ink3);
  font-size:18px;
  user-select:none;
}

.input-clear-btn-anim {
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  color:var(--ink3);
  font-size:18px;
  user-select:none;
  transition:color .15s;
}

.input-clear-right {
  display:none;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color:var(--muted);
  padding:2px;
  line-height:1;
}

.input-full {
  width:100%;
  box-sizing:border-box;
}

.input-full-pr36 {
  width:100%;
  box-sizing:border-box;
  padding-right:36px;
}

.input-full-pr36-sm {
  width:100%;
  box-sizing:border-box;
  padding-right:36px;
  font-size:12px;
}

.input-full-sm {
  width:100%;
  box-sizing:border-box;
  font-size:12px;
}

.input-full-xs {
  width:100%;
  box-sizing:border-box;
  font-size:11px;
}

.input-full-xs-pr36 {
  width:100%;
  box-sizing:border-box;
  font-size:11px;
  padding-right:36px;
}

.input-icon-left {
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:15px;
  color:var(--ink3);
  pointer-events:none;
}

.input-with-icon-l {
  width:100%;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:8px;
  color:var(--ink);
  font-size:12px;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  padding:8px 32px 8px 34px;
  outline:none;
}

.select-arrow {
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--ink3);
  font-size:11px;
}

.select-arrow-r12 {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--ink3);
  font-size:12px;
}

.select-lg {
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:8px;
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  padding:10px 36px 10px 14px;
  cursor:pointer;
  outline:none;
}

.select-simple {
  width:100%;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:8px;
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  padding:8px 12px;
  cursor:pointer;
  outline:none;
}

.select-styled {
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:8px;
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  padding:8px 32px 8px 12px;
  cursor:pointer;
  outline:none;
}

.textarea-styled {
  width:100%;
  box-sizing:border-box;
  min-height:80px;
  resize:vertical;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  color:var(--ink);
  font-family:inherit;
  outline:none;
}

.toggle-input-hidden {
  opacity:0;
  width:0;
  height:0;
}

.toggle-thumb {
  position:absolute;
  left:3px;
  top:3px;
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
}

.toggle-track {
  position:absolute;
  inset:0;
  background:var(--border2);
  border-radius:22px;
  cursor:pointer;
  transition:.2s;
}

.toggle-wrap {
  position:relative;
  display:inline-block;
  width:40px;
  height:22px;
  flex-shrink:0;
}


/* --- Botões --- */
.btn-amber {
  background:var(--amber);
  color:#fff;
}

.btn-amber-solid {
  display:none;
  background:var(--amber);
  color:#111;
  font-weight:700;
}

.btn-blue {
  background:var(--blue);
  color:#fff;
}

.btn-centered-mb10 {
  cursor:pointer;
  justify-content:center;
  margin-bottom:10px;
}

.btn-centered-upper {
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.btn-centered-upper-click {
  cursor:pointer;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.btn-cyan {
  background:var(--cyan);
  color:#fff;
  border:none;
}

.btn-cyan-solid {
  background:var(--cyan);
  color:#fff;
  font-weight:700;
}

.btn-danger {
  background:rgba(220,0,50,.15);
  color:#ff4060;
  border:1px solid rgba(220,0,50,.35);
}

.btn-dashed {
  width:100%;
  border-style:dashed;
  color:var(--ink3);
}

.btn-emerald {
  background:#10b981;
  color:#fff;
}

.btn-filter {
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
  color:var(--ink);
  font-size:11px;
  font-weight:600;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  transition:all .15s;
}

.btn-filter-alt {
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
  color:var(--ink);
  font-size:11px;
  font-weight:600;
}

.btn-filter-amber {
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.35);
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
  color:var(--amber);
  font-size:11px;
  font-weight:600;
  flex-shrink:0;
}

.btn-ghost-xs {
  background:none;
  border:none;
  cursor:pointer;
  color:var(--muted);
  font-size:10px;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:5px;
}

.btn-ghost-xs-alt {
  background:none;
  border:none;
  cursor:pointer;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:5px;
}

.btn-icon-ghost {
  background:none;
  border:none;
  cursor:pointer;
  color:var(--muted);
  padding:0;
  line-height:1;
}

.btn-indigo {
  background:#4f46e5;
  color:#fff;
  font-weight:700;
}

.btn-note {
  font-weight:400;
  text-transform:none;
  font-size:10px;
  color:var(--ink3);
}

.btn-purple {
  background:#7c3aed;
  color:#fff;
  border:none;
}

.btn-purple-solid {
  background:#7c3aed;
  color:#fff;
}

.btn-spinner-13 {
  display:none;
  width:13px;
  height:13px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
  margin-right: 4px;
}

.btn-spinner-14 {
  display:none;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}

.btn-spinner-blue {
  display:none;
  width:13px;
  height:13px;
  border:2px solid var(--border2);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}

.btn-spinner-danger {
  display:none;
  width:13px;
  height:13px;
  border:2px solid rgba(255,96,96,.3);
  border-top-color:#ff4060;
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}

.btn-sublabel {
  text-transform:none;
  letter-spacing:0.5px;
  font-size:10px;
  margin-top:-2px;
  font-weight:400;
  white-space:nowrap;
}

.btn-whatsapp {
  background:#25D366;
  color:#fff;
}

.icon-btn-white {
  color:#fff;
  font-size:21px;
  width:auto;
  line-height:1;
}

.link-green {
  color:var(--green);
  font-weight:600;
  text-decoration:none;
}

.link-purple {
  color:#818cf8;
  font-weight:600;
  text-decoration:none;
}

.link-sm-muted {
  font-size:11px;
  color:var(--ink3);
  cursor:pointer;
  text-decoration:underline;
}

.seg-control {
  flex-shrink:0;
  width:130px;
  height:36px;
  background:var(--bg3);
  border:1.5px solid var(--border);
  border-radius:7px;
  cursor:pointer;
  overflow:hidden;
  user-select:none;
}


/* --- Indicadores / KPI --- */
.dash-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.kpi-label-cyan {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--cyan);
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:5px;
}

.kpi-label-cyan-sm {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--cyan);
  margin-bottom:2px;
}

.kpi-label-red {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--red);
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:5px;
}

.kpi-value-cyan {
  font-family:Consolas,monospace;
  font-size:22px;
  font-weight:800;
  color:var(--cyan);
}

.kpi-value-cyan-sm {
  font-family:Consolas,monospace;
  font-size:18px;
  font-weight:800;
  color:var(--cyan);
}

.kpi-value-mono {
  font-family:Consolas,monospace;
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}

.kpi-value-red {
  font-family:Consolas,monospace;
  font-size:22px;
  font-weight:800;
  color:var(--red);
}

.page-subtitle {
  font-size:14px;
  font-weight:600;
  color:var(--ink2);
}

.page-title {
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}


/* --- Layout & Grid --- */
.col-span-2 {
  grid-column:span 2;
}

.flex-ai-gap10 {
  display:flex;
  align-items:center;
  gap:10px;
}

.flex-ai-gap10-mb12 {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.flex-ai-gap7 {
  display:flex;
  align-items:center;
  gap:7px;
}

.flex-ai-gap8-mb16 {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}

.flex-ai-gap8-mb8 {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.flex-between {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.flex-between-gap12 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.flex-between-ov {
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:visible;
  border-radius: 12px 12px 0 0;
}

.flex-center {
  display:flex;
  align-items:center;
  justify-content:center;
}

.flex-center-gap8-mt16 {
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:16px;
}

.flex-center-mb16 {
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}

.flex-col {
  display:flex;
  flex-direction:column;
}

.flex-col-gap14 {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.flex-col-gap16 {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.flex-col-grow {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}

.flex-col-grow-hidden {
  display:none;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}

.flex-end-gap8 {
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.flex-end-mt14 {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:14px;
}

.flex-end-mt16 {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:16px;
}

.flex-end-mt4 {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:4px;
}

.flex-end-wrap {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.flex-gap8 {
  display:flex;
  gap:8px;
}

.flex-grow-min80 {
  min-height:80px;
  flex:1;
}

.flex-shrink-0 {
  flex-shrink:0;
}

.flex-wrap-center {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  justify-content:center;
}

.flex-wrap-center-gap6 {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}

.grid-1-auto-gap8 {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}

.grid-1-gap8 {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.grid-2-gap10 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.grid-2-gap10-mb10 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.grid-2-gap10-mb14 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}

.grid-2-gap10-mb20 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:20px;
}

.grid-2-gap10-py8 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:8px 0;
}

.grid-2-gap12-mb14 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}

.grid-2-gap12-mb20 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}

.grid-2-gap16 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  overflow:visible;
}

.grid-2-gap8-mb14 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:14px;
}

.grid-2-gap8-mb20 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:20px;
}

.grid-2-gap8-mb8 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:8px;
}

.grid-3-80-mb12 {
  display:grid;
  grid-template-columns:1fr 1fr 80px;
  gap:12px;
  margin-bottom:12px;
}

.grid-3-gap8-mt8 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:8px;
}

.grid-4-custom-mb20 {
  display:grid;
  grid-template-columns:1fr 1fr 60px 120px;
  gap:12px;
  margin-bottom:20px;
}

.grid-4-gap8-mb16 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:16px;
}

.grid-auto-220 {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}

.grid-gap8-mb8 {
  display:grid;
  gap:8px;
  margin-bottom:8px;
}

.hint-row-mt10 {
  margin-top:10px;
  font-size:11px;
  color:var(--ink3);
  display:flex;
  gap:16px;
}

.row-stretch-mb16 {
  margin-bottom:16px;
  align-items:stretch;
}

.step-bar {
  flex:1;
  height:4px;
  border-radius:4px;
  background:var(--border);
  transition:background .3s;
}

.text-11-semi-flex {
  font-size:11px;
  font-weight:600;
  flex:1;
  color:var(--ink);
}


/* --- Tipografia --- */
.badge-amber {
  background:var(--amber-l);
  color:var(--amber);
}

.badge-blue {
  background:var(--blue-l);
  color:var(--blue);
}

.badge-green {
  background:var(--green-l);
  color:var(--green);
}

.badge-purple {
  background:var(--purple-l);
  color:var(--purple);
}

.icon-13-mid {
  font-size:13px;
  vertical-align:middle;
}

.icon-16-muted {
  font-size:16px;
  color:var(--ink3);
}

.icon-16-muted-shrink {
  font-size:16px;
  color:var(--ink3);
  flex-shrink:0;
}

.icon-19-amber {
  font-size:19px;
  color:var(--amber);
}

.icon-19-cyan {
  font-size:19px;
  color:var(--cyan);
}

.icon-19-green {
  font-size:19px;
  color:var(--green);
}

.icon-19-purple {
  font-size:19px;
  color:var(--purple);
}

.icon-19-red {
  font-size:19px;
  color:var(--red);
}

.icon-19-telegram {
  font-size:19px;
  color:#0088cc;
}

.icon-box-amber {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(245,158,11,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-blue {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(37,99,235,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-blue-36 {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(59,130,246,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-blue-sm {
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(37,99,235,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-blue-sm-alt {
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(59,130,246,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-cyan-36 {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(6,182,212,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-green {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(34,197,94,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-purple-36 {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(168,85,247,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-red-36 {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(239,68,68,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-red-sm {
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(239,68,68,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-box-telegram {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(0,136,204,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon-chevron-auto {
  font-size:16px;
  color:var(--ink3);
  margin-left:auto;
}

.icon-hero-white {
  color:#fff;
  font-size:35px;
  width:auto;
  line-height:1;
}

.icon-lg-amber {
  font-size:20px;
  color:var(--amber);
}

.icon-lg-green {
  font-size:20px;
  color:var(--green);
}

.icon-lg-mr4 {
  font-size:18px;
  vertical-align:middle;
  margin-right:4px;
}

.icon-md-mid {
  font-size:15px;
  vertical-align:middle;
}

.icon-md-mr4 {
  font-size:15px;
  vertical-align:middle;
  margin-right:4px;
}

.icon-md-mr4-white {
  font-size:15px;
  vertical-align:middle;
  margin-right:4px;
  color:#fff;
}

.icon-md-mr5 {
  font-size:15px;
  vertical-align:middle;
  margin-right:5px;
}

.icon-md-mr6 {
  font-size:16px;
  vertical-align:middle;
  margin-right:6px;
}

.icon-md-mr6-mid {
  font-size:15px;
  vertical-align:middle;
  margin-right:6px;
}

.icon-sm {
  font-size:14px;
  vertical-align:middle;
}

.icon-sm-mr4 {
  font-size:14px;
  vertical-align:middle;
  margin-right:4px;
}

.icon-sm-mr4-amber {
  font-size:14px;
  vertical-align:middle;
  margin-right:4px;
  color:var(--amber);
}

.icon-sm-mr4-purple {
  font-size:14px;
  vertical-align:middle;
  margin-right:4px;
  color:#818cf8;
}

.icon-xl-green {
  font-size:50px;
  color:var(--green);
}

.icon-xl-mid {
  font-size:18px;
  vertical-align:middle;
}

.label-amber-caps {
  font-size:11px;
  font-weight:700;
  color:var(--amber);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.label-caps-sm {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ink3);
  margin-bottom:4px;
}

.micro-label {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--ink3);
  margin-bottom:4px;
}

.nowrap {
  white-space:nowrap;
}

.pin-display {
  flex:1;
  text-align:center;
  font-size:14px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
}

.section-divider-top {
  border-top:1px solid var(--border);
  margin-top:16px;
  padding-top:16px;
}

.section-heading-xs-mb10 {
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:10px;
}

.section-heading-xs-mb12 {
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:12px;
}

.section-heading-xs-mb8 {
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:8px;
}

.section-heading-xs-my {
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ink3);
  margin:14px 0 8px;
}

.section-label-mb10 {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:10px;
}

.section-label-mb12 {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ink3);
  margin-bottom:12px;
}

.section-label-mb8 {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:8px;
}

.section-label-xs {
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:8px;
}

.section-label-xs-mb10 {
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:10px;
}

.tag-list {
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.text-10-muted-mt2 {
  font-size:10px;
  color:var(--ink3);
  margin-top:2px;
}

.text-10-muted-mt4 {
  font-size:10px;
  color:var(--ink3);
  margin-top:4px;
}

.text-10-muted-mt8 {
  font-size:10px;
  color:var(--ink3);
  margin-top:8px;
  line-height:1.5;
}

.text-11-ink2-lh {
  font-size:11px;
  color:var(--ink2);
  line-height:1.7;
}

.text-11-muted {
  font-size:11px;
  color:var(--ink3);
}

.text-11-muted-center {
  font-size:11px;
  color:var(--ink3);
  text-align:center;
}

.text-11-muted-mb10 {
  font-size:11px;
  color:var(--ink3);
  margin-bottom:10px;
  line-height:1.6;
}

.text-11-muted-mb12 {
  font-size:11px;
  color:var(--ink3);
  margin-bottom:12px;
}

.text-11-muted-mt1 {
  font-size:11px;
  color:var(--ink3);
  margin-top:1px;
}

.text-11-muted-mt2 {
  font-size:11px;
  color:var(--ink3);
  margin-top:2px;
}

.text-11-muted-mt4 {
  font-size:11px;
  color:var(--ink3);
  margin-top:4px;
}

.text-11-muted-mt6 {
  font-size:11px;
  color:var(--ink3);
  margin-top:6px;
  line-height:1.6;
}

.text-11-semi-mt5 {
  font-size:11px;
  margin-top:5px;
  font-weight:600;
  color:var(--ink3);
}

.text-12 {
  font-size:12px;
}

.text-12-bold {
  font-size:12px;
  font-weight:700;
}

.text-12-bold-ink {
  font-size:12px;
  font-weight:700;
  color:var(--ink);
}

.text-12-bold-tracked {
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
}

.text-12-cyan-bold {
  font-size:12px;
  color:var(--cyan);
  font-weight:600;
}

.text-12-ink2-lh {
  font-size:12px;
  color:var(--ink2);
  line-height:1.6;
}

.text-12-muted {
  font-size:12px;
  color:var(--ink3);
}

.text-12-muted-mb10 {
  font-size:12px;
  color:var(--ink3);
  margin-bottom:10px;
  line-height:1.6;
}

.text-12-muted-mb14 {
  font-size:12px;
  color:var(--ink3);
  margin-bottom:14px;
}

.text-12-muted-mb20 {
  font-size:12px;
  color:var(--ink3);
  margin-bottom:20px;
}

.text-12-muted-mb4 {
  font-size:12px;
  color:var(--ink3);
  margin-bottom:4px;
}

.text-12-muted-mt8 {
  font-size:12px;
  color:var(--ink3);
  margin-top:8px;
  line-height:1.6;
}

.text-13 {
  font-size:13px;
}

.text-13-bold {
  font-size:13px;
  font-weight:700;
}

.text-13-bold-alt {
  font-weight:700;
  font-size:13px;
}

.text-13-bold-amber {
  font-size:13px;
  font-weight:700;
  color:var(--amber);
}

.text-13-bold-green {
  font-size:13px;
  font-weight:700;
  color:var(--green);
}

.text-13-bold-ink {
  font-weight:700;
  font-size:13px;
  color:var(--ink);
}

.text-13-bold-ink {
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}

.text-13-bold-mt10 {
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin-top:10px;
}

.text-13-semi-ink {
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}

.text-14 {
  font-size:14px;
}

.text-14-muted {
  font-size:14px;
  color:var(--muted);
}

.text-14-red {
  font-size:14px;
  color:var(--red);
}

.text-15 {
  font-size:15px;
}

.text-15-bold-mt12 {
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin-top:12px;
}

.text-15-muted {
  font-size:15px;
  color:var(--ink3);
}

.text-16-cyan {
  font-size:16px;
  color:var(--cyan);
}

.text-16-red {
  font-size:16px;
  color:var(--red);
}

.text-17-amber {
  font-size:17px;
  color:var(--amber);
}

.text-17-blue {
  font-size:17px;
  color:var(--blue);
}

.text-17-green {
  font-size:17px;
  color:var(--green);
}

.text-17-ink {
  font-size:17px;
  color:var(--ink);
}

.text-17-red {
  font-size:17px;
  color:var(--red);
}

.text-18 {
  font-size:18px;
}

.text-19-blue {
  font-size:19px;
  color:var(--blue);
}

.text-22 {
  font-size:22px;
}

.text-40 {
  font-size:40px;
}

.text-40-blue {
  font-size:40px;
  color:var(--blue);
}

.text-amber {
  color:var(--amber);
}

.text-amber-bold {
  color:var(--amber);
  font-weight:700;
}

.text-blue {
  color:var(--blue);
}

.text-bold-danger {
  font-weight:700;
  color:#f87171;
}

.text-bold-red {
  font-weight:700;
  color:var(--red);
}

.text-center {
  text-align:center;
}

.text-center-mt14 {
  text-align:center;
  margin-top:14px;
}

.text-center-py20 {
  text-align:center;
  padding:20px 0;
}

.text-center-py24 {
  text-align:center;
  padding:24px 0;
}

.text-cyan {
  color:var(--cyan);
}

.text-green {
  color:var(--green);
}

.text-ink2-mb20 {
  color:var(--ink2);
  margin-bottom:20px;
}

.text-red {
  color:var(--red);
}

.text-right {
  text-align:right;
}

.text-semi-ink {
  font-weight:600;
  color:var(--ink);
}

.value-display-lg {
  font-size:24px;
  font-weight:800;
  color:var(--ink);
  font-family:Consolas,monospace;
}


/* --- Espaçamento --- */
.divider {
  height:1px;
  background:var(--border);
}

.divider-b16 {
  height:1px;
  background:var(--border);
  margin:0 0 16px 0;
}

.divider-mb16 {
  height:1px;
  background:var(--border);
  margin-bottom:16px;
}

.divider-my {
  height:1px;
  background:var(--border);
  margin:4px 0 14px;
}

.divider-my16 {
  height:1px;
  background:var(--border);
  margin:16px 0;
}

.empty-state-pad {
  padding:24px 16px;
  text-align:center;
  color:var(--ink3);
  font-size:12px;
}

.mb-0 {
  margin-bottom:0;
}

.mb-10 {
  margin-bottom:10px;
}

.mb-12 {
  margin-bottom:12px;
}

.mb-14 {
  margin-bottom:14px;
}

.mb-16 {
  margin-bottom:16px;
}

.mb-18 {
  margin-bottom:18px;
}

.mb-20 {
  margin-bottom:20px;
}

.mt-10 {
  margin-top:10px;
}

.mt-14 {
  margin-top:14px;
}

.mt-4 {
  margin-top:4px;
}

.mt-6 {
  margin-top:6px;
}

.mt-8 {
  margin-top:8px;
}

.p-0 {
  padding:0;
}

.pad-14-16-16 {
  padding:14px 16px 16px;
}

.pad-14-20 {
  padding:14px 20px;
}

.pad-16-24 {
  padding:16px 24px;
}

.pad-20-24-0 {
  padding:20px 24px 0;
}

.pr-36 {
  padding-right:36px;
}

.py-4 {
  padding:4px 0;
}

.py-4-pb6 {
  padding:4px 0 6px;
}


/* --- Posicionamento --- */
.abs-bottom-full {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:5;
}

.max-w-380 {
  max-width:380px;
}

.max-w-400 {
  max-width:400px;
}

.max-w-420 {
  max-width:420px;
}

.max-w-440 {
  max-width:440px;
}

.max-w-460 {
  max-width:460px;
}

.max-w-480 {
  max-width:480px;
}

.max-w-540 {
  max-width:540px;
}

.min-h-320 {
  min-height:320px;
}

.min-w-180 {
  min-width:180px;
}

.min-w-200 {
  min-width:200px;
}

.min-w-280 {
  min-width:280px;
}

.overflow-visible {
  overflow:visible;
}

.pos-rel {
  position:relative;
}

.pos-rel-mb16 {
  position:relative;
  margin-bottom:16px;
}

.scroll-max-300 {
  max-height:300px;
  overflow-y:auto;
}

.w-auto {
  width:auto;
}

.w-full {
  width:100%;
}

.z-1100 {
  z-index:1100;
}

.z-1200 {
  z-index:1200;
}

.z-1300 {
  z-index:1300;
}

.z-1350 {
  z-index:1350;
}

.z-1400 {
  z-index:1400;
}

.z-1500 {
  z-index:1500;
}

.z-300 {
  z-index:300;
}


/* --- Utilitários --- */
.bg-excel-green {
  background:#1d6f42;
}

.bg-purple {
  background:#7c3aed;
}

.bg-surface2 {
  background:var(--surface2);
}

.bg-telegram {
  background:#0088cc;
  color:#fff;
}

.bg-telegram-solid {
  background:#0088cc;
}

.bg-whatsapp {
  background:#25D366;
}

.code-green-sm {
  font-size:10px;
  color:var(--green);
  word-break:break-all;
  display:block;
  margin-top:4px;
}

.collapsible-top {
  border-top:1px solid var(--border);
  margin-top:10px;
  padding-top:10px;
  display:none;
}

.dot-indicator {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ink3);
  flex-shrink:0;
}

.empty-state-icon {
  font-size:28px;
  display:block;
  margin-bottom:8px;
  opacity:.4;
}

.hidden {
  display:none;
}

.info-pill-center {
  font-size:11px;
  color:var(--ink3);
  padding:10px 14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  text-align:center;
}

.quick-links {
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:14px;
}

.search-hint {
  display:none;
  margin-top:8px;
  align-items:center;
  gap:6px;
  background:rgba(37,99,235,.14);
  border:1px solid rgba(37,99,235,.35);
  border-radius:8px;
  padding:7px 10px;
}