/* ==========================================================================
   Meridian Custody — shared design system (admin + client)
   ========================================================================== */
:root{
  --rail:#0B1E33; --rail-deep:#071523; --rail-border:rgba(255,255,255,.08);
  --rail-text:#EDF2F8; --rail-text-dim:#8FA0B8;
  --gold:#B8863B; --gold-deep:#9C702E; --gold-tint:#F3E8D3; --gold-tint-strong:#EAD8AF;
  --emerald:#0F7A5C; --emerald-tint:#E3F2ED;
  --amber:#B7791F; --amber-tint:#FBF0DD;
  --oxblood:#9E2A2B; --oxblood-tint:#FAE7E7;
  --paper:#F5F6F8; --surface:#FFFFFF; --surface-2:#FBFCFD;
  --text-1:#10141A; --text-2:#5B6472; --text-3:#8A93A3;
  --border:#E4E7EC; --border-strong:#D6DAE2;
  --radius-lg:18px; --radius-md:12px; --radius-sm:8px;
  --ease:cubic-bezier(.4,0,.2,1); --focus-ring:0 0 0 3px rgba(156,112,46,.22);
  --shadow-card:0 1px 2px rgba(16,20,26,.04), 0 6px 20px rgba(16,20,26,.05);
  --shadow-pop:0 10px 32px rgba(16,20,26,.14), 0 2px 8px rgba(16,20,26,.08);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'Source Serif 4',Georgia,serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-sans);background:var(--paper);color:var(--text-1);
  font-variant-numeric:tabular-nums lining-nums; -webkit-font-smoothing:antialiased;}
.num{font-variant-numeric:tabular-nums lining-nums;}
h1,h2,h3{margin:0;font-weight:500;color:var(--text-1);}
p{margin:0;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;}

.app{display:flex;min-height:100vh;}
.sidebar{width:250px;flex-shrink:0;background:var(--rail);border-right:1px solid var(--rail-border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;color:var(--rail-text);}
.brand{display:flex;align-items:center;gap:10px;padding:22px 22px 18px;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#241A08;font-weight:700;font-size:13px;}
.brand-name{font-family:var(--font-serif);font-size:16px;color:#fff;line-height:1.1;}
.brand-sub{font-size:10px;color:var(--rail-text-dim);letter-spacing:1px;text-transform:uppercase;margin-top:2px;}
.nav{flex:1;padding:8px 12px;overflow-y:auto;}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--rail-text-dim);padding:14px 10px 6px;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--rail-text-dim);
  font-size:13.5px;font-weight:500;margin-bottom:2px;}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--rail-text);}
.nav-item.active{background:rgba(184,134,59,.14);color:#fff;}
.nav-item svg{width:17px;height:17px;flex-shrink:0;}
.sidebar-foot{padding:12px 20px 20px;border-top:1px solid var(--rail-border);}

.topbar{position:sticky;top:0;z-index:20;background:var(--rail);color:var(--rail-text);
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;height:60px;border-bottom:1px solid var(--rail-border);}
.topbar-title{font-size:14px;font-weight:500;color:var(--rail-text-dim);}
.topbar-title strong{color:#fff;font-weight:500;}
.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;}
.content{flex:1;padding:28px 30px 60px;max-width:1180px;width:100%;margin:0 auto;}
.footer{padding:18px 30px 28px;max-width:1180px;margin:0 auto;width:100%;color:var(--text-3);font-size:12px;
  border-top:1px solid var(--border);}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px 22px;box-shadow:var(--shadow-card);}
@media (min-width:1200px){.card{padding:24px 28px;}}
.grid{display:grid;gap:16px;}
.cols-4{grid-template-columns:repeat(4,1fr);} .cols-3{grid-template-columns:repeat(3,1fr);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.row{display:flex;align-items:center;} .between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-10{gap:10px;} .gap-12{gap:12px;}
.muted{color:var(--text-2);} .faint{color:var(--text-3);}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-3);font-weight:600;}
.section-title{font-size:15.5px;font-weight:500;margin-bottom:2px;}
.section-sub{font-size:12.5px;color:var(--text-2);margin-bottom:16px;}
.mb-16{margin-bottom:16px;} .mt-20{margin-top:20px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;
  border-radius:9px;font-size:13.5px;font-weight:500;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-1);
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);}
.btn:hover{border-color:var(--text-3);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--gold-deep);border-color:var(--gold-deep);color:#FDF9F0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
.btn-primary:hover{background:#8A6228;border-color:#8A6228;}
.btn-danger{background:var(--oxblood-tint);border-color:#E8B9BA;color:var(--oxblood);}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px;}
.btn-block{width:100%;}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;}
.badge-gold{background:var(--gold-tint);color:var(--gold-deep);}
.badge-emerald{background:var(--emerald-tint);color:var(--emerald);}
.badge-amber{background:var(--amber-tint);color:var(--amber);}
.badge-oxblood{background:var(--oxblood-tint);color:var(--oxblood);}
.badge-neutral{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);
  font-weight:600;padding:0 12px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:11px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody tr{transition:background .15s var(--ease);}
tbody tr:nth-child(even){background:rgba(16,20,26,.012);}
tbody tr:hover{background:var(--gold-tint);} tbody tr:last-child td{border-bottom:none;}
.table-scroll{max-height:560px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-md);}
.table-scroll thead th{position:sticky;top:0;background:var(--surface);}

.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.chip{padding:6px 13px;border-radius:99px;border:1px solid var(--border);background:var(--surface);
  font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;}
.chip.active{background:var(--rail);color:#fff;border-color:var(--rail);}

input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;height:40px;border:1px solid var(--border);border-radius:9px;padding:0 12px;font-size:13.5px;
  font-family:inherit;background:var(--surface);color:var(--text-1);}
textarea{height:auto;padding:10px 12px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--focus-ring);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:9px;}
label{display:block;font-size:12.5px;font-weight:600;color:var(--text-1);margin:0 0 6px;}
.field{margin-bottom:14px;}

.flash{padding:12px 16px;border-radius:9px;font-size:13px;margin-bottom:16px;}
.flash-success{background:var(--emerald-tint);color:var(--emerald);}
.flash-error{background:var(--oxblood-tint);color:var(--oxblood);}
.flash-info{background:var(--gold-tint);color:var(--gold-deep);}

.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:24px;}
.auth-card{max-width:400px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:36px 34px;box-shadow:var(--shadow-pop);}
.auth-brand{font-family:var(--font-serif);font-size:20px;color:var(--rail);text-align:center;margin-bottom:22px;}

@media (max-width:900px){ .cols-4{grid-template-columns:repeat(2,1fr);} .cols-3{grid-template-columns:1fr;} .cols-2{grid-template-columns:1fr;} }
@media (max-width:720px){ .sidebar{display:none;} .content{padding:18px 14px 80px;} }

/* ==========================================================================
   Hero banner + trust strip (ported from the original design concept —
   this is what makes the dashboard feel like a private bank, not a form)
   ========================================================================== */
.hero{background:linear-gradient(135deg,var(--rail) 0%,var(--rail-deep) 100%);border-radius:20px;
  padding:28px 30px 24px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-pop);}
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.hero-tier{background:rgba(184,134,59,.24);color:#EACB90;font-size:11px;font-weight:600;padding:4px 11px;border-radius:99px;letter-spacing:.3px;}
.hero-greeting{font-family:var(--font-serif);font-size:24px;font-weight:500;color:#fff;}
.hero-sub{font-size:13px;color:#AEBBD0;margin-top:6px;max-width:520px;line-height:1.5;}
.hero-value-row{display:flex;align-items:flex-end;gap:16px;margin:22px 0 20px;flex-wrap:wrap;}
.hero-value{font-family:var(--font-serif);font-size:36px;font-weight:500;color:#fff;letter-spacing:-.5px;line-height:1;}
.hero-stats{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;flex-wrap:wrap;}
.hero-stat{padding:0 22px 4px 0;margin-right:22px;border-right:1px solid rgba(255,255,255,.12);}
.hero-stat:last-child{border-right:none;margin-right:0;}
.hero-stat-label{font-size:11px;color:#8394AA;margin-bottom:5px;}
.hero-stat-value{font-size:15px;font-weight:600;color:#fff;}
.hero-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.btn-ghost-light{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;}
.btn-ghost-light:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);}

/* ==========================================================================
   Icon button + dropdown panel (notification bell, etc.)
   ========================================================================== */
.icon-btn{position:relative;width:36px;height:36px;border-radius:10px;border:none;background:transparent;
  color:var(--rail-text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.icon-btn svg{width:18px;height:18px;}
.icon-btn .dot{position:absolute;top:6px;right:6px;min-width:15px;height:15px;border-radius:99px;background:var(--gold);
  color:#241A08;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid var(--rail);}
.panel{position:absolute;top:48px;right:0;width:340px;background:var(--surface);color:var(--text-1);
  border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
  padding:8px;display:none;max-height:420px;overflow-y:auto;z-index:50;}
.panel.show{display:block;}
.panel-head{padding:10px 12px;font-size:13px;font-weight:600;border-bottom:1px solid var(--border);margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;}
.panel-item{display:flex;gap:11px;padding:10px 12px;border-radius:9px;}
.panel-item:hover{background:var(--surface-2);}
.panel-ic{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--gold-tint);color:var(--gold-deep);}
.panel-ic svg{width:14px;height:14px;}
.panel-text{font-size:12.5px;}
.panel-time{font-size:11px;color:var(--text-3);margin-top:2px;}

/* ==========================================================================
   SVG safety net — an inline icon must NEVER be able to blow up to full
   width, even if a class name is missing or a stylesheet loads late.
   (This was the "huge icons on the screen" bug on the notifications page.)
   ========================================================================== */
.panel svg,.panel-item svg,.notif-item svg,.icon-btn svg,.nav-item svg,td svg,.badge svg{
  max-width:20px;max-height:20px;}
.hero svg{max-width:100%;}

/* ==========================================================================
   Notifications page (client/notifications.php)
   ========================================================================== */
.notif-list{display:flex;flex-direction:column;}
.notif-item{display:flex;gap:14px;padding:14px 6px;border-bottom:1px solid var(--border);align-items:flex-start;}
.notif-item:last-child{border-bottom:none;}
.notif-ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--gold-tint);color:var(--gold-deep);}
.notif-ic svg{width:16px;height:16px;max-width:16px;max-height:16px;}
.notif-item.unread .notif-ic{background:var(--rail);color:#EACB90;}
.notif-title{font-size:13.5px;font-weight:600;}
.notif-item:not(.unread) .notif-title{font-weight:500;color:var(--text-2);}
.notif-body{font-size:12.5px;color:var(--text-2);margin-top:2px;line-height:1.5;}
.notif-time{font-size:11px;color:var(--text-3);margin-top:4px;}

/* ==========================================================================
   Range sliders ("drag to pay" on Payments, projection slider on Portfolio).
   Browsers style these hideously by default — this makes them match the
   design system in Chrome/Edge/Safari (WebKit) and Firefox.
   ========================================================================== */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;padding:0;margin:6px 0 2px;
  background:transparent;border:none;cursor:pointer;}
input[type=range]:focus{outline:none;border:none;}
/* WebKit track + thumb */
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:linear-gradient(to right,var(--gold) 0%,var(--gold) var(--fill,0%),var(--border) var(--fill,0%),var(--border) 100%);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;
  border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-deep));border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(16,20,26,.35);}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);}
/* Firefox track + thumb */
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--border);}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--gold);}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(16,20,26,.35);}

/* ==========================================================================
   Live price pulse — subtle flash when the polled price ticks up/down
   ========================================================================== */
@keyframes price-up{0%{color:#7FE0B8;}100%{color:inherit;}}
@keyframes price-down{0%{color:#F3A9AA;}100%{color:inherit;}}
.tick-up{animation:price-up 1.6s ease-out;}
.tick-down{animation:price-down 1.6s ease-out;}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 rgba(127,224,184,.6);}70%{box-shadow:0 0 0 6px rgba(127,224,184,0);}100%{box-shadow:0 0 0 0 rgba(127,224,184,0);}}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7FE0B8;margin-left:4px;
  animation:dot-pulse 2.4s infinite;}

.trend-up{color:var(--emerald);}
.trend-down{color:var(--oxblood);}

/* ==========================================================================
   Self-hosted fonts (no Google request — privacy, speed, CSP, offline)
   ========================================================================== */
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ==========================================================================
   Focus visibility (accessibility + polish)
   ========================================================================== */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
.btn:focus-visible,.chip:focus-visible{outline-offset:1px;}

/* ==========================================================================
   Skeleton shimmer for figures that load after first paint
   ========================================================================== */
@keyframes shimmer{0%{background-position:-200px 0;}100%{background-position:200px 0;}}
.skeleton{display:inline-block;min-width:90px;height:1em;border-radius:6px;color:transparent !important;
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.06) 75%);
  background-size:200px 100%;animation:shimmer 1.4s infinite linear;}

/* ==========================================================================
   Mobile navigation — drawer + bottom tab bar (the sidebar disappears
   under 720px; these replace it instead of leaving clients stranded)
   ========================================================================== */
.nav-toggle{display:none;width:38px;height:38px;border:none;background:transparent;color:var(--rail-text);
  border-radius:9px;align-items:center;justify-content:center;cursor:pointer;}
.nav-toggle:hover{background:rgba(255,255,255,.08);}
.nav-toggle svg{width:20px;height:20px;}
.drawer-scrim{display:none;position:fixed;inset:0;background:rgba(7,21,35,.55);z-index:90;}
.drawer-scrim.show{display:block;}
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--rail);border-top:1px solid var(--rail-border);
  z-index:80;padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:8px;
  color:var(--rail-text-dim);font-size:10px;font-weight:600;letter-spacing:.2px;}
.bottom-nav a.active{color:#EACB90;}
.bottom-nav svg{width:19px;height:19px;}
@media (max-width:720px){
  .nav-toggle{display:flex;}
  .bottom-nav{display:flex;}
  .content{padding-bottom:96px;}
  .sidebar{display:flex;position:fixed;left:0;top:0;bottom:0;z-index:95;width:270px;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.4);}
  .sidebar.open{transform:translateX(0);}
  .hero{padding:22px 18px 20px;}
  .hero-value{font-size:30px;}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
  .hero-stat{border-right:none;margin-right:0;padding-right:0;}
  .hero-actions .btn{flex:1 1 100%;justify-content:center;}
  table{font-size:12.5px;}
  th,td{padding-left:8px;padding-right:8px;}
}
@media (min-width:721px){ .sidebar.open{transform:none;} }

/* ==========================================================================
   Print: any page prints like a document on the letterhead
   ========================================================================== */
@media print{
  .sidebar,.topbar,.bottom-nav,.nav-toggle,.hero-actions,.btn,.chip,.icon-btn,.panel,.footer{display:none !important;}
  body{background:#fff;color:#000;}
  .content{max-width:100%;padding:0;}
  .card,.hero{box-shadow:none;border:1px solid #ccc;break-inside:avoid;}
  .hero{background:#fff !important;color:#000;}
  .hero *{color:#000 !important;}
}

/* ==========================================================================
   Respect reduced-motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .live-dot{animation:none;}
}

/* ==========================================================================
   Modal system (used by the meeting scheduler popup and future dialogs)
   ========================================================================== */
.mc-modal-scrim{position:fixed;inset:0;background:rgba(7,21,35,.62);z-index:520;display:none;
  align-items:center;justify-content:center;padding:18px;}
.mc-modal-scrim.show{display:flex;}
.mc-modal{background:var(--surface);border-radius:18px;box-shadow:0 24px 70px rgba(7,21,35,.45);
  width:100%;max-width:430px;max-height:92vh;overflow-y:auto;animation:mc-pop .18s ease;}
@keyframes mc-pop{0%{transform:translateY(10px) scale(.98);opacity:0;}100%{transform:none;opacity:1;}}
.mc-modal-head{background:linear-gradient(135deg,var(--rail),var(--rail-deep));color:#fff;
  padding:18px 22px;border-radius:18px 18px 0 0;display:flex;justify-content:space-between;align-items:center;}
.mc-modal-title{font-family:var(--font-serif);font-size:17px;font-weight:500;}
.mc-modal-sub{font-size:11.5px;color:#AEBBD0;margin-top:2px;}
.mc-modal-close{background:rgba(255,255,255,.1);border:none;color:#fff;width:30px;height:30px;
  border-radius:8px;cursor:pointer;font-size:15px;line-height:1;flex-shrink:0;}
.mc-modal-close:hover{background:rgba(255,255,255,.2);}
.mc-modal-body{padding:18px 22px 22px;}

/* Calendar date picker */
.mc-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mc-cal-month{font-weight:600;font-size:13.5px;}
.mc-cal-nav{display:flex;gap:6px;}
.mc-cal-nav button{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;font-size:13px;color:var(--text-2);}
.mc-cal-nav button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-deep);}
.mc-cal-nav button:disabled{opacity:.35;cursor:default;}
.mc-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.mc-cal-dow{font-size:10px;font-weight:700;color:var(--text-3);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.5px;}
.mc-cal-day{aspect-ratio:1;border:none;background:transparent;border-radius:9px;font-size:12.5px;
  font-weight:500;color:var(--text-1);cursor:pointer;font-variant-numeric:tabular-nums;}
.mc-cal-day:hover:not(:disabled){background:var(--gold-tint);}
.mc-cal-day:disabled{color:var(--border-strong);cursor:default;}
.mc-cal-day.today{box-shadow:inset 0 0 0 1.5px var(--border-strong);}
.mc-cal-day.selected{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#241A08;font-weight:700;}

/* Time slot chips */
.mc-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px;}
.mc-slot{padding:8px 4px;border-radius:9px;border:1px solid var(--border);background:var(--surface);
  font-size:12px;font-weight:600;cursor:pointer;text-align:center;font-variant-numeric:tabular-nums;color:var(--text-2);}
.mc-slot:hover{border-color:var(--gold);color:var(--gold-deep);}
.mc-slot.selected{background:linear-gradient(180deg,var(--gold),var(--gold-deep));border-color:var(--gold-deep);color:#241A08;}
.mc-summary{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 14px;font-size:12.5px;margin-top:14px;display:none;}
.mc-summary.show{display:block;}
.mc-modal-ok{text-align:center;padding:26px 10px 10px;}
.mc-modal-ok .big{font-size:38px;line-height:1;margin-bottom:12px;color:var(--emerald);}

/* ==========================================================================
   Branded split auth screens (login / register / reset) — the front door
   ========================================================================== */
.auth-split{min-height:100vh;display:flex;}
.auth-brand-panel{width:44%;min-width:340px;background:linear-gradient(160deg,#0B1E33 0%,#071523 100%);
  color:#EDF2F8;padding:52px 48px 40px;display:flex;flex-direction:column;justify-content:space-between;}
.auth-brand-row{display:flex;align-items:center;gap:14px;}
.auth-tagline{font-family:var(--font-serif);font-size:31px;line-height:1.25;color:#fff;margin-top:56px;max-width:360px;}
.auth-lede{font-size:13.5px;line-height:1.7;color:#AEBBD0;margin-top:16px;max-width:360px;}
.auth-trust{display:flex;flex-direction:column;gap:9px;margin-bottom:26px;}
.auth-trust span{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#AEBBD0;}
.auth-trust svg{color:#D4A757;flex-shrink:0;}
.auth-legal{font-size:10.5px;color:#5B6B82;line-height:1.6;}
.auth-form-panel{flex:1;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:32px 24px;}
.auth-badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--border);}
.auth-badges span{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-3);font-weight:600;letter-spacing:.2px;}
.auth-badges svg{color:var(--emerald);}
@media (max-width:860px){ .auth-brand-panel{display:none;} }

/* Password strength meter */
.pw-meter{height:5px;border-radius:99px;background:var(--border);overflow:hidden;margin-top:6px;}
.pw-meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s ease, background .25s ease;}
.pw-hint{font-size:11px;color:var(--text-3);margin-top:4px;}

/* Pending payment stepper */
.stepper{display:flex;align-items:center;gap:0;margin:8px 0 2px;}
.step{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-3);font-weight:600;}
.step .ball{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-3);flex-shrink:0;}
.step.done .ball{background:var(--emerald);border-color:var(--emerald);color:#fff;}
.step.done{color:var(--emerald);}
.step.now .ball{border-color:var(--gold);color:var(--gold-deep);}
.step.now{color:var(--gold-deep);}
.step-line{flex:1;height:2px;background:var(--border);min-width:18px;margin:0 8px;}
.step-line.done{background:var(--emerald);}

/* Milestone banner */
.milestone-banner{background:linear-gradient(135deg,#0B1E33,#12314F);border-left:3px solid var(--gold);
  color:#fff;border-radius:14px;padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;gap:14px;}
.milestone-banner .medal{width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}

/* Guided tour spotlight */
.tour-pop{position:absolute;z-index:400;background:#0B1E33;color:#fff;border-radius:12px;padding:14px 16px;max-width:270px;
  box-shadow:0 14px 44px rgba(7,21,35,.5);font-size:12.5px;line-height:1.55;}
.tour-pop .tour-step{font-size:10px;color:#8FA0B8;letter-spacing:1px;margin-bottom:4px;}
.tour-pop .tour-actions{display:flex;gap:8px;margin-top:10px;}
.tour-pop button{border:none;border-radius:7px;padding:6px 12px;font-size:11.5px;font-weight:600;cursor:pointer;}
.tour-pop .tour-next{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#241A08;}
.tour-pop .tour-skip{background:rgba(255,255,255,.12);color:#fff;}
.tour-target{position:relative;z-index:399;box-shadow:0 0 0 3px var(--gold), 0 0 0 3000px rgba(7,21,35,.55) !important;border-radius:14px;}

/* Serif for all major money figures + right-aligned numerics in tables */
.hero-stat-value,.card .num[style*="font-size:19px"],.card .num[style*="font-size:20px"],.card .num[style*="font-size:18px"]{
  font-family:var(--font-serif);letter-spacing:-.2px;}
td.num{text-align:right;}
th.num{text-align:right;}

/* Touch targets on coarse pointers */
@media (pointer:coarse){
  .btn{min-height:44px;}
  .btn-sm{min-height:40px;}
  .chip{min-height:36px;display:inline-flex;align-items:center;}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-10px;}
}

/* Mobile: tables scroll instead of overflowing the page */
@media (max-width:600px){
  .card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* Masked value reveal */
.masked{cursor:pointer;border-bottom:1px dashed var(--border-strong);}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#241A08;padding:10px 16px;z-index:999;font-weight:600;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* Staging banner */
.staging-banner{background:#6B3FA0;color:#fff;text-align:center;font-size:12px;font-weight:600;padding:6px;letter-spacing:.4px;}

/* Topbar live price chip */
.topbar-price{font-size:12px;font-weight:600;color:#EACB90;background:rgba(184,134,59,.14);
  padding:4px 10px;border-radius:99px;display:none;}
@media(min-width:900px){.topbar-price{display:inline-block;}}

/* ==========================================================================
   APP SHELL v4 — motion standard, toasts, right drawers, chat, command center
   ========================================================================== */
:root{--motion:180ms cubic-bezier(.25,.6,.35,1);}
.btn,.chip,.nav-item,.card,.icon-btn{transition:background var(--motion),border-color var(--motion),color var(--motion),box-shadow var(--motion);}

/* --- Typography scale pass: the money leads, decoration follows --- */
.hero-value{font-size:44px;letter-spacing:-1px;}
.content{max-width:1220px;}
.card{padding:24px 26px;}
.section-title{letter-spacing:-.1px;}

/* --- Toast system --- */
.toast-stack{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:600;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{pointer-events:auto;background:#0B1E33;color:#EDF2F8;border-radius:12px;padding:11px 18px;font-size:13px;
  box-shadow:0 12px 40px rgba(7,21,35,.45);display:flex;align-items:center;gap:10px;max-width:480px;
  animation:toast-in .18s cubic-bezier(.25,.6,.35,1);border-left:3px solid var(--gold);}
.toast.success{border-left-color:#2FBF8F;}
.toast.error{border-left-color:#E06C6D;}
.toast .t-ic{font-weight:700;}
.toast.success .t-ic{color:#7FE0B8;}
.toast.error .t-ic{color:#F3A9AA;}
.toast.leaving{opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;}
@keyframes toast-in{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}

/* --- Right drawer framework --- */
.rdrawer-scrim{position:fixed;inset:0;background:rgba(7,21,35,.45);z-index:500;opacity:0;pointer-events:none;transition:opacity var(--motion);}
.rdrawer-scrim.show{opacity:1;pointer-events:auto;}
.rdrawer{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:96vw;background:var(--surface);z-index:510;
  box-shadow:-18px 0 60px rgba(7,21,35,.25);transform:translateX(102%);transition:transform var(--motion);
  display:flex;flex-direction:column;}
.rdrawer.show{transform:none;}
.rdrawer-head{background:linear-gradient(135deg,var(--rail),var(--rail-deep));color:#fff;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.rdrawer-title{font-family:var(--font-serif);font-size:16px;}
.rdrawer-sub{font-size:11px;color:#AEBBD0;margin-top:2px;}
.rdrawer-body{flex:1;overflow-y:auto;padding:18px 20px;}
.rdrawer-foot{border-top:1px solid var(--border);padding:12px 16px;flex-shrink:0;background:var(--surface);}

/* --- Chat --- */
.chat-body{background:var(--paper);display:flex;flex-direction:column;gap:8px;}
.chat-day{text-align:center;font-size:10.5px;color:var(--text-3);margin:10px 0 2px;letter-spacing:.4px;}
.chat-msg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line;}
.chat-msg.them{background:var(--surface);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:5px;}
.chat-msg.mine{background:linear-gradient(135deg,#12314F,#0B1E33);color:#EDF2F8;align-self:flex-end;border-bottom-right-radius:5px;}
.chat-time{font-size:9.5px;opacity:.55;margin-top:4px;text-align:right;}
.chat-input-row{display:flex;gap:8px;align-items:flex-end;}
.chat-input-row textarea{flex:1;resize:none;min-height:40px;max-height:110px;border-radius:12px;}
.chat-send{width:42px;height:40px;border-radius:11px;border:none;background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  color:#241A08;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.chat-send:disabled{opacity:.5;cursor:default;}
.chat-online{width:8px;height:8px;border-radius:50%;background:#2FBF8F;display:inline-block;margin-left:6px;}

/* --- Doc preview drawer --- */
.doc-frame{width:100%;height:100%;border:none;background:#525659;}
.rdrawer.wide{width:640px;}

/* --- Quick actions (dashboard command center) --- */
.qa-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
@media(max-width:1000px){.qa-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.qa-grid{grid-template-columns:repeat(2,1fr);}}
.qa{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 10px 13px;text-align:center;
  cursor:pointer;transition:border-color var(--motion),transform var(--motion),box-shadow var(--motion);}
.qa:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow-card);}
.qa .qa-ic{width:36px;height:36px;border-radius:10px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
.qa .qa-ic svg{width:17px;height:17px;}
.qa .qa-label{font-size:11.5px;font-weight:600;color:var(--text-1);}

/* --- Collapsible sidebar (labels default, icons when collapsed) --- */
.sidebar{transition:width var(--motion);}
.nav-ic{width:17px;height:17px;flex-shrink:0;}
.app.nav-collapsed .sidebar{width:74px;}
.app.nav-collapsed .brand-name,.app.nav-collapsed .brand-sub,.app.nav-collapsed .nav-item span.nav-label-text{display:none;}
.app.nav-collapsed .nav-item{justify-content:center;padding:11px 0;}
.app.nav-collapsed .brand{justify-content:center;padding-left:0;padding-right:0;}
.app.nav-collapsed .sidebar-foot .nav-item{justify-content:center;}
.nav-collapse-btn{margin:4px 12px 10px;padding:7px;border:none;border-radius:9px;background:rgba(255,255,255,.06);
  color:var(--rail-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:600;}
.nav-collapse-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
@media(max-width:720px){.nav-collapse-btn{display:none;}}

/* --- Contract side panel bits --- */
.cp-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--border);font-size:12.5px;}
.cp-row:first-child{border-top:none;}
.cp-row .k{color:var(--text-2);}
.cp-row .v{font-weight:600;text-align:right;}

/* ==========================================================================
   v5 — modern top navigation (sidebar becomes an on-demand drawer),
   refined scrollbars, modal corner fix, time inputs, mobile polish
   ========================================================================== */
input[type=time]{width:100%;height:40px;border:1px solid var(--border);border-radius:9px;padding:0 12px;
  font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--text-1);}
input[type=time]:focus{outline:none;border-color:var(--gold);}

/* Modal: crisp corners + internal scroll with a refined scrollbar */
.mc-modal{display:flex;flex-direction:column;overflow:hidden;max-height:92vh;}
.mc-modal-body{overflow-y:auto;}
.mc-modal-body::-webkit-scrollbar,.rdrawer-body::-webkit-scrollbar,.panel::-webkit-scrollbar,textarea::-webkit-scrollbar,.nav::-webkit-scrollbar{width:8px;height:8px;}
.mc-modal-body::-webkit-scrollbar-thumb,.rdrawer-body::-webkit-scrollbar-thumb,.panel::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb,.nav::-webkit-scrollbar-thumb{
  background:rgba(138,147,163,.45);border-radius:99px;border:2px solid transparent;background-clip:content-box;}
.mc-modal-body::-webkit-scrollbar-thumb:hover,.rdrawer-body::-webkit-scrollbar-thumb:hover{background:rgba(156,112,46,.6);border:2px solid transparent;background-clip:content-box;}
.mc-modal-body::-webkit-scrollbar-track,.rdrawer-body::-webkit-scrollbar-track{background:transparent;}
.mc-modal-body,.rdrawer-body,.panel,textarea{scrollbar-width:thin;scrollbar-color:rgba(138,147,163,.45) transparent;}

/* CLIENT shell only: the sidebar becomes an on-demand drawer at every width.
   The admin panel keeps its classic sticky sidebar (badges live there). */
.client-shell .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:95;width:280px;height:100vh;
  transform:translateX(-100%);transition:transform var(--motion);box-shadow:0 0 40px rgba(0,0,0,.4);display:flex;}
.client-shell .sidebar.open{transform:none;}
.client-shell .nav-collapse-btn{display:none;}
/* Desktop: the top bar itself holds every primary option — the hamburger is
   redundant there. It appears only below 860px where the in-bar nav hides. */
.client-shell .nav-toggle{display:none;}
@media (max-width:860px){ .client-shell .nav-toggle{display:flex;} }
/* Admin on small screens still needs a way in: sidebar scrolls horizontally-safe */
@media (max-width:720px){ .app:not(.client-shell) .sidebar{display:flex;position:fixed;z-index:95;transform:translateX(-100%);transition:transform var(--motion);} .app:not(.client-shell) .sidebar.open{transform:none;} }

/* Single top bar: primary navigation lives INSIDE the topbar (desktop) */
.tb-nav{display:none;align-items:stretch;gap:2px;margin-left:22px;height:60px;}
@media(min-width:861px){.tb-nav{display:flex;}}
.tb-nav a{display:flex;align-items:center;gap:7px;padding:0 13px;font-size:13px;font-weight:500;
  color:var(--rail-text-dim);border-bottom:2px solid transparent;border-top:2px solid transparent;
  transition:color var(--motion),border-color var(--motion);white-space:nowrap;}
.tb-nav a:hover{color:#fff;}
.tb-nav a.active{color:#EACB90;border-bottom-color:var(--gold);}
.tb-nav svg{width:15px;height:15px;}

/* Profile dropdown (top-right) */
.profile{position:relative;}
.profile-btn{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--rail-text-dim);
  padding:6px 8px;border-radius:9px;font-size:13px;font-weight:500;transition:color var(--motion),background var(--motion);}
.profile-btn:hover{color:#fff;background:rgba(255,255,255,.07);}
.profile-btn-active{color:#EACB90;}
.profile-avatar{width:28px;height:28px;border-radius:50%;background:rgba(184,134,59,.22);border:1px solid rgba(234,203,144,.35);
  display:flex;align-items:center;justify-content:center;color:#EACB90;flex-shrink:0;}
.profile-avatar svg{width:15px;height:15px;}
.profile-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-pop);min-width:240px;padding:6px;display:none;z-index:60;}
.profile-menu.show{display:block;}
.profile-menu-head{padding:10px 12px 9px;border-bottom:1px solid var(--border);margin-bottom:5px;}
.profile-menu-sep{height:1px;background:var(--border);margin:5px 0;}
.profile-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13px;
  color:var(--text-1);}
.profile-menu a:hover{background:var(--surface-2);color:var(--text-1);}
.profile-menu a.active{color:var(--gold-deep);font-weight:600;}
.profile-menu svg{color:var(--text-3);flex-shrink:0;}
@media (max-width:860px){.profile-name{display:none;}.profile-btn{padding:4px;}}

/* Mobile polish pass */
@media (max-width:720px){
  .topbar{padding:0 14px;}
  .topbar-date{display:none;}
  .topbar .muted{display:none;} /* user name — the portal knows who you are */
  .topbar-price{display:none;}
  .content{padding:16px 14px 96px;}
  .card{padding:18px 16px;}
  .hero-value{font-size:34px;}
  .rdrawer,.rdrawer.wide{width:100vw;max-width:100vw;}
  .mc-modal{max-width:100%;border-radius:16px;}
  .mc-modal-scrim{padding:10px;}
  .qa-grid{grid-template-columns:repeat(3,1fr);}
  .qa .qa-label{font-size:10.5px;}
  #chat-input,.chat-input-row textarea{font-size:16px;} /* prevents iOS focus zoom */
  .hero-actions .btn{height:42px;}
  .footer{font-size:11px;}
  .footer span[style*="float:right"]{float:none !important;display:block !important;margin-top:8px;}
}

/* Achievement medals — visible but deliberately quiet */
.medal-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.medal{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;font-size:12px;
  font-weight:500;border:1px solid var(--border);transition:transform var(--motion);}
.medal svg{width:14px;height:14px;}
.medal-earned{background:linear-gradient(135deg,rgba(156,112,46,.14),rgba(234,203,144,.10));
  border-color:rgba(156,112,46,.4);color:var(--gold-deep);}
.medal-earned:hover{transform:translateY(-1px);}
.medal-locked{color:var(--text-3);opacity:.55;}
.medal-locked .medal-name{font-weight:400;}
@media (max-width:720px){.medal{padding:5px 10px;font-size:11px;}.medal svg{width:12px;height:12px;}}

/* Current-tier chip in the hero */
.hero-tier{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 11px;border-radius:99px;
  background:rgba(184,134,59,.16);border:1px solid rgba(234,203,144,.35);color:#EACB90;font-size:11.5px;font-weight:600;
  vertical-align:middle;transition:background var(--motion);}
.hero-tier:hover{background:rgba(184,134,59,.28);}
.hero-tier svg{width:13px;height:13px;}

/* Market briefing — richer news list */
.news-list{margin-top:6px;}
.news-item{display:flex;gap:13px;align-items:center;padding:11px 8px;border-radius:10px;
  border-bottom:1px solid var(--border);transition:background var(--motion);}
.news-item:last-child{border-bottom:none;}
.news-item:hover{background:var(--surface-2);}
.news-item:hover .news-arrow{opacity:1;transform:none;}
.news-item:hover .news-title{color:var(--gold-deep);}
.news-thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--gold-tint),var(--surface-2));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--gold-deep);border:1px solid var(--border);}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.news-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.news-title{font-size:13px;font-weight:550;color:var(--text-1);line-height:1.4;transition:color var(--motion);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);}
.news-source{font-weight:600;color:var(--text-2);}
.news-cat{padding:1px 8px;border-radius:99px;background:var(--gold-tint);color:var(--gold-deep);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.04em;}
.news-arrow{width:15px;height:15px;color:var(--gold-deep);opacity:0;transform:translate(-3px,3px);transition:opacity var(--motion),transform var(--motion);flex-shrink:0;}
@media (max-width:720px){.news-thumb{width:40px;height:40px;}.news-arrow{display:none;}}

/* Typing indicator */
.chat-typing{display:flex;align-items:center;gap:9px;padding:6px 18px 8px;}
.typing-bubble{display:inline-flex;align-items:center;gap:3.5px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:14px;padding:8px 11px;}
.tdot{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:tdot-bounce 1.2s infinite ease-in-out;}
.tdot:nth-child(2){animation-delay:.15s;}
.tdot:nth-child(3){animation-delay:.3s;}
@keyframes tdot-bounce{0%,60%,100%{transform:none;opacity:.45;}30%{transform:translateY(-4px);opacity:1;}}
@media (prefers-reduced-motion:reduce){.tdot{animation:none;}}

/* Quiet gold confetti for payment success — brief, respectful */
.confetti-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.confetti{position:absolute;top:-10px;width:7px;height:11px;border-radius:2px;opacity:.9;
  animation:confetti-fall 1.6s ease-in forwards;}
@keyframes confetti-fall{
  0%{transform:translateY(-10px) rotate(0deg);opacity:1;}
  100%{transform:translateY(340px) rotate(540deg);opacity:0;}
}
@media (prefers-reduced-motion:reduce){.confetti{display:none;}}

/* Modern KYC form */
.kyc-steps{display:flex;gap:8px;margin:4px 0 18px;flex-wrap:wrap;}
.kyc-step{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:6px 14px 6px 6px;}
.kyc-step-n{width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  color:#241A08;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.kyc-part-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-deep);
  margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--border);}
.kyc-part-label:first-of-type{border-top:none;padding-top:0;margin-top:6px;}
.kyc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  border:1.5px dashed var(--border-strong);border-radius:12px;padding:22px 12px;cursor:pointer;
  transition:border-color var(--motion),background var(--motion);min-height:118px;font-weight:500;}
.kyc-drop:hover,.kyc-drop.dragging{border-color:var(--gold);background:var(--gold-tint);}
.kyc-drop.has-file{border-style:solid;border-color:var(--emerald);background:var(--emerald-tint);}
.kyc-drop svg{width:22px;height:22px;color:var(--text-3);}
.kyc-drop.has-file svg{color:var(--emerald);}
.kyc-drop-label{font-size:12.5px;}
.kyc-drop-hint{font-size:11px;color:var(--text-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Premium empty states */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:36px 20px;gap:6px;}
.empty-state-ic{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--gold-tint),var(--surface-2));
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);margin-bottom:6px;}
.empty-state-ic svg{width:24px;height:24px;}
.empty-state-title{font-size:14px;font-weight:600;color:var(--text-1);}
.empty-state-sub{font-size:12.5px;color:var(--text-3);max-width:340px;line-height:1.55;}
.empty-state .btn{margin-top:10px;}

/* Command palette (Cmd/Ctrl+K) */
.cmdk-scrim{position:fixed;inset:0;background:rgba(7,21,35,.45);backdrop-filter:blur(2px);z-index:600;
  display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;}
.cmdk-scrim.show{display:flex;}
.cmdk{width:100%;max-width:560px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-pop);
  overflow:hidden;border:1px solid var(--border);}
.cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);}
.cmdk-input-row svg{width:17px;height:17px;color:var(--text-3);flex-shrink:0;}
.cmdk input{border:none !important;box-shadow:none !important;height:auto;padding:0;font-size:15px;background:transparent;}
.cmdk input:focus{box-shadow:none !important;}
.cmdk-results{max-height:46vh;overflow-y:auto;padding:6px;}
.cmdk-group{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);padding:10px 12px 4px;}
.cmdk-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;
  padding:10px 12px;border-radius:9px;font-size:13.5px;color:var(--text-1);cursor:pointer;}
.cmdk-item:hover,.cmdk-item.sel{background:var(--gold-tint);}
.cmdk-item svg{width:15px;height:15px;color:var(--text-3);flex-shrink:0;}
.cmdk-item .cmdk-sub{font-size:11.5px;color:var(--text-3);margin-left:auto;white-space:nowrap;}
.cmdk-foot{padding:8px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text-3);
  display:flex;gap:14px;}
.cmdk-foot kbd{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;
  font-family:inherit;font-size:10.5px;}
.topbar-search{display:none;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:9px;padding:6px 12px;color:var(--rail-text-dim);font-size:12.5px;cursor:pointer;transition:background .18s var(--ease);}
.topbar-search:hover{background:rgba(255,255,255,.12);}
.topbar-search kbd{background:rgba(255,255,255,.1);border-radius:4px;padding:0 5px;font-size:10.5px;font-family:inherit;}
@media(min-width:900px){.topbar-search{display:flex;}}

/* Relationship-manager identity avatar */
.rm-avatar{position:relative;width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--rail),#14304d);display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gold);box-shadow:0 0 0 3px var(--gold-tint);}
.rm-avatar > span:first-child{color:#EACB90;font-weight:600;font-size:17px;font-family:var(--font-serif);letter-spacing:.5px;}
.rm-presence{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;
  background:#2FBF8F;border:2px solid var(--surface);}

/* Loading state: quiet spinner inside any button */
.btn.loading{position:relative;color:transparent !important;pointer-events:none;}
.btn.loading::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:btn-spin .7s linear infinite;}
.btn.loading:not(.btn-primary)::after{border-color:rgba(16,20,26,.2);border-top-color:var(--gold-deep);}
@keyframes btn-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.btn.loading::after{animation-duration:1.6s;}}

/* Calm inline error note (paired with a retry action, never alarming) */
.calm-error{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--amber);border-radius:10px;padding:11px 14px;font-size:12.5px;color:var(--text-2);
  line-height:1.55;margin-top:10px;}
.calm-error svg{width:15px;height:15px;color:var(--amber);flex-shrink:0;margin-top:1px;}
.calm-error strong{color:var(--text-1);}

/* Trust cue: encrypted-session chip for sensitive forms */
.secure-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--text-3);
  background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:5px 12px 5px 9px;}
.secure-chip svg{width:12px;height:12px;color:var(--emerald);}

/* Utility classes — extracted from the most-repeated inline patterns */
.stat-lg{font-size:19px;font-weight:600;margin-top:6px;}
.tile{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.tile-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);}
.tile-value{font-size:14px;font-weight:600;margin-top:3px;}
.bubble{padding:10px 14px;border-radius:10px;margin-bottom:8px;max-width:75%;}
.bubble.me{margin-left:auto;background:var(--gold-tint);}
.bubble.them{background:var(--surface-2);}
.bubble-meta{font-size:11px;margin-bottom:4px;color:var(--text-3);}
.bubble-body{font-size:13.5px;white-space:pre-wrap;}

/* ==========================================================================
   v10 — CLIENT ELEVATION. Everything here is scoped to .client-shell so the
   staff panel keeps its working density. The client canvas gets the private-
   bank treatment: wider stage, more air, larger calmer type, quieter accents.
   ========================================================================== */
.client-shell .content{max-width:1300px;padding:40px 44px 72px;}
.client-shell .footer{max-width:1300px;}
.client-shell .card{padding:28px 32px;}
.client-shell .grid{gap:20px;}
.client-shell .mb-16{margin-bottom:20px;}

/* Type scale — display money, titles and body all step up; secondary text
   gains contrast instead of shrinking. */
.client-shell .section-title{font-size:19px;font-weight:500;letter-spacing:-.01em;}
.client-shell .section-sub{font-size:13.5px;line-height:1.6;}
.client-shell p,.client-shell .muted{font-size:14px;}
.client-shell td{font-size:13px;} /* data stays dense on purpose */
.client-shell .faint{color:#78818F;} /* higher contrast than the old faint */
.client-shell .hero-value{font-size:52px;letter-spacing:-.01em;}
.client-shell .hero-greeting{font-size:26px;}

/* Hero staging: the number gets the stage — more air above and below */
.client-shell .hero{padding:44px 46px 40px;}
.client-shell .hero-value-row{margin:26px 0 10px;}
.client-shell .hero-stat-value{font-size:16px;}
.client-shell .hero-actions{margin-top:28px;}

/* Quieter accents: chips, badges and medals recede a step */
.client-shell .badge{font-size:10.5px;font-weight:600;opacity:.92;}
.client-shell .hero-tier{opacity:.85;font-size:11px;}
.client-shell .medal{opacity:.95;}
.client-shell .qa-grid{gap:14px;}

/* Messaging: calmer, roomier bubbles */
.client-shell .bubble{padding:13px 17px;border-radius:13px;margin-bottom:11px;line-height:1.55;}
.client-shell .bubble.me{background:#F6EEDD;}
.client-shell .bubble.them{background:#F4F6F8;}
.client-shell .bubble-body{font-size:14px;}
.client-shell .chat-msg{line-height:1.55;}

/* KYC: ceremonial drop zones and roomier steps */
.client-shell .kyc-drop{min-height:150px;padding:30px 16px;gap:9px;}
.client-shell .kyc-drop svg{width:27px;height:27px;}
.client-shell .kyc-part-label{margin:28px 0 14px;padding-top:22px;}
.client-shell .kyc-steps{margin:8px 0 24px;gap:10px;}

/* Footer: quieter, more ceremonial */
.client-shell .footer{font-size:11.5px;color:#98A0AC;padding-top:24px;letter-spacing:.01em;}
.client-shell .footer .secure-chip{border-color:transparent;background:transparent;padding-left:0;}

/* News list breathes a little more */
.client-shell .news-item{padding:13px 10px;}
.client-shell .news-title{font-size:13.5px;}

@media (max-width:900px){
  .client-shell .content{padding:20px 16px 96px;}
  .client-shell .card{padding:20px 18px;}
  .client-shell .hero{padding:26px 20px 24px;}
  .client-shell .hero-value{font-size:36px;}
  .client-shell .hero-greeting{font-size:21px;}
}

/* "Still working" reassurance for long actions */
.still-working{font-size:11.5px;color:var(--text-3);margin-top:8px;display:flex;align-items:center;gap:7px;
  animation:fade-in .3s var(--ease);}
.still-working::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);
  animation:tdot-bounce 1.2s infinite ease-in-out;}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

/* ==========================================================================
   v11 — CLIENT RECOMPOSITION. The reference skeleton in Meridian's identity:
   whitespace as structure (borderless cards on a soft canvas), a serif page
   title anchoring every screen, one-number cards, and list rows where a
   table used to be. Scoped to .client-shell — staff density untouched.
   ========================================================================== */
.client-shell{background:#F2F3F6;}
.client-shell .content{background:transparent;}
.client-shell .card{border:none;box-shadow:0 1px 2px rgba(16,20,26,.03),0 10px 34px rgba(16,20,26,.05);
  border-radius:20px;}
.client-shell table{font-size:13px;}
.client-shell .table-scroll{border:none;background:var(--surface);}

/* Page head: the big serif anchor every screen was missing */
.page-head{margin:2px 0 26px;}
.page-head h1{font-family:var(--font-serif);font-size:32px;font-weight:500;letter-spacing:-.015em;color:var(--text-1);}
.page-head .page-sub{font-size:13.5px;color:var(--text-3);margin-top:6px;}
@media (max-width:900px){.page-head h1{font-size:25px;}.page-head{margin-bottom:18px;}}

/* One-number stat card discipline */
.client-shell .stat-lg{font-size:22px;font-family:var(--font-serif);letter-spacing:-.01em;}
.client-shell .eyebrow{letter-spacing:.09em;font-size:10.5px;}

/* List rows — the "upcoming payment" pattern from the reference */
.lrow{display:flex;align-items:center;gap:14px;padding:14px 6px;border-bottom:1px solid rgba(16,20,26,.05);}
.lrow:last-child{border-bottom:none;}
.lrow-ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--gold-tint);color:var(--gold-deep);font-weight:600;font-size:13px;}
.lrow-ic.neutral{background:#EEF1F4;color:var(--text-2);}
.lrow-ic.green{background:var(--emerald-tint);color:var(--emerald);}
.lrow-body{flex:1;min-width:0;}
.lrow-title{font-size:13.5px;font-weight:600;color:var(--text-1);}
.lrow-sub{font-size:12px;color:var(--text-3);margin-top:1px;}
.lrow-amount{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}
.lrow-amount .lrow-when{display:block;font-size:11px;color:var(--text-3);font-weight:400;margin-top:1px;}

/* Per-document status list for KYC */
.doc-status{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid rgba(16,20,26,.05);}
.doc-status:last-child{border-bottom:none;}
.doc-status svg{width:16px;height:16px;flex-shrink:0;}
.doc-status .ds-ok{color:var(--emerald);}
.doc-status .ds-missing{color:var(--text-3);}
.doc-status-name{font-size:13px;font-weight:500;flex:1;}
.doc-status-note{font-size:11.5px;color:var(--text-3);}
.kyc-guidance{font-size:11px;color:var(--text-3);line-height:1.5;margin-top:6px;text-align:center;max-width:210px;}

/* ==========================================================================
   v12 — REFERENCE-MATCH LIGHT CLIENT SHELL. The client portal now mirrors
   the approved reference to the detail: permanent white sidebar with a dark
   active pill, light header with search + avatar block, big sans page title
   with breadcrumb, white surfaces, dark primary buttons. Client-shell only.
   ========================================================================== */

/* --- Sidebar: white, permanent on desktop, dark pill for the active item --- */
@media (min-width:1000px){
  .client-shell .sidebar{position:sticky;top:0;transform:none;box-shadow:none;display:flex;
    background:#fff;border-right:1px solid var(--border);color:var(--text-1);width:256px;}
  .client-shell .nav-toggle{display:none;}
}
@media (max-width:999px){
  .client-shell .sidebar{background:#fff;color:var(--text-1);}
  .client-shell .nav-toggle{display:flex;color:var(--text-1);}
}
.client-shell .brand{padding:26px 22px 20px;}
.client-shell .brand-name{color:var(--text-1);font-size:17px;}
.client-shell .brand-sub{color:var(--text-3);}
.client-shell .nav{padding:6px 14px;}
.client-shell .nav-label{color:var(--text-3);letter-spacing:1.3px;padding:18px 10px 8px;}
.client-shell .nav-item{color:var(--text-2);border-radius:12px;padding:11px 13px;font-size:13.5px;margin-bottom:3px;}
.client-shell .nav-item:hover{background:#F3F4F6;color:var(--text-1);}
.client-shell .nav-item.active{background:var(--rail);color:#fff;}
.client-shell .nav-item.active svg{color:#fff;}
.client-shell .sidebar-foot{border-top:1px solid var(--border);padding:14px 20px 22px;}
.client-shell .sidebar-foot .nav-item{color:var(--oxblood);}
.client-shell .sidebar-foot .nav-item:hover{background:var(--oxblood-tint);color:var(--oxblood);}

/* The sidebar promo card (mirrors the reference's bottom card) */
.side-promo{margin:10px 14px 6px;background:linear-gradient(150deg,var(--rail) 0%,#123252 100%);
  border-radius:16px;padding:18px 16px;color:#EDF2F8;}
.side-promo .sp-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:#EACB90;}
.side-promo .sp-title svg{width:15px;height:15px;}
.side-promo p{font-size:11.5px;color:#AEBBD0;line-height:1.5;margin:8px 0 12px;}
.side-promo a{display:block;text-align:center;background:#fff;color:var(--rail);font-weight:600;font-size:12.5px;
  border-radius:9px;padding:9px 0;}

/* --- Header: white bar with search, icons and the avatar block --- */
.client-shell .topbar{background:#fff;color:var(--text-1);border-bottom:1px solid var(--border);height:76px;padding:0 30px;}
.client-shell .topbar-title{display:none;}
.client-shell .tb-nav{display:none !important;}
.tb-search{display:none;align-items:center;gap:11px;background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:12px 16px;width:min(420px,34vw);color:var(--text-3);font-size:13.5px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.tb-search:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card);}
.tb-search svg{width:16px;height:16px;flex-shrink:0;}
@media (min-width:1000px){.tb-search{display:flex;}}
.client-shell .icon-btn{width:42px;height:42px;border:1px solid var(--border);border-radius:50%;
  background:#fff;color:var(--text-2);}
.client-shell .icon-btn:hover{background:#F3F4F6;}
.client-shell .topbar-price{background:var(--gold-tint);color:var(--gold-deep);border:none;}
.client-shell .profile-btn{color:var(--text-1);padding:5px 6px;}
.client-shell .profile-btn:hover{background:#F3F4F6;color:var(--text-1);}
.client-shell .profile-avatar{width:40px;height:40px;background:linear-gradient(150deg,var(--rail),#1a3c60);
  border:none;box-shadow:none;color:#EACB90;}
.client-shell .profile-avatar svg{width:17px;height:17px;}
.profile-id{display:none;text-align:left;line-height:1.25;}
@media (min-width:1000px){.profile-id{display:block;}}
.profile-id .pi-name{font-size:13.5px;font-weight:700;color:var(--text-1);}
.profile-id .pi-email{font-size:11.5px;color:var(--text-3);}
.client-shell .profile-btn-active .pi-name{color:var(--gold-deep);}

/* --- Page head: big sans title + breadcrumb, exactly like the reference --- */
.client-shell .page-head h1{font-family:var(--font-sans);font-weight:700;font-size:30px;letter-spacing:-.02em;}
.page-crumb{font-size:13px;color:var(--text-3);margin-top:7px;}
.page-crumb b{color:var(--text-2);font-weight:600;}
.page-crumb span{margin:0 7px;color:var(--border-strong);}

/* --- Hero goes light: a white statement card, dark figures --- */
.client-shell .hero{background:#fff;border:none;box-shadow:0 1px 2px rgba(16,20,26,.03),0 10px 34px rgba(16,20,26,.05);}
.client-shell .hero-greeting{color:var(--text-1);}
.client-shell .hero-sub{color:var(--text-2);}
.client-shell .hero-value{color:var(--rail);}
.client-shell .hero-stat-label{color:var(--text-3);}
.client-shell .hero-stat-value{color:var(--text-1);}
.client-shell .hero-stats{border-top:1px solid var(--border);}
.client-shell .hero-stat{border-right:1px solid var(--border);}
.client-shell .hero-tier{background:var(--gold-tint);color:var(--gold-deep);border:none;opacity:1;}
.client-shell .btn-ghost-light{background:#fff;border:1px solid var(--border-strong);color:var(--text-1);}
.client-shell .btn-ghost-light:hover{background:#F3F4F6;border-color:var(--text-3);}
.client-shell .milestone-banner{background:var(--gold-tint);color:var(--text-1);border:none;}
.client-shell .milestone-banner div[style*="color:#AEBBD0"]{color:var(--text-2) !important;}

/* --- Dark primary buttons, like the reference's black pills --- */
.client-shell .btn-primary{background:var(--rail);border-color:var(--rail);color:#fff;box-shadow:none;}
.client-shell .btn-primary:hover{background:#123252;border-color:#123252;}

/* Quick-action tiles: white like the reference feature tiles */
.client-shell .qa{background:#fff;border:1px solid var(--border);}
.client-shell .qa:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card);}

/* ==========================================================================
   v12.1 — AIR & SOFTNESS refinement (reviewer pass on the reference match).
   More whitespace, lighter icon weight, quieter tables, softer surfaces.
   Client-shell only.
   ========================================================================== */
.client-shell .content{padding:44px 52px 80px;}
.client-shell .grid{gap:24px;}
.client-shell .mb-16{margin-bottom:24px;}
.client-shell .card{padding:30px 34px;border-radius:22px;
  box-shadow:0 1px 2px rgba(16,20,26,.025),0 14px 44px rgba(16,20,26,.045);}
.client-shell .page-head{margin:0 0 32px;}
.client-shell .page-head h1{font-size:34px;}
.client-shell .page-crumb{margin-top:9px;}

/* Sidebar: lighter weight, more air, thinner icons */
@media (min-width:1000px){.client-shell .sidebar{width:264px;}}
.client-shell .nav{padding:8px 16px;}
.client-shell .nav-item{padding:12px 14px;gap:13px;font-weight:500;}
.client-shell .nav-item svg{stroke-width:1.5;width:18px;height:18px;}
.client-shell .nav-item.active{font-weight:600;}
.client-shell .nav-label{padding:22px 12px 10px;font-size:10px;}
.client-shell .side-promo{margin:12px 16px 8px;}

/* Header: borderless soft-circle icons, airier search */
.client-shell .icon-btn{border:none;background:#F5F6F8;}
.client-shell .icon-btn:hover{background:#ECEEF1;}
.client-shell .icon-btn svg{stroke-width:1.6;}
.client-shell .tb-search{background:#FAFBFC;border-color:#EDF0F3;border-radius:13px;padding:13px 18px;}
.client-shell .tb-search:hover{border-color:var(--border);box-shadow:none;background:#fff;}
.client-shell .topbar{padding:0 36px;}

/* Tables & lists: quieter data presentation */
.client-shell tbody tr:nth-child(even){background:transparent;}
.client-shell tbody tr:hover{background:#FAFBFC;}
.client-shell th{font-size:10.5px;color:#A6ADB9;letter-spacing:.8px;padding-bottom:12px;border-bottom:1px solid #EFF1F4;}
.client-shell td{border-bottom:1px solid #F1F3F6;padding:13px 12px;}
.client-shell .lrow{padding:16px 8px;border-bottom:1px solid #F1F3F6;}
.client-shell .lrow-ic.neutral{background:#F2F4F6;}

/* Stat cards: one clean number, quieter label */
.client-shell .eyebrow{color:#A6ADB9;font-weight:600;}
.client-shell .stat-lg{margin-top:8px;}

/* Hero: extra air around the statement */
.client-shell .hero{padding:46px 48px 42px;border-radius:22px;}
.client-shell .hero-value-row{margin:30px 0 14px;}
.client-shell .hero-stats{padding-top:20px;}
.client-shell .hero-actions{margin-top:30px;}

/* Section titles inside cards: stronger hierarchy, quieter subs */
.client-shell .section-title{font-weight:600;}
.client-shell .section-sub{color:#98A0AC;}
@media (max-width:900px){
  .client-shell .content{padding:20px 16px 96px;}
  .client-shell .card{padding:20px 18px;}
  .client-shell .page-head h1{font-size:26px;}
}

/* ==========================================================================
   v13 — MOBILE REPAIR + reference details. Root cause of the broken mobile
   view: rows built with inline grid-template-columns never collapsed, and
   the chart canvas's intrinsic 300px floor pushed the layout viewport to
   576px. On small screens every client grid now stacks, whatever inline
   template it carries.
   ========================================================================== */
@media (max-width:900px){
  body{overflow-x:hidden;}
  .client-shell .grid{grid-template-columns:1fr !important;}
  .client-shell canvas,.client-shell img,.client-shell svg{max-width:100%;}
  .client-shell .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
}

/* Light bottom navigation to match the new shell */
.client-shell .bottom-nav{background:#fff;border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(16,20,26,.06);}
.client-shell .bottom-nav a{color:var(--text-3);}
.client-shell .bottom-nav a.active{color:var(--rail);font-weight:700;}

/* Softer rounded active pill (kept rounded, never square) */
.client-shell .nav-item{border-radius:14px;}
.client-shell .nav-item.active{border-radius:14px;}

/* Bigger article thumbnails in the Market briefing */
.client-shell .news-thumb{width:58px;height:58px;border-radius:14px;font-size:17px;}

/* Header without the search field: quiet page context instead */
.tb-context{display:none;flex-direction:column;gap:2px;min-width:0;}
@media (min-width:1000px){.tb-context{display:flex;}}
.tb-context .tc-hello{font-size:15px;font-weight:700;color:var(--text-1);}
.tb-context .tc-date{font-size:12px;color:var(--text-3);}

/* Featured next-installment + timeline rows */
.next-feature{display:flex;align-items:center;gap:18px;background:linear-gradient(150deg,var(--rail) 0%,#14324f 100%);
  border-radius:18px;padding:20px 24px;color:#fff;margin-bottom:6px;}
.next-feature .nf-ic{width:52px;height:52px;border-radius:14px;background:rgba(234,203,144,.16);color:#EACB90;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.next-feature .nf-ic svg{width:24px;height:24px;}
.next-feature .nf-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#AEBBD0;}
.next-feature .nf-amount{font-family:var(--font-serif);font-size:26px;margin-top:2px;}
.next-feature .nf-due{font-size:12.5px;color:#AEBBD0;margin-top:2px;}
.next-feature .btn{flex-shrink:0;margin-left:auto;background:#fff;color:var(--rail);border-color:#fff;font-weight:600;}
.next-feature .btn:hover{background:#F3E8D3;border-color:#F3E8D3;}
.tl-row{display:flex;align-items:center;gap:14px;padding:12px 6px 12px 10px;position:relative;}
.tl-row::before{content:'';position:absolute;left:19px;top:-6px;bottom:-6px;width:2px;background:#EFF1F4;}
.tl-row:last-child::before{bottom:50%;}
.tl-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;position:relative;z-index:1;
  border:2px solid var(--border-strong);background:#fff;display:flex;align-items:center;justify-content:center;}
.tl-dot.done{border-color:var(--emerald);background:var(--emerald-tint);}
.tl-dot.done svg{width:10px;height:10px;color:var(--emerald);}
.tl-body{flex:1;min-width:0;}
.tl-title{font-size:13px;font-weight:600;}
.tl-sub{font-size:11.5px;color:var(--text-3);}
.tl-amt{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}
.tl-amt .badge{display:block;margin-top:2px;}

/* Sidebar widget: live next-payment card (replaces the promo tab) */
.side-next{margin:10px 16px 8px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;}
.side-next .sn-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:700;}
.side-next .sn-amount{font-family:var(--font-serif);font-size:21px;color:var(--rail);margin-top:4px;}
.side-next .sn-due{font-size:11.5px;color:var(--text-3);margin-top:2px;}
.side-next a{display:block;text-align:center;background:var(--rail);color:#fff;font-weight:600;font-size:12px;
  border-radius:9px;padding:8px 0;margin-top:12px;}
.side-next a:hover{background:#123252;}

/* =====================================================================
   v14 — TOP TOOLBAR SHELL, NEWS CARD GRID, LIVE DETAILS
   The client nav moves into the light top bar (the toolbar idea, in the
   approved v12 style). The white sidebar remains as the mobile drawer.
   ===================================================================== */

/* Brand + horizontal nav in the top bar (desktop only) */
.client-shell .tb-brand{display:none;align-items:center;gap:10px;flex-shrink:0;margin-right:6px;}
.client-shell .tb-brand-name{font-family:var(--font-serif);font-size:16.5px;font-weight:600;color:var(--text-1);white-space:nowrap;}
.client-shell .topnav{display:none;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;}
.client-shell .topnav::-webkit-scrollbar{display:none;}
.client-shell .topnav a{padding:9px 13px;border-radius:12px;font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap;transition:background .15s ease,color .15s ease;}
.client-shell .topnav a:hover{background:#F2F3F6;color:var(--text-1);}
.client-shell .topnav a.active{background:#0B1E33;color:#fff;}
.client-shell .topnav a.active:hover{background:#0B1E33;color:#fff;}

@media (min-width:1000px){
  /* The sidebar retires on desktop — everything lives in the toolbar now. */
  .client-shell .sidebar{display:none;}
  .client-shell .tb-brand{display:flex;}
  .client-shell .topnav{display:flex;}
  .client-shell .topbar{padding:0 28px;}
  /* Without the rail the canvas centers itself */
  .client-shell .content{max-width:1240px;padding:40px 40px 80px;}
}
/* Tighten the account block so the toolbar breathes on smaller desktops */
@media (min-width:1000px) and (max-width:1460px){
  .client-shell .profile-id .pi-email{display:none;}
  .client-shell .profile-id .pi-name{font-size:12.5px;}
}
@media (min-width:1000px) and (max-width:1240px){
  .client-shell .profile-id{display:none;}
  .client-shell .topnav a{padding:9px 10px;font-size:12.5px;}
}

/* Market briefing — square article cards instead of a list */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;}
@media (max-width:1150px){.news-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.news-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}
.news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;min-width:0;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.news-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,20,26,.09);border-color:var(--border-strong);}
.news-card-img{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(140deg,#EFE7D8 0%,#F5F1E8 60%,#EDEFF2 100%);overflow:hidden;}
.news-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.news-card-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:30px;color:#B8863B;z-index:0;}
.news-card-img img{z-index:1;}
.news-card-body{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;flex:1;min-width:0;}
.news-card-title{font-size:12.8px;font-weight:600;line-height:1.45;color:var(--text-1);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.news-card-meta{margin-top:auto;display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:10.5px;color:var(--text-3);min-width:0;}
.news-card-meta .news-source{font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
@media (max-width:480px){
  .news-card-title{font-size:12px;-webkit-line-clamp:2;}
  .news-card-body{padding:10px 11px 12px;gap:6px;}
}

/* Hero sparkline label — the little line is the live BTC trend, say so */
.spark-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:auto;align-self:center;}
.spark-label{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:5px;}
.spark-label .live-dot{width:6px;height:6px;}

/* Floating unread-message bubble (client) */
.client-shell .chat-fab{position:fixed;right:24px;bottom:24px;z-index:120;width:54px;height:54px;border-radius:50%;
  border:none;cursor:pointer;background:#0B1E33;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(11,30,51,.35),0 2px 8px rgba(11,30,51,.25);
  animation:fabIn .35s cubic-bezier(.2,.9,.3,1.2);transition:transform .15s ease,box-shadow .15s ease;}
.client-shell .chat-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px rgba(11,30,51,.4);}
.client-shell .chat-fab svg{width:22px;height:22px;}
.client-shell .chat-fab-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;
  background:#B8863B;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2.5px solid #fff;font-variant-numeric:tabular-nums;}
@keyframes fabIn{from{opacity:0;transform:translateY(14px) scale(.7);}to{opacity:1;transform:none;}}
@media (max-width:999px){.client-shell .chat-fab{bottom:86px;right:16px;}}

/* v14 mobile hardening: drop zones can never widen the page — long hint
   lines wrap instead of propagating min-content width. */
.client-shell .kyc-drop{min-width:0;max-width:100%;}
@media (max-width:900px){
  .client-shell .kyc-drop-hint{white-space:normal;overflow:visible;text-overflow:clip;}
  .client-shell .card .row.between{flex-wrap:wrap;row-gap:6px;}
}

/* ==========================================================================
   v15 — CLIENT UI POLISH (tom)
   ========================================================================== */

/* --- Typography: body copy leadership --- */
.client-shell{font-size:14px;}
.client-shell .muted{color:#78818F;}
.client-shell .faint{color:#78818F;}

/* --- Hero: serif money at 52px desktop, 34px mobile --- */
.client-shell .hero-value{font-size:52px;letter-spacing:-1.2px;}
@media (max-width:900px){.client-shell .hero-value{font-size:34px;}}
.client-shell .hero-value-row{margin:28px 0 12px;}

/* --- Hero stats: 1fr 1fr grid on mobile (hardened) --- */
@media (max-width:900px){
  .client-shell .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
  .client-shell .hero-stat{border-right:none;margin-right:0;padding-right:0;}
}

/* --- Hero actions: full-width buttons on mobile --- */
@media (max-width:900px){
  .client-shell .hero-actions .btn{flex:1 1 100%;justify-content:center;min-height:42px;}
}

/* --- Quick-action tiles: active state --- */
.client-shell .qa:active{transform:scale(.98);}

/* --- Table scroll: every table inside .table-scroll on mobile --- */
@media (max-width:720px){
  .client-shell .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius-md);}
  .client-shell .table-scroll table{min-width:600px;}
}

/* --- Badge: upcoming/pending = amber, not neutral --- */
.client-shell .badge-neutral{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);}

/* --- KYC drop-zones: proper min-height --- */
.client-shell .kyc-drop{min-height:150px;}

/* --- Forms: input/select/textarea height & label consistency --- */
.client-shell input[type=text],.client-shell input[type=email],.client-shell input[type=password],
.client-shell input[type=number],.client-shell input[type=date],.client-shell select,.client-shell textarea{height:40px;}
.client-shell textarea{height:auto;min-height:80px;}
.client-shell label{font-size:12.5px;font-weight:600;margin-bottom:6px;}

/* --- Submit buttons: navy in client context (hardened) --- */
.client-shell .btn-primary{background:var(--rail);border-color:var(--rail);color:#fff;box-shadow:none;}
.client-shell .btn-primary:hover{background:#123252;border-color:#123252;}

/* --- Empty state: padding bump --- */
.client-shell .empty-state{padding:44px 24px;}

/* --- Floating chat-fab: unscoped (lives outside .client-shell) --- */
.chat-fab{position:fixed;right:24px;bottom:24px;z-index:120;width:54px;height:54px;border-radius:50%;
  border:none;cursor:pointer;background:#0B1E33;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(11,30,51,.35),0 2px 8px rgba(11,30,51,.25);
  animation:fabIn .35s cubic-bezier(.2,.9,.3,1.2);transition:transform .15s ease,box-shadow .15s ease;}
.chat-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px rgba(11,30,51,.4);}
.chat-fab svg{width:22px;height:22px;}
.chat-fab-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;
  background:#B8863B;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2.5px solid #fff;font-variant-numeric:tabular-nums;}
@media (max-width:999px){.chat-fab{bottom:86px;right:16px;}}

/* --- Toast stack: unscoped hardening --- */
.toast-stack{z-index:600;overflow:visible;}

/* --- Auth split: badge sizing --- */
.auth-badges span{font-size:10.5px;}

/* --- Page head: responsive sizing --- */
@media (max-width:900px){.client-shell .page-head h1{font-size:26px;}}

/* --- Money figures: serif on stat-lg --- */
.client-shell .stat-lg{font-family:var(--font-serif);font-size:24px;font-weight:500;margin-top:8px;}
@media (max-width:900px){.client-shell .stat-lg{font-size:20px;}}

/* --- Installments badge: upcoming uses amber --- */
.client-shell .badge-upcoming{background:var(--amber-tint);color:var(--amber);}

/* --- Section title + sub consistency --- */
.client-shell .section-title{font-size:15.5px;font-weight:500;margin-bottom:2px;}
.client-shell .section-sub{font-size:12.5px;color:var(--text-2);margin-bottom:16px;}

/* --- Footer: legible on mobile --- */
@media (max-width:720px){
  .client-shell .footer{font-size:11px;padding:14px 14px 24px;}
  .client-shell .footer span[style*="float:right"]{float:none !important;display:block !important;margin-top:8px;}
}

/* ==========================================================================
   v16 — OPTIMIZER (atlas) — scoping hardening, mobile overflow, panel caps
   ========================================================================== */

/* --- Floating chat-fab: unscoped duplicate (already correct in v15, but the
   v14 block had it scoped inside .client-shell — leave the unscoped
   override at the bottom so it always wins regardless of load order) --- */
.chat-fab{position:fixed;right:24px;bottom:24px;z-index:120;width:54px;height:54px;border-radius:50%;
  border:none;cursor:pointer;background:#0B1E33;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(11,30,51,.35),0 2px 8px rgba(11,30,51,.25);}
.chat-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px rgba(11,30,51,.4);}
.chat-fab svg{width:22px;height:22px;}
.chat-fab-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;
  background:#B8863B;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2.5px solid #fff;font-variant-numeric:tabular-nums;}
@media (max-width:999px){.chat-fab{bottom:86px;right:16px;}}

/* --- Mobile overflow: general table safety net (not just .table-scroll).
   Any raw table inside a card can blow the viewport on a 390px phone;
   forcing block-overflow scroll here prevents that. --- */
@media (max-width:600px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  td,th{white-space:nowrap;}
}

/* --- Mobile overflow: .row containers with wrap-resistant children.
   The .row class uses display:flex but no flex-wrap; on narrow screens
   inline children can push past the viewport. --- */
@media (max-width:600px){
  .row:not(.between):not([style*="flex-wrap"]){flex-wrap:wrap;}
}

/* --- Panel width hardening: tokens like cards, dashboards, and
   reports can render inside a .panel popup; its default 340px might
   overflow on a 390px screen with padding. --- */
@media (max-width:420px){
  .panel{width:calc(100vw - 28px);max-width:340px;right:0;left:6px;}
  #bell-panel{width:calc(100vw - 28px);max-width:340px;right:0;left:6px;}
}

/* --- Toast stack: ensure it never overflows horizontally on small screens --- */
@media (max-width:420px){
  .toast{max-width:calc(100vw - 28px);font-size:12px;}
}

/* --- Drawer at max-width: 96vw is already set, but the scrim needs
   to remain clickable on very small devices --- */
@media (max-width:420px){
  .rdrawer{max-width:100vw;}
  .rdrawer.wide{max-width:100vw;}
}

/* --- Auth split: small screens should not have a hidden brand panel
   that leaves the form 100vw wide with no constraint --- */
@media (max-width:500px){
  .auth-card{padding:24px 18px;max-width:100%;}
}

/* --- Font loading: admin panel no longer loads Google Fonts;
   the self-hosted @font-face blocks in this file are the single source.
   The admin/includes/layout.php was updated to match. --- */