@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* Fugue Capital palette. --brass-note marks this block as restyled.
   Cool near-black ground, warm bone text -- the temperature opposition is what
   keeps it from reading as flat grey. Brass is the accent and is meant to stay
   scarce: rules, small marks, one button state. Slate carries structure. */
:root{
  --brass-note:1;
  --bg:#0B0D11; --bg2:#12151B; --card:#171B22; --border:#232830;
  --text:#E8E6E1; --sub:#8C9199; --accent:#C9A227; --accent2:#7A9CC6;
  --danger:#D9695C; --warn:#D9A441;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-theme="light"]{
  /* Bone paper rather than blue-white, so the warm text stays at home. Brass
     is darkened well past the dark-theme value -- the same hue at the same
     lightness would fail contrast on a pale ground. */
  --bg:#F4F2ED; --bg2:#FFFFFF; --card:#FFFFFF; --border:#DFDCD4;
  --text:#14171C; --sub:#5F646C; --accent:#8A6D14; --accent2:#3C5F8A;
  --danger:#B4463A; --warn:#8A5A00;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.55;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-0.02em;}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent);}
.navlinks{display:flex; gap:32px; font-size:14px; color:var(--sub);}
.navlinks a:hover{color:var(--text);}
.navcta{display:flex; align-items:center; gap:14px;}
.toggle{width:44px; height:26px; border-radius:20px; background:var(--card); border:1px solid var(--border); position:relative; cursor:pointer;}
.toggle .knob{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--accent); transition:transform .2s;}
html[data-theme="light"] .toggle .knob{transform:translateX(18px); background:var(--accent2);}
.btn{display:inline-block; padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; font-family:inherit;}
.btn-primary{background:var(--accent); color:#17140A;}
.btn-primary:hover{opacity:.88;}
.btn-ghost{border-color:var(--border); color:var(--text); background:transparent;}
.btn-ghost:hover{border-color:var(--sub);}
.btn-block{width:100%; text-align:center; display:block;}
.btn-sm{padding:7px 12px; font-size:12.5px;}
.badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:6px 12px; border-radius:20px;}
.badge.warn{color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent); border-color:color-mix(in srgb, var(--warn) 30%, transparent);}
.badge .live{width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3}}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px;}
.section-head{margin-bottom:20px;}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); margin-bottom:8px; display:block;}
h1,h2,h3{letter-spacing:-0.02em;}
.hint{color:var(--sub); font-size:12.5px; line-height:1.6;}
label{display:block; font-size:13px; color:var(--sub); margin-bottom:6px; font-weight:600;}
input,select{width:100%; background:var(--bg2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:11px 13px; font-size:14px; font-family:inherit;}
input:focus,select:focus{outline:none; border-color:var(--accent2);}
.field{margin-bottom:16px;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; color:var(--sub); font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--border);}
td{padding:9px 10px; border-bottom:1px solid var(--border);}
.up{color:var(--accent);} .down{color:var(--danger);}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px; flex-wrap:wrap;}
.tab{padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--sub); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tab.active{color:var(--text); border-color:var(--accent);}
.tabpanel{display:none;}
.tabpanel.active{display:block;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:860px){.grid2,.grid3,.grid4{grid-template-columns:1fr;}}
.metric{background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:16px;}
.metric .lbl{font-size:11px; color:var(--sub); text-transform:uppercase; letter-spacing:.05em;}
.metric .val{font-size:22px; font-weight:800; margin-top:6px;}
.metric .sub{font-size:11px; color:var(--sub); margin-top:4px;}
.disclaimer{background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px 20px; font-size:12.5px; color:var(--sub); line-height:1.7;}
.disclaimer strong{color:var(--text);}
.authwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;}
.authcard{width:100%; max-width:420px;}
.authcard h1{font-size:24px; margin-bottom:8px;}
.authcard p.sub{color:var(--sub); font-size:14px; margin-bottom:28px;}
.divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--sub); font-size:12px;}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--border);}
.oauthrow{display:flex; gap:10px; margin-bottom:20px;}
.exchangecard{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; margin-bottom:12px;}
.exchangecard .exname{display:flex; align-items:center; gap:12px; font-weight:600;}
.exchangecard .exicon{width:32px; height:32px; border-radius:8px; background:var(--card); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}
.exchangecard.connected{border-color:var(--accent);}
.footnote{font-size:11.5px; color:var(--sub); margin-top:6px;}
canvas{max-width:100%;}
.side-app{display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 65px);}
.sidenav{border-right:1px solid var(--border); padding:20px 14px;}
.sidenav a{display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--sub); margin-bottom:2px;}
.sidenav a:hover{background:var(--card); color:var(--text);}
.sidenav a.active{background:color-mix(in srgb, var(--accent2) 12%, transparent); color:var(--accent2); font-weight:600;}
.main-app{padding:26px 30px;}
.slider-row{display:flex; align-items:center; gap:10px;}
input[type=range]{accent-color:var(--accent);}
.small-note{font-size:11px; color:var(--sub); margin-top:8px;}
.heatcell{width:100%; height:44px; display:flex; align-items:center; justify-content:center; font-size:11px; font-family:var(--mono); border-radius:4px;}