:root {
  --bg:#0a0908;--surface:#111009;--surface2:#161410;--surface3:#1d1b16;
  --border:rgba(255,255,255,0.07);--border-gold:rgba(201,169,110,0.25);
  --text:#f0ede8;--text-soft:#8a8479;--text-faint:#4a4640;
  --gold:#c9a96e;--gold-hover:#dbbf86;--gold-faint:rgba(201,169,110,0.08);--gold-faint2:rgba(201,169,110,0.14);
  --green:#4e9b6a;--green-bg:rgba(78,155,106,0.12);
  --amber:#c9903a;--amber-bg:rgba(201,144,58,0.12);
  --red:#c94a4a;--red-bg:rgba(201,74,74,0.12);
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-brand:'Playfair Display',Georgia,serif;
  --font-mono:'DM Mono','Courier New',monospace;
  --sidebar-w:220px;--topbar-h:52px;
  --r-sm:4px;--r-md:6px;--r-lg:10px;
  --transition:160ms cubic-bezier(0.16,1,0.3,1);
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;
  --text-xs:clamp(0.7rem,0.65rem + 0.2vw,0.75rem);
  --text-sm:clamp(0.8rem,0.75rem + 0.2vw,0.875rem);
  --text-base:clamp(0.875rem,0.8rem + 0.25vw,1rem);
  --text-lg:clamp(1rem,0.9rem + 0.4vw,1.125rem);
  --text-xl:clamp(1.125rem,1rem + 0.5vw,1.375rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-body);font-size:var(--text-sm);color:var(--text);background:var(--bg);display:flex;min-height:100dvh;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button{cursor:pointer;font:inherit;color:inherit;border:none;background:none}
input{font:inherit;color:inherit}
a{text-decoration:none;color:inherit}
::selection{background:rgba(201,169,110,0.2);color:var(--text)}
:focus-visible{outline:1px solid var(--gold);outline-offset:2px;border-radius:var(--r-sm)}

/* LAYOUT */
.sidebar{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);height:100dvh;position:sticky;top:0;overflow-y:auto;overflow-x:hidden;transition:width var(--transition);z-index:100}
.main-wrap{flex:1;display:flex;flex-direction:column;min-width:0}
.content{flex:1;padding:var(--s6);overflow-y:auto;background:var(--bg)}

/* SIDEBAR */
.sidebar-logo{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);flex-shrink:0;min-height:var(--topbar-h)}
.sidebar-logo-img{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.sidebar-logo-text{font-family:var(--font-brand);font-style:italic;font-size:1.05rem;color:var(--gold);white-space:nowrap}
.sidebar-nav{flex:1;padding:var(--s3) 0;overflow-y:auto}
.nav-group{margin-bottom:var(--s4)}
.nav-group-label{display:block;font-size:0.6rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);padding:var(--s3) var(--s5) var(--s1)}
.nav-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s5);font-size:var(--text-sm);color:var(--text-soft);border-left:2px solid transparent;transition:color var(--transition),background var(--transition),border-color var(--transition);white-space:nowrap}
.nav-item:hover{color:var(--text);background:var(--gold-faint)}
.nav-item.active{color:var(--gold);border-left-color:var(--gold);background:var(--gold-faint2)}
.nav-icon{width:15px;height:15px;flex-shrink:0;stroke-width:1.75}
.nav-badge{margin-left:auto;font-size:0.6rem;background:var(--surface3);color:var(--text-soft);padding:1px 6px;border-radius:20px;font-variant-numeric:tabular-nums}
.nav-badge.pending{background:var(--amber-bg);color:var(--amber)}
.nav-dot{width:6px;height:6px;border-radius:50%;margin-left:auto;flex-shrink:0}
.nav-dot.green{background:var(--green)}
.sidebar-footer{padding:var(--s4) var(--s5);border-top:1px solid var(--border);flex-shrink:0}
.sidebar-user{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.user-avatar,.topbar-avatar{width:28px;height:28px;border-radius:50%;background:var(--gold-faint2);border:1px solid var(--border-gold);display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:600;color:var(--gold);flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{display:block;font-size:var(--text-xs);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{display:block;font-size:0.6rem;color:var(--text-faint)}
.sidebar-sla{display:flex;align-items:center;gap:var(--s2);font-size:0.6rem;color:var(--text-faint)}
.sla-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* TOPBAR */
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--s4);padding:0 var(--s5);background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:90;flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:var(--s3);flex-shrink:0}
.topbar-center{flex:1;max-width:420px;margin:0 auto}
.topbar-right{display:flex;align-items:center;gap:var(--s3);flex-shrink:0;margin-left:auto}
.sidebar-toggle{color:var(--text-soft);padding:var(--s2);border-radius:var(--r-sm)}
.sidebar-toggle:hover{color:var(--text)}
.sidebar-toggle svg{width:18px;height:18px}
.breadcrumb{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-xs)}
.breadcrumb-root{color:var(--text-faint)}
.breadcrumb-sep{width:12px;height:12px;color:var(--text-faint)}
.breadcrumb-active{color:var(--text);font-weight:500}
.search-bar{display:flex;align-items:center;gap:var(--s2);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s2) var(--s3);transition:border-color var(--transition)}
.search-bar.inline{min-width:220px}
.search-bar:focus-within{border-color:var(--border-gold)}
.search-icon{width:13px;height:13px;color:var(--text-faint);flex-shrink:0}
.search-bar input{background:none;border:none;outline:none;font-size:var(--text-xs);color:var(--text);width:100%}
.search-bar input::placeholder{color:var(--text-faint)}
.chain-pills{display:flex;gap:var(--s1)}
.chain-pill{font-size:0.6rem;font-weight:600;letter-spacing:0.06em;padding:3px 8px;border-radius:20px;border:1px solid var(--border);color:var(--text-faint);cursor:pointer;transition:all var(--transition)}
.chain-pill:hover,.chain-pill.active{border-color:var(--border-gold);color:var(--gold);background:var(--gold-faint)}
.topbar-icon-btn{position:relative;color:var(--text-soft);padding:var(--s2);border-radius:var(--r-sm)}
.topbar-icon-btn:hover{color:var(--text)}
.topbar-icon-btn svg{width:16px;height:16px}
.notif-dot{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--amber);border:1.5px solid var(--surface)}

/* PAGES */
.page{display:none;animation:fadeUp 0.2s ease both}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}
.page-title{font-size:var(--text-xl);font-weight:600;line-height:1.2;color:var(--text)}
.page-sub{font-size:var(--text-xs);color:var(--text-soft);margin-top:var(--s1);display:flex;align-items:center;gap:var(--s2)}
.page-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease-in-out infinite}

/* BUTTONS */
.btn-primary-sm{display:inline-flex;align-items:center;gap:var(--s2);background:var(--gold);color:#FFF;font-size:var(--text-xs);font-weight:600;padding:var(--s2) var(--s4);border-radius:var(--r-md);transition:background var(--transition);white-space:nowrap}
.btn-primary-sm:hover{background:var(--gold-hover)}
.btn-primary-sm svg{width:13px;height:13px}
.btn-secondary{display:inline-flex;align-items:center;gap:var(--s2);background:var(--surface2);border:1px solid var(--border);color:var(--text-soft);font-size:var(--text-xs);padding:var(--s2) var(--s3);border-radius:var(--r-md);transition:all var(--transition);white-space:nowrap}
.btn-secondary:hover{border-color:var(--border-gold);color:var(--text)}
.btn-secondary svg{width:13px;height:13px}
.btn-ghost{display:inline-flex;align-items:center;gap:var(--s2);color:var(--text-soft);font-size:var(--text-xs);padding:var(--s2) var(--s3);border-radius:var(--r-md);border:1px solid transparent;transition:all var(--transition);white-space:nowrap}
.btn-ghost:hover{border-color:var(--border);color:var(--text)}
.btn-ghost svg{width:13px;height:13px}

/* DROPDOWN */
.dropdown-wrap{position:relative}
.dropdown-trigger svg:last-child{width:12px;height:12px;transition:transform var(--transition)}
.dropdown-wrap.open .dropdown-trigger svg:last-child{transform:rotate(180deg)}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:200;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.4);overflow:hidden}
.dropdown-wrap.open .dropdown-menu{display:block}
.dropdown-item{padding:var(--s2) var(--s4);font-size:var(--text-xs);color:var(--text-soft);cursor:pointer;transition:background var(--transition),color var(--transition)}
.dropdown-item:hover{background:var(--gold-faint);color:var(--text)}
.dropdown-item.active{color:var(--gold);background:var(--gold-faint)}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);margin-bottom:var(--s5)}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);transition:border-color var(--transition),box-shadow var(--transition)}
.kpi-card:hover{border-color:var(--border-gold);box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.kpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.kpi-label{font-size:var(--text-xs);color:var(--text-soft)}
.kpi-icon{width:14px;height:14px;flex-shrink:0}
.kpi-icon.positive{color:var(--green)}
.kpi-icon.neutral{color:var(--text-faint)}
.kpi-value{font-size:var(--text-xl);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:var(--s2)}
.kpi-delta{display:flex;align-items:center;gap:var(--s1);font-size:var(--text-xs)}
.kpi-delta svg{width:11px;height:11px}
.kpi-delta.positive{color:var(--green)}
.kpi-delta.neutral{color:var(--text-faint)}
.kpi-delta.negative{color:var(--red)}
.sparkline{width:100%;height:24px;margin-top:var(--s3);opacity:0.7}
.compliance-bar{height:4px;background:var(--surface3);border-radius:2px;margin-top:var(--s3);overflow:hidden}
.compliance-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:2px;transition:width 1.2s cubic-bezier(0.16,1,0.3,1)}

/* CHARTS */
.chart-row{display:flex;gap:var(--s4);margin-bottom:var(--s5)}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);overflow:hidden}
.chart-card.wide{flex:1;min-width:0}
.chart-card.narrow{width:280px;flex-shrink:0}
.chart-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.chart-title{font-size:var(--text-sm);font-weight:600;color:var(--text)}
.chart-sub{font-size:var(--text-xs);color:var(--text-soft);margin-top:2px}
.chart-wrap{position:relative;min-height:180px}
.donut-wrap{display:flex;align-items:center;justify-content:center;min-height:160px}
.chart-tabs{display:flex;gap:2px;background:var(--surface3);border-radius:var(--r-md);padding:2px}
.chart-tab{padding:3px 10px;font-size:var(--text-xs);color:var(--text-soft);border-radius:var(--r-sm);transition:all var(--transition)}
.chart-tab.active{background:var(--surface2);color:var(--gold)}
.donut-legend{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3);padding:0 var(--s2)}
.legend-item{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-xs)}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.legend-label{flex:1;color:var(--text-soft)}
.legend-val{color:var(--text);font-variant-numeric:tabular-nums}

/* TABLES */
.bottom-row{display:flex;gap:var(--s4)}
.table-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;min-width:0}
.table-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);flex-wrap:wrap}
.table-controls{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.data-table th{padding:var(--s2) var(--s4);text-align:left;font-size:0.6rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text-soft);white-space:nowrap}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--gold-faint)}
.sort-col{cursor:pointer;user-select:none}
.sort-col:hover{color:var(--text-soft)}
.sort-arrow{font-size:0.55rem;opacity:0.5}
.table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s5);border-top:1px solid var(--border);gap:var(--s4);flex-wrap:wrap}
.table-count{font-size:var(--text-xs);color:var(--text-faint)}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:0.6rem;font-weight:600;letter-spacing:0.04em}
.badge.green{background:var(--green-bg);color:var(--green)}
.badge.amber{background:var(--amber-bg);color:var(--amber)}
.badge.red{background:var(--red-bg);color:var(--red)}
.badge.neutral{background:var(--surface3);color:var(--text-faint)}

/* SIDE PANEL */
.side-panel{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--s4)}
.panel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4)}
.compliance-items{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
.comp-item{display:flex;align-items:center;justify-content:space-between}
.comp-left{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-xs);color:var(--text-soft)}
.comp-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.comp-dot.green{background:var(--green)}
.comp-dot.amber{background:var(--amber)}
.comp-dot.red{background:var(--red)}
.chain-items{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
.chain-item{display:flex;align-items:center;justify-content:space-between}
.chain-info{display:flex;align-items:center;gap:var(--s2)}
.chain-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.chain-dot.green{background:var(--green)}
.chain-dot.amber{background:var(--amber)}
.chain-name{font-size:var(--text-xs);color:var(--text-soft)}
.chain-stats{display:flex;align-items:center;gap:var(--s3)}
.chain-val{font-size:var(--text-xs);color:var(--text);font-variant-numeric:tabular-nums}
.chain-pct{font-size:0.6rem;color:var(--text-faint)}
.quick-actions{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.qa-btn{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-md);border:1px solid var(--border);font-size:var(--text-xs);color:var(--text-soft);transition:all var(--transition)}
.qa-btn:hover{border-color:var(--border-gold);color:var(--gold);background:var(--gold-faint)}
.qa-btn svg{width:13px;height:13px;flex-shrink:0}

/* PAGINATION */
.pagination{display:flex;gap:var(--s1)}
.page-btn{min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);border-radius:var(--r-sm);border:1px solid var(--border);color:var(--text-soft);transition:all var(--transition)}
.page-btn:hover{border-color:var(--border-gold);color:var(--gold)}
.page-btn.active{background:var(--gold);color:#0a0908;border-color:var(--gold)}

/* ASSET FILTERS */
.asset-filters{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.filter-group{display:flex;gap:var(--s2);flex-wrap:wrap}

/* STUB PAGES */
.stub-message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);min-height:320px;color:var(--text-soft);font-size:var(--text-sm)}

/* TOAST */
.toast-container{position:fixed;bottom:var(--s6);right:var(--s6);z-index:500;display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.toast{background:var(--surface2);border:1px solid var(--border-gold);border-radius:var(--r-md);padding:var(--s3) var(--s5);font-size:var(--text-xs);color:var(--text);box-shadow:0 4px 20px rgba(0,0,0,0.4);animation:toastIn 0.3s cubic-bezier(0.16,1,0.3,1) both;pointer-events:auto}
.toast.out{animation:toastOut 0.25s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px)}}

/* NOTIFICATIONS PANEL */
.notif-panel{position:fixed;top:var(--topbar-h);right:0;width:320px;background:var(--surface);border-left:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0 0 0 var(--r-lg);z-index:300;transform:translateY(-8px);opacity:0;pointer-events:none;transition:all var(--transition);max-height:calc(100dvh - var(--topbar-h));overflow-y:auto}
.notif-panel.open{transform:none;opacity:1;pointer-events:auto}
.notif-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);font-size:var(--text-sm);font-weight:600}
.notif-panel-header button svg{width:14px;height:14px}
.notif-list{display:flex;flex-direction:column}
.notif-item{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--border);transition:background var(--transition)}
.notif-item:hover{background:var(--gold-faint)}
.notif-item.unread{background:rgba(201,169,110,0.04)}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-top:4px}
.notif-dot.read{background:var(--surface3)}
.notif-title{font-size:var(--text-xs);color:var(--text);margin-bottom:2px}
.notif-time{font-size:0.6rem;color:var(--text-faint)}
.overlay{display:none;position:fixed;inset:0;z-index:250}
.overlay.show{display:block}

/* TOOLTIP */
.tooltip-wrap{position:relative}
.tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--surface3);color:var(--text);font-size:0.6rem;white-space:nowrap;padding:3px 8px;border-radius:var(--r-sm);border:1px solid var(--border);opacity:0;pointer-events:none;transition:opacity var(--transition);z-index:400}
.tooltip-wrap:hover .tooltip{opacity:1}

/* MARKETS PAGE */
.markets-last-update{font-size:var(--text-xs);color:var(--text-faint)}
.ticker-wrap{overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s2) 0;position:relative}
.ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;top:0;width:60px;height:100%;z-index:2;pointer-events:none}
.ticker-wrap::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.ticker-track{display:flex;gap:var(--s6);padding:0 var(--s4);animation:ticker 40s linear infinite;white-space:nowrap}
.ticker-track:hover{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-item{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--text-xs);flex-shrink:0}
.ticker-symbol{font-weight:600;color:var(--text)}
.ticker-price{color:var(--text-soft);font-variant-numeric:tabular-nums}
.ticker-change.up{color:var(--green)}
.ticker-change.down{color:var(--red)}
.ticker-loading{font-size:var(--text-xs);color:var(--text-faint);padding:0 var(--s4)}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gainer-item{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s3);border-bottom:1px solid var(--border);font-size:var(--text-xs)}
.gainer-item:last-child{border-bottom:none}
.gainer-left{display:flex;align-items:center;gap:var(--s2)}
.gainer-icon{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--surface3)}
.gainer-symbol{font-weight:600;color:var(--text)}
.gainer-name{color:var(--text-faint);font-size:0.6rem}
.gainer-pct{color:var(--green);font-weight:600}
.sparkline-cell svg{display:inline-block}

/* ============================================================
   AUTH MODAL
   ============================================================ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5,4,3,0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
  transition: opacity 0.3s ease;
}
.auth-overlay.hidden {
  opacity: 0; pointer-events: none;
}
.auth-modal {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  width: 100%; max-width: 420px;
  padding: var(--s8) var(--s8);
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1) both;
  max-height: 92dvh; overflow-y: auto;
}
@keyframes modalIn {
  from { opacity:0; transform: translateY(16px) scale(0.97); }
  to   { opacity:1; transform: none; }
}
.auth-logo {
  display: flex; align-items: center; gap: var(--s3);
  justify-content: center; margin-bottom: var(--s6);
}
.auth-logo-text {
  font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  font-weight: 300; font-size: 1.4rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.auth-notice {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: rgba(201,144,58,0.08);
  border: 1px solid rgba(201,144,58,0.25);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  font-size: var(--text-xs); color: var(--text-soft);
  margin-bottom: var(--s5); line-height: 1.6;
}
.auth-notice strong { color: var(--amber); }
.auth-notice-icon { width: 14px; height: 14px; color: var(--amber); flex-shrink: 0; margin-top: 1px; }
.auth-tabs {
  display: flex; gap: 2px;
  background: var(--surface3); border-radius: var(--r-md);
  padding: 3px; margin-bottom: var(--s5);
}
.auth-tab {
  flex: 1; padding: var(--s2) var(--s3);
  font-size: var(--text-xs); font-weight: 500;
  color: var(--text-soft); border-radius: var(--r-sm);
  transition: all var(--transition);
}
.auth-tab.active {
  background: var(--surface2); color: var(--gold);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.auth-form { display: flex; flex-direction: column; gap: var(--s4); }
.auth-field { display: flex; flex-direction: column; gap: var(--s1); }
.auth-label { font-size: var(--text-xs); color: var(--text-soft); font-weight: 500; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-icon {
  position: absolute; left: var(--s3);
  width: 14px; height: 14px; color: var(--text-faint); pointer-events: none;
}
.auth-input {
  width: 100%; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 14px + var(--s2));
  font-size: var(--text-sm); color: var(--text);
  transition: border-color var(--transition);
  outline: none;
}
.auth-input:focus { border-color: var(--border-gold); }
.auth-input::placeholder { color: var(--text-faint); }
.auth-select { appearance: none; cursor: pointer; }
.auth-pw-toggle {
  position: absolute; right: var(--s3);
  color: var(--text-faint); padding: var(--s1);
  border-radius: var(--r-sm); transition: color var(--transition);
}
.auth-pw-toggle:hover { color: var(--gold); }
.auth-pw-toggle svg { width: 14px; height: 14px; }
.auth-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--s3);
}
.auth-check-label {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--text-xs); color: var(--text-soft); cursor: pointer;
}
.auth-check-label input { accent-color: var(--gold); }
.auth-link {
  font-size: var(--text-xs); color: var(--gold);
  transition: color var(--transition); white-space: nowrap;
}
.auth-link:hover { color: var(--gold-hover); }
.auth-error {
  font-size: var(--text-xs); color: var(--red);
  min-height: 16px; display: none;
  background: var(--red-bg); padding: var(--s2) var(--s3);
  border-radius: var(--r-sm); border: 1px solid rgba(201,74,74,0.2);
}
.auth-error.show { display: block; }
.auth-submit {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--gold); color: #0a0908;
  font-weight: 600; font-size: var(--text-sm);
  padding: var(--s3); border-radius: var(--r-md);
  transition: background var(--transition);
  margin-top: var(--s2);
}
.auth-submit:hover { background: var(--gold-hover); }
.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(10,9,8,0.3); border-top-color: #0a0908;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.auth-invite-note {
  display: flex; align-items: flex-start; gap: var(--s2);
  background: var(--gold-faint); border: 1px solid var(--border-gold);
  border-radius: var(--r-md); padding: var(--s3);
  font-size: var(--text-xs); color: var(--text-soft); line-height: 1.6;
}
.auth-footer {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s2); margin-top: var(--s5);
  font-size: 0.65rem; color: var(--text-faint);
}
.auth-footer a { color: var(--text-faint); transition: color var(--transition); }
.auth-footer a:hover { color: var(--gold); }

/* AUTH STATE */
.nav-locked { opacity: 0.45; }
.nav-locked:hover { opacity: 0.65; background: none; }
.nav-locked.active { opacity: 1; }
.nav-lock-icon {
  width: 11px; height: 11px; margin-left: auto;
  color: var(--text-faint); flex-shrink: 0;
}
body.logged-in .nav-locked { opacity: 1; }
body.logged-in .nav-locked:hover { opacity: 1; background: var(--gold-faint); }
body.logged-in .nav-lock-icon { display: none; }

.sidebar-login-btn {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; background: var(--gold); color: #FFF;
  font-weight: 600; font-size: var(--text-xs);
  padding: var(--s2) var(--s4); border-radius: var(--r-md);
  transition: background var(--transition); margin-bottom: var(--s2);
}
.sidebar-login-btn:hover { background: var(--gold-hover); }
.sidebar-login-btn svg { width: 13px; height: 13px; }
.sidebar-logout-btn {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; color: var(--text-soft);
  font-size: var(--text-xs); padding: var(--s2) var(--s3);
  border-radius: var(--r-md); border: 1px solid var(--border);
  transition: all var(--transition); margin-top: var(--s2);
}
.sidebar-logout-btn:hover { border-color: var(--red); color: var(--red); }
.sidebar-logout-btn svg { width: 13px; height: 13px; }
.sidebar-beta-note {
  text-align: center; font-size: 0.6rem; color: var(--text-faint);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* PAGE GATE */
.page-gate {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s5);
  background: rgba(10,9,8,0.75); backdrop-filter: blur(10px);
  border-radius: var(--r-lg);
}
.page-gate-icon { width: 48px; height: 48px; color: var(--gold); opacity: 0.5; }
.page-gate-title { font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.page-gate-sub {
  font-size: var(--text-sm); color: var(--text-soft); text-align: center;
  max-width: 320px; line-height: 1.6;
}
.page-gate-actions { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }

/* MARKETS CTA BANNER */
.markets-cta-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(201,169,110,0.08), rgba(201,169,110,0.04));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg); padding: var(--s5) var(--s6);
  margin-top: var(--s5);
}
body.logged-in .markets-cta-banner { display: none !important; }
.cta-left { display: flex; align-items: flex-start; gap: var(--s4); }
.cta-icon { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.cta-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); margin-bottom: var(--s1); }
.cta-sub { font-size: var(--text-xs); color: var(--text-soft); line-height: 1.6; max-width: 420px; }
.cta-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ============================================================
   SIDEBAR COLLAPSED (desktop)
   ============================================================ */
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .nav-item > span:not(.nav-badge):not(.nav-dot),
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .sidebar-beta-note,
.sidebar.collapsed .sidebar-sla,
.sidebar.collapsed .user-info,
.sidebar.collapsed .sidebar-login-btn span,
.sidebar.collapsed .sidebar-logout-btn span { display: none !important; }
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-lock-icon { display: none !important; }
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: var(--s4) 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: var(--s3) 0; }
.sidebar.collapsed .nav-icon { margin: 0; }
.sidebar.collapsed .sidebar-login-btn,
.sidebar.collapsed .sidebar-logout-btn { justify-content: center; padding: var(--s3) 0; }
.sidebar.collapsed .user-avatar { margin: 0 auto; }

/* ============================================================
   MOBILE BACKDROP
   ============================================================ */
.mobile-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(5,4,3,0.7); backdrop-filter: blur(4px); z-index: 199;
}
.mobile-backdrop.show { display: block; }

/* ============================================================
   TABLET (768px – 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .sidebar { width: 60px; overflow: hidden; }
  .sidebar-logo-text,
  .nav-item > span:not(.nav-badge):not(.nav-dot),
  .nav-badge, .nav-lock-icon, .nav-group-label,
  .sidebar-footer .user-info,
  .sidebar-footer .sidebar-beta-note,
  .sidebar-footer .sidebar-sla,
  .sidebar-login-btn span,
  .sidebar-logout-btn span { display: none !important; }
  .sidebar-logo { justify-content: center; padding: var(--s4) 0; }
  .nav-item { justify-content: center; padding: var(--s3) 0; }
  .nav-icon { margin: 0 auto; }
  .sidebar-login-btn,
  .sidebar-logout-btn { justify-content: center; padding: var(--s3) 0; width: 100%; }
  .user-avatar { margin: 0 auto; }
  .main-wrap { margin-left: 60px; }
}

/* ============================================================
   MOBILE (max 767px)
   ============================================================ */
@media (max-width: 767px) {
  .sidebar {
    position: fixed; left: -280px; width: 260px;
    height: 100dvh; z-index: 200;
    transition: left 0.3s cubic-bezier(0.16,1,0.3,1);
    overflow-y: auto; overflow-x: hidden;
  }
  .sidebar.mobile-open { left: 0; }
  .sidebar.mobile-open .sidebar-logo-text,
  .sidebar.mobile-open .nav-item > span,
  .sidebar.mobile-open .nav-group-label,
  .sidebar.mobile-open .sidebar-beta-note,
  .sidebar.mobile-open .sidebar-sla,
  .sidebar.mobile-open .sidebar-login-btn span,
  .sidebar.mobile-open .sidebar-logout-btn span { display: inline !important; }
  .sidebar.mobile-open .user-info { display: flex !important; }
  .sidebar.mobile-open .nav-badge { display: inline !important; }
  .sidebar.mobile-open .nav-item { justify-content: flex-start; padding: var(--s3) var(--s4); }
  .sidebar.mobile-open .nav-icon { margin: 0; }
  .sidebar.mobile-open .sidebar-logo { justify-content: flex-start; }
  .sidebar.mobile-open .sidebar-login-btn,
  .sidebar.mobile-open .sidebar-logout-btn { justify-content: flex-start; padding: var(--s2) var(--s4); }
  .sidebar.mobile-open .user-avatar { margin: 0; }
  body.logged-in .sidebar.mobile-open .nav-lock-icon { display: none !important; }
  body:not(.logged-in) .sidebar.mobile-open .nav-locked .nav-lock-icon { display: inline !important; }
  .main-wrap { margin-left: 0 !important; }
  .topbar { padding: 0 var(--s3); gap: var(--s2); }
  .topbar-center { display: none; }
  .breadcrumb-root, .breadcrumb-sep { display: none; }
  .chain-pills { display: none; }
  .topbar-right { gap: var(--s2); }
  .kpi-grid,
  .kpi-grid[style*="repeat(4"],
  .kpi-grid[style*="repeat(3"] { grid-template-columns: repeat(2,1fr) !important; }
  .chart-row { flex-direction: column; }
  .chart-card.wide,
  .chart-card.narrow { width: 100% !important; min-width: unset !important; }
  .bottom-row { flex-direction: column; }
  .side-panel { width: 100%; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 600px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .page-actions { flex-wrap: wrap; width: 100%; }
  .content { padding: var(--s4); }
  .auth-modal { padding: var(--s5); margin: var(--s4); }
  .markets-cta-banner { flex-direction: column; align-items: flex-start; }
  .cta-actions { width: 100%; }
  .cta-actions button { flex: 1; }
  .ticker-wrap { font-size: 0.65rem; }
}

/* Very small screens */
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .topbar-right { gap: var(--s1); }
  .topbar-icon-btn { display: none; }
}

/* ============================================================
   LIGHT MODE (day)
   ============================================================ */
[data-theme="light"] {
  --bg:#f5f3ef;
  --surface:#ffffff;
  --surface2:#f0ede8;
  --surface3:#e8e4dd;
  --border:rgba(0,0,0,0.08);
  --border-gold:rgba(160,120,60,0.3);
  --text:#1a1814;
  --text-soft:#6b6560;
  --text-faint:#aaa69f;
  --gold:#a0783c;
  --gold-hover:#8a6530;
  --gold-faint:rgba(160,120,60,0.08);
  --gold-faint2:rgba(160,120,60,0.14);
  --green:#2d7a4f;
  --green-bg:rgba(45,122,79,0.1);
  --amber:#a06820;
  --amber-bg:rgba(160,104,32,0.1);
  --red:#a03030;
  --red-bg:rgba(160,48,48,0.1);
}
[data-theme="light"] .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.06); }
[data-theme="light"] .topbar { box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .kpi-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
[data-theme="light"] .auth-modal { box-shadow: 0 24px 64px rgba(0,0,0,0.15); }
[data-theme="light"] .auth-overlay { background: rgba(200,195,185,0.7); }
[data-theme="light"] .mobile-backdrop { background: rgba(180,175,165,0.6); }

/* THEME TOGGLE BUTTON */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  color: var(--text-soft);
  background: var(--surface2);
  transition: all var(--transition);
  flex-shrink: 0;
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--border-gold);
  color: var(--gold);
  background: var(--gold-faint);
}
.theme-toggle svg { width: 15px; height: 15px; }

/* Mobile sidebar theme toggle */
.sidebar-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs); color: var(--text-soft);
}
.sidebar-theme-label { display: flex; align-items: center; gap: var(--s2); }
.sidebar-theme-label svg { width: 13px; height: 13px; }

/* Collapsed sidebar — hide theme label */
.sidebar.collapsed .sidebar-theme-row { justify-content: center; }
.sidebar.collapsed .sidebar-theme-label { display: none; }

/* Tablet — hide label */
@media (max-width: 1023px) {
  .sidebar-theme-label { display: none !important; }
  .sidebar-theme-row { justify-content: center; padding: var(--s3) 0; }
}
/* Mobile open — show label */
@media (max-width: 767px) {
  .sidebar.mobile-open .sidebar-theme-label { display: flex !important; }
  .sidebar.mobile-open .sidebar-theme-row { justify-content: space-between; padding: var(--s3) var(--s5); }
}

}
.chain-pills {
        display: none;
    }
chain-pill.active {
    display: none;
  }