.mtabs{display:flex;gap:4px;overflow-x:auto;padding:0 18px;scrollbar-width:thin}
.mtabs button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:16px 16px 14px;font:500 15px var(--body);color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.mtabs button svg{width:17px;height:17px}.mtabs button:hover{color:var(--ink)}
.mtabs button.on{color:var(--goldbtn);border-bottom-color:var(--goldbtn);font-weight:700}
.mkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-bottom:22px}
.mkpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mkpi label{display:block;font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mkpi b{display:block;font:800 24px/1.2 var(--display);margin:8px 0 4px;letter-spacing:-.3px}.mkpi small{font-weight:600;color:var(--muted)}
.mkpi b.red{color:#E1284B}.mkpi b.green{color:#12925A}small.blue,span.blue{color:var(--goldbtn)}
.mkpi.fp{border-color:#F8BBD0;background:color-mix(in srgb,#FCE4EC 55%,var(--surface))}.mkpi.fp b{color:#D81B60}.mkpi.fp.on b{color:#C2185B}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;min-width:0}
.mbox h2{font-size:17px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.mbox .row h2{border:0;padding:0;margin:0}
.mkv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0;font-size:14.5px}
.mkv span{color:var(--muted)}.mkv b{text-align:right;font-weight:700;word-break:break-word}
.inlsel{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--surface);font-weight:700;color:var(--goldbtn);max-width:60%}
@media (max-width:820px){.mcols{grid-template-columns:1fr}.mhero-top,.mactions{padding-inline:16px}.mhero-id h1{font-size:22px}}
:root[data-theme="dark"] .fpchip.on{background:#3A1426;color:#F48FB1;border-color:#6A2446}:root[data-theme="dark"] .mkpi.fp{background:#2A1220;border-color:#6A2446}:root[data-theme="dark"] .stchip.paid{background:#10301F;color:#5BD69B;border-color:#1D5A3A}:root[data-theme="dark"] .stchip.due{background:#3A1515;color:#FF8A8A;border-color:#6B2626}
html.glass .mhero,html.glass .mkpi,html.glass .mbox{background:rgba(28,28,30,.30);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12)}
html.glass .mactions{background:rgba(255,255,255,.03)}
@media (max-width:720px){.appbar{gap:8px;padding:0 10px}.appbar .ab-user{display:none}.appbar .ab-brand{flex:1;min-width:0}.appbar .ab-brand>div{min-width:0}.appbar .ab-brand b{font-size:15px;display:block;overflow:hidden;text-overflow:ellipsis}.appbar .ab-brand + .ab-pill + .grow{display:none}.appbar .ab-add{padding:8px 10px}}
/* ===== Pro dashboard theme (clean white, blue accents, pastel icon circles, brand icons) ===== */
:root{
  --ground:#F5F7FB;--surface:#FFFFFF;--solid:#FFFFFF;--raised:#F1F5F9;--line:#E6EAF2;--ink:#0F172A;--ink2:#334155;--muted:#64748B;
  --gold:#2563EB;--gold-soft:#EAF1FF;--on-gold:#FFFFFF;--goldbtn:#2563EB;--teal:#2563EB;--teal2:#3B82F6;--label:#2563EB;
  --good:#16A34A;--good-soft:#E7F8EF;--warn:#EA7A0C;--warn-soft:#FFF1E6;--bad:#DC2626;--bad-soft:#FEECEC;--info:#2563EB;--info-soft:#EAF1FF;
  --vio:#7C3AED;--vio-soft:#F1EDFF;--pink:#E11D48;--pink-soft:#FFEDF1;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.04);
  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0B1220;--surface:#111A2E;--solid:#111A2E;--raised:#17223A;--line:#22304D;--ink:#E2E8F0;--ink2:#CBD5E1;--muted:#94A3B8;
  --gold:#60A5FA;--gold-soft:#16284A;--goldbtn:#3B82F6;--label:#60A5FA;
  --good:#4ADE80;--good-soft:#11301F;--warn:#FB923C;--warn-soft:#33200F;--bad:#F87171;--bad-soft:#3A1717;--info:#60A5FA;--info-soft:#16284A;--vio:#A78BFA;--vio-soft:#251C45;--pink:#FB7185;--pink-soft:#3A1520;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --ground:#0B1220;--surface:#111A2E;--solid:#111A2E;--raised:#17223A;--line:#22304D;--ink:#E2E8F0;--ink2:#CBD5E1;--muted:#94A3B8;
  --gold:#60A5FA;--gold-soft:#16284A;--goldbtn:#3B82F6;--label:#60A5FA;
  --good:#4ADE80;--good-soft:#11301F;--warn:#FB923C;--warn-soft:#33200F;--bad:#F87171;--bad-soft:#3A1717;--info:#60A5FA;--info-soft:#16284A;--vio:#A78BFA;--vio-soft:#251C45;--pink:#FB7185;--pink-soft:#3A1520;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}
html:not(.glass) body{background:var(--ground);font-family:var(--body);color:var(--ink)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.3px}h1{font-weight:700}h2{font-weight:700;font-size:16px}
/* cards */
html:not(.glass) :is(.panel,.kpi,.mfilter,.dcard,.mhero,.mbox,.mkpi,.tablewrap,.mdcard,.chatlist,.chatpane,.card,.col){background:var(--surface);border:1px solid var(--line)!important;border-radius:14px;box-shadow:var(--shadow)}
html:not(.glass) .top{background:transparent;box-shadow:none;padding:0 2px;margin-bottom:18px}
html:not(.glass) .top h1{font-size:clamp(22px,2.2vw,26px)}
html:not(.glass) .dcard{border-radius:14px}
html:not(.glass) .dcard.st-expired{border-top:3px solid #F87171!important}html:not(.glass) .dcard.st-expiring{border-top:3px solid #FB923C!important}html:not(.glass) .dcard.st-active{border-top:3px solid #34D399!important}html:not(.glass) .dcard.st-frozen{border-top:3px solid #60A5FA!important}
html:not(.glass) .dcard:hover{box-shadow:0 10px 26px rgba(16,24,40,.08)}
html:not(.glass) .modal{background:var(--surface);border-radius:18px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(16,24,40,.18)}
html:not(.glass) .modalbg{background:rgba(15,23,42,.35)}
.kpi .l{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ink2)}
/* inputs */
html:not(.glass) :is(.f input,.f select,.f textarea,.inp,.chatform textarea,.inlsel){background:var(--surface);border:1px solid var(--line);border-radius:10px}
html:not(.glass) :is(.f input,.f select,.f textarea,.inp):focus{outline:0;border-color:var(--goldbtn);box-shadow:0 0 0 3px color-mix(in srgb,var(--goldbtn) 16%,transparent)}
html:not(.glass) .mfilter :is(.msearch,.mselect){border:1px solid var(--line);border-radius:10px;height:50px}
html:not(.glass) .mfilter .mselect span{background:var(--surface)}
/* buttons */
html:not(.glass) .btn{border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:600;letter-spacing:0;color:var(--ink2)}
html:not(.glass) .btn:hover{background:var(--raised)}
html:not(.glass) .btn.gold{background:var(--goldbtn);border-color:var(--goldbtn);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--goldbtn) 28%,transparent)}
html:not(.glass) .btn.gold:hover{filter:brightness(1.07)}
html:not(.glass) .btn.wa{background:#25D366;border-color:#25D366;color:#fff}
html:not(.glass) .btn.ghost{background:transparent;border-color:transparent}
html:not(.glass) .seg{border-radius:10px;padding:3px;gap:2px;background:var(--raised);border-color:var(--line)}
html:not(.glass) .seg button{border-radius:8px}html:not(.glass) .seg button.on{background:var(--surface);color:var(--goldbtn);box-shadow:0 1px 3px rgba(16,24,40,.12)}
html:not(.glass) .ib{border-radius:10px}
html:not(.glass) .dtile{border-radius:12px;background:var(--gold-soft);color:var(--goldbtn);font:700 20px var(--display)}
.pill{border-radius:99px}
html:not(.glass) .chip.on{background:var(--goldbtn);border-color:var(--goldbtn);color:#fff}
.av{background:var(--gold-soft);color:var(--goldbtn)}
.pbtn{border-radius:10px;box-shadow:none}
.pbtn.green{background:#16A34A}.pbtn.red{background:#E11D48}.pbtn.blue{background:#2563EB}.pbtn.wa{background:#25D366}.pbtn.amber{background:#F59E0B;color:#fff}.pbtn.pink{background:#DB2777}.pbtn.purple{background:#7C3AED}.pbtn.gray{background:#64748B}
html:not(.glass) .mactions{background:transparent}
/* top bar */
html:not(.glass) .appbar{height:64px;background:var(--surface);color:var(--ink);box-shadow:none;border-bottom:1px solid var(--line);padding:0 20px 0 12px;gap:14px}
html:not(.glass) .appbar .hb{color:var(--ink2)}html:not(.glass) .appbar .hb:hover{background:var(--raised)}
.ab-title{font:700 20px var(--display);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-search{display:flex;align-items:center;gap:10px;height:42px;flex:0 1 340px;min-width:140px;padding:0 14px;border-radius:10px;background:var(--raised);border:1px solid var(--line);color:var(--muted)}
.ab-search svg{width:17px;height:17px;flex:none}.ab-search input{border:0;outline:0;background:none;width:100%;font:500 14px var(--body);color:var(--ink)}
.ab-search:focus-within{border-color:var(--goldbtn);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--goldbtn) 14%,transparent)}
.ab-ibtn{position:relative;width:42px;height:42px;border-radius:50%;border:0;background:none;display:grid;place-items:center;color:var(--ink2);cursor:pointer;flex:none}
.ab-ibtn:hover{background:var(--raised)}.ab-ibtn svg{width:21px;height:21px}
.ab-ibtn .rd{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#EF4444;color:#fff;font:700 10.5px/18px var(--body);border:2px solid var(--surface);font-style:normal}
.ab-me{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line);min-width:0}
.ab-me .ph{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--display);color:#fff;background:linear-gradient(135deg,#60A5FA,#2563EB);flex:none;overflow:hidden}
.ab-me .ph img{width:100%;height:100%;object-fit:cover}
.ab-me b{display:block;font:700 14px/1.2 var(--display);white-space:nowrap}.ab-me small{display:block;font-size:12px;color:var(--muted);white-space:nowrap}
.appbar .ab-add,html:not(.glass) .appbar .ab-add{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:10px;border:0;background:var(--goldbtn);color:#fff;font:600 14px var(--body);cursor:pointer;white-space:nowrap;box-shadow:0 6px 14px color-mix(in srgb,var(--goldbtn) 28%,transparent)}
.appbar .ab-add svg{width:17px;height:17px}.appbar .ab-add:hover{filter:brightness(1.07);background:var(--goldbtn)}
/* sidebar */
html:not(.glass) .app{grid-template-columns:252px 1fr;min-height:calc(100vh - 64px)}
html:not(.glass) .side{top:64px;height:calc(100vh - 64px);background:var(--surface);border-right:1px solid var(--line);box-shadow:none;padding:16px 14px;gap:3px}
html:not(.glass) .side .brand{display:flex;padding:2px 6px 18px;gap:10px}
html:not(.glass) .side .brand b{font:800 18px/1.1 var(--display);color:var(--goldbtn);letter-spacing:-.3px}
html:not(.glass) .side .brand small{color:var(--muted);font-weight:700;letter-spacing:.14em;font-size:10.5px}
html:not(.glass) .ucard,html:not(.glass) .subcard{display:none}
html:not(.glass) .side .navlabel{padding:14px 12px 6px;font-size:10.5px;letter-spacing:.1em;color:#94A3B8}
html:not(.glass) .side .nav{color:var(--ink2);font:500 14.5px var(--body);border-radius:10px;padding:9px 12px;gap:12px}
html:not(.glass) .side .nav .ico{width:22px;height:22px;background:none!important;color:var(--muted)!important}
html:not(.glass) .side .nav .ico svg{width:20px;height:20px}
html:not(.glass) .side .nav .ico.brand{display:grid;place-items:center}html:not(.glass) .side .nav .ico.brand svg{width:20px;height:20px;display:block}
html:not(.glass) .side .nav:hover{background:var(--raised);color:var(--ink)}
html:not(.glass) .side .nav.on,html:not(.glass) .side .nav.on:hover{background:var(--goldbtn)!important;color:#fff;font-weight:600;box-shadow:0 6px 14px color-mix(in srgb,var(--goldbtn) 30%,transparent)}
html:not(.glass) .side .nav.on .ico{color:#fff!important}
html:not(.glass) .side .nav.on .ico.brand{background:#fff!important;border-radius:6px;padding:2px}
html:not(.glass) .side .cnt{background:var(--goldbtn);color:#fff;border:0;border-radius:99px;min-width:20px;text-align:center}
html:not(.glass) .side .nav.on .cnt{background:#fff;color:var(--goldbtn)}
.helpcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;margin:14px 0 10px;text-decoration:none;color:inherit}
.helpcard .hi{width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--goldbtn);display:grid;place-items:center;flex:none}.helpcard .hi svg{width:19px;height:19px}
.helpcard b{display:block;font-size:13.5px}.helpcard small{display:block;color:var(--muted);font-size:12px}.helpcard span{display:block;font-weight:700;font-size:13px;color:var(--ink)}
.securecard{border-radius:14px;padding:14px;background:linear-gradient(160deg,#EFF5FF,#DCE9FF);color:#0F172A;margin-bottom:10px;overflow:hidden}
.securecard svg{display:block;width:100%;height:88px;margin-bottom:6px}
.securecard b{display:block;font-size:14px}.securecard small{display:block;font-size:12px;color:#475569;margin-top:2px}
:root[data-theme="dark"] .securecard{background:linear-gradient(160deg,#16284A,#12203B);color:#E2E8F0}:root[data-theme="dark"] .securecard small{color:#94A3B8}
html:not(.glass) .side .foot{border-top:1px solid var(--line)}
html:not(.glass) .logoutbtn{border-radius:10px;color:var(--ink2);font-weight:600}
html:not(.glass) main{padding-top:24px}
/* tabs */
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 18px}
.ptabs button{border:0;background:none;padding:8px 16px;border-radius:9px;font:600 13.5px var(--body);color:var(--muted);cursor:pointer}
.ptabs button:hover{color:var(--ink)}.ptabs button.on{background:var(--gold-soft);color:var(--goldbtn)}
.mtabs button.on{color:var(--goldbtn);border-bottom-color:var(--goldbtn)}
/* brand icons */
.bi{width:20px;height:20px;display:inline-block;flex:none;vertical-align:middle}
.itile{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.itile svg{width:21px;height:21px}
.itile.blue{background:var(--info-soft);color:#2563EB}.itile.green{background:var(--good-soft);color:#16A34A}.itile.purple{background:var(--vio-soft);color:#7C3AED}.itile.orange{background:var(--warn-soft);color:#EA7A0C}.itile.pink{background:var(--pink-soft);color:#E11D48}
span.itile.blue{color:#2563EB}
.itile.sq{border-radius:10px}.itile.solid.blue{background:#2563EB;color:#fff}.itile.solid.green{background:#22C55E;color:#fff}.itile.solid.orange{background:#F97316;color:#fff}
/* dashboard */
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 18px;min-width:0}
.pcard h2{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.pcard h2 a,.pcard h2 .lnk2{font:600 13px var(--body);color:var(--goldbtn);cursor:pointer;background:none;border:0;text-decoration:none}
.kgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.kc{display:flex;gap:14px;align-items:flex-start}.kc .itile{width:52px;height:52px}.kc .itile svg{width:24px;height:24px}
.kc label{display:block;font:600 13px var(--body);color:var(--ink2)}.kc b{display:block;font:700 23px/1.25 var(--display);letter-spacing:-.4px;margin:4px 0 2px;white-space:nowrap}
.kc small{font-size:12px;color:var(--muted)}
.up{color:#16A34A;font-weight:700}.down{color:#DC2626;font-weight:700}
.drow{display:grid;grid-template-columns:1.25fr 1fr .9fr;gap:18px;margin-bottom:18px}
.drow2{display:grid;grid-template-columns:1.9fr 1fr;gap:18px;margin-bottom:18px}
.calwrap{display:grid;grid-template-columns:1fr 150px;gap:16px}
.cal .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.cal .ch b{font-size:14px}
.cal .ch button{border:0;background:none;width:28px;height:28px;border-radius:8px;cursor:pointer;color:var(--ink2);font-size:18px}.cal .ch button:hover{background:var(--raised)}
.cal table{width:100%;border-collapse:collapse;table-layout:fixed}.cal th{font:600 11px var(--body)!important;color:var(--muted)!important;padding:4px 0!important;background:none!important;text-transform:none!important;letter-spacing:0!important;text-align:center!important;border:0!important}
.cal td{text-align:center;padding:3px 0;border:0!important;font:500 12.5px var(--body);position:relative}
.cal td span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%}
.cal td.o{color:var(--muted);opacity:.45}.cal td.t span{background:#2563EB;color:#fff;font-weight:700}
.cal td.d span::after{content:"";position:absolute;bottom:0;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#F97316}
.ctiles{display:flex;flex-direction:column;gap:10px}
.ctile{border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ctile label{display:block;font:600 12px var(--body);color:var(--ink2)}.ctile b{display:block;font:700 22px var(--display);margin-top:4px}
.ctile.blue{background:var(--info-soft)}.ctile.green{background:var(--good-soft)}.ctile.orange{background:var(--warn-soft)}
.ctile .itile{width:34px;height:34px}.ctile .itile svg{width:17px;height:17px}
.chart svg{width:100%;height:220px;display:block}
.chart .ax{fill:var(--muted);font:500 11px var(--body)}.chart .gridl{stroke:var(--line);stroke-width:1}
.chart .ttip rect{fill:var(--surface);stroke:var(--line)}.chart .ttip text{fill:var(--ink);font:700 12px var(--body)}
.tsel{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 8px;font:600 12px var(--body);color:var(--ink2)}