@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Open+Sans:wght@400;600&display=swap");
:root{--navy:#0F2447;--navy2:#16315F;--blue:#2A6BD6;--blue2:#1F54AC;--soft:#EAF2FC;--bg:#F3F6FB;--line:#E1E8F3;--line2:#CBD6E6;--mut:#5B6B85;--ink:#0F2447;
--ok:#16794A;--okbg:#DDF3E6;--warn:#9A4B00;--warnbg:#FDEBD8;--bad:#B42318;--badbg:#FCE4E2;--gray:#4A5568;--graybg:#EEF0F4;
--H:Montserrat,"Helvetica Neue",Arial,sans-serif;--B:"Open Sans","Helvetica Neue",Arial,sans-serif;--sw:252px;--r:14px;
--sh:0 1px 2px rgba(15,36,71,.06),0 8px 24px rgba(15,36,71,.06)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:400 14.5px/1.55 var(--B);color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue2)}
:focus-visible{outline:3px solid rgba(42,107,214,.45);outline-offset:2px;border-radius:6px}
.app{display:grid;grid-template-columns:var(--sw) 1fr;min-height:100vh;transition:grid-template-columns .2s}
body.collapsed .app{grid-template-columns:76px 1fr}
/* sidebar */
.side{background:linear-gradient(180deg,#0F2447,#132C57);color:#DCE6F7;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.side-top{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-logo img{height:30px;width:auto;display:block}
.side-acct{margin-top:12px;font:700 11px var(--H);letter-spacing:.08em;text-transform:uppercase;color:#9FBDF0}
.side-acct b{display:block;font:800 14px var(--H);letter-spacing:0;text-transform:none;color:#fff;margin-top:2px}
.nav{flex:1;overflow-y:auto;padding:10px 10px 16px}
.nav h6{font:800 10.5px var(--H);letter-spacing:.12em;text-transform:uppercase;color:#7F9BC9;margin:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:#DCE6F7;text-decoration:none;font:700 13.5px var(--H);position:relative;transition:background .15s,color .15s}
.nav a svg{flex:none;width:18px;height:18px;opacity:.9}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.on{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(42,107,214,.35)}
.nav a .cnt{margin-left:auto;font:800 11px var(--H);background:rgba(255,255,255,.14);border-radius:6px;padding:2px 8px}
.nav a.on .cnt{background:rgba(255,255,255,.25)}
.nav a .cnt.red{background:#E5484D;color:#fff}
.side-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#9FB2D3}
.side-foot b{color:#fff;font-family:var(--H)}
body.collapsed .side .lbl,body.collapsed .side h6,body.collapsed .side-acct,body.collapsed .side-foot,body.collapsed .nav a .cnt{display:none}
body.collapsed .nav a{justify-content:center;padding:11px}
body.collapsed .side-logo img{height:22px}
/* top bar */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 22px;min-height:62px}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s;position:relative;flex:none}
.iconbtn:hover{background:var(--soft);border-color:var(--line2)}
.iconbtn svg{width:18px;height:18px}
.iconbtn .dot{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:5px;background:#E5484D;border:2px solid #fff}
.gsearch{flex:1;max-width:560px;position:relative}
.gsearch input{width:100%;border:1px solid var(--line2);border-radius:11px;padding:9px 12px 9px 38px;background:#F7F9FD;transition:border-color .15s,background .15s}
.gsearch input:focus{background:#fff;border-color:var(--blue);outline:none;box-shadow:0 0 0 4px rgba(42,107,214,.12)}
.gsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mut)}
.gsearch kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:700 11px var(--H);color:var(--mut);border:1px solid var(--line2);border-radius:6px;padding:1px 6px;background:#fff}
.gres{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(15,36,71,.16);max-height:420px;overflow:auto;padding:6px}
.gres h6{font:800 10.5px var(--H);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:8px 10px 4px}
.gres button{display:flex;width:100%;text-align:left;gap:10px;align-items:center;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer}
.gres button:hover,.gres button.act{background:var(--soft)}
.gres small{color:var(--mut);margin-left:auto;font-size:12px}
.demo-pill{font:800 11px var(--H);letter-spacing:.06em;text-transform:uppercase;background:#FFF;border:1.5px dashed var(--blue);color:var(--blue2);border-radius:6px;padding:5px 11px;white-space:nowrap}
.user{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:4px 10px 4px 4px;background:#fff;cursor:pointer;position:relative}
.user:hover{background:var(--soft)}
.avatar{width:30px;height:30px;border-radius:9px;background:var(--navy);color:#fff;font:800 12px/30px var(--H);text-align:center;flex:none}
.user b{font:700 13px var(--H)}
.menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(15,36,71,.16);min-width:240px;padding:6px;z-index:60}
.menu button,.menu a{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 11px;border-radius:8px;cursor:pointer;text-decoration:none;color:var(--ink);font-size:13.5px;text-align:left}
.menu button:hover,.menu a:hover{background:var(--soft)}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.menu .mhead{padding:8px 11px;font-size:12.5px;color:var(--mut)}
.notif{min-width:340px;max-width:380px}
.notif .n{display:grid;grid-template-columns:10px 1fr;gap:10px;padding:10px 11px;border-radius:8px}
.notif .n:hover{background:var(--soft)}
.notif .n i{width:8px;height:8px;border-radius:5px;margin-top:7px;background:var(--blue)}
.notif .n i.red{background:#E5484D}.notif .n i.green{background:#1F9D63}
.notif .n small{display:block;color:var(--mut);font-size:12px}
/* content */
.content{padding:24px 26px 60px;max-width:1500px;width:100%}
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{font:800 28px/1.15 var(--H);letter-spacing:-.015em;margin:0}
.ph p{margin:4px 0 0;color:var(--mut)}
.ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumb{font:700 12px var(--H);color:var(--mut);letter-spacing:.04em;margin-bottom:6px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:#fff;border-radius:10px;padding:8px 14px;font:700 13px var(--H);cursor:pointer;color:var(--ink);text-decoration:none;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{background:var(--soft);border-color:var(--blue);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(42,107,214,.28)}
.btn.pri:hover{background:var(--blue2);border-color:var(--blue2)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.dark:hover{background:var(--navy2)}
.btn.danger{color:var(--bad);border-color:#F1B5B0}
.btn.danger:hover{background:var(--badbg);border-color:var(--bad)}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);border:1px solid rgba(225,232,243,.7)}
.card-h{display:flex;align-items:center;gap:10px;padding:16px 18px 0;flex-wrap:wrap}
.card-h h3{font:800 15.5px var(--H);margin:0}
.card-h .sub{color:var(--mut);font-size:12.5px}
.card-h .r{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card-b{padding:14px 18px 18px}
.grid{display:grid;gap:16px}.grid>*,.kpis>*,.lead>*{min-width:0}
.g3s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.g2s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:15px 16px;border:1px solid rgba(225,232,243,.7);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.kpi:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,36,71,.06),0 14px 30px rgba(15,36,71,.1)}
.kpi .k{font:700 11.5px var(--H);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.kpi .v{font:800 26px/1.15 var(--H);margin-top:6px;letter-spacing:-.01em}
.kpi .s{font-size:12.5px;color:var(--mut);margin-top:4px}
.kpi .delta{font:800 11.5px var(--H);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.up{background:var(--okbg);color:var(--ok)}.down{background:var(--badbg);color:var(--bad)}
.kpi .spark{position:absolute;right:12px;top:14px;width:76px;height:26px;opacity:.9}
.chip{display:inline-flex;align-items:center;gap:6px;font:800 11px var(--H);letter-spacing:.03em;border-radius:6px;padding:4px 10px;white-space:nowrap}
.chip:before{content:"";width:7px;height:7px;border-radius:5px;background:currentColor;opacity:.85}
.chip.plain:before{display:none}
.c-active{background:var(--okbg);color:var(--ok)}.c-pending{background:var(--soft);color:var(--blue2)}.c-failed{background:var(--badbg);color:var(--bad)}
.c-canceled{background:var(--graybg);color:var(--gray)}.c-sched{background:var(--warnbg);color:var(--warn)}.c-free{background:#E8E5FB;color:#4B3BB0}
.tag{display:inline-block;font:700 11px var(--H);background:var(--soft);color:var(--blue2);border-radius:6px;padding:2px 7px}
/* tables */
.tbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.inp{border:1px solid var(--line2);border-radius:10px;padding:8px 11px;background:#fff;min-width:0;transition:border-color .15s,box-shadow .15s}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(42,107,214,.12)}
.inp.search{padding-left:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6B85' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center;min-width:240px}
select.inp{padding-right:30px;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%230F2447' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;cursor:pointer}
.twrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
.t th{text-align:left;font:800 11px var(--H);letter-spacing:.07em;text-transform:uppercase;color:var(--mut);padding:11px 14px;background:#F7F9FD;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:1}
.t th.sort{cursor:pointer;user-select:none}
.t th.sort:hover{color:var(--ink)}
.t th .ar{display:inline-block;margin-left:4px;opacity:.35}
.t th.asc .ar,.t th.desc .ar{opacity:1;color:var(--blue)}
.t td{padding:11px 14px;border-bottom:1px solid #EEF2F8;vertical-align:middle}
.t tbody tr{transition:background .12s}
.t tbody tr:hover{background:#F5F8FE}
.t tbody tr.click{cursor:pointer}
.t td.num,.t th.num{text-align:right;font-variant-numeric:tabular-nums}
.t .who b{display:block;font-weight:600}.t .who small{color:var(--mut);font-size:12px}
.t .mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.t tr.flag td{background:#FFF8EF}
.pager{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:12px 18px;color:var(--mut);font-size:13px;flex-wrap:wrap}
.pager .pg{display:flex;gap:6px}
.empty{padding:46px 20px;text-align:center;color:var(--mut)}
.empty svg{width:42px;height:42px;color:#9FB2D3}
.empty b{display:block;color:var(--ink);font:800 15px var(--H);margin:10px 0 4px}
.errbox{border:1px solid #F1B5B0;background:var(--badbg);color:#7A1C14;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.infobox{border:1px solid #C9DAF5;background:var(--soft);color:#173B7A;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.infobox svg,.errbox svg{width:18px;height:18px;flex:none;margin-top:2px}
/* skeleton */
.sk{background:linear-gradient(90deg,#EEF2F8 0,#F7F9FD 40%,#EEF2F8 80%);background-size:300% 100%;animation:sk 1.1s linear infinite;border-radius:10px}
@keyframes sk{from{background-position:100% 0}to{background-position:0 0}}
/* charts */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--B);fill:#5B6B85;font-size:11px}
.chart .lab{font-family:var(--H);font-weight:800;fill:var(--ink);font-size:11.5px}
.chart rect.bar,.chart path.hov,.chart circle.hov{transition:opacity .15s}
.chart rect.bar:hover{opacity:.82}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tip{position:fixed;pointer-events:none;background:var(--navy);color:#fff;font-size:12.5px;padding:7px 10px;border-radius:8px;box-shadow:0 10px 24px rgba(15,36,71,.25);z-index:200;white-space:nowrap}
.tip b{font-family:var(--H)}
/* drawer & modal */
.scrim{position:fixed;inset:0;background:rgba(15,36,71,.38);z-index:90;animation:fade .15s ease}
@keyframes fade{from{opacity:.4}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);background:#fff;z-index:95;box-shadow:-20px 0 50px rgba(15,36,71,.2);display:flex;flex-direction:column;animation:slidein .2s ease}
@keyframes slidein{from{transform:translateX(30px)}to{transform:none}}
.dr-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.dr-h h2{font:800 20px/1.2 var(--H);margin:0}
.dr-h p{margin:3px 0 0;color:var(--mut);font-size:13px}
.dr-h .x{margin-left:auto}
.tabs{display:flex;gap:4px;padding:0 18px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:12px 12px;font:700 13px var(--H);color:var(--mut);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--blue2);border-bottom-color:var(--blue)}
.dr-b{flex:1;overflow-y:auto;padding:18px 22px}
.dr-f{border-top:1px solid var(--line);padding:12px 22px;display:flex;gap:8px;flex-wrap:wrap;background:#FAFBFE}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:18px;z-index:100;box-shadow:0 30px 70px rgba(15,36,71,.3);animation:pop .16s ease}
.modal.wide{width:min(760px,calc(100vw - 28px))}
@keyframes pop{from{transform:translate(-50%,-48%)}to{transform:translate(-50%,-50%)}}
.m-h{padding:20px 22px 6px;display:flex;gap:12px;align-items:flex-start}
.m-h h2{font:800 19px var(--H);margin:0}
.m-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--soft);color:var(--blue2)}
.m-ic.red{background:var(--badbg);color:var(--bad)}
.m-ic svg{width:20px;height:20px}
.m-b{padding:8px 22px 6px;color:#2C3E5C}
.m-b p{margin:0 0 10px}
.m-f{padding:14px 22px 20px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font:700 12px var(--H);color:var(--mut)}
.field .inp{width:100%}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>.field{flex:1;min-width:150px}
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;position:relative}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle .sw{width:38px;height:22px;border-radius:6px;background:#C9D3E3;position:relative;transition:background .15s;flex:none}
.toggle .sw:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:5px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.toggle input:checked+.sw{background:var(--blue)}
.toggle input:checked+.sw:after{left:19px}
.toggle input:focus-visible+.sw{outline:3px solid rgba(42,107,214,.45);outline-offset:2px}
/* toasts */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:300}
.toast{background:var(--navy);color:#fff;border-radius:12px;padding:11px 14px;box-shadow:0 14px 34px rgba(15,36,71,.3);display:flex;gap:10px;align-items:flex-start;max-width:380px;font-size:13.5px;animation:pop2 .2s ease}
.toast svg{width:18px;height:18px;flex:none;margin-top:1px;color:#8FE3B5}
.toast small{display:block;color:#B8C8E6;font-size:12px}
@keyframes pop2{from{transform:translateY(8px)}to{transform:none}}
/* member card */
.mcw{container-type:inline-size;max-width:460px;width:100%}
.mcard{aspect-ratio:3.375/2.125;border-radius:4.4cqw;background:linear-gradient(135deg,var(--cardA,#0F2447),var(--cardB,#16315F) 62%,var(--cardC,#1E3F78));color:#fff;padding:6cqw 6.5cqw 0;display:flex;flex-direction:column;box-shadow:0 2px 4px rgba(15,36,71,.12),0 18px 40px rgba(15,36,71,.22);position:relative;overflow:hidden;font-family:var(--H);}
.mcard:after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 115% -10%,transparent 0 2.2cqw,rgba(255,255,255,.05) 2.2cqw 2.45cqw);pointer-events:none}
.mcard .mc-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.mcard .mc-lg{display:flex;align-items:center;gap:2cqw}
.mcard .mc-lg img{height:7cqw;width:auto;display:block}
.mcard .mc-lg span{font:800 6.2cqw/1 var(--H);border-left:.5cqw solid #fff;padding-left:2cqw}
.mcard .mc-st{font:800 2.5cqw var(--H);background:rgba(255,255,255,.14);border-radius:6px;padding:1cqw 2.4cqw}
.mcard .mc-name{margin-top:auto;font:800 6cqw/1.05 var(--H);position:relative;z-index:1}
.mcard .mc-name em{font-style:normal;font-size:2.6cqw;background:var(--blue);border-radius:1.4cqw;padding:1cqw 1.8cqw;vertical-align:middle;margin-left:2cqw}
.mcard .mc-f{display:grid;grid-template-columns:1.45fr 1fr .85fr 1fr;margin:3.6cqw 0 4.4cqw;position:relative;z-index:1}
.mcard .mc-f div+div{border-left:.25cqw solid rgba(159,189,240,.35);padding-left:2.4cqw}
.mcard .mc-f i{display:block;font:700 2.1cqw var(--H);font-style:normal;text-transform:uppercase;letter-spacing:.09em;color:#9FBDF0;margin-bottom:.8cqw}
.mcard .mc-f b{font:800 3.8cqw var(--H)}
.mcard .mc-ft{margin:0 -6.5cqw;padding:2.8cqw 6.5cqw;font:700 2.9cqw var(--H);background:rgba(0,0,0,.22);border-top:.5cqw solid var(--blue);position:relative;z-index:1}
/* misc */
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:13.5px}
.kv dt{color:var(--mut);font-weight:600}.kv dd{margin:0}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #EEF2F8}
.list li:last-child{border-bottom:0}
.pc{font:800 11px var(--H);background:var(--navy);color:#fff;border-radius:7px;padding:4px 8px;flex:none}
.note{background:#F7F9FD;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;white-space:pre-wrap}
.code{background:var(--navy);color:#E6EEFB;border-radius:12px;padding:14px 16px;font:12.5px/1.6 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all;position:relative}
.code .cp{position:absolute;top:8px;right:8px}
.lead{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.lead .card{padding:16px 18px;transition:transform .15s}
.lead .card:hover{transform:translateY(-2px)}
.rank{font:800 30px var(--H);color:var(--blue)}
.pbar{height:8px;border-radius:6px;background:#E6EDF8;overflow:hidden}
.pbar>i{display:block;height:100%;background:var(--blue);border-radius:6px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:10px;overflow-x:auto;background:#fff;max-width:100%;scrollbar-width:none}
.seg button{flex:none}
.seg button{border:0;background:#fff;padding:7px 12px;font:700 12.5px var(--H);cursor:pointer;color:var(--ink)}
.seg button:hover{background:var(--soft)}
.seg button.on{background:var(--navy);color:#fff}
.preview-hero{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.ph-nav{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}
.ph-nav img{height:20px}
.ph-nav .pn-rx{font:800 15px var(--H);border-left:2px solid currentColor;padding-left:8px}
.ph-nav .pn-btn{margin-left:auto;font:800 11px var(--H);color:#fff;border-radius:7px;padding:6px 10px}
.ph-body{padding:22px 18px;text-align:center;background:linear-gradient(180deg,#EEF3FA,#fff)}
.ph-body h4{font:800 22px/1.1 var(--H);margin:0 0 8px;color:var(--navy)}
.ph-body h4 span{display:block}
.ph-body p{margin:0 0 12px;color:var(--mut);font-size:12.5px}
.ph-body .pb{display:inline-block;font:800 12px var(--H);color:#fff;border-radius:9px;padding:9px 14px}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:5px;margin-right:7px}
.sd-ok{background:#1F9D63}.sd-warn{background:#E08A00}.sd-off{background:#A0AEC0}.sd-bad{background:#E5484D}
.hamb{display:none}
.mt0{margin-top:0}.mt16{margin-top:16px}.mb16{margin-bottom:16px}.muted{color:var(--mut)}.small{font-size:12.5px}.right{text-align:right}
.callout{border-left:4px solid var(--blue);background:#fff;border-radius:0 12px 12px 0;padding:12px 16px;box-shadow:var(--sh)}
@media (max-width:1200px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
 .app{grid-template-columns:1fr}
 body.collapsed .app{grid-template-columns:1fr}
 .side{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:120;transform:translateX(-100%);transition:transform .2s;height:100vh}
 body.navopen .side{transform:none;box-shadow:20px 0 50px rgba(15,36,71,.3)}
 body.collapsed .side .lbl,body.collapsed .side h6,body.collapsed .side-acct,body.collapsed .side-foot,body.collapsed .nav a .cnt{display:revert}
 body.collapsed .nav a{justify-content:flex-start;padding:9px 12px}
 .hamb{display:inline-flex}.colbtn{display:none}
 .g2,.g3,.g21,.g12{grid-template-columns:1fr}
 .lead{grid-template-columns:1fr}
 .content{padding:18px 14px 50px}
 .top{padding:10px 14px;gap:8px}
 .user b,.demo-pill.full{display:none}
}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.g4{grid-template-columns:1fr}.kpi .v{font-size:21px}.kpi .spark{display:none}
 .ph h1{font-size:23px}.inp.search{min-width:0;width:100%}.gsearch kbd{display:none}.kv{grid-template-columns:1fr}.tbar .inp{flex:1 1 140px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.side,.top,.ph .acts,.toasts{display:none}.app{display:block}.content{padding:0}}

/* Static affiliate review, adapted from the selected L03 agency concept. */
:root{--r:16px;--bg:#EEF3FA;--ok:#12805C;--sh:0 1px 2px rgba(15,36,71,.06),0 8px 28px rgba(15,36,71,.07)}
body{font-size:15.5px}.top{justify-content:space-between}.top .context{font:700 13px var(--H)}
.side-logo img{max-width:100%;height:30px}.side-acct{text-transform:none;letter-spacing:0}
.nav h6{text-transform:none;letter-spacing:.04em}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi .k{text-transform:none;letter-spacing:0}.chip:before{display:none}.t th{text-transform:none;letter-spacing:.02em}
.card-h h2{font:800 15.5px var(--H);margin:0}.card-h h3{font-size:15.5px}.card-b>p:first-child{margin-top:0}
.card-b>p:last-child{margin-bottom:0}.stack{display:grid;gap:16px}.mt8{margin-top:8px}.push{margin-left:auto}
.linkbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.linkbox input{flex:1;min-width:0;width:100%;font-size:12.5px}
.chart{height:165px}.chart-meta{display:flex;justify-content:space-between;color:var(--mut);font-size:12px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.filter-group{display:flex;gap:5px;flex-wrap:wrap}
.filter-group button[aria-pressed=true]{background:var(--soft);border-color:var(--blue);color:var(--blue2)}
.review-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.review-links a{display:block;padding:20px;text-decoration:none;color:var(--ink);height:100%}.review-links a:hover{border-color:var(--blue)}
.review-links h2{font:800 17px var(--H);margin:0 0 8px}.review-links p{margin:0;color:var(--mut);font-size:14px}
.review-links .tag{margin-bottom:10px}.email{white-space:pre-wrap;overflow-wrap:anywhere;background:#F7F9FD;border:1px solid var(--line);border-radius:12px;padding:16px;font:400 14px/1.7 var(--B)}
.dialog{border:1px solid var(--line);padding:0;border-radius:16px;width:min(580px,calc(100vw - 28px));max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 30px 70px rgba(15,36,71,.3);color:var(--ink)}
.dialog::backdrop{background:rgba(15,36,71,.48)}.dialog h2{font:800 20px var(--H);margin:0}.dialog .m-h{justify-content:space-between}.dialog .m-b{padding-top:14px}
.dialog .m-f{border-top:1px solid var(--line);margin-top:12px}.gate-list{list-style:none;padding:0;margin:12px 0}
.gate-list li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;justify-content:space-between;font-size:13px}
.gate-list b{font-weight:600}.notice{min-height:24px;color:var(--blue2);font-size:13px}.toast{background:#fff;color:var(--ink);border:1px solid var(--line)}
summary{cursor:pointer;font:700 14px var(--H);padding:16px 18px}details[open] summary{border-bottom:1px solid var(--line)}
.skip{position:fixed;left:12px;top:-100px;z-index:200;background:#fff;padding:10px;border-radius:8px}.skip:focus{top:12px}
[hidden]{display:none!important}button{touch-action:manipulation}.mono{font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.side{position:static;transform:none;width:auto;height:auto}.app{display:block}.nav{display:flex;gap:5px;flex-wrap:wrap;padding:10px}.nav h6,.side-foot{display:none}.nav a{font-size:12px;padding:8px}.side-top{padding:16px;display:flex;gap:20px;align-items:center}.side-acct{margin:0}.top{position:static}.content{padding:20px 14px 44px}.g2,.g21{grid-template-columns:1fr}.review-links{grid-template-columns:1fr}.side-logo img{height:26px}.side-acct b{font-size:12px}.top .context{font-size:12px}}
@media(max-width:420px){.kpi{padding:14px 12px}.kpi .v{font-size:20px}.top .context{max-width:150px}.side-top{gap:14px}.chip{white-space:normal}.review-links a{padding:18px}}

.kpis4{grid-template-columns:repeat(4,minmax(0,1fr))}.rowlbl{font:700 12px var(--H);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}.delta.up{background:#E3F4EA;color:#1B6B3A}
@media(max-width:900px){.kpis4{grid-template-columns:1fr 1fr}}

/* v3: tighter radius + sidebar font picker (Victor 8:13 PM AST) */
:root{--r:8px;--N:Sora,"Helvetica Neue",Arial,sans-serif}
body.nav-manrope{--N:Manrope,"Helvetica Neue",Arial,sans-serif}
body.nav-plex{--N:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif}
body.nav-jakarta{--N:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif}
body.nav-grotesk{--N:"Space Grotesk","Helvetica Neue",Arial,sans-serif}
body.nav-montserrat{--N:Montserrat,"Helvetica Neue",Arial,sans-serif}
.card,.kpi{border-radius:8px}.nav a{border-radius:6px;font:600 13.5px var(--N);letter-spacing:.01em}
.nav h6{font:700 10.5px var(--N);letter-spacing:.14em}
.side-acct{font:700 11px var(--N)}.side-acct b{font:700 14px var(--N)}.side-foot b{font-family:var(--N)}
.btn,.inp,.chip,.linkbox .inp{border-radius:5px}.callout{border-radius:6px}
.fontpick{display:flex;gap:4px;align-items:center;margin-left:14px}
.fontpick span{font:700 10px var(--H);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-right:4px}
.fontpick button{font:600 11px var(--B);padding:4px 8px;border:1px solid #CBD7EA;background:#fff;border-radius:4px;color:#0F2447;cursor:pointer}
.fontpick button.on{background:#0F2447;color:#fff;border-color:#0F2447}
@media(max-width:900px){.fontpick{margin:8px 0 0;flex-wrap:wrap}}
body.nav-arial{--N:Arial,"Helvetica Neue",Helvetica,sans-serif}
body.nav-helvetica{--N:"Helvetica Neue",Helvetica,Arial,sans-serif}
body.nav-system{--N:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
body.nav-verdana{--N:Verdana,Geneva,sans-serif}
body.nav-trebuchet{--N:"Trebuchet MS",Tahoma,sans-serif}
body.nav-arial .nav a,body.nav-helvetica .nav a,body.nav-system .nav a,body.nav-verdana .nav a,body.nav-trebuchet .nav a{font-weight:700}

/* v6 dashboard interactions. Scoped to leave the other mockups unchanged. */
.dashboard-v6 .top{flex-wrap:wrap;justify-content:flex-start}
.dashboard-v6 .fontpick{flex:1;flex-wrap:wrap;min-width:0}
.dashboard-v6 .fontpick button{border-radius:5px}
.dashboard-v6 .volume-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.dashboard-v6 .kpi{overflow:visible}
.dashboard-v6 .kpi:hover{transform:none}
.dashboard-v6 .kpi .k{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;line-height:1.5;margin:0;min-height:36px}
.dashboard-v6 .kpi .v{font-size:clamp(20px,1.65vw,26px);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.dashboard-v6 .kpi .delta{display:inline-block;margin-left:0}
.dashboard-v6 .kpi-help{display:inline-flex;flex:none;font-family:var(--B)}
.dashboard-v6 .info-help{display:inline-flex;align-items:center;justify-content:center;width:22px;height:24px;padding:0;border:1px solid var(--line2);border-radius:5px;background:#F7F9FD;color:var(--blue2);font:700 12px var(--B);cursor:help}
.dashboard-v6 .info-help:hover,.dashboard-v6 .info-help:focus-visible{background:var(--soft);border-color:var(--blue)}
.dashboard-v6 .kpi-tip{display:none;position:fixed;z-index:150;width:300px;max-width:calc(100vw - 24px);padding:12px 14px;border:1px solid var(--line2);border-radius:8px;background:var(--navy);color:#fff;box-shadow:var(--sh);font:400 12.5px/1.65 var(--B);text-align:left;text-transform:none;letter-spacing:0}
.dashboard-v6 .kpi-help.help-open .kpi-tip{display:block}
.dashboard-v6 .refund-kpi.is-risk{border-color:var(--bad);background:#FFF8F7}
.dashboard-v6 .refund-kpi.is-risk .v,.dashboard-v6 .refund-alert{color:var(--bad)}
.dashboard-v6 .dashboard-right{align-content:start}
.dashboard-v6 .chart-toolbar{align-items:center;justify-content:space-between}
.dashboard-v6 .range-toggle{display:flex;flex-wrap:wrap;gap:5px}
.dashboard-v6 .range-toggle [aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.dashboard-v6 .chart-legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--mut);font-size:12px}
.dashboard-v6 .chart-legend span{display:inline-flex;align-items:center;gap:7px}
.dashboard-v6 .chart-legend i{display:inline-block;width:18px;height:8px;border-radius:0}
.dashboard-v6 .legend-enrollments{background:var(--blue)}
.dashboard-v6 .legend-clicks{border-top:2px dashed var(--navy);border-bottom:2px dashed var(--navy)}
.dashboard-v6 .activity-plot{position:relative;width:100%}
.dashboard-v6 .activity-chart{display:block;width:100%;height:auto;min-height:250px;overflow:visible;touch-action:pan-y}
.dashboard-v6 .activity-chart text{font:400 12px var(--B);fill:var(--mut)}
.dashboard-v6 .activity-chart .axis-title{font-weight:600;fill:var(--ink)}
.dashboard-v6 .activity-chart .activity-grid{stroke:var(--line);stroke-width:1}
.dashboard-v6 .activity-chart .enrollment-area{fill:var(--blue);fill-opacity:.12}
.dashboard-v6 .activity-chart .enrollment-line{fill:none;stroke:var(--blue);stroke-width:3;stroke-linejoin:round}
.dashboard-v6 .activity-chart .click-line{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:6 4;stroke-linejoin:round}
.dashboard-v6 .activity-chart .chart-guide{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3}
.dashboard-v6 .activity-chart .enrollment-marker{fill:var(--blue);stroke:#fff;stroke-width:2}
.dashboard-v6 .activity-chart .click-marker{fill:var(--navy);stroke:#fff;stroke-width:2}
.dashboard-v6 .chart-tooltip{position:absolute;z-index:5;pointer-events:none;min-width:156px;max-width:calc(100% - 16px);padding:10px 12px;background:var(--navy);color:#fff;border:1px solid #40597F;border-radius:8px;font-size:12px;line-height:1.6;box-shadow:var(--sh)}
.dashboard-v6 .chart-tooltip b,.dashboard-v6 .chart-tooltip span{display:block}
.dashboard-v6 .chart-selection{min-height:40px;margin-bottom:0;font-variant-numeric:tabular-nums}
.dashboard-v6 .code-table-wrap{max-width:100%;border-radius:5px}
.dashboard-v6 #dashboard-codes{min-width:820px}
.dashboard-v6 #dashboard-codes th{padding:0;position:static}
.dashboard-v6 .sort-code{display:flex;gap:6px;align-items:center;width:100%;padding:11px 10px;border:0;border-radius:5px;background:transparent;text-align:left;font:inherit;letter-spacing:inherit;white-space:nowrap;cursor:pointer}
.dashboard-v6 .sort-code:hover{color:var(--blue2);background:var(--soft)}
.dashboard-v6 .sort-triangle{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid var(--mut);flex:none}
.dashboard-v6 th[aria-sort=ascending] .sort-triangle{border-bottom-color:var(--blue)}
.dashboard-v6 th[aria-sort=descending] .sort-triangle{border-bottom:0;border-top:5px solid var(--blue)}
.dashboard-v6 #dashboard-codes td{font-variant-numeric:tabular-nums}
.dashboard-v6 #dashboard-codes tbody tr:hover{background:var(--soft)}
.dashboard-v6 .link-steps{list-style:none;counter-reset:link-step;padding:0;margin:0 0 18px}
.dashboard-v6 .link-steps li{counter-increment:link-step;position:relative;padding:0 0 16px 36px;font-size:13px}
.dashboard-v6 .link-steps li:last-child{padding-bottom:0}
.dashboard-v6 .link-steps li:before{content:counter(link-step);position:absolute;left:0;top:0;width:24px;height:26px;border:1px solid var(--line2);border-radius:5px;background:var(--soft);color:var(--blue2);font:700 12px/24px var(--H);text-align:center}
.dashboard-v6 .share-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.dashboard-v6 .share-row>b{width:100%;font-size:13px}
.dashboard-v6 .share-manual textarea{display:block;width:100%;margin-top:6px;resize:vertical;font-size:12px}
.dashboard-v6 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1100px) and (min-width:901px){.dashboard-v6 .g21{grid-template-columns:minmax(0,1fr)}.dashboard-v6 .dashboard-right{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.dashboard-v6 .volume-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-v6 .kpi .v{font-size:24px}}
@media(max-width:560px){.dashboard-v6 .activity-chart{min-height:0}.dashboard-v6 .activity-chart text{font-size:16px}.dashboard-v6 .activity-chart .axis-date{font-size:14px}.dashboard-v6 .kpi .v{font-size:22px}.dashboard-v6 .range-toggle .btn{font-size:11px;padding:7px 9px}.dashboard-v6 .card-b{padding:14px 12px}.dashboard-v6 .chart-tooltip{font-size:11px;padding:7px 9px}}
/* Date labels keep their size as the SVG viewBox follows the available width. */
@media(max-width:560px){.dashboard-v6 .activity-chart text,.dashboard-v6 .activity-chart .axis-date{font-size:12px}}

/* v7: font picker on its own row so the top bar never wraps the title */
.top{flex-wrap:wrap;row-gap:6px}.fontpick{flex-basis:100%;order:9;margin:0}

/* v7b: per-code table fits the card at 1280 */
#dashboard-codes th,#dashboard-codes td{white-space:nowrap;padding:9px 8px;font-size:12.5px}#dashboard-codes .mono{letter-spacing:0}

/* v7c: all 8 code-table columns visible without scrolling */
#dashboard-codes{table-layout:fixed;width:100%}#dashboard-codes th{white-space:normal;line-height:1.2;font-size:11.5px;vertical-align:bottom}#dashboard-codes td{white-space:normal;font-size:12.5px}#dashboard-codes th:first-child,#dashboard-codes td:first-child{width:13%}#dashboard-codes th:nth-child(2),#dashboard-codes td:nth-child(2){width:15%}

.dashboard-v6 #dashboard-codes{min-width:0}

#dashboard-codes th button,#dashboard-codes th{white-space:nowrap;font-size:11px;padding:6px 4px;text-align:left}#dashboard-codes th:first-child,#dashboard-codes td:first-child{width:16%}#dashboard-codes th:nth-child(2),#dashboard-codes td:nth-child(2){width:14%}

#dashboard-codes .sort-triangle{display:none}#dashboard-codes th[aria-sort="ascending"] .sort-triangle,#dashboard-codes th[aria-sort="descending"] .sort-triangle{display:inline}#dashboard-codes th button,#dashboard-codes th{padding:6px 3px}

/* v8: picker removed; sidebar on Arial (Victor asked for a basic font) */
:root{--N:Arial,"Helvetica Neue",Helvetica,sans-serif}.nav a{font-weight:700}.fontpick{display:none}

/* v9: sidebar on Plus Jakarta Sans (Victor: "i like the jakarta") */
:root{--N:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif}
.nav h6.adm{color:#F6C65B}

/* FirstPromoter parity screens. Existing screen bodies keep their styling. */
.parity-screen .field{margin-bottom:14px}
.parity-screen .field-label{display:block;font-weight:600;margin-bottom:6px}
.parity-screen .inp{max-width:100%}
.parity-screen input.inp{width:100%}
.parity-screen textarea.inp{display:block;width:100%;resize:vertical}
.parity-screen input[readonly],.parity-screen textarea[readonly]{background:#F7F9FD}
.parity-screen .rect-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.parity-screen .rect-list [role=option]{border:1px solid var(--line2);border-radius:5px;padding:9px 12px;cursor:pointer;background:#fff}
.parity-screen .rect-list [aria-selected=true]{border:2px solid var(--blue);padding:8px 11px;background:var(--soft);color:var(--blue2)}
.parity-screen .rect-check{display:flex;align-items:flex-start;gap:9px;margin:12px 0;cursor:pointer}
.parity-screen .rect-check input{appearance:none;flex:none;width:20px;height:22px;margin:0;border:2px solid var(--line2);border-radius:3px;background:#fff;cursor:pointer}
.parity-screen .rect-check input:checked{background:var(--blue);border-color:var(--blue);box-shadow:inset 0 0 0 4px #fff}
.parity-screen .rect-fieldset{border:1px solid var(--line2);border-radius:6px;padding:12px 16px;margin:0 0 16px}
.parity-screen .rect-fieldset .rect-check{display:inline-flex;margin-right:18px}
.parity-screen .actions{display:flex;gap:8px;flex-wrap:wrap}
.parity-screen .detail-drawer{border-left:4px solid var(--blue)}
.parity-screen .t td{vertical-align:top;font-variant-numeric:tabular-nums}
.parity-screen #links-table{min-width:1250px}
.parity-screen #links-table .field{min-width:220px}
.parity-screen #links-table input{font-size:12px}
.parity-screen .volume-kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:16px}
.parity-screen .kpi .v{font-size:clamp(19px,1.8vw,27px);overflow-wrap:anywhere}
.parity-screen .report-chart{width:100%;height:auto;display:block}
.parity-screen .report-chart text{font:400 12px var(--B);fill:var(--mut)}
.parity-screen .report-chart .activity-grid{stroke:var(--line);stroke-width:1}
.parity-screen .report-chart .enrollment-line{fill:none;stroke:var(--blue);stroke-width:3;stroke-linejoin:round}
.parity-screen .report-chart .click-line{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:6 4;stroke-linejoin:round}
.parity-screen [aria-pressed=true]{background:var(--soft);border-color:var(--blue);color:var(--blue2)}
.parity-screen .submitted-copy{margin:12px 0;padding:16px;background:#F7F9FD;border:1px solid var(--line);border-radius:6px}
.parity-screen mark{background:var(--badbg);color:var(--bad);border-radius:3px;padding:1px 4px}
.parity-screen .copy-fallback{margin-top:16px}
@media(max-width:1100px){.parity-screen .volume-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.parity-screen .g2{grid-template-columns:minmax(0,1fr)}.parity-screen .content{padding-right:12px;padding-left:12px}.parity-screen .card-b{padding:14px 12px}.parity-screen .rect-list{display:grid;grid-template-columns:1fr}.parity-screen .kv{grid-template-columns:1fr}.parity-screen .kv dd{margin:0 0 10px}}

/* Layout 06: brand bar and persistent collapsible sidebar. */
body.layout-06{height:auto;min-height:100vh;--N:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif}
.layout-06 .brand-bar{height:24px;background:var(--blue);color:#fff;padding:3px 20px;font:600 10px/18px var(--N)}
.layout-06 .app{grid-template-columns:252px minmax(0,1fr);min-height:calc(100vh - 24px);transition:none}
.layout-06 .main{min-width:0}
.layout-06 .content{padding:28px 28px 48px;min-width:0}
.layout-06 .top{gap:18px;min-height:76px;flex-wrap:wrap;justify-content:flex-start;backdrop-filter:none;background:#fff;position:relative;z-index:40}
.layout-06 .top .context{flex:1}
.layout-06 .side{background:var(--navy);overflow:visible;z-index:50;min-width:0;top:24px;height:calc(100vh - 24px)}
.layout-06 .side-top{padding:24px 20px 20px}
.layout-06 .side-logo{display:flex;align-items:center;min-height:40px}
.layout-06 .side-logo img{width:174px;height:auto;max-width:100%}
.layout-06 .side-acct{margin-top:20px;color:#B6CAE9}
.layout-06 .side-acct b{font-size:13px;line-height:1.5}
.layout-06 .nav{padding:18px 12px;overflow:visible}
.layout-06 .nav a{gap:12px;min-height:44px;padding:12px;line-height:1.45;margin-bottom:5px;font:600 13px/1.45 var(--N);box-shadow:none}
.layout-06 .nav a svg,.layout-06 .nav-icon{width:16px;height:16px;flex:none;opacity:1}
.layout-06 .nav a.on{background:#244779}
.layout-06 .nav a:hover{background:#203E69}
.layout-06 .nav a:focus-visible{outline-color:#8DBBFF}
.layout-06 .side-foot{font-size:11px;line-height:1.7;color:#BCD0ED;padding:20px}
.layout-06 .collapse-button{display:flex;align-items:center;gap:12px;margin:12px 12px 0;padding:11px 12px;background:#203E69;border:1px solid #496283;border-radius:5px;font:600 11px var(--N);color:#fff;cursor:pointer}
.layout-06.sidebar-collapsed .app{grid-template-columns:72px minmax(0,1fr)}
.layout-06.sidebar-collapsed .side-top{padding:18px 10px}
.layout-06.sidebar-collapsed .side-logo img{width:52px}
.layout-06.sidebar-collapsed .side-acct,.layout-06.sidebar-collapsed .side-foot,.layout-06.sidebar-collapsed .nav h6,.layout-06.sidebar-collapsed .collapse-button .lbl{display:none}
.layout-06.sidebar-collapsed .collapse-button{justify-content:center;padding:10px;margin:12px 10px 0}
.layout-06.sidebar-collapsed .collapse-button svg{transform:rotate(180deg)}
.layout-06.sidebar-collapsed .nav{padding:18px 10px}
.layout-06.sidebar-collapsed .nav a{justify-content:center;padding:12px 0}
.layout-06.sidebar-collapsed .nav .lbl{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;white-space:nowrap;background:var(--navy);color:#fff;border:1px solid #47648C;border-radius:5px;padding:9px 12px;z-index:150;font-size:12px;box-shadow:none}
.layout-06.sidebar-collapsed .nav a:hover .lbl,.layout-06.sidebar-collapsed .nav a:focus-visible .lbl{opacity:1}

/* The sidebar becomes a top bar with visible navigation on mobile. */
@media(max-width:900px){
 body.layout-06 .app{display:flex;flex-direction:column;min-height:calc(100vh - 24px);width:100%}
 body.layout-06 .main{width:100%;min-width:0;display:flex}
 body.layout-06 .side{position:static;transform:none;top:auto;width:100%;height:auto;min-height:0;margin:0;overflow:visible;border-right:0;flex:none}
 body.layout-06 .side .side-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:16px}
 body.layout-06 .side .side-logo{display:flex;min-height:28px;width:auto;max-width:180px}
 body.layout-06 .side .side-logo img{width:150px;height:auto}
 body.layout-06 .side .side-acct{display:block;margin:0;font-size:10px}
 body.layout-06 .side-acct b{font-size:12px}
 body.layout-06 .side .nav{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 14px}
 body.layout-06 .side .nav a{display:flex;justify-content:flex-start;gap:8px;min-height:40px;padding:10px;margin:0;border-left:0;border-radius:5px;font-size:12px}
 body.layout-06 .side .nav a .lbl{display:inline;position:static;opacity:1;transform:none;pointer-events:auto;background:none;color:inherit;border:0;padding:0;box-shadow:none;white-space:normal}
 body.layout-06 .side .nav h6{display:block;flex-basis:100%;margin:10px}
 body.layout-06 .side .side-foot{display:block;padding:10px 16px}
 body.layout-06 .collapse-button{display:none}
 body.layout-06 .top{min-height:64px;padding:14px 16px;position:static;gap:12px}
 body.layout-06 .top .context{font-size:11px;max-width:none}
 body.layout-06 .content{max-width:none;padding:22px 14px 40px;margin:0;width:100%}
 body.layout-06 .kpis,body.layout-06 .volume-kpis,body.layout-06 .kpis4,body.layout-06 .g21,body.layout-06 .dashboard-right{grid-template-columns:minmax(0,1fr)}
 body.layout-06 .brand-bar{height:24px}
}

/* TrueCost brand colors. Layout 06 geometry and rectangular controls stay intact. */
:root{--blue:#2A6BD6;--blue2:#1F54AC;--soft:#EAF2FC;--bg:#F6F8FB;--line:#C7DAF3;--line2:#C7DAF3;--mut:#4B5366;--ink:#102447;--navy:#102447;--navy2:#1F54AC;
--ok:#12805C;--okbg:#E7F7EF;--warn:#8A5A00;--warnbg:#FFF4D6;--bad:#B42318;--badbg:#FCEBED;--gray:#4B5366;--graybg:#EAF1FB;--accent:#FFC107;
--H:Montserrat,"Helvetica Neue",Arial,sans-serif;--B:"Open Sans","Helvetica Neue",Arial,sans-serif;--N:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif}
body.layout-06{background:var(--bg);color:var(--ink)}
a{color:var(--blue)}
h1,h2,h3,h4,h5,h6{color:var(--ink)}
.layout-06 .brand-bar{background:var(--blue)}
.side,.layout-06 .side{background:#fff;color:var(--ink);border-right:1px solid var(--line)}
.side-top,.side-foot{border-color:var(--line)}
.side-acct,.side-acct b,.layout-06 .side-acct,.layout-06 .side-acct b{color:var(--ink)}
.nav h6{color:var(--mut)}
.nav h6.adm{color:var(--blue2)}
.nav a{color:var(--ink)}
.nav a svg{color:var(--mut)}
.nav a:hover,.layout-06 .nav a:hover{background:var(--soft);color:var(--blue)}
.nav a:hover svg{color:var(--blue)}
.nav a.on,.layout-06 .nav a.on{background:var(--soft);color:var(--blue);box-shadow:none}
.layout-06 .nav a.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.nav a.on svg{color:var(--blue)}
.nav a .cnt,.nav a.on .cnt{background:var(--graybg);color:var(--mut)}
.nav a .cnt.red{background:var(--badbg);color:var(--bad)}
.side-foot,.side-foot b,.layout-06 .side-foot{color:var(--mut)}
.layout-06 .collapse-button{background:#fff;border-color:var(--line);color:var(--mut)}
.layout-06 .collapse-button:hover{background:var(--soft);color:var(--blue);border-color:var(--blue)}
.layout-06 .nav a:focus-visible{outline-color:var(--blue)}
.layout-06.sidebar-collapsed .nav .lbl{background:#fff;color:var(--ink);border-color:var(--line)}
.card,.kpi{background:#fff;border:1px solid var(--line)}
.kpi .v{color:var(--ink)}
.delta.up,.up{background:var(--okbg);color:var(--ok)}
.btn{background:#fff;border-color:var(--line);color:var(--ink)}
.btn:hover{background:var(--soft);border-color:var(--blue);color:var(--ink)}
.btn.pri,.btn.dark{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover,.btn.dark:hover{background:var(--blue2);border-color:var(--blue2);color:#fff}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.danger:hover{background:var(--badbg);border-color:var(--bad);color:var(--bad)}
.chip,.tag,.c-canceled,.c-free{background:var(--graybg);color:var(--mut)}
.c-active,.chip[data-brand-state=active]{background:var(--okbg);color:var(--ok)}
.c-pending,.c-sched,.chip[data-brand-state=pending]{background:var(--warnbg);color:var(--warn)}
.c-failed,.chip[data-brand-state=hold]{background:var(--badbg);color:var(--bad)}
.chip[data-brand-state=neutral]{background:var(--graybg);color:var(--mut)}
.infobox{background:var(--soft);border-color:var(--line);color:var(--ink)}
.errbox{background:var(--badbg);border-color:var(--bad);color:var(--bad)}
.m-b{color:var(--ink)}
.email,.note,.dr-f,.t th,.gsearch input,.parity-screen input[readonly],.parity-screen textarea[readonly],.parity-screen .submitted-copy{background:var(--bg)}
.t td,.list li{border-color:var(--line)}
.t tbody tr:hover{background:var(--soft)}
.t tr.flag td{background:var(--warnbg)}
.dialog{background:#fff}
.empty svg{color:var(--mut)}
.notice,.demo-pill,.tabs button.on{color:var(--blue)}
.filter-group button[aria-pressed=true],.parity-screen [aria-pressed=true],.parity-screen .rect-list [aria-selected=true]{background:var(--soft);border-color:var(--blue);color:var(--blue)}
.dashboard-v6 .range-toggle [aria-pressed=true],.seg button.on,.fontpick button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.fontpick button{border-color:var(--line);color:var(--ink)}
.dashboard-v6 .info-help{background:var(--bg);color:var(--blue)}
.dashboard-v6 .refund-kpi.is-risk{background:var(--badbg)}
.dashboard-v6 .activity-chart .activity-grid,.parity-screen .report-chart .activity-grid{stroke:#E1E8F3}
.dashboard-v6 .activity-chart .enrollment-area{fill:var(--blue)}
.dashboard-v6 .activity-chart .enrollment-line,.parity-screen .report-chart .enrollment-line{stroke:var(--blue)}
.dashboard-v6 .activity-chart .click-line,.parity-screen .report-chart .click-line{stroke:var(--blue2)}
.dashboard-v6 .activity-chart .enrollment-marker{fill:var(--blue)}
.dashboard-v6 .activity-chart .click-marker{fill:var(--blue2)}
.dashboard-v6 .legend-clicks{border-color:var(--blue2)}
.dashboard-v6 .chart-tooltip,.dashboard-v6 .kpi-tip,.tip{background:var(--ink);border-color:var(--line);color:#fff}
.chart text{fill:var(--mut)}
.chart .lab{fill:var(--ink)}
.avatar,.pc,.ph-nav .pn-btn,.ph-body .pb{background:var(--blue);color:#fff}
.code,.mcard{background:#fff;color:var(--ink);border:1px solid var(--line)}
.mcard:after{background:none}
.mcard .mc-lg span,.mcard .mc-f div+div{border-color:var(--line)}
.mcard .mc-st{background:var(--graybg);color:var(--mut)}
.mcard .mc-f i{color:var(--mut)}
.mcard .mc-ft{background:var(--bg);border-color:var(--blue)}
.ph-body{background:var(--bg)}
.ph-body h4{color:var(--ink)}
.sd-ok{background:var(--ok)}.sd-warn{background:var(--warn)}.sd-off{background:var(--mut)}.sd-bad{background:var(--bad)}