:root,[data-theme="dark"]{
  --bg-dark: #0a0c18;
  --bg: #0a0c18;
  --sf: rgba(24, 27, 47, 0.45);
  --card: rgba(24, 27, 47, 0.35);
  --card-h: rgba(36, 40, 70, 0.55);
  --sb: rgba(13, 16, 27, 0.55);
  --sb-b: rgba(255, 255, 255, 0.08);
  --hd: rgba(11, 14, 24, 0.6);
  --sb-grad: linear-gradient(180deg, rgba(13,16,27,0.7) 0%, rgba(8,11,21,0.5) 100%);
  --br: rgba(255, 255, 255, 0.08);
  --br-h: rgba(255, 255, 255, 0.18);
  --t1: #ffffff;
  --t2: #8e9cb2;
  --t3: #536277;
  --sh: rgba(14, 16, 29, 0.45);
  
  /* Accent colors matching Glazzed UI */
  --ac: #00f2fe;
  --ac-g: rgba(0, 242, 254, 0.3);
  --ac-d: rgba(0, 242, 254, 0.12);
  
  --bl: #0076ff;
  --bl-d: rgba(0, 118, 255, 0.12);
  
  --rd: #ff007f;
  --rd-d: rgba(255, 0, 127, 0.12);
  
  --am: #ff9f00;
  --am-d: rgba(255, 159, 0, 0.12);
  
  --vi: #39ff14;
  --vi-d: rgba(57, 255, 20, 0.12);
  
  --co: #8a2be2;
  --co-d: rgba(138, 43, 226, 0.12);
  
  --sw: 260px;
  --hh: 64px;
  --radius: 6px;
}
[data-theme="light"]{
  --bg: #eef2f7;
  --sf: rgba(255, 255, 255, 0.85);
  --card: rgba(255, 255, 255, 0.75);
  --card-h: rgba(255, 255, 255, 0.95);
  --sb: rgba(26, 32, 53, 0.85);
  --sb-b: rgba(0, 0, 0, 0.08);
  --hd: rgba(255, 255, 255, 0.85);
  --sb-grad: linear-gradient(180deg, rgba(30,37,64,0.95) 0%, rgba(20,28,48,0.95) 100%);
  --br: rgba(0, 0, 0, 0.08);
  --br-h: rgba(0, 0, 0, 0.18);
  --t1: #0f172a;
  --t2: #334155;
  --t3: #64748b;
  --sh: rgba(235, 240, 248, 0.6);
  --ac: #0284c7;
  --ac-d: rgba(2, 132, 199, 0.12);
  --bl: #1d4ed8;
  --bl-d: rgba(29, 78, 216, 0.10);
  --rd: #be123c;
  --rd-d: rgba(190, 18, 60, 0.09);
  --am: #b45309;
  --am-d: rgba(180, 83, 9, 0.10);
  --vi: #16a34a;
  --vi-d: rgba(22, 163, 74, 0.10);
  --co: #7c3aed;
  --co-d: rgba(124, 58, 237, 0.10);
}
body.col{--sw:64px}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--t1)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--br-h);border-radius:4px}
.app{display:flex;height:100vh;overflow:hidden}
.sbr{width:var(--sw);height:100vh;position:sticky;top:0;background:var(--sb-grad,var(--sb));border-right:1px solid var(--sb-b);display:flex;flex-direction:column;flex-shrink:0;overflow-x:hidden;overflow-y:hidden;transition:width .3s cubic-bezier(.4,0,.2,1);z-index:100}
.sb-logo{padding:14px 13px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--br);flex-shrink:0}
.lm{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#00c896,#0ea5e9);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 14px rgba(6,182,212,.3)}
.lm svg{width:17px;height:17px;color:#fff}
.lt{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:800;color:var(--t1);letter-spacing:-.02em;white-space:nowrap}
.ls{font-size:9px;color:var(--t3);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.nl{transition:opacity .18s,max-width .25s;max-width:160px;overflow:hidden;white-space:nowrap}
body.col .nl{opacity:0;max-width:0;pointer-events:none}
.sb-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 8px;display:flex;flex-direction:column;gap:1px}


.ni{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:rgba(255,255,255,0.5);font-size:13px;font-weight:500;cursor:pointer;width:100%;white-space:nowrap;transition:background .18s,color .18s,box-shadow .18s;position:relative;border:1px solid transparent;background:none;text-align:left}
.ni:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,.06)}
.ni.on{background:rgba(255,255,255,.11);color:rgba(255,255,255,.97);border-color:rgba(255,255,255,.14)}
[data-theme="light"] .ni{color:rgba(255,255,255,0.55)}
[data-theme="light"] .ni:hover{background:rgba(255,255,255,.09);color:rgba(255,255,255,0.9);border-color:rgba(255,255,255,.1)}
[data-theme="light"] .ni.on{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.18)}
.ni.on::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;background:rgba(255,255,255,.75);box-shadow:0 0 6px rgba(255,255,255,.35)}
[data-theme="light"] .ni.on::before{background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.4)}
.ni svg{width:15px;height:15px;flex-shrink:0}
.ni::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-6px);background:rgba(8,10,20,.97);color:#edf0ff;font-size:11.5px;font-weight:500;padding:5px 11px;border-radius:8px;border:1px solid var(--br-h);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:999}
body.col .ni:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.sb-ft{padding:10px 8px;border-top:1px solid rgba(255,255,255,0.07);flex-shrink:0;display:flex;flex-direction:column;gap:3px}
.cb{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:rgba(255,255,255,0.4);font-size:12px;cursor:pointer;width:100%;border:none;background:none;white-space:nowrap}
.cb:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,0.7)}
.chv{transition:transform .3s cubic-bezier(.4,0,.2,1);width:15px;height:15px;flex-shrink:0}
body.col .chv{transform:rotate(180deg)}
.ur{display:flex;align-items:center;gap:9px;padding:8px 10px}
.av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#00c896,#0ea5e9);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.mw{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.tb{height:var(--hh);background:var(--hd);border-bottom:1px solid var(--br);display:flex;align-items:center;padding:0 18px;gap:10px;flex-shrink:0;backdrop-filter:blur(12px);z-index:50}
.bc{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.bc svg{width:13px;height:13px;color:var(--t3)}
.pn{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:600;color:var(--t1);letter-spacing:-.01em;white-space:nowrap}
.ts{background:var(--card);border:1px solid var(--br);border-radius:9px;padding:6px 12px;display:flex;align-items:center;gap:7px;min-width:170px}
.ts input{background:none;border:none;outline:none;color:var(--t1);font-size:12px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;width:100%}
.ts input::placeholder{color:var(--t3)}
.ts svg{width:13px;height:13px;color:var(--t3);flex-shrink:0}
.ta{display:flex;align-items:center;gap:7px}
.ib{width:33px;height:33px;border-radius:8px;background:var(--card);border:1px solid var(--br);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;position:relative}
.ib:hover{background:var(--card-h);border-color:var(--br-h)}
.ib svg{width:15px;height:15px;color:var(--t2)}
.nd{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--rd);border:1.5px solid var(--sf)}
.tg{width:42px;height:23px;background:var(--br);border:1px solid var(--br-h);border-radius:20px;position:relative;cursor:pointer}
.tg::after{content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--t1);transition:transform .25s cubic-bezier(.4,0,.2,1)}
[data-theme="light"] .tg::after{transform:translateX(19px)}
.mn{display:block;width:14px;height:14px;color:var(--t2)}
.sn{display:none;width:14px;height:14px;color:var(--am)}
[data-theme="light"] .mn{display:none}
[data-theme="light"] .sn{display:block}
.pg{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 20px;display:none}
.pg.on{display:block;flex:1;min-height:0}
@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.s1{animation:fu .4s cubic-bezier(.34,1.1,.64,1) both}
.s2{animation:fu .4s cubic-bezier(.34,1.1,.64,1) .06s both}
.s3{animation:fu .4s cubic-bezier(.34,1.1,.64,1) .12s both}
.s4{animation:fu .4s cubic-bezier(.34,1.1,.64,1) .18s both}
.s5{animation:fu .4s cubic-bezier(.34,1.1,.64,1) .24s both}
.s6{animation:fu .4s cubic-bezier(.34,1.1,.64,1) .30s both}
.sc{background:var(--card);border:1px solid var(--br);border-radius:14px;padding:18px;position:relative;overflow:hidden;cursor:default;transition:transform .32s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .32s}
.sc:hover{transform:translateY(-5px) scale(1.018);border-color:var(--br-h);box-shadow:0 18px 52px rgba(0,0,0,.28)}
.sc::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent)}
.si{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.si svg{width:16px;height:16px}
.si.tl{background:var(--ac-d);color:var(--ac)}
.si.bl{background:var(--bl-d);color:var(--bl)}
.si.am{background:var(--am-d);color:var(--am)}
.si.rd{background:var(--rd-d);color:var(--rd)}
.si.vi{background:var(--vi-d);color:var(--vi)}
.si.co{background:var(--co-d);color:var(--co)}
.sv{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:30px;font-weight:800;color:var(--t1);letter-spacing:-.04em;line-height:1;margin:10px 0 4px}
.sl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.sd{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:20px}
.sd.p{background:rgba(6,182,212,.12);color:var(--ac)}
.sd.n{background:var(--rd-d);color:var(--rd)}
.sd.w{background:var(--am-d);color:var(--am)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:18px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:18px}
.g21{display:grid;grid-template-columns:1.5fr 1fr;gap:13px;margin-bottom:18px}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g21{grid-template-columns:1fr}}
@media(max-width:700px){.g4,.g2,.g21,.g3{grid-template-columns:1fr}.sbr{position:fixed;transform:translateX(-100%)}.sbr.mob{transform:none}.mo{display:block!important}.tb{padding:0 12px}.pg{padding:12px}.ts{display:none}}
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;backdrop-filter:blur(2px)}
.bx{background:var(--card);border:1px solid var(--br);border-radius:14px;overflow:hidden;margin-bottom:18px;transition:box-shadow .3s,transform .3s cubic-bezier(.34,1.4,.64,1)}
.bx:hover{box-shadow:0 10px 36px rgba(0,0,0,.2)}
.bh{padding:14px 18px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bt{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:700;color:var(--t1);letter-spacing:-.01em}
.cw{transition:transform .28s cubic-bezier(.34,1.4,.64,1)}
.cw:hover{transform:scale(1.012)}
.bg{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap}
.bgg{background:rgba(6,182,212,.12);color:var(--ac)}
.bgr{background:var(--rd-d);color:var(--rd)}
.bga{background:var(--am-d);color:var(--am)}
.bgb{background:var(--bl-d);color:var(--bl)}
.bgv{background:var(--vi-d);color:var(--vi)}
.bgc{background:var(--co-d);color:var(--co)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.dg{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.6);animation:bk 3s ease-in-out infinite}
.da{background:var(--am)}.dr{background:var(--rd)}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.3}}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:10px 14px;border-bottom:1px solid var(--br);text-align:left;white-space:nowrap}
.tbl td{padding:10px 14px;color:var(--t2);border-bottom:1px solid var(--br);vertical-align:middle;transition:background .12s}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--card-h);color:var(--t1)}
.t1c{color:var(--t1);font-weight:500}
.tm{font-family:'JetBrains Mono',monospace;font-size:11.5px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;border:none;transition:all .18s;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;white-space:nowrap}
.btn svg{width:13px;height:13px}
.bp{background:linear-gradient(135deg,#1f2937,#374151);color:#f9fafb}
.bp:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.bg2{background:var(--card);border:1px solid var(--br);color:var(--t2)}
.bg2:hover{background:var(--card-h);border-color:var(--br-h);color:var(--t1)}
.sm{padding:5px 10px;font-size:11px}
.fg{margin-bottom:14px}
.fl{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:5px;display:block}
.fi{width:100%;background:var(--card);border:1px solid var(--br);border-radius:9px;padding:9px 12px;color:var(--t1);font-size:13px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;outline:none;transition:border-color .15s}
.fi:focus{border-color:var(--ac)}
.fi::placeholder{color:var(--t3)}
textarea.fi{resize:vertical}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.fr{grid-template-columns:1fr}}
.frow{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.frow select,.frow input[type="date"]{background:var(--card);border:1px solid var(--br);border-radius:9px;padding:7px 11px;color:var(--t2);font-size:12px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;outline:none;cursor:pointer;transition:border-color .15s}
.frow select:focus,.frow input[type="date"]:focus{border-color:var(--ac);color:var(--t1)}
.frow input[type="date"]{color-scheme:dark}
[data-theme="light"] .frow input[type="date"]{color-scheme:light}
.mb2{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px);padding:16px;overflow-y:auto}
.mb2.on{display:flex}
.md{background:var(--sf);border:1px solid var(--br);border-radius:16px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:mIn .22s cubic-bezier(.34,1.2,.64,1)}
@keyframes mIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.mh{padding:18px 20px 14px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between}
.mt2{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:700;color:var(--t1)}
.mx{width:26px;height:26px;border-radius:7px;background:var(--card);border:1px solid var(--br);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3)}
.mx:hover{color:var(--t1)}
.mx svg{width:13px;height:13px}
.mc{padding:18px 20px}
.mf2{padding:14px 20px;border-top:1px solid var(--br);display:flex;justify-content:flex-end;gap:8px}
.pr{display:flex;align-items:center;gap:10px;padding:7px 0}
.pl{font-size:12px;color:var(--t2);width:130px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb{flex:1;height:6px;background:var(--br);border-radius:100px;overflow:hidden}
.pf{height:100%;border-radius:100px;transition:width 1.4s cubic-bezier(.34,1.1,.64,1)}
.pv{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t2);width:48px;text-align:right;flex-shrink:0}
.pg-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
@media(max-width:900px){.pg-grid{grid-template-columns:1fr}}
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:500px){.plan-grid{grid-template-columns:1fr}}
.pc{border:2px solid var(--br);border-radius:13px;padding:14px;cursor:pointer;transition:all .22s cubic-bezier(.34,1.4,.64,1);position:relative;background:var(--card)}
.pc:hover{border-color:var(--br-h);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.pc.sel{border-color:var(--ac);background:var(--ac-d)}
.pc.sel::after{content:'';position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:50%;background:var(--ac) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%230c0f1a' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3,8 6,11 13,4'/%3E%3C/svg%3E") center/10px no-repeat}
.pnm{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:700;color:var(--t1)}
.psp{font-size:11px;color:var(--t3);margin:2px 0}
.ppr{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:500;color:var(--ac);margin-top:8px}
.pin{font-size:10px;color:var(--bl);margin-top:3px}
.sg2{margin-bottom:14px}
.sgh{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 0 7px;border-bottom:1px solid var(--br);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.sr{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:9px;transition:background .12s;cursor:pointer;user-select:none}
.sr:hover{background:var(--card-h)}
.sr.lk{opacity:.35;pointer-events:none}
.stg{width:36px;height:20px;border-radius:20px;background:var(--br);position:relative;transition:background .2s;flex-shrink:0;border:none;cursor:pointer}
.stg.on{background:var(--ac)}
.stg::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.stg.on::after{transform:translateX(16px)}
.sn2{font-size:13px;color:var(--t1)}
.sp{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t2);text-align:right}
.sp.d{color:var(--ac)}
.so{font-size:10px;color:var(--t3);text-decoration:line-through;text-align:right}
.qw{display:flex;align-items:center;gap:7px}
.qb{width:26px;height:26px;border-radius:7px;background:var(--card);border:1px solid var(--br);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t1);font-size:15px;font-weight:600;transition:all .15s}
.qb:hover{background:var(--card-h);border-color:var(--br-h)}
.qv{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--t1);min-width:16px;text-align:center}
.tb2{background:linear-gradient(135deg,rgba(6,182,212,.13),rgba(14,165,233,.09));border:1px solid rgba(6,182,212,.3);border-radius:14px;padding:20px}
.tl2{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.tv{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:34px;font-weight:800;color:var(--ac);letter-spacing:-.04em;line-height:1;margin:5px 0 10px}
.tli{display:flex;justify-content:space-between;font-size:12px;color:var(--t2);padding:3px 0}
.tli .v{font-family:'JetBrains Mono',monospace}
.dp{display:inline-block;background:var(--am-d);color:var(--am);font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;margin-bottom:10px}
.rr{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--br);transition:background .12s}
.rr:last-child{border-bottom:none}
.rr:hover{background:var(--card-h)}
.rn{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:800;color:var(--t3);width:22px;text-align:center;flex-shrink:0}
.rn.top{color:var(--am)}
.rav{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.ri{flex:1;min-width:0}
.rnm{font-size:13px;font-weight:600;color:var(--t1)}
.rrg{font-size:11px;color:var(--t3)}
.rtk{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--ac)}
.rct{font-size:11px;color:var(--t3)}
.sw-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--br)}
.sw-row:last-child{border-bottom:none}
.sw-l{font-size:13px;font-weight:500;color:var(--t1)}
.sw-d{font-size:11px;color:var(--t3);margin-top:1px}
.sw{width:38px;height:21px;border-radius:20px;background:var(--br);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;border:none}
.sw.on{background:var(--ac)}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s}
.sw.on::after{transform:translateX(17px)}
.tipo-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;border:1px solid var(--br);background:var(--bg);cursor:pointer;font-size:12px;font-weight:500;color:var(--t2);transition:background .15s,border-color .15s,color .15s;user-select:none}
.tipo-pill input{display:none}
.tipo-pill:has(input:checked){background:rgba(6,182,212,.15);border-color:var(--ac);color:var(--ac)}
.tipo-pill::before{content:'';width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;display:inline-block;flex-shrink:0;transition:background .15s}
.tipo-pill:has(input:checked)::before{background:var(--ac);border-color:var(--ac);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='2,7 5,10 12,3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.geo-check-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--t2);transition:background .15s}
.geo-check-item:hover{background:var(--bg)}
.geo-check-item input[type=checkbox]{accent-color:var(--ac);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.geo-check-item.checked{background:rgba(6,182,212,.08);color:var(--t1)}
.ep{background:var(--bg);border:1px solid var(--br);border-radius:9px;padding:11px 14px;margin-bottom:8px;font-family:'JetBrains Mono',monospace;font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.em{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px}
.em.get{background:var(--ac-d);color:var(--ac)}
.em.post{background:var(--bl-d);color:var(--bl)}
.em.put{background:var(--am-d);color:var(--am)}
.eu{color:var(--t2)}
.ed{font-size:11px;color:var(--t3);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif}
.aic{background:var(--card);border:1px solid var(--br);border-radius:13px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:all .25s cubic-bezier(.34,1.4,.64,1)}
.aic:hover{border-color:var(--br-h);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.22)}
.ailo{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:800;color:#fff}
.ainm{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:700;color:var(--t1)}
.aidc{font-size:12px;color:var(--t2);line-height:1.55}
.mc2{background:var(--card);border:1px solid var(--br);border-radius:13px;padding:16px;transition:all .25s cubic-bezier(.34,1.4,.64,1)}
.mc2:hover{border-color:var(--br-h);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.22)}
.mpct{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1}
.mtr{height:7px;background:var(--br);border-radius:100px;overflow:hidden;margin:10px 0}
.mfill{height:100%;border-radius:100px;transition:width 1.5s cubic-bezier(.34,1.1,.64,1)}
.al{border-radius:10px;padding:11px 14px;display:flex;gap:10px;align-items:flex-start;font-size:12.5px;border:1px solid transparent;margin-bottom:10px}
.al svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.al.aw{background:var(--am-d);border-color:rgba(249,115,22,.25);color:var(--am)}
.al.ar{background:var(--rd-d);border-color:rgba(244,63,94,.25);color:var(--rd)}
.al.ag{background:var(--ac-d);border-color:rgba(6,182,212,.25);color:var(--ac)}
.tabs{display:flex;gap:2px;background:var(--card);border-radius:10px;padding:3px;margin-bottom:16px;border:1px solid var(--br);overflow-x:auto}
.tab{padding:7px 13px;border-radius:8px;font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .18s;border:none;background:none;white-space:nowrap}
.tab:hover{color:var(--t1)}
.tab.on{background:var(--sf);color:var(--t1);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.rp{padding:5px 14px;border-radius:20px;border:1.5px solid var(--br);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;background:none;color:var(--t2)}
.rp.on{border-color:var(--ac);background:var(--ac-d);color:var(--ac)}
.mob-btn{display:none;width:33px;height:33px;border-radius:8px;background:var(--card);border:1px solid var(--br);align-items:center;justify-content:center;cursor:pointer}
.mob-btn svg{width:15px;height:15px;color:var(--t2)}
@media(max-width:700px){.mob-btn{display:flex}}
.toast{position:fixed;bottom:18px;right:18px;background:var(--sf);border:1px solid var(--br);border-radius:12px;padding:11px 15px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--t1);z-index:1000;transform:translateY(70px);opacity:0;transition:all .3s cubic-bezier(.34,1.2,.64,1);box-shadow:0 8px 28px rgba(0,0,0,.3)}
.toast.on{transform:translateY(0);opacity:1}
.ti{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ti.ok{background:var(--ac-d);color:var(--ac)}

.crm-col{display:flex;flex-direction:column;gap:7px;flex-shrink:0;width:270px;overflow:hidden}
.crm-cards-container{flex:1;min-height:0;overflow-y:auto}
.crm-cards-container::-webkit-scrollbar{width:4px}
.crm-cards-container::-webkit-scrollbar-track{background:transparent}
.crm-cards-container::-webkit-scrollbar-thumb{background:var(--br-h);border-radius:4px}
.crm-col-h{border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-top-width:3px;border-style:solid;border-left:none;border-right:none;border-bottom:1px solid var(--br);background:rgba(255,255,255,.04)}
[data-theme="light"] .crm-col-h{background:rgba(0,0,0,.03)}
.crm-col-t{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t1)}
.crm-cnt{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;background:rgba(255,255,255,.1);border-radius:20px;padding:2px 9px;color:rgba(255,255,255,.75);border:none;min-width:24px;text-align:center}
[data-theme="light"] .crm-cnt{background:rgba(0,0,0,.08);color:rgba(0,0,0,.55)}
.crm-card{background:var(--card);border:1px solid var(--br);border-radius:12px;padding:16px 18px;cursor:grab;transition:all .18s cubic-bezier(.34,1.4,.64,1);position:relative;overflow:hidden;user-select:none;flex-shrink:0}
.crm-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;opacity:.6}
.crm-card:hover{transform:translateY(-2px) scale(1.01);border-color:var(--br-h);box-shadow:0 8px 24px rgba(0,0,0,.25);background:var(--card-h)}
.crm-card:active{cursor:grabbing;transform:scale(1.02) rotate(1deg)}
.crm-card.dragging{opacity:.4;transform:scale(1.04) rotate(1.5deg);cursor:grabbing;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:999;border-color:var(--br-h)}
.crm-col.drag-over{background:rgba(255,255,255,.04);border-radius:14px;outline:2px dashed var(--br-h);outline-offset:-2px}
.crm-cn{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:4px;letter-spacing:-.01em;line-height:1.35}
.crm-ci{font-size:11px;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:4px}
.crm-cb{display:flex;align-items:center;justify-content:space-between;gap:6px}
.crm-time{font-size:10.5px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.si.ac{background:var(--ac-d);color:var(--ac)}


/* ── SIDEBAR FIXES ── */

/* ── TABS genérico (não só planos) ── */
.tab-content{display:none}.tab-content.on{display:block}

/* ── DARK/LIGHT toggle fix ── */
.tg{width:42px;height:23px;background:var(--br);border:1px solid var(--br-h);border-radius:20px;
  position:relative;cursor:pointer;transition:background .2s}
[data-theme="light"] .tg{background:var(--am);border-color:transparent}
.tg::after{content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;
  background:var(--t1);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.3)}
[data-theme="light"] .tg::after{transform:translateX(19px);background:#fff}

/* ── CRM KANBAN ── */
.kanban-wrap{width:100%;overflow-x:auto;overflow-y:hidden;height:calc(100vh - 225px);-webkit-overflow-scrolling:touch}
.kanban-wrap::-webkit-scrollbar{height:10px}
.kanban-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:10px}
.kanban-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
.kanban-wrap::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.6);border:2px solid transparent;background-clip:padding-box}
[data-theme="light"] .kanban-wrap::-webkit-scrollbar-track{background:#d1d5db;border-radius:10px}
[data-theme="light"] .kanban-wrap::-webkit-scrollbar-thumb{background:#6b7280;border-radius:10px;border:2px solid #d1d5db}
[data-theme="light"] .kanban-wrap::-webkit-scrollbar-thumb:hover{background:#374151;border:2px solid #d1d5db}
.kanban-grid{display:flex;flex-wrap:nowrap;align-items:stretch;gap:12px;padding:4px 2px 12px;height:100%;min-width:max-content}

/* ── SIDEBAR GROUP TITLES ── */
.sg{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;font-weight:800;letter-spacing:-0.015em;
  color:rgba(255,255,255,0.45);padding:20px 10px 8px;white-space:nowrap;
  display:flex;align-items:center;justify-content:space-between;line-height:1.2;
  cursor:pointer;user-select:none;border-radius:6px;
  transition:color .2s,background .15s;
  flex-shrink:0;
}
.sg span{
  background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(203,213,225,.65) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sg:hover{background:rgba(255,255,255,.04);}
.sg:hover span{
  background:linear-gradient(90deg,#fff 0%,rgba(226,232,240,.95) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-theme="light"] .sg span{
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(203,213,225,.75) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-theme="light"] .sg:hover span{
  background:linear-gradient(90deg,#fff 0%,rgba(226,232,240,1) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sg .sg-chv{width:13px;height:13px;flex-shrink:0;transition:transform .25s cubic-bezier(.4,0,.2,1);opacity:.4;color:#fff;}
.sg.cl .sg-chv{transform:rotate(-90deg);}
.sg-items{display:flex;flex-direction:column;gap:1px;overflow:hidden;flex-shrink:0;
  max-height:600px;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s;}
.sg-items.cl{max-height:0!important;opacity:0;pointer-events:none;}
body.col .sg{opacity:0;pointer-events:none;max-height:0;padding:0;overflow:hidden;}
body.col .sg-items{max-height:600px!important;opacity:1!important;pointer-events:auto!important;}
body.col .sg-chv{display:none;}

/* ═══ CARD GRADIENTS — FULL FILL ═══ */
.sc{border:1px solid var(--br)}
.sc:has(.si.tl){background:linear-gradient(145deg,#164e63 0%,#0e7490 45%,#0891b2 100%);border-color:rgba(6,182,212,.35)}
.sc:has(.si.rd){background:linear-gradient(145deg,#450a0a 0%,#7f1d1d 45%,#b91c1c 100%);border-color:rgba(244,63,94,.35)}
.sc:has(.si.bl){background:linear-gradient(145deg,#0c1f4a 0%,#1e3a8a 45%,#2563eb 100%);border-color:rgba(56,189,248,.35)}
.sc:has(.si.am){background:linear-gradient(145deg,#451a03 0%,#78350f 45%,#b45309 100%);border-color:rgba(249,115,22,.35)}
.sc:has(.si.vi){background:linear-gradient(145deg,#451a03 0%,#78350f 45%,#b45309 100%);border-color:rgba(245,158,11,.35)}
.sc:has(.si.co){background:linear-gradient(145deg,#500724 0%,#881337 45%,#be123c 100%);border-color:rgba(236,72,153,.35)}
.sc:has(.si.ac){background:linear-gradient(145deg,#164e63 0%,#0e7490 45%,#0891b2 100%);border-color:rgba(6,182,212,.35)}
/* Text adaptation for colored cards */
.sc:has([class^="si"]) .sv,.sc:has([class*=" si"]) .sv{color:#fff}
.sc:has([class^="si"]) .sl,.sc:has([class*=" si"]) .sl{color:rgba(255,255,255,.55)}
.sc:has([class^="si"]) .sd.p{background:rgba(255,255,255,.18);color:rgba(255,255,255,.9)}
.sc:has([class^="si"]) .sd.n{background:rgba(0,0,0,.25);color:rgba(255,255,255,.8)}
.sc:has([class^="si"]) .sd.w{background:rgba(255,255,255,.15);color:rgba(255,255,255,.9)}
.sc:has(.si.tl) .si.tl,.sc:has(.si.tl) .si.ac{background:rgba(255,255,255,.15);color:#fff}
.sc:has(.si.rd) .si.rd{background:rgba(255,255,255,.15);color:#fff}
.sc:has(.si.bl) .si.bl{background:rgba(255,255,255,.15);color:#fff}
.sc:has(.si.am) .si.am{background:rgba(255,255,255,.15);color:#fff}
.sc:has(.si.vi) .si.vi{background:rgba(255,255,255,.15);color:#fff}
.sc:has(.si.co) .si.co{background:rgba(255,255,255,.15);color:#fff}
.sc:has(.si.ac) .si{background:rgba(255,255,255,.15);color:#fff}
.sc::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.crm-card::before{background:var(--cc,transparent)}
/* Light theme: vibrant fills matching dark mode intensity */
[data-theme="light"] .sc:has(.si.tl){background:linear-gradient(145deg,#0891b2 0%,#06b6d4 50%,#22d3ee 100%);border-color:rgba(6,182,212,.4)}
[data-theme="light"] .sc:has(.si.rd){background:linear-gradient(145deg,#dc2626 0%,#ef4444 50%,#f87171 100%);border-color:rgba(220,38,38,.4)}
[data-theme="light"] .sc:has(.si.bl){background:linear-gradient(145deg,#1d4ed8 0%,#2563eb 50%,#60a5fa 100%);border-color:rgba(29,78,216,.4)}
[data-theme="light"] .sc:has(.si.am){background:linear-gradient(145deg,#b45309 0%,#d97706 50%,#fbbf24 100%);border-color:rgba(180,83,9,.4)}
[data-theme="light"] .sc:has(.si.vi){background:linear-gradient(145deg,#b45309 0%,#d97706 50%,#fbbf24 100%);border-color:rgba(245,158,11,.4)}
[data-theme="light"] .sc:has(.si.co){background:linear-gradient(145deg,#be123c 0%,#e11d48 50%,#fb7185 100%);border-color:rgba(190,18,60,.4)}
[data-theme="light"] .sc:has([class^="si"]) .sv{color:#fff}
[data-theme="light"] .sc:has([class^="si"]) .sl{color:rgba(255,255,255,.75)}
[data-theme="light"] .sc:has(.si.tl) .si.tl,[data-theme="light"] .sc:has(.si.tl) .si.ac{background:rgba(255,255,255,.2);color:#fff}
[data-theme="light"] .sc:has(.si.rd) .si.rd{background:rgba(255,255,255,.2);color:#fff}
[data-theme="light"] .sc:has(.si.bl) .si.bl{background:rgba(255,255,255,.2);color:#fff}
[data-theme="light"] .sc:has(.si.am) .si.am{background:rgba(255,255,255,.2);color:#fff}
[data-theme="light"] .sc:has(.si.vi) .si.vi{background:rgba(255,255,255,.2);color:#fff}
[data-theme="light"] .sc:has(.si.co) .si.co{background:rgba(255,255,255,.2);color:#fff}

/* ═══ PAGINAÇÃO ═══ */
.pag-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0;border-top:1px solid var(--br);margin-top:8px}
.pag-btn{padding:5px 12px;border:1px solid var(--br);border-radius:6px;background:var(--bg);color:var(--t2);font-size:12px;cursor:pointer;transition:all .15s}
.pag-btn:hover:not(:disabled){background:var(--sf);color:var(--t1)}
.pag-btn:disabled{opacity:.4;cursor:default}
.pag-info{font-size:12px;color:var(--t3);padding:0 8px}

/* ═══ MODERN UI REFINEMENTS ═══ */
.bx{border-radius:16px;border:1px solid var(--br)}
[data-theme="light"] .bx{box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
.fi{border-radius:10px;letter-spacing:-.01em}
.fi:focus{border-color:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
[data-theme="light"] .fi:focus{border-color:rgba(0,0,0,.3);box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.btn{border-radius:9px;letter-spacing:-.01em}
.bp{background:linear-gradient(135deg,#1f2937,#374151);color:#f9fafb;font-weight:600}
.bp:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.sb-nav .ni{border-radius:10px;font-size:12.5px;font-weight:500;letter-spacing:-.01em}
.sb-nav .ni:hover{background:rgba(255,255,255,.06)}
[data-theme="light"] .sb-nav .ni:hover{background:rgba(0,0,0,.05)}
.tb{background:var(--hd);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
.sc{border-radius:16px}
.sc::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}

/* ═══ RESPONSIVE GRID HELPERS ═══ */
.dcrm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.dcrm-ch3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.dcrm-ch2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
@media(max-width:900px){
  .dcrm-cards{grid-template-columns:repeat(2,1fr)}
  .dcrm-ch3{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .dcrm-cards{grid-template-columns:1fr 1fr}
  .dcrm-ch3{grid-template-columns:1fr}
  .dcrm-ch2{grid-template-columns:1fr}
}
@media(max-width:400px){
  .dcrm-cards{grid-template-columns:1fr}
}

/* ═══ RESPONSIVE — MOBILE PRINCIPAL ═══ */
@media(max-width:768px){
  /* Topbar */
  .tb{padding:0 12px;gap:8px}
  .ts{display:none}
  .ta{gap:5px}

  /* Pages */
  .pg{padding:14px 14px;overflow-x:hidden}

  /* Typography scale down */
  .sv{font-size:26px}
  .pn{font-size:12px}

  /* Forms — bigger touch targets */
  .fi{min-height:44px;padding:11px 13px;font-size:15px}
  select.fi{min-height:44px;font-size:15px}
  textarea.fi{min-height:72px}
  .fl{font-size:10.5px;margin-bottom:6px}
  .fg{margin-bottom:14px}
  .fr{gap:10px}

  /* Buttons */
  .btn{min-height:40px;padding:10px 16px;font-size:13px}
  .sm{min-height:36px;padding:7px 11px;font-size:11.5px}
  .bp{min-height:44px}

  /* Cards */
  .sc{padding:16px}
  .bx{border-radius:14px}
  .bh{padding:13px 14px;flex-wrap:wrap;gap:8px}
  .bt{font-size:13px}

  /* Filters */
  .frow{gap:7px}
  .frow select,.frow input[type="date"]{min-height:36px;font-size:12px;flex:1 1 auto}
  .frow .ts{flex:1;min-width:160px;display:flex}
  .frow .btn{min-height:36px}

  /* Table scroll hint */
  .bx [style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch}

  /* Modal — bottom sheet on mobile */
  .mb2{padding:0;align-items:flex-end}
  .md{border-radius:22px 22px 0 0;max-height:92vh;max-width:100%;width:100%;animation:mSlideUp .25s cubic-bezier(.34,1.2,.64,1)}
  @keyframes mSlideUp{from{transform:translateY(30px);opacity:.7}to{transform:none;opacity:1}}

  /* Cadastro / Serviço form containers */
  #p-cadvenda > div,#p-servico > div{max-width:100%!important;padding:0}

  /* Back button row in forms */
  #p-cadvenda .bx,#p-servico .bx{margin-bottom:12px}

  /* Simulador plan grid */
  .plan-grid{grid-template-columns:1fr 1fr;gap:8px}
  .pg-grid{gap:12px}

  /* CRM kanban scroll */
  .kanban-wrap{padding-bottom:14px}

  /* Toast */
  .toast{bottom:12px;right:12px;left:12px;font-size:12.5px}

  /* Clientes toolbar wrap */
  #p-clientes .frow{flex-wrap:wrap}

  /* DashboardCRM filter row collapse */
  #p-dcrm .frow select{flex:1 1 calc(50% - 7px)}
  #p-dcrm .frow input[type="date"]{flex:1 1 calc(50% - 7px)}
}

@media(max-width:480px){
  .pg{padding:12px 10px}
  .fi{font-size:16px} /* prevents iOS zoom */

  /* Stat cards: 1 col on very small */
  .g4{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr}
  .g2{grid-template-columns:1fr}

  /* Plan selector single col */
  .plan-grid{grid-template-columns:1fr}

  /* CRM Kanban narrower columns */
  .crm-col{width:175px}
  .crm-card{padding:10px 11px}

  /* Sidebar tooltip hidden on tiny screens */
  .ni::after{display:none}

  /* Button text in table actions: keep short */
  .tbl .btn.sm{padding:5px 8px;font-size:10.5px}
}

/* ═══ SCROLLBAR MOBILE ═══ */
@media(max-width:768px){
  ::-webkit-scrollbar{width:3px;height:3px}
}

/* ═══ MAPA ═══ */
#map-container{height:520px;border-radius:12px;overflow:hidden;border:1px solid var(--br)}
.map-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.map-leg-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
.map-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.map-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.leaflet-popup-content-wrapper{background:var(--sf);color:var(--t1);border:1px solid var(--br);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif}
.leaflet-popup-tip{background:var(--sf)}
/* Leaflet.draw toolbar — dark theme */
.leaflet-draw-toolbar a{background-color:var(--sf)!important;border-color:var(--br)!important;color:var(--t1)!important}
.leaflet-draw-toolbar a:hover{background-color:var(--card-h)!important}
.leaflet-draw-section .leaflet-draw-toolbar{border-radius:8px!important;overflow:hidden}
.leaflet-draw-tooltip{background:rgba(10,14,28,.92)!important;border:1px solid var(--br)!important;color:var(--t1)!important;font-size:12px!important;border-radius:7px!important}
.leaflet-draw-tooltip-subtext{color:var(--t3)!important}
.leaflet-draw-actions a{background:var(--sf)!important;border-color:var(--br)!important;color:var(--ac)!important;font-size:11px!important}
.leaflet-draw-actions a:hover{background:var(--card-h)!important}
/* Mapa de demarcação nos modais */
.estado-pill{padding:3px 7px;border-radius:5px;border:1px solid var(--br);background:var(--bg);color:var(--t3);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.03em;line-height:1.5}
.estado-pill.sel{background:rgba(6,182,212,.15);border-color:var(--ac);color:var(--ac)}
.drop-grp{border:1px solid var(--br);border-radius:9px;overflow:hidden;margin-bottom:8px}
.drop-hdr{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;cursor:pointer;user-select:none;background:var(--bg);border:none;width:100%;text-align:left;font-size:11.5px;font-weight:600;color:var(--t1);gap:8px}
.drop-hdr .dh-cnt{font-size:10.5px;font-weight:400;color:var(--t3);flex:1;text-align:right}
.drop-hdr .dh-chv{width:13px;height:13px;transition:transform .2s;color:var(--t3);flex-shrink:0}
.drop-hdr.op .dh-chv{transform:rotate(180deg)}
.drop-body{display:none;padding:8px 10px 10px;border-top:1px solid var(--br);background:var(--sf)}
.drop-body.op{display:block}
.mun-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 10px;border-radius:20px;background:rgba(6,182,212,.12);color:var(--ac);border:1px solid rgba(6,182,212,.25);font-size:11px;font-weight:500}
.mun-tag button{background:none;border:none;color:inherit;cursor:pointer;opacity:.65;font-size:14px;line-height:1;padding:0 0 0 2px}
.mun-tag button:hover{opacity:1}
.mapa-dem-wrap{position:relative;border-radius:10px;border:1px solid var(--br);overflow:visible}
.mapa-dem-info{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(10,14,28,.85);backdrop-filter:blur(8px);color:var(--t2);font-size:11px;padding:5px 12px;border-radius:20px;border:1px solid var(--br);z-index:1000;pointer-events:none;white-space:nowrap}
.zona-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer}
.zona-chip:hover{opacity:.8}

/* ═══ ASSINATURA DIGITAL ═══ */
#sig-canvas{background:#fff;border-radius:8px;cursor:crosshair;touch-action:none;display:block;width:100%}
.sig-toolbar{display:flex;gap:8px;align-items:center;margin-top:8px}

/* ═══ CONTRATO PDF ═══ */
.contrato-preview{background:#fff;color:#111;padding:28px 32px;border-radius:10px;font-size:12px;line-height:1.7;max-height:420px;overflow-y:auto}
.contrato-preview h2{font-size:16px;text-align:center;margin-bottom:6px}
.contrato-preview .ct-sub{text-align:center;font-size:11px;color:#555;margin-bottom:16px}
.contrato-preview .ct-sect{font-weight:700;border-bottom:1px solid #ddd;margin:14px 0 6px;padding-bottom:3px;font-size:11.5px}
.contrato-preview .ct-row{display:flex;justify-content:space-between;margin-bottom:4px}
.ct-assinatura{display:flex;gap:20px;margin-top:20px;padding-top:16px;border-top:1px solid #ddd}
.ct-assinatura-box{flex:1;text-align:center}
.ct-assinatura-line{border-top:1px solid #333;margin-bottom:6px;margin-top:40px}
@media print{
  body *{visibility:hidden}
  .contrato-preview,
  .contrato-preview *{visibility:visible}
  .contrato-preview{position:fixed;inset:0;padding:28px;max-height:none;overflow:visible;color:#000}
}

/* ═══ AGENDA INSTALAÇÃO ═══ */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:12px;cursor:pointer;color:var(--t2);border:1px solid transparent;transition:all .15s}
.cal-day:hover{background:var(--card);border-color:var(--br)}
.cal-day.today{background:rgba(2,132,199,.15);color:#60a5fa;border-color:rgba(2,132,199,.3);font-weight:600}
.cal-day.selected{background:#2563eb;color:#fff;border-color:#2563eb;font-weight:700}
.cal-day.has-os{position:relative}
.cal-day.has-os::after{content:'';position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--am)}
.cal-day.off{opacity:.3;cursor:default;pointer-events:none}
.cal-wday{text-align:center;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;padding:4px 0}
.time-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.time-slot{background:var(--card);border:1px solid var(--br);border-radius:7px;padding:6px 4px;text-align:center;font-size:11.5px;cursor:pointer;transition:all .15s;color:var(--t2)}
.time-slot:hover{border-color:var(--br-h);color:var(--t1)}
.time-slot.selected{background:#2563eb;color:#fff;border-color:#2563eb;font-weight:600}
.time-slot.busy{opacity:.35;cursor:default;pointer-events:none;text-decoration:line-through}

/* ═══ COBERTURA CEP ═══ */
.cob-result{border-radius:10px;padding:12px 14px;font-size:12px;margin-top:10px;display:flex;align-items:center;gap:10px}
.cob-ok{background:rgba(2,132,199,.12);border:1px solid rgba(2,132,199,.3);color:#60a5fa}
.cob-nok{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.3);color:#f87171}
.cob-pend{background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3);color:#fbbf24}

/* ═══ FILIAL SELECTOR ═══ */
.filial-badge{background:var(--card);border:1px solid var(--br);border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
.filial-badge:hover{border-color:var(--br-h);color:var(--t1)}
.filial-badge.active{background:rgba(2,132,199,.12);border-color:rgba(2,132,199,.35);color:#60a5fa}

/* ═══ CHURN ALERTS ═══ */
.churn-banner{background:linear-gradient(135deg,rgba(244,63,94,.1),rgba(249,115,22,.08));border:1px solid rgba(244,63,94,.25);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.churn-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.churn-item{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.15);border-radius:8px;padding:8px 12px}
.churn-risk{font-size:10px;font-weight:700;border-radius:5px;padding:2px 7px;letter-spacing:.05em}
.risk-high{background:rgba(244,63,94,.25);color:#f87171}
.risk-med{background:rgba(249,115,22,.2);color:#fbbf24}
[data-theme="light"] .churn-banner{background:linear-gradient(135deg,rgba(244,63,94,.12),rgba(249,115,22,.09));border-color:rgba(244,63,94,.3)}
[data-theme="light"] .churn-item{background:rgba(0,0,0,.06);border:1px solid rgba(244,63,94,.15)}
[data-theme="light"] .churn-item div{color:#1e293b!important}
[data-theme="light"] .churn-item .btn{color:#15803d!important;border-color:rgba(21,128,61,.35)!important;font-weight:600!important}
[data-theme="light"] .risk-high{background:rgba(244,63,94,.15);color:#be123c}
[data-theme="light"] .risk-med{background:rgba(249,115,22,.15);color:#c2410c}

/* ═══ FOLLOW-UP BADGES ═══ */
.fu-badge{font-size:9px;font-weight:700;background:rgba(244,63,94,.22);color:#f87171;border-radius:4px;padding:1px 5px;letter-spacing:.04em}
.fu-badge.ok{background:rgba(34,197,94,.15);color:#4ade80}

/* ═══ COMISSÃO ═══ */
.comiss-calc{background:var(--card);border:1px solid var(--br);border-radius:12px;padding:16px;margin-top:16px}
.comiss-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--br)}
.comiss-row:last-child{border-bottom:none;font-weight:700;color:var(--t1)}

/* ═══════════════════════════════════════════
   LIQUID GLASS SYSTEM — Brasilink v3 Modernized
   ═══════════════════════════════════════════ */

/* ── Background orbs ── */
body::before,body::after{content:'';position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(80px);animation:orbFloat 18s ease-in-out infinite alternate}
body::before{width:600px;height:600px;top:-15%;left:-10%;background:radial-gradient(circle,rgba(156,163,175,.15) 0%,rgba(107,114,128,.08) 50%,transparent 70%);animation-duration:22s}
body::after{width:500px;height:500px;bottom:-10%;right:-8%;background:radial-gradient(circle,rgba(56,189,248,.1) 0%,rgba(245,158,11,.07) 50%,transparent 70%);animation-duration:28s;animation-delay:-8s}
@keyframes orbFloat{0%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.04)}66%{transform:translate(-15px,25px) scale(.97)}100%{transform:translate(20px,10px) scale(1.02)}}

/* ── Prevent orbs from blending into content ── */
.app,.sbr,.mw{position:relative;z-index:1}

/* ── Sidebar — Liquid Glass ── */
/* ── Sidebar — dark in both modes ── */
.sbr{
  background:
    radial-gradient(ellipse 180px 320px at 50% 30%, rgba(156,163,175,0.18) 0%, transparent 80%),
    radial-gradient(ellipse 120px 140px at 50% 70%, rgba(107,114,128,0.15) 0%, transparent 70%),
    linear-gradient(180deg, #04050e 0%, #080d21 28%, #111c44 48%, #080d21 68%, #04050e 100%)
    !important;
  border-right:1px solid rgba(255,255,255,0.06)!important;
  box-shadow:4px 0 40px rgba(0,0,0,.5), inset -1px 0 0 rgba(255,255,255,.03)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
[data-theme="light"] .sbr{
  background:
    radial-gradient(ellipse 180px 320px at 50% 30%, rgba(156,163,175,0.20) 0%, transparent 80%),
    radial-gradient(ellipse 120px 140px at 50% 70%, rgba(107,114,128,0.18) 0%, transparent 70%),
    linear-gradient(180deg, #04050e 0%, #080d21 28%, #111c44 48%, #080d21 68%, #04050e 100%)
    !important;
  border-right:1px solid rgba(255,255,255,0.07)!important;
  box-shadow:4px 0 40px rgba(0,0,0,.45), inset -1px 0 0 rgba(255,255,255,.04)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Sidebar logo glow */
.lm{box-shadow:0 0 20px rgba(148,163,184,.25),0 0 40px rgba(148,163,184,.08)!important}

/* ── Nav items — liquid glass ── */
.ni:hover{
  background:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  color:rgba(255,255,255,.88)!important;
}
.ni.on{
  background:rgba(255,255,255,.13)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 4px 16px rgba(0,0,0,.22)!important;
  color:#fff!important;
}
.ni.on::before{background:rgba(255,255,255,.8)!important;box-shadow:0 0 7px rgba(255,255,255,.35)!important}
[data-theme="light"] .ni.on{
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 18px rgba(0,0,0,.18)!important;
  color:#fff!important;
}

/* ── Topbar ── */
.tb{
  background:rgba(10,13,28,0.75)!important;
  backdrop-filter:blur(32px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(32px) saturate(180%)!important;
  border-bottom:1px solid rgba(255,255,255,0.07)!important;
  box-shadow:0 2px 24px rgba(0,0,0,.25),inset 0 -1px 0 rgba(255,255,255,.04)!important;
}
[data-theme="light"] .tb{
  background:rgba(252,253,255,0.82)!important;
  backdrop-filter:blur(32px) saturate(200%)!important;
  -webkit-backdrop-filter:blur(32px) saturate(200%)!important;
  border-bottom:1px solid rgba(255,255,255,0.75)!important;
  box-shadow:0 2px 20px rgba(0,0,0,.06),inset 0 -1px 0 rgba(255,255,255,.6)!important;
}

/* ── Search bar ── */
.ts{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  transition:all .2s!important;
}
.ts:focus-within{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.2)!important;box-shadow:0 0 0 3px rgba(6,182,212,.12)!important}
[data-theme="light"] .ts{background:rgba(255,255,255,.65)!important;border-color:rgba(0,0,0,.1)!important}

/* ── Icon buttons in topbar ── */
.ib{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  transition:all .18s!important;
}
.ib:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.2)!important;box-shadow:0 4px 14px rgba(0,0,0,.25)!important}

/* ── Stat Cards — Liquid Glass Colored ── */
.sc{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s!important;
}
.sc:hover{
  transform:translateY(-4px) scale(1.015)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* Remove shimmer */
.sc::after{
  display:none!important;
}

/* ── DARK MODE: vivid solid gradients (no glass) ── */
.sc:has(.si.tl),.sc:has(.si.ac){
  background:linear-gradient(135deg,#0e7490 0%,#0891b2 55%,#06b6d4 100%)!important;
  border:1px solid rgba(6,182,212,.35)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
}
.sc:has(.si.bl){
  background:linear-gradient(135deg,#075985 0%,#0284c7 55%,#38bdf8 100%)!important;
  border:1px solid rgba(56,189,248,.35)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
}
.sc:has(.si.am){
  background:linear-gradient(135deg,#c2410c 0%,#ea580c 55%,#f97316 100%)!important;
  border:1px solid rgba(249,115,22,.35)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
}
.sc:has(.si.rd){
  background:linear-gradient(135deg,#9f1239 0%,#be123c 55%,#e11d48 100%)!important;
  border:1px solid rgba(244,63,94,.35)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
}
.sc:has(.si.vi){
  background:linear-gradient(135deg,#134e4a 0%,#0f766e 55%,#14b8a6 100%)!important;
  border:1px solid rgba(20,184,166,.35)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
}
.sc:has(.si.co){
  background:linear-gradient(135deg,#831843 0%,#9d174d 55%,#db2777 100%)!important;
  border:1px solid rgba(236,72,153,.35)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
}
/* Text on dark colored glass — keep white */
.sc:has([class^="si"]) .sv,.sc:has([class*=" si"]) .sv{color:#fff!important}
.sc:has([class^="si"]) .sl{color:rgba(255,255,255,.6)!important}
.sc:has([class^="si"]) .sd.p{background:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.9)!important}
.sc:has([class^="si"]) .sd.n{background:rgba(0,0,0,.22)!important;color:rgba(255,255,255,.85)!important}
.sc:has([class^="si"]) .sd.w{background:rgba(255,255,255,.15)!important;color:rgba(255,255,255,.9)!important}
/* Icon badges on colored glass */
.sc:has(.si.tl) .si.tl,.sc:has(.si.ac) .si{background:rgba(6,182,212,.28);color:#fff}
.sc:has(.si.bl) .si.bl{background:rgba(56,189,248,.28);color:#fff}
.sc:has(.si.am) .si.am{background:rgba(249,115,22,.28);color:#fff}
.sc:has(.si.rd) .si.rd{background:rgba(244,63,94,.28);color:#fff}
.sc:has(.si.vi) .si.vi{background:rgba(20,184,166,.28);color:#fff}
.sc:has(.si.co) .si.co{background:rgba(236,72,153,.28);color:#fff}

/* ── LIGHT MODE: vivid solid gradients (no glass) ── */
[data-theme="light"] .sc:has(.si.tl),[data-theme="light"] .sc:has(.si.ac){
  background:linear-gradient(135deg,#0891b2 0%,#06b6d4 55%,#22d3ee 100%)!important;
  border:1px solid rgba(6,182,212,.4)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
[data-theme="light"] .sc:has(.si.bl){
  background:linear-gradient(135deg,#0284c7 0%,#0ea5e9 55%,#38bdf8 100%)!important;
  border:1px solid rgba(2,132,199,.4)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
[data-theme="light"] .sc:has(.si.am){
  background:linear-gradient(135deg,#ea580c 0%,#f97316 55%,#fb923c 100%)!important;
  border:1px solid rgba(249,115,22,.4)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
[data-theme="light"] .sc:has(.si.rd){
  background:linear-gradient(135deg,#be123c 0%,#e11d48 55%,#f43f5e 100%)!important;
  border:1px solid rgba(244,63,94,.4)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
[data-theme="light"] .sc:has(.si.vi){
  background:linear-gradient(135deg,#0f766e 0%,#14b8a6 55%,#2dd4bf 100%)!important;
  border:1px solid rgba(20,184,166,.4)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
[data-theme="light"] .sc:has(.si.co){
  background:linear-gradient(135deg,#9d174d 0%,#be185d 55%,#db2777 100%)!important;
  border:1px solid rgba(236,72,153,.4)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
/* ── WARNING delta → AMBER card (overrides icon color) ── */
.sc:has(.sd.w){
  background:linear-gradient(135deg,#713f12 0%,#92400e 55%,#b45309 100%)!important;
  border:1px solid rgba(245,158,11,.35)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
}
.sc:has(.sd.w) .si,.sc:has(.sd.w) .si.tl,.sc:has(.sd.w) .si.bl,.sc:has(.sd.w) .si.am,.sc:has(.sd.w) .si.rd,.sc:has(.sd.w) .si.vi,.sc:has(.sd.w) .si.co,.sc:has(.sd.w) .si.ac{background:rgba(255,255,255,.2)!important;color:#fff!important}
/* ── NEGATIVE delta → RED card (overrides icon color) ── */
.sc:has(.sd.n){
  background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 55%,#dc2626 100%)!important;
  border:1px solid rgba(239,68,68,.35)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
}
.sc:has(.sd.n) .si,.sc:has(.sd.n) .si.tl,.sc:has(.sd.n) .si.bl,.sc:has(.sd.n) .si.am,.sc:has(.sd.n) .si.rd,.sc:has(.sd.n) .si.vi,.sc:has(.sd.n) .si.co,.sc:has(.sd.n) .si.ac{background:rgba(255,255,255,.2)!important;color:#fff!important}

/* ── LIGHT MODE: warning/negative card overrides ── */
[data-theme="light"] .sc:has(.sd.w){
  background:linear-gradient(135deg,#92400e 0%,#b45309 55%,#d97706 100%)!important;
  border:1px solid rgba(245,158,11,.4)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
[data-theme="light"] .sc:has(.sd.n){
  background:linear-gradient(135deg,#991b1b 0%,#dc2626 55%,#ef4444 100%)!important;
  border:1px solid rgba(239,68,68,.4)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12)!important;
}
[data-theme="light"] .sc:has(.sd.w) .si,[data-theme="light"] .sc:has(.sd.w) .si.tl,[data-theme="light"] .sc:has(.sd.w) .si.bl,[data-theme="light"] .sc:has(.sd.w) .si.am,[data-theme="light"] .sc:has(.sd.w) .si.rd,[data-theme="light"] .sc:has(.sd.w) .si.vi,[data-theme="light"] .sc:has(.sd.w) .si.co,[data-theme="light"] .sc:has(.sd.n) .si,[data-theme="light"] .sc:has(.sd.n) .si.tl,[data-theme="light"] .sc:has(.sd.n) .si.bl,[data-theme="light"] .sc:has(.sd.n) .si.am,[data-theme="light"] .sc:has(.sd.n) .si.rd,[data-theme="light"] .sc:has(.sd.n) .si.vi,[data-theme="light"] .sc:has(.sd.n) .si.co{background:rgba(255,255,255,.22)!important;color:#fff!important}

/* Light mode — texto branco nos cards coloridos */
[data-theme="light"] .sc:has([class^="si"]) .sv,
[data-theme="light"] .sc:has([class*=" si"]) .sv{color:#fff!important}
[data-theme="light"] .sc:has([class^="si"]) .sl{color:rgba(255,255,255,.75)!important}
[data-theme="light"] .sc:has([class^="si"]) .sd.p{background:rgba(255,255,255,.22)!important;color:#fff!important}
[data-theme="light"] .sc:has([class^="si"]) .sd.n{background:rgba(0,0,0,.18)!important;color:#fff!important}
[data-theme="light"] .sc:has([class^="si"]) .sd.w{background:rgba(255,255,255,.18)!important;color:#fff!important}
/* Light mode icon badges — white icons on vivid gradient backgrounds */
[data-theme="light"] .sc:has(.si.tl) .si.tl,[data-theme="light"] .sc:has(.si.ac) .si{background:rgba(255,255,255,.22)!important;color:#fff!important}
[data-theme="light"] .sc:has(.si.bl) .si.bl{background:rgba(255,255,255,.22)!important;color:#fff!important}
[data-theme="light"] .sc:has(.si.am) .si.am{background:rgba(255,255,255,.22)!important;color:#fff!important}
[data-theme="light"] .sc:has(.si.rd) .si.rd{background:rgba(255,255,255,.22)!important;color:#fff!important}
[data-theme="light"] .sc:has(.si.vi) .si.vi{background:rgba(255,255,255,.22)!important;color:#fff!important}
[data-theme="light"] .sc:has(.si.co) .si.co{background:rgba(255,255,255,.22)!important;color:#fff!important}
/* Plain cards light mode (sem icon colorido) */
[data-theme="light"] .sc:not(:has(.si.tl)):not(:has(.si.bl)):not(:has(.si.am)):not(:has(.si.rd)):not(:has(.si.vi)):not(:has(.si.co)):not(:has(.si.ac)){
  background:rgba(255,255,255,.75)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 4px 20px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.95)!important;
}

/* ── Content boxes (.bx) — Glass ── */
.bx{
  background:rgba(255,255,255,.03)!important;
  backdrop-filter:blur(16px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(140%)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 2px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07)!important;
  transition:box-shadow .3s,transform .3s cubic-bezier(.34,1.4,.64,1),backdrop-filter .2s!important;
}
.bx:hover{
  box-shadow:0 12px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(22px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%)!important;
}
[data-theme="light"] .bx{
  background:rgba(255,255,255,.75)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 2px 16px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.95)!important;
}

/* Box headers */
.bh{border-bottom:1px solid rgba(255,255,255,.06)!important}
[data-theme="light"] .bh{border-bottom:1px solid rgba(0,0,0,.07)!important}

/* ── Modals — Deep Glass ── */
.mb2{backdrop-filter:blur(12px) saturate(130%)!important;-webkit-backdrop-filter:blur(12px) saturate(130%)!important;will-change:transform;isolation:isolate}
.md{
  background:rgba(14,18,36,0.82)!important;
  backdrop-filter:blur(40px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(40px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
[data-theme="light"] .md{
  background:rgba(250,252,255,.92)!important;
  backdrop-filter:blur(40px) saturate(200%)!important;
  -webkit-backdrop-filter:blur(40px) saturate(200%)!important;
  border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.6)!important;
}
.mh{border-bottom:1px solid rgba(255,255,255,.07)!important}
.mf2{border-top:1px solid rgba(255,255,255,.07)!important}
[data-theme="light"] .mh{border-bottom:1px solid rgba(0,0,0,.07)!important}
[data-theme="light"] .mf2{border-top:1px solid rgba(0,0,0,.07)!important}

/* Modal close button */
.mx{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(8px)!important;transition:all .15s!important;
}
.mx:hover{background:rgba(255,255,255,.14)!important;color:var(--t1)!important;box-shadow:0 2px 10px rgba(0,0,0,.2)!important}

/* ── Form inputs — Glass ── */
.fi{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  transition:border-color .15s,box-shadow .15s,background .15s!important;
}
.fi:focus{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(6,182,212,.5)!important;
  box-shadow:0 0 0 3px rgba(6,182,212,.12),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
[data-theme="light"] .fi{background:rgba(255,255,255,.75)!important;border:1px solid rgba(0,0,0,.12)!important}
[data-theme="light"] .fi:focus{background:#fff!important;border-color:rgba(6,182,212,.6)!important;box-shadow:0 0 0 3px rgba(6,182,212,.1)!important}

/* Filter row selects */
.frow select,.frow input[type="date"]{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
[data-theme="light"] .frow select,[data-theme="light"] .frow input[type="date"]{background:rgba(255,255,255,.75)!important;border-color:rgba(0,0,0,.1)!important}

/* ── Buttons — Glass variants ── */
.bp{
  background:linear-gradient(135deg,#06b6d4 0%,#0284c7 55%,#0369a1 100%)!important;
  border:1px solid rgba(6,182,212,.5)!important;
  box-shadow:0 4px 18px rgba(2,132,199,.4),inset 0 1px 0 rgba(255,255,255,.22)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  color:#fff!important;
}
.bp:hover{background:linear-gradient(135deg,#22d3ee 0%,#0ea5e9 55%,#0284c7 100%)!important;box-shadow:0 8px 28px rgba(6,182,212,.5),inset 0 1px 0 rgba(255,255,255,.28)!important;transform:translateY(-2px)!important}

[data-theme="light"] .bp {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 55%, #075985 100%) !important;
  border: 1px solid rgba(2, 132, 199, 0.5) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
[data-theme="light"] .bp:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 55%, #0c4a6e 100%) !important;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.bg2{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.bg2:hover{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.18)!important}

[data-theme="light"] .bg2 {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--t2) !important;
}
[data-theme="light"] .bg2:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: var(--t1) !important;
}

/* ── Tabs — Glass ── */
.tabs{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.tab.on{
  background:rgba(255,255,255,.12)!important;
  box-shadow:0 2px 12px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
[data-theme="light"] .tabs{background:rgba(255,255,255,.6)!important;border-color:rgba(255,255,255,.9)!important}
[data-theme="light"] .tab.on{background:#fff!important;box-shadow:0 2px 10px rgba(0,0,0,.08)!important}

/* ── Toast ── */
.toast{
  background:rgba(14,18,36,.88)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)!important;
}
[data-theme="light"] .toast{background:rgba(255,255,255,.9)!important;border-color:rgba(255,255,255,.95)!important}

/* ── CRM Cards — Vivid solid ── */
.crm-card{
  background:var(--card)!important;
  border:1px solid var(--br)!important;
  border-left:3px solid var(--cc,var(--br))!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.crm-card:hover{
  background:var(--card-h)!important;
  box-shadow:0 6px 20px rgba(0,0,0,.18)!important;
  transform:translateY(-2px)!important;
}

/* ── CRM Column headers ── */
.crm-col-h{
  background:rgba(255,255,255,.05)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  border-color:rgba(255,255,255,.08)!important;
}

/* ── AI cards ── */
.aic,.mc2{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.aic:hover,.mc2:hover{
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1)!important;
}

/* ── Plan cards ── */
.pc{
  background:rgba(255,255,255,.04)!important;
  border:2px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.pc:hover{border-color:rgba(255,255,255,.16)!important;box-shadow:0 10px 28px rgba(0,0,0,.25)!important}
.pc.sel{border-color:rgba(6,182,212,.6)!important;background:rgba(6,182,212,.08)!important;box-shadow:0 0 0 1px rgba(6,182,212,.3),0 8px 24px rgba(6,182,212,.12)!important}

/* ── Total box in simulador ── */
.tb2{
  background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(14,165,233,.07))!important;
  border:1px solid rgba(6,182,212,.2)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  box-shadow:0 4px 20px rgba(6,182,212,.1),inset 0 1px 0 rgba(6,182,212,.2)!important;
}

/* ── Metrics cards (.mc2) ── */
.mtr{background:rgba(255,255,255,.06)!important}

/* ── Alert boxes ── */
.al{backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
.al.aw{background:rgba(249,115,22,.08)!important;border-color:rgba(249,115,22,.2)!important}
.al.ar{background:rgba(244,63,94,.08)!important;border-color:rgba(244,63,94,.2)!important}
.al.ag{background:rgba(6,182,212,.08)!important;border-color:rgba(6,182,212,.2)!important}

/* ── API endpoints ── */
.ep{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* ── Filial badges ── */
.filial-badge{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.filial-badge:hover{border-color:rgba(255,255,255,.18)!important}
.filial-badge.active{background:rgba(2,132,199,.12)!important;border-color:rgba(56,189,248,.35)!important}

/* ── Churn banner ── */
.churn-banner{
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

/* ── User info area ── */
.ur{border-top:1px solid rgba(255,255,255,.06)!important}
[data-theme="light"] .ur{border-top:1px solid rgba(255,255,255,.08)!important}

/* ── Sidebar footer ── */
.sb-ft{border-top:1px solid rgba(255,255,255,.06)!important}
[data-theme="light"] .sb-ft{border-top:1px solid rgba(0,0,0,.07)!important}

/* ── Map container glass border ── */
#map-container{border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 4px 24px rgba(0,0,0,.2)!important}

/* ── Logo mark enhanced ── */
.sb-logo{
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  background:rgba(255,255,255,.025)!important;
}
[data-theme="light"] .sb-logo{border-bottom:1px solid rgba(255,255,255,.06)!important;background:rgba(255,255,255,.025)!important;}

/* ── Page scroll area ── */
.pg{background:transparent!important}

/* ── Light theme bg ── */
[data-theme="light"] body{background:linear-gradient(135deg,#e8f0fe 0%,#f0f4ff 30%,#f5f8ff 60%,#e8f5f0 100%)!important}
[data-theme="light"] body::before{background:radial-gradient(circle,rgba(6,182,212,.1) 0%,rgba(14,165,233,.06) 50%,transparent 70%)}
[data-theme="light"] body::after{background:radial-gradient(circle,rgba(56,189,248,.09) 0%,rgba(245,158,11,.06) 50%,transparent 70%)}

/* ── Dark bg refinement ── */
[data-theme="dark"] body,[data-theme="dark"]{background:linear-gradient(135deg,#080b18 0%,#0c0f1a 40%,#0a0e1c 100%)!important}

/* ── Scrollbar glass ── */
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)!important;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)!important}
::-webkit-scrollbar-track{background:transparent!important}

/* ── Smooth page transition ── */
.pg{transition:opacity .18s ease!important}
.pg.on{animation:glassPageIn .35s cubic-bezier(.34,1.1,.64,1) both!important}
@keyframes glassPageIn{from{opacity:0;transform:translateY(10px) scale(.993)}to{opacity:1;transform:none}}

/* ── QTY buttons ── */
.qb{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(6px)!important;
}
.qb:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.18)!important}

/* ── Toggle (dark/light switch) ── */
.tg{
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3)!important;
}
[data-theme="light"] .tg{background:rgba(0,0,0,.15)!important;border-color:rgba(0,0,0,.2)!important}

/* ── Mobile overlay ── */
.mo{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;background:rgba(0,0,0,.45)!important}

/* ── Ranking rows ── */
.rr{transition:background .12s!important}
/* ── Notification panel ── */
.notif-panel{position:fixed;top:58px;right:12px;width:330px;background:var(--sf);border:1px solid var(--br);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.32);z-index:250;display:none;flex-direction:column;overflow:hidden;max-height:420px}
.notif-panel.on{display:flex}
.notif-hd{padding:12px 16px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--t1);flex-shrink:0}
.notif-body{overflow-y:auto;flex:1}
.notif-item{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .12s;cursor:default}
.notif-item.unread{border-left:3px solid var(--ac);padding-left:13px}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(255,255,255,.04)}
.notif-msg{font-size:12px;color:var(--t1);line-height:1.45}
.notif-time{font-size:10px;color:var(--t3);margin-top:3px}
.nb-count{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:8px;background:#ef4444;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid var(--sf)}
/* ── Profile selector ── */
.pf-sel{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);cursor:pointer;margin-bottom:5px;transition:background .15s;position:relative}
.pf-sel:hover{background:rgba(255,255,255,.08)}
.pf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pf-label{font-size:11px;font-weight:600;color:var(--t2);flex:1}
.pf-drop{position:absolute;bottom:calc(100% + 4px);left:0;right:0;background:var(--sf);border:1px solid var(--br);border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.28);z-index:300;display:none;flex-direction:column;overflow:hidden}
.pf-drop.on{display:flex}
.pf-opt{padding:9px 14px;font-size:12px;color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .12s}
.pf-opt:hover{background:rgba(255,255,255,.06)}
.pf-opt.active{color:var(--ac);font-weight:600}
[data-theme="light"] .pf-sel{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.07)}
[data-theme="light"] .pf-sel:hover{background:rgba(0,0,0,.07)}
[data-theme="light"] .pf-drop{background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.14)}
[data-theme="light"] .pf-opt:hover{background:rgba(0,0,0,.04)}
/* ── Permission-based visibility ── */
body:not(.pf-backoffice):not(.pf-admin) .hide-non-backoffice{display:none!important}
body:not(.pf-agendamento):not(.pf-gestor):not(.pf-admin) [data-perm="agendamento"]{display:none!important}
body:not(.pf-comercial):not(.pf-admin) [data-perm="comercial-only"]{display:none!important}
.rr:hover{background:rgba(255,255,255,.04)!important}

/* ── Table row hover ── */
.tbl tbody tr:hover td{background:rgba(255,255,255,.04)!important}

/* ── Commission calc glass ── */
.comiss-calc{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}


/* ==========================================
   GLAZZED UI CYBERPUNK CUSTOM OVERRIDES
   ========================================== */

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: 
    radial-gradient(circle at 10% 90%, rgba(29, 118, 133, 0.38) 0%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 90% 10%, rgba(74, 21, 75, 0.35) 0%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 50% 20%, rgba(138, 43, 226, 0.22) 0%, rgba(0, 0, 0, 0) 65%),
    #0a0c18 !important;
}

/* Glassmorphism containers with backdrop filters */
.bx, .sc, .md, .tb2 {
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--br) !important;
}

.sc:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 15px 40px rgba(0, 242, 254, 0.15) !important;
}

/* Sidebar structure */
.sbr {
  width: var(--sw);
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-right: 1px solid var(--sb-b) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Sidebar profile card styles (Marian Lewis) */
.sidebar-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 20px 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.avatar-wrapper {
  width: 68px;
  height: 68px;
  position: relative;
  margin-bottom: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--co), var(--ac));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.25);
  overflow: hidden;
}

.avatar-circle svg {
  width: 42px;
  height: 42px;
  color: #fff;
  opacity: 0.95;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  background: var(--vi);
  border: 2px solid #0a0c18;
  border-radius: 50%;
  box-shadow: 0 0 5px var(--vi);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-name {
  font-size: 1.0rem;
  font-weight: 700;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
  color: var(--t1);
}

.profile-role {
  font-size: 0.75rem;
  color: var(--t2);
  margin-bottom: 12px;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
  width: 100%;
  background: rgba(0,0,0,0.2);
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.04);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t1);
}

.stat-sub {
  font-size: 0.6rem;
  color: var(--ac);
}

/* Collapsed sidebar profile responsive rules (PRD Section 11 & 14) */
body.col .sidebar-profile {
  padding: 12px 0 !important;
}

body.col .profile-name, body.col .profile-role, body.col .profile-stats {
  display: none !important;
}

body.col .avatar-wrapper {
  width: 38px !important;
  height: 38px !important;
  margin-bottom: 0 !important;
}

body.col .avatar-circle svg {
  width: 22px !important;
  height: 22px !important;
}

body.col .avatar-status {
  width: 8px !important;
  height: 8px !important;
  bottom: 0px !important;
  right: 0px !important;
}

/* Resume Banner */
.resume-banner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 20px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.02);
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  align-items: center;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.resume-text h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--t1);
}

.resume-text p {
  font-size: 0.8rem;
  color: var(--t2);
  line-height: 1.4;
}

.resume-stats-rings {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.ring-metric {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ring-metric-svg {
  position: relative;
  width: 44px;
  height: 44px;
}

.ring-metric-svg svg {
  transform: rotate(-90deg);
  width: 44px;
  height: 44px;
}

.ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.04);
  stroke-width: 4.5px;
}

.ring-val {
  fill: none;
  stroke-width: 4.5px;
  stroke-linecap: round;
}

.ring-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: monospace;
}

.ring-metric-info {
  display: flex;
  flex-direction: column;
}

.ring-m-val {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--t1);
}

.ring-m-lbl {
  font-size: 0.7rem;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 3px;
}

.trend-indicator {
  font-size: 0.6rem;
  font-weight: 700;
}
.trend-indicator.up { color: var(--vi); }

/* Translucent input style overrides */
.fi {
  background: rgba(14, 16, 31, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--br) !important;
  color: var(--t1) !important;
  transition: all 0.2s ease;
}

.fi:focus {
  border-color: var(--ac) !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important;
  outline: none;
}

/* Sidebar navigation item overrides */
.ni {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.ni.on {
  background: rgba(0, 200, 150, 0.10) !important;
  border-color: rgba(0, 200, 150, 0.22) !important;
  color: #00c896 !important;
  box-shadow: 0 0 12px rgba(0, 200, 150, 0.07) !important;
}

.ni.on::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 22% !important;
  bottom: 22% !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: #00c896 !important;
  box-shadow: 0 0 8px rgba(0, 200, 150, 0.5) !important;
}

/* Styled scrollbars matching Glazzed UI */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 242, 254, 0.3);
}

/* Kanban task cards */
[data-theme="dark"] .crm-card, :root:not([data-theme="light"]) .crm-card {
  background: rgba(24, 27, 47, 0.45) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid var(--br) !important;
}

[data-theme="dark"] .crm-card:hover, :root:not([data-theme="light"]) .crm-card:hover {
  border-color: var(--ac) !important;
  box-shadow: 0 8px 24px rgba(0, 242, 254, 0.15) !important;
  transform: translateY(-2px) scale(1.01) !important;
}

[data-theme="light"] .crm-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #0f172a !important;
}

[data-theme="light"] .crm-card:hover {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) scale(1.01) !important;
}

[data-theme="light"] .crm-card .crm-cn {
  color: #0f172a !important;
}

[data-theme="light"] .crm-card .crm-ci {
  color: #334155 !important;
}

[data-theme="light"] .crm-card .crm-time {
  color: #475569 !important;
}

/* Toast styling override */
.toast {
  background: rgba(14, 16, 31, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.toast.on {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* Filial buttons style */
.filial-badge {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--br);
  color: var(--t2);
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filial-badge:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--t1);
}

.filial-badge.active {
  background: rgba(0, 242, 254, 0.12);
  border-color: var(--ac);
  color: var(--ac);
}

/* ── macOS Squircle App Icons for Sidebar ── */
.ni svg {
  width: 26px !important;
  height: 26px !important;
  padding: 5px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease !important;
}

/* Hover and active animation */
.ni:hover svg {
  transform: scale(1.08) translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

.ni.on svg {
  transform: scale(1.12) translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Specific macOS-like solid color themes (Interleaved & Official Colors) */

/* Gray (#555558) */
.ni[onclick*="'dcrm'"] svg,
.ni[onclick*="'dashbo'"] svg,
.ni[onclick*="'usuarios'"] svg,
.ni[onclick*="'config'"] svg {
  background: #555558 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Green (#34c759) */
.ni[onclick*="'crm'"]:not([onclick*="'crmbo'"]):not([onclick*="'dcrm'"]) svg,
.ni[onclick*="'slotdash'"] svg,
.ni[onclick*="'regioes'"] svg,
.ni[onclick*="'financeiro'"] svg {
  background: #34c759 !important;
}

/* Blue (#007aff) */
.ni[onclick*="'clientes'"] svg,
.ni[onclick*="'tecnicos'"] svg,
.ni[onclick*="'produtos'"] svg {
  background: #007aff !important;
}

/* Orange (#ff9500) */
.ni[onclick*="'statuscli'"] svg,
.ni[onclick*="'localidades'"] svg,
.ni[onclick*="'etapacrm'"]:not([onclick*="'etapacrmbo'"]) svg {
  background: #ff9500 !important;
}

/* Green (#34c759) */
.ni[onclick*="'simulador'"] svg { background: #34c759 !important; }

/* Indigo (#5856d6) */
.ni[onclick*="'instalacoes'"] svg,
.ni[onclick*="'crmbo'"] svg,
.ni[onclick*="'slotcfg'"] svg,
.ni[onclick*="'gerencial'"] svg {
  background: #5856d6 !important;
}

/* Teal (#30b0c7) */
.ni[onclick*="'parceiros'"] svg,
.ni[onclick*="'equipes'"] svg,
.ni[onclick*="'mapa'"] svg {
  background: #30b0c7 !important;
}

/* Red (#ff3b30) */
.ni[onclick*="'campanhas'"] svg,
.ni[onclick*="'metas'"] svg,
.ni[onclick*="'etapacrmbo'"] svg {
  background: #ff3b30 !important;
}

/* Yellow (#ffcc00) */
.ni[onclick*="'slotcal'"] svg,
.ni[onclick*="'reservas'"] svg {
  background: #ffcc00 !important;
  color: #1c1c1e !important;
  stroke: #1c1c1e !important;
}

/* Pink (#ff2d55) */
.ni[onclick*="'agentespipe'"] svg,
.ni[onclick*="'planos'"] svg {
  background: #ff2d55 !important;
}

/* Purple (#af52de) */
.ni[onclick*="'iafluxo'"] svg,
.ni[onclick*="'agentes'"]:not([onclick*="'agentespipe'"]) svg,
.ni[onclick*="'ia'"]:not([onclick*="'iafluxo'"]):not([onclick*="'gerencial'"]) svg {
  background: #af52de !important;
}

/* Dark Terminal (#1c1c1e) */
.ni[onclick*="'api'"] svg {
  background: #1c1c1e !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Light mode map legend overrides */
[data-theme="light"] .mapa-dem-info,
[data-theme="light"] #loc-map-hint {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .leaflet-draw-tooltip {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .leaflet-draw-tooltip-subtext {
  color: #475569 !important;
}

/* SaaS Authentication Screen Styles */
.auth-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, #0c0f1d 0%, #040509 100%);
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

[data-theme="light"] .auth-wrapper {
  background: radial-gradient(circle at 50% 50%, #f4f6fa 0%, #e2e8f0 100%);
}

.auth-glow-1 {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(6,182,212,0.35) 0%, rgba(6,182,212,0) 70%);
  pointer-events: none;
  filter: blur(25px);
  z-index: 1;
  animation: pulse-glow 8s infinite alternate;
}

.auth-glow-2 {
  position: absolute;
  bottom: 10%;
  right: 10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(139,92,246,0.3) 0%, rgba(139,92,246,0) 70%);
  pointer-events: none;
  filter: blur(25px);
  z-index: 1;
  animation: pulse-glow 12s infinite alternate-reverse;
}

@keyframes pulse-glow {
  0% { transform: scale(1) translate(0, 0); opacity: 0.7; }
  100% { transform: scale(1.2) translate(40px, -30px); opacity: 0.95; }
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: rgba(13, 17, 30, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: auth-card-entrance 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

[data-theme="light"] .auth-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

@keyframes auth-card-entrance {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

.auth-logo .lm {
  background: linear-gradient(135deg, var(--ac) 0%, #8b5cf6 100%);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgba(6,182,212,0.3);
}

.auth-logo .lt {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
}

.auth-logo .ls {
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
}

.auth-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.5;
  margin-bottom: 24px;
}

.auth-btn {
  transition: transform 0.15s ease, filter 0.15s ease;
}

.auth-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.auth-btn:active {
  transform: translateY(0);
}

.auth-switch {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--t3);
}

.auth-switch a {
  color: var(--ac);
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}

/* OFS Parity: Jeopardy Alert */
.card-jeopardy {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
  animation: pulse-jeopardy 2s infinite;
}

@keyframes pulse-jeopardy {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   NEW SPLIT LOGIN WITH ANIMATED CARTOON CHARACTERS (SHADCN / TAILWIND STYLE)
   ========================================================================== */

/* Main layout wrapper */
.auth-wrapper-split {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 9999;
  background: var(--background);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .auth-wrapper-split {
    grid-template-columns: 1fr 1fr;
  }
}

/* Left panel (Characters) */
.auth-left {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 50%, #1e1b4b 100%);
  padding: 48px;
  color: #ffffff;
  overflow: hidden;
  height: 100%;
}

@media (min-width: 1024px) {
  .auth-left {
    display: flex;
  }
}

.auth-brand {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}

.auth-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.characters-container {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 500px;
}

.characters-stage {
  position: relative;
  width: 550px;
  height: 400px;
}

/* Character Bodies */
.char-body {
  position: absolute;
  bottom: 0;
  transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: bottom center;
}

#char-purple {
  left: 70px;
  width: 180px;
  height: 400px;
  background-color: #6C3FF5;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}

#char-black {
  left: 240px;
  width: 120px;
  height: 310px;
  background-color: #2D2D2D;
  border-radius: 8px 8px 0 0;
  z-index: 2;
}

#char-orange {
  left: 0px;
  width: 240px;
  height: 200px;
  background-color: #FF9B6B;
  border-radius: 120px 120px 0 0;
  z-index: 3;
}

#char-yellow {
  left: 310px;
  width: 140px;
  height: 230px;
  background-color: #E8D754;
  border-radius: 70px 70px 0 0;
  z-index: 4;
}

/* Character Eyes containers */
.char-eyes {
  position: absolute;
  display: flex;
  transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#char-purple .char-eyes {
  left: 45px;
  top: 40px;
  gap: 32px;
}

#char-black .char-eyes {
  left: 26px;
  top: 32px;
  gap: 24px;
}

/* Eyeballs (white) */
.eyeball {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: height 0.15s ease-out, width 0.15s ease-out;
}

#char-black .eyeball {
  width: 16px;
  height: 16px;
}

/* Pupils */
.pupil {
  width: 7px;
  height: 7px;
  background-color: #2D2D2D;
  border-radius: 50%;
  transition: transform 0.1s ease-out;
}

#char-black .pupil {
  width: 6px;
  height: 6px;
}

/* Pupils only (no white eye) for orange & yellow */
.char-eyes-no-white {
  position: absolute;
  display: flex;
  transition: all 0.2s ease-out;
}

#char-orange .char-eyes-no-white {
  left: 82px;
  top: 90px;
  gap: 32px;
}

#char-yellow .char-eyes-no-white {
  left: 52px;
  top: 40px;
  gap: 24px;
}

.pupil-only {
  width: 12px;
  height: 12px;
  background-color: #2D2D2D;
  border-radius: 50%;
  transition: transform 0.1s ease-out;
}

/* Mouth for Yellow */
.char-mouth {
  position: absolute;
  width: 80px;
  height: 4px;
  background-color: #2D2D2D;
  border-radius: 9999px;
  transition: all 0.2s ease-out;
  left: 40px;
  top: 88px;
}

/* Footer & decorations on Left */
.auth-left-footer {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.auth-left-footer a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.auth-left-footer a:hover {
  color: #ffffff;
}

.grid-decor {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Right panel (Forms) */
.auth-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--background);
  overflow-y: auto;
  position: relative;
}

.auth-right-container {
  width: 100%;
  max-width: 420px;
}

/* Mobile Brand Header */
.auth-mobile-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 48px;
}

@media (min-width: 1024px) {
  .auth-mobile-logo {
    display: none;
  }
}

.auth-mobile-logo .auth-brand-icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* Right layout overrides */
.auth-right .auth-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 8px;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  color: var(--t1);
}

.auth-right .auth-subtitle {
  font-size: 14px;
  color: var(--t3);
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.5;
}

.auth-right .fi {
  height: 48px;
  background-color: var(--background);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 16px;
  color: var(--t1);
  font-size: 14px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

[data-theme="light"] .auth-right .fi {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}

.auth-right .fi:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.password-input-wrapper {
  position: relative;
  width: 100%;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--t3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s;
}

.password-toggle-btn:hover {
  color: var(--t1);
}

.remember-forgot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 14px;
}

.checkbox-label-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13.5px;
  color: var(--t2);
}

.custom-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--t3);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s;
  background-color: transparent;
}

.custom-checkbox:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.custom-checkbox:checked::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.auth-right .auth-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  transition: background-color 0.2s;
}

.auth-right .auth-btn:hover {
  background-color: #2563eb;
}

.social-login-btn {
  height: 48px;
  font-size: 15px;
  font-weight: 500;
  background-color: transparent;
  color: var(--t1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  transition: background-color 0.2s;
}

[data-theme="light"] .social-login-btn {
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.social-login-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .social-login-btn:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.google-icon {
  width: 20px;
  height: 20px;
}

/* ── Select / dropdown flash fix ──────────────────────────────────────────
   Sem color-scheme o browser abre o popup nativo com cores do SO (preto/branco)
   antes de aplicar o CSS, causando o flash. color-scheme:dark força o popup
   nativo a usar dark mode imediatamente.
   option precisa de cor sólida (não rgba/transparente) — o popup nativo ignora
   backdrop-filter e transparências.
────────────────────────────────────────────────────────────────────────── */
select.fi,
.mb2 select,
.mb2 select.fi,
.frow select {
  color-scheme: dark;
}
[data-theme="light"] select.fi,
[data-theme="light"] .mb2 select,
[data-theme="light"] .mb2 select.fi,
[data-theme="light"] .frow select {
  color-scheme: light;
}

/* Cor sólida dos itens da lista nativa */
select.fi option,
.mb2 select option,
.frow select option {
  background-color: #181b2f;
  color: #e2e8f0;
}
[data-theme="light"] select.fi option,
[data-theme="light"] .mb2 select option,
[data-theme="light"] .frow select option {
  background-color: #ffffff;
  color: #0f172a;
}

/* Selects não se beneficiam de backdrop-filter (popup nativo ignora o pai);
   remover o blur reduz repaints e alivia a lentidão nos formulários */
select.fi,
.mb2 select.fi {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(14, 16, 31, 0.85) !important;
}
[data-theme="light"] select.fi,
[data-theme="light"] .mb2 select.fi {
  background: rgba(255, 255, 255, 0.92) !important;
}

/* ── Custom Select Component (substitui <select> nativo nos formulários) ─── */
.cs-wrap{position:relative;display:block}
.cs-btn{display:flex!important;align-items:center;justify-content:space-between;width:100%;text-align:left;cursor:pointer;gap:8px}
.cs-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:400}
.cs-chv{width:12px;height:12px;flex-shrink:0;opacity:.5;transition:transform .15s;stroke-width:2.5}
.cs-btn.cs-active .cs-chv{transform:rotate(180deg);opacity:.8}
.cs-drop{display:none;position:fixed;z-index:900;background:#181b2f;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.45);padding:4px;max-height:240px;overflow-y:auto}
.cs-drop.cs-open{display:block}
.cs-item{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:rgba(226,232,240,.75);transition:background .1s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-item:hover{background:rgba(255,255,255,.07);color:#e2e8f0}
.cs-item.cs-sel{color:#60a5fa;font-weight:600}
[data-theme="light"] .cs-drop{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.14)}
[data-theme="light"] .cs-item{color:rgba(15,23,42,.7)}
[data-theme="light"] .cs-item:hover{background:rgba(0,0,0,.04);color:#0f172a}
[data-theme="light"] .cs-item.cs-sel{color:#0284c7}