/* ==========================================================================
   MailroomOS app — operator console, Super Admin and holder portal
   Same palette and type as mailroomos.com (ink navy, indigo → cyan).
   ========================================================================== */
:root{
  --ink:#070B18;--ink-2:#0D1430;--ink-3:#141C3D;--ink-line:rgba(255,255,255,.08);--ink-text:#B9C0DA;
  --bg:#F5F6FA;--surface:#fff;--surface-2:#FAFBFD;--text:#0B1022;--muted:#5A6378;--line:#E4E7EF;--line-2:#EEF0F5;
  --brand:#5B4BFF;--brand-600:#4A3AF0;--brand-50:#EEEDFF;--cyan:#22D3EE;
  --green:#059669;--green-50:#E7F7F0;--amber:#B45309;--amber-50:#FEF3E2;--red:#E11D48;--red-50:#FDECEF;--blue:#2563EB;--blue-50:#EAF1FE;
  --grad:linear-gradient(110deg,#7C6CFF 0%,#5B4BFF 35%,#22D3EE 100%);
  --r:12px;--r-sm:8px;--shadow-sm:0 1px 2px rgba(11,16,34,.05),0 1px 3px rgba(11,16,34,.04);--shadow:0 12px 32px -14px rgba(11,16,34,.22),0 2px 6px rgba(11,16,34,.04);
  --font-head:"Plus Jakarta Sans",system-ui,sans-serif;--font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --side:252px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:14.5px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-.015em;line-height:1.2;margin:0 0 .6em;font-weight:700}
h2{font-size:1.15rem}h3{font-size:1rem}
p{margin:0 0 .9em}
.ic{width:18px;height:18px;flex:none}.ic.big{width:40px;height:40px;color:#A3AACB}
.muted{color:var(--muted)}.small{font-size:.86rem}.mono{font-family:var(--mono);font-size:.9em}.right{text-align:right}.nowrap{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:.55rem}
.logo-mark{width:28px;height:28px}
.logo-word{font-family:var(--font-head);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;color:#fff}
.logo-word.dark{color:var(--text)}
.logo-word b{font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:1px}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--ink);color:var(--ink-text);display:flex;flex-direction:column;z-index:40;border-right:1px solid var(--ink-line)}
.side-head{padding:18px 18px 14px}
.side-head a:hover{text-decoration:none}
.side-org{display:flex;align-items:center;gap:.6rem;margin:0 12px 6px;padding:10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--ink-line)}
.side-org strong{display:block;color:#fff;font-size:.9rem;line-height:1.2;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-org small{color:#8E96B8;font-size:.76rem}
.org-dot{width:30px;height:30px;border-radius:8px;background:var(--grad);color:#fff;display:inline-grid;place-items:center;font-weight:700;font-family:var(--font-head);flex:none}
.side-nav{flex:1;overflow-y:auto;padding:6px 10px 14px}
.nav-group{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6B7499;padding:14px 10px 6px}
.side-nav a{display:flex;align-items:center;gap:.7rem;color:var(--ink-text);padding:.5rem .65rem;border-radius:8px;font-weight:500;font-size:.9rem;margin-bottom:1px}
.side-nav a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.side-nav a.active{background:linear-gradient(90deg,rgba(91,75,255,.28),rgba(91,75,255,.08));color:#fff;box-shadow:inset 2px 0 0 #7C6CFF}
.side-nav a.active .ic{color:#A5B4FC}
.side-foot{border-top:1px solid var(--ink-line);padding:12px}
.me{display:flex;gap:.6rem;align-items:center;padding:4px 4px 10px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink-3);border:1px solid var(--ink-line);display:grid;place-items:center;color:#fff;font-weight:600;flex:none}
.me-text{min-width:0}.me-text strong{display:block;color:#fff;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.me-text small{display:block;color:#7E87AB;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-logout{display:flex;gap:.6rem;align-items:center;color:var(--ink-text);padding:.45rem .6rem;border-radius:8px;font-size:.88rem}
.side-logout:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.main{flex:1;margin-left:var(--side);min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;padding:14px 28px;background:rgba(245,246,250,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.page-title{font-size:1.25rem;margin:0;flex:1}
.top-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.nav-toggle{display:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px;color:var(--text)}
.content{padding:24px 28px 40px;flex:1;max-width:1320px;width:100%}
.app-foot{padding:16px 28px;color:#8A92A8;font-size:.78rem;border-top:1px solid var(--line)}
.viewbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:.6rem;background:#1E1B4B;color:#E0E7FF;font-size:.85rem;padding:7px 12px}
.viewbar a{color:#fff;font-weight:600;text-decoration:underline}
.viewbar~.sidebar{top:34px}.viewbar~.main{padding-top:34px}

/* ---------- cards, grid ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);margin-bottom:20px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.card-h h2,.card-h h3{margin:0}
.card-b{padding:20px}
.card-b.tight{padding:0}
.card-f{padding:14px 20px;border-top:1px solid var(--line-2);display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}
.grid{display:grid;gap:20px}
.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))}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.stack>*+*{margin-top:12px}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.stat{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm);color:inherit}
a.stat:hover{text-decoration:none;border-color:#CDD2E4;box-shadow:var(--shadow)}
.stat-ic{width:42px;height:42px;border-radius:11px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;flex:none}
.stat-ic .ic{width:21px;height:21px}
.stat-body{display:flex;flex-direction:column;min-width:0}
.stat-label{font-size:.8rem;color:var(--muted);font-weight:500}
.stat-value{font-family:var(--font-head);font-size:1.55rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.stat-sub{font-size:.76rem;color:var(--muted)}
.meter{height:6px;border-radius:9px;background:var(--line-2);overflow:hidden;margin-top:6px}.meter span{display:block;height:100%;background:var(--grad)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
.t th{text-align:left;font-weight:600;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.t td{padding:11px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr:hover td{background:#FAFAFE}
.t .strong{font-weight:600;color:var(--text)}
.t a.rowlink{color:var(--text);font-weight:600}
.t td.actions{text-align:right;white-space:nowrap}
.kv{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:0}
.kv dt{color:var(--muted);font-size:.85rem}.kv dd{margin:0;font-weight:500;word-break:break-word}

/* ---------- badges & alerts ---------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;padding:.18rem .55rem;border-radius:999px;white-space:nowrap}
.b-green{background:var(--green-50);color:var(--green)}.b-blue{background:var(--blue-50);color:var(--blue)}.b-amber{background:var(--amber-50);color:var(--amber)}.b-red{background:var(--red-50);color:var(--red)}.b-gray{background:#EEF0F4;color:#566079}.b-brand{background:var(--brand-50);color:var(--brand)}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;border:1px solid;font-size:.92rem}
.alert-success{background:var(--green-50);border-color:#BDE8D5;color:#065F46}
.alert-error{background:var(--red-50);border-color:#F8C6D0;color:#9F1239}
.alert-info{background:var(--blue-50);border-color:#C9DBFB;color:#1E40AF}
.alert-warn{background:var(--amber-50);border-color:#F6D9A8;color:#92400E}
.alert ul{margin:.3rem 0 0;padding-left:1.2rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem 1rem;border-radius:9px;border:1px solid transparent;font:inherit;font-weight:600;font-size:.9rem;line-height:1.2;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s;text-decoration:none!important}
.btn .ic{width:17px;height:17px}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px -8px rgba(91,75,255,.8),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:var(--brand-600)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:#C6CBDD;background:#fff}
.btn-danger{background:var(--surface);color:var(--red);border-color:#F3C2CC}
.btn-danger:hover{background:var(--red-50)}
.btn-success{background:var(--green);color:#fff}
.btn-sm{padding:.4rem .7rem;font-size:.82rem;border-radius:7px}
.btn-lg{padding:.85rem 1.3rem;font-size:1rem;border-radius:11px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--brand);font:inherit;cursor:pointer;font-weight:500}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.form-grid .full{grid-column:1/-1}
.form-grid.g3f{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-weight:600;font-size:.84rem;color:#2A3147}
.req{color:var(--red)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=date],input[type=time],input[type=datetime-local],input[type=search],input[type=url],input[type=file],select,textarea{width:100%;font:inherit;font-size:.92rem;color:var(--text);background:#fff;border:1px solid #D7DBE7;border-radius:9px;padding:.58rem .75rem;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,75,255,.15)}
textarea{resize:vertical;min-height:80px}
input[type=file]{padding:.45rem}
.help{color:var(--muted);font-size:.8rem}
.check{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;padding:4px 0}
.check input{margin-top:.2rem;width:16px;height:16px;accent-color:var(--brand);flex:none}
.check small{display:block;color:var(--muted);font-size:.8rem}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px}
.input-big{font-size:1.15rem!important;padding:.8rem 1rem!important;border-radius:11px!important}
.searchbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:16px}
.searchbar input,.searchbar select{width:auto;flex:1;min-width:160px}
.searchbar select{flex:0 1 200px}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:700;font-family:var(--font-head);margin-bottom:8px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs a{padding:.6rem .9rem;color:var(--muted);font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- empty, pager ---------- */
.empty{text-align:center;padding:44px 20px}
.empty h3{margin:.6rem 0 .3rem}
.empty .ic{margin:0 auto}
.pager{display:flex;gap:4px;align-items:center;padding:14px 16px;flex-wrap:wrap}
.pager a,.pager .cur{min-width:32px;height:32px;display:inline-grid;place-items:center;border-radius:7px;border:1px solid var(--line);font-size:.85rem;color:var(--text);padding:0 8px}
.pager .cur{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager .muted{margin-left:8px}

/* ---------- mailroom specifics ---------- */
.scanbox{display:flex;gap:.5rem}
.scanbox input{flex:1}
.result-list{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.result-list li+li{border-top:1px solid var(--line-2)}
.result-list button,.result-list a{all:unset;box-sizing:border-box;display:flex;width:100%;gap:.8rem;align-items:center;padding:10px 14px;cursor:pointer}
.result-list button:hover,.result-list a:hover{background:#F6F5FF}
.box-no{font-family:var(--mono);font-weight:700;background:var(--brand-50);color:var(--brand);padding:.15rem .5rem;border-radius:6px;font-size:.85rem;white-space:nowrap}
.picked{display:flex;gap:.8rem;align-items:center;padding:12px 14px;border:1px solid #C9C3FF;background:#F7F6FF;border-radius:10px}
.picked .spacer{flex:1}
.item-list{list-style:none;margin:0;padding:0}
.item-list li{display:flex;gap:.8rem;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2)}
.item-list li:last-child{border-bottom:0}
.sigpad-wrap{border:1.5px dashed #C3C8DA;border-radius:12px;background:#fff;position:relative;touch-action:none}
.sigpad-wrap canvas{display:block;width:100%;height:220px;border-radius:12px;cursor:crosshair}
.sigpad-hint{position:absolute;left:16px;bottom:12px;color:#A6ADC4;font-size:.8rem;pointer-events:none}
.sigpad-line{position:absolute;left:16px;right:16px;bottom:34px;border-top:1px solid #E1E4EE;pointer-events:none}
.video-wrap{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:4/3;max-height:340px}
.video-wrap video{width:100%;height:100%;object-fit:cover}
.video-wrap .reticle{position:absolute;inset:18% 12%;border:2px solid rgba(255,255,255,.85);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.sig-img{max-width:320px;border:1px solid var(--line);border-radius:8px;background:#fff}
.qr-card{max-width:360px;margin:0 auto;text-align:center}
.qr-card #qr{display:inline-block;padding:14px;background:#fff;border-radius:14px;border:1px solid var(--line)}
.qr-card #qr img,.qr-card #qr canvas{display:block;width:240px;height:240px;image-rendering:pixelated}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 16px 22px;font-size:.88rem}
.timeline li::before{content:"";position:absolute;left:5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.timeline li::after{content:"";position:absolute;left:8.5px;top:16px;bottom:0;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.msg{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
.msg.mine{background:#F7F6FF;border-color:#DCD8FF}
.msg.internal{background:#FFFBEB;border-color:#F6E3A6}
.msg-h{display:flex;gap:.5rem;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.slots label{display:block}
.slots input{position:absolute;opacity:0}
.slots span{display:block;text-align:center;padding:.55rem;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-weight:600;font-size:.88rem}
.slots input:checked+span{background:var(--brand);color:#fff;border-color:var(--brand)}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.week .day{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;min-height:110px}
.week .day h4{font-size:.8rem;color:var(--muted);margin:0 0 6px}
.week .appt{font-size:.8rem;background:var(--brand-50);color:#2E2696;border-radius:6px;padding:4px 6px;margin-bottom:4px;display:block}
.chart{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:10px}
.chart .bar{flex:1;background:var(--grad);border-radius:6px 6px 2px 2px;min-height:2px;position:relative}
.chart .bar span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--muted);white-space:nowrap}
.chart-wrap{padding-bottom:24px}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-family:var(--mono);font-size:1rem;background:var(--surface-2);border:1px solid var(--line);padding:14px;border-radius:10px}
.plan-pill{display:inline-flex;gap:.4rem;align-items:center;padding:.3rem .7rem;border-radius:999px;background:var(--brand-50);color:var(--brand);font-weight:600;font-size:.82rem}

/* ---------- auth pages ---------- */
body.auth{background:radial-gradient(1200px 600px at 10% -10%,rgba(91,75,255,.18),transparent 60%),radial-gradient(900px 500px at 110% 10%,rgba(34,211,238,.14),transparent 60%),var(--ink);min-height:100vh;color:var(--text)}
.auth-wrap{max-width:460px;margin:0 auto;padding:48px 16px}
.auth-wrap.wide{max-width:760px}
.auth-brand{text-align:center;margin-bottom:22px}
.auth-brand .logo-word.dark{color:#fff}
.auth-card{background:#fff;border-radius:18px;padding:30px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.auth-card h1{font-size:1.45rem;margin-bottom:.3rem}
.auth-card .lead{color:var(--muted);margin-bottom:1.3rem}
.auth-card form>.field+.field,.auth-card form>.field+.check,.auth-card form>.check+.btn,.auth-card form>.field+.btn{margin-top:14px}
.auth-foot{text-align:center;color:#7E87AB;font-size:.8rem;margin-top:18px}
.auth-links{display:flex;justify-content:space-between;margin-top:16px;font-size:.88rem}
.portal-brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);font-family:var(--font-head);font-size:1.1rem}
.portal-brand:hover{text-decoration:none}
.portal-brand.light{color:#fff}
.auth .portal-brand{color:#fff}
.portal-brand img{max-height:40px;max-width:200px}
.plan-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.plan-choice label{display:block;cursor:pointer}
.plan-choice input{position:absolute;opacity:0}
.plan-choice .pc{display:block;border:1.5px solid var(--line);border-radius:12px;padding:12px;transition:border-color .15s,box-shadow .15s}
.plan-choice input:checked+.pc{border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,75,255,.15)}
.pc strong{display:block;font-family:var(--font-head)}
.pc .amt{font-size:1.25rem;font-weight:800;font-family:var(--font-head)}
.pc small{display:block;color:var(--muted);font-size:.76rem}
.summary{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:.9rem}
.summary div{display:flex;justify-content:space-between;padding:3px 0}
.summary .total{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-weight:700}

/* ---------- portal tweaks ---------- */
.area-portal .sidebar{background:#fff;color:var(--text);border-right:1px solid var(--line)}
.area-portal .side-nav a{color:#3A4259}
.area-portal .side-nav a:hover{background:var(--bg);color:var(--text)}
.area-portal .side-nav a.active{background:var(--brand-50);color:var(--brand);box-shadow:inset 2px 0 0 var(--brand)}
.area-portal .side-nav a.active .ic{color:var(--brand)}
.area-portal .side-foot{border-top-color:var(--line)}
.area-portal .me-text strong{color:var(--text)}
.area-portal .avatar{background:var(--brand-50);color:var(--brand);border-color:#DCD8FF}
.area-portal .side-logout{color:#3A4259}.area-portal .side-logout:hover{background:var(--bg);color:var(--text)}
.area-portal .portal-brand{color:var(--text)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.week{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .sidebar{transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
  body.nav-open .sidebar{transform:none}
  .main{margin-left:0}
  .nav-toggle{display:inline-grid}
  .topbar{padding:12px 16px}
  .content{padding:18px 16px 32px}
  .g2,.g3,.form-grid,.form-grid.g3f{grid-template-columns:1fr}
  .plan-choice{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:2px}.kv dd{margin-bottom:8px}
  .auth-card{padding:22px}
  .page-title{font-size:1.1rem}
}
@media print{.sidebar,.topbar,.app-foot,.no-print{display:none!important}.main{margin:0}.card{box-shadow:none}}
/* reports */
.rgrid{align-items:start}.rgrid>.card{margin-bottom:0}
.hbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hbars li{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:10px;align-items:center;font-size:.86rem}
.hb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-track{height:10px;background:var(--line-2);border-radius:99px;overflow:hidden}
.hb-fill{display:block;height:100%;background:var(--grad);border-radius:99px}
.hb-n{font-weight:700;min-width:2.5em;text-align:right}
.chart.duo{gap:4px}.chart.duo .pair{flex:1;display:flex;align-items:flex-end;gap:2px;height:100%;position:relative}
.chart.duo .bar{flex:1}.chart .bar.alt,.legend-dot.alt{background:#0EA5A4}
.chart.duo .pair>span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--muted);white-space:nowrap}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--brand);vertical-align:-1px;margin-right:4px}
@media (max-width:800px){.rgrid{grid-template-columns:1fr}}