/* ---- Design tokens -------------------------------------------------- */
:root{
  --bg-void:      #0a0d0c;
  --bg-panel:     #101512;
  --bg-panel-2:   #141a16;
  --bg-raised:    #1a221d;
  --line:         #223027;
  --line-soft:    #182019;

  --ink-hi:       #eaf2ec;
  --ink-mid:      #93a89c;
  --ink-low:      #5b6d62;

  --signal-buy:   #4fd68c;
  --signal-buy-dim: #245638;
  --signal-sell:  #ef6a5b;
  --signal-sell-dim: #55261f;
  --amber:        #e0a940;

  /* Categorical chart series — fixed order, validated against --bg-panel
     (#141a16) with scripts/validate_palette.js (dataviz skill): all six
     checks pass (worst adjacent CVD 8.4, normal-vision 19.3, contrast >=3:1
     on all 8). Assigned to entities in first-seen order and never recycled —
     see colorForSymbol() in app.js. */
  --series-1: #3987e5; /* blue */
  --series-2: #d95926; /* orange */
  --series-3: #199e70; /* aqua */
  --series-4: #c98500; /* yellow */
  --series-5: #d55181; /* magenta */
  --series-6: #008300; /* green */
  --series-7: #9085e9; /* violet */
  --series-8: #e66767; /* red */

  --font-display: 'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 3px;
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background: var(--bg-void);
  color: var(--ink-hi);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}
h2,h3{ margin:0; font-family: var(--font-display); font-weight:600; letter-spacing:0.02em; }
p{ margin:0; }
button{ font-family: var(--font-display); cursor:pointer; }
input{ font-family: var(--font-mono); }
::selection{ background: var(--signal-buy-dim); color: var(--ink-hi); }

/* subtle scanline texture — signature element ties to "on-chain ledger" feel */
.scanline-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.012) 0px,
    rgba(255,255,255,0.012) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ---- Topbar ----------------------------------------------------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0d1210, #0a0d0c);
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand-mark{ color: var(--signal-buy); font-size:20px; }
.brand-name{ font-weight:700; font-size:18px; letter-spacing:0.12em; }
.brand-sub{ color: var(--ink-low); font-size:12px; letter-spacing:0.04em; font-family: var(--font-mono); }

.mode-cluster{ display:flex; align-items:center; gap:12px; }
.mode-pill{
  display:flex; align-items:center; gap:8px;
  padding: 6px 12px; border:1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em; color: var(--signal-buy);
  background: rgba(79,214,140,0.06);
}
.mode-dot{ width:6px; height:6px; border-radius:50%; background: var(--signal-buy); box-shadow: 0 0 8px var(--signal-buy); }

.ghost-btn{
  background:transparent; border:1px solid var(--line); color: var(--ink-mid);
  padding: 7px 14px; border-radius: var(--radius); font-size:11px; letter-spacing:0.08em;
  transition: all .15s ease;
}
.ghost-btn:hover{ border-color: var(--ink-mid); color: var(--ink-hi); }
.ghost-btn.small{ padding: 4px 10px; font-size:10px; }

/* ---- Layout ------------------------------------------------------------ */
.layout{
  display:grid;
  grid-template-columns: 300px 1fr 340px;
  gap:1px;
  background: var(--line);
  min-height: calc(100vh - 64px);
}
.panel{
  background: var(--bg-panel);
  padding: 20px;
  display:flex; flex-direction:column;
  min-height:0;
  overflow: hidden;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.panel-head h2{ font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-hi); }
.panel-count{
  font-family: var(--font-mono); font-size:11px; color: var(--ink-low);
  background: var(--bg-raised); padding:2px 8px; border-radius: 999px;
}

/* ---- Empty states -------------------------------------------------- */
.empty-state{
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 24px 16px; text-align:center; color: var(--ink-low);
  font-size:12.5px; line-height:1.6;
}
.empty-state.small{ padding:14px; font-size:11.5px; }
.empty-sub{ color: var(--ink-low); margin-top:4px; font-size:11.5px; }

/* ---- Wallets panel ---------------------------------------------------- */
.add-wallet-form{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
#tryDemoWalletBtn{ width:100%; margin-bottom:18px; }
.add-wallet-form input{
  background: var(--bg-panel-2); border:1px solid var(--line); color: var(--ink-hi);
  padding:9px 10px; border-radius: var(--radius); font-size:12.5px;
  outline:none; transition: border-color .15s;
}
.add-wallet-form input:focus{ border-color: var(--signal-buy); }
.primary-btn{
  background: var(--signal-buy); color: #06120b; border:none;
  padding:9px 10px; border-radius: var(--radius); font-weight:600; font-size:12.5px;
  letter-spacing:0.03em; transition: filter .15s;
}
.primary-btn:hover{ filter: brightness(1.1); }

.wallet-list{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.wallet-card{
  border:1px solid var(--line); border-radius: var(--radius); padding:12px;
  background: var(--bg-panel-2); cursor:pointer; transition: border-color .15s, background .15s;
}
.wallet-card:hover{ border-color: var(--ink-low); background: var(--bg-raised); }
.wallet-card.disabled{ opacity:0.45; }
.wallet-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.wallet-card-label{ font-weight:600; font-size:13px; }
.wallet-card-badge{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.05em;
  padding:2px 6px; border-radius:3px; background: var(--bg-raised); color: var(--ink-low);
}
.wallet-card-badge.on{ color: var(--signal-buy); background: var(--signal-buy-dim); }
.wallet-card-addr{ font-family: var(--font-mono); font-size:10.5px; color: var(--ink-low); }
.wallet-card-cfg{ font-family: var(--font-mono); font-size:10px; color: var(--ink-mid); margin-top:6px; }
.wallet-card-stats{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft);
  font-family: var(--font-mono); font-size:10.5px; color: var(--ink-low);
}
.wallet-pnl.positive{ color: var(--signal-buy); }
.wallet-pnl.negative{ color: var(--signal-sell); }

/* mini toggle switch used on the wallet card itself, for quick on/off
   without opening the drawer */
.mini-switch{ position:relative; display:inline-flex; cursor:pointer; }
.mini-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.mini-switch-track{
  width:30px; height:17px; background: var(--bg-raised); border:1px solid var(--line); border-radius:999px;
  position:relative; display:block; transition: background .15s;
}
.mini-switch-thumb{
  position:absolute; top:1px; left:1px; width:13px; height:13px; border-radius:50%;
  background: var(--ink-mid); transition: transform .15s, background .15s;
}
.mini-switch input:checked + .mini-switch-track{ background: var(--signal-buy-dim); border-color: var(--signal-buy); }
.mini-switch input:checked + .mini-switch-track .mini-switch-thumb{ transform: translateX(13px); background: var(--signal-buy); }

/* ---- Feed panel ---------------------------------------------------- */
.feed-status{
  display:flex; align-items:center; gap:6px; font-family: var(--font-mono);
  font-size:10.5px; letter-spacing:0.06em; color: var(--ink-low); text-transform:uppercase;
}
.pulse-dot{
  width:6px; height:6px; border-radius:50%; background: var(--signal-buy);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(79,214,140,0.5);} 50%{ opacity:.5; box-shadow:0 0 0 4px rgba(79,214,140,0);} }

.feed-scroll{ overflow-y:auto; display:flex; flex-direction:column-reverse; gap:8px; padding-right:4px; }

.feed-row{
  display:grid; grid-template-columns: 70px 1fr auto; gap:12px; align-items:center;
  border:1px solid var(--line); border-left-width:3px; border-radius: var(--radius);
  padding:10px 12px; background: var(--bg-panel-2);
  animation: rowIn .25s ease;
}
@keyframes rowIn{ from{ opacity:0; transform: translateY(-4px);} to{ opacity:1; transform:none; } }
.feed-row.buy{ border-left-color: var(--signal-buy); }
.feed-row.sell{ border-left-color: var(--signal-sell); }

.feed-side{
  font-family: var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.05em;
  padding:3px 0; text-align:center; border-radius:3px;
}
.feed-row.buy .feed-side{ color: var(--signal-buy); background: var(--signal-buy-dim); }
.feed-row.sell .feed-side{ color: var(--signal-sell); background: var(--signal-sell-dim); }

.feed-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.feed-headline{ font-size:12.5px; }
.feed-headline b{ color: var(--ink-hi); }
.feed-sub{ font-family: var(--font-mono); font-size:10.5px; color: var(--ink-low); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.feed-copy-tag{
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.04em; text-align:right;
  color: var(--amber);
}
.feed-copy-tag.skipped{ color: var(--ink-low); }
.feed-time{ font-size:9.5px; color: var(--ink-low); display:block; margin-top:2px; }

/* ---- Portfolio panel ---------------------------------------------------- */
.panel-portfolio{ overflow-y:auto; }
.balance-block{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.balance-main{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.balance-label{ font-size:11px; color: var(--ink-low); letter-spacing:0.05em; text-transform:uppercase; }
.balance-value{ font-family: var(--font-mono); font-size:30px; font-weight:700; letter-spacing:-0.01em; }
.balance-delta{ font-family: var(--font-mono); font-size:12px; }
.balance-delta.positive{ color: var(--signal-buy); }
.balance-delta.negative{ color: var(--signal-sell); }

.balance-split{ display:flex; gap:24px; flex-wrap:wrap; row-gap:12px; }
.balance-split > div{ display:flex; flex-direction:column; gap:2px; }
.split-label{ font-size:10px; color: var(--ink-low); text-transform:uppercase; letter-spacing:0.05em; }
.split-value{ font-family: var(--font-mono); font-size:14px; }
.split-value.positive{ color: var(--signal-buy); }
.split-value.negative{ color: var(--signal-sell); }

.config-block{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.config-block h3, .positions-block h3, .history-block h3{
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-mid);
  margin-bottom:10px; font-weight:600;
}
.hint{ font-weight:400; text-transform:none; letter-spacing:0; color: var(--ink-low); display:block; font-size:10.5px; margin-top:2px;}

.sizing-mode-toggle{ display:flex; gap:6px; margin-bottom:10px; }
.mode-btn{
  flex:1; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--ink-mid);
  padding:8px 6px; border-radius: var(--radius); font-size:11px; transition: all .15s;
}
.mode-btn.active{ background: var(--signal-buy-dim); border-color: var(--signal-buy); color: var(--signal-buy); }

.pct-row{ display:flex; align-items:center; gap:12px; }
.pct-row input[type="range"]{
  flex:1; -webkit-appearance:none; height:4px; background: var(--line); border-radius:2px; outline:none;
}
.pct-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background: var(--signal-buy); cursor:pointer; box-shadow: 0 0 0 3px rgba(79,214,140,0.15);
}
.pct-readout{ font-family: var(--font-mono); font-size:13px; min-width:42px; text-align:right; color: var(--ink-hi); }

.positions-block{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.positions-list, .history-list{ display:flex; flex-direction:column; gap:6px; }

.position-row, .history-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border:1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-panel-2); font-size:11.5px;
}
.position-row-l{ display:flex; flex-direction:column; }
.position-sym{ font-weight:600; }
.position-qty{ font-family: var(--font-mono); font-size:10px; color: var(--ink-low); }
.position-val{ font-family: var(--font-mono); font-size:12px; }

.history-row{ flex-direction:column; align-items:stretch; gap:3px; }
.history-row-top{ display:flex; justify-content:space-between; }
.history-side{ font-weight:700; font-size:10.5px; letter-spacing:0.03em; }
.history-row.buy .history-side{ color: var(--signal-buy); }
.history-row.sell .history-side{ color: var(--signal-sell); }
.history-usd{ font-family: var(--font-mono); }
.history-meta{ font-family: var(--font-mono); font-size:10px; color: var(--ink-low); }

/* ---- Drawer ---------------------------------------------------- */
.drawer-backdrop{
  position:fixed; inset:0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  opacity:0; pointer-events:none; transition: opacity .2s; z-index:100;
}
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:360px;
  background: var(--bg-panel); border-left:1px solid var(--line);
  padding:24px; transform: translateX(100%); transition: transform .25s ease; z-index:101;
  display:flex; flex-direction:column; gap:16px; overflow-y:auto;
}
.drawer.open{ transform: none; }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; }
.drawer-address{ font-family: var(--font-mono); font-size:11px; color: var(--ink-low); word-break:break-all; margin-top:-8px; }
.icon-btn{ background:none; border:none; color: var(--ink-mid); font-size:16px; }

.switch-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; cursor:pointer; position:relative; }
.switch-row input{ position:absolute; opacity:0; }
.switch-track{
  width:36px; height:20px; background: var(--bg-raised); border:1px solid var(--line); border-radius:999px;
  position:relative; transition: background .15s;
}
.switch-thumb{
  position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background: var(--ink-mid); transition: transform .15s, background .15s;
}
.switch-row input:checked + .switch-track{ background: var(--signal-buy-dim); border-color: var(--signal-buy); }
.switch-row input:checked + .switch-track .switch-thumb{ transform: translateX(16px); background: var(--signal-buy); }

.drawer-override-config{ display:flex; flex-direction:column; gap:10px; padding:12px; background: var(--bg-panel-2); border-radius: var(--radius); border:1px solid var(--line); }
.drawer-override-config.hidden{ display:none; }

.drawer-stats{
  display:grid; grid-template-columns: 1fr 1fr; gap:1px;
  background: var(--line); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden;
}
.drawer-stat{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; background: var(--bg-panel-2);
}
.drawer-stat.total{ grid-column: 1 / -1; background: var(--bg-raised); }
.drawer-stat-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-low); }
.drawer-stat-value{ font-family: var(--font-mono); font-size:14px; }
.drawer-stat-value.positive{ color: var(--signal-buy); }
.drawer-stat-value.negative{ color: var(--signal-sell); }

.drawer-section-label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-mid);
  font-weight:600; margin:0 0 -8px;
}
.drawer-section-note{ font-size:10.5px; color: var(--ink-low); margin:0 0 -6px; }

.danger-btn{
  margin-top:auto; background:transparent; border:1px solid var(--signal-sell-dim); color: var(--signal-sell);
  padding:10px; border-radius: var(--radius); font-size:12.5px; transition: background .15s;
}
.danger-btn:hover{ background: var(--signal-sell-dim); }

/* ---- Charts (dataviz) ---------------------------------------------------- */
.chart-block{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.chart-block h3{
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-mid);
  margin-bottom:10px; font-weight:600;
}
.chart-wrap{ position:relative; }
.chart-empty{ font-size:11px; color: var(--ink-low); padding:10px 0; }

.chart-grid{ stroke: var(--line-soft); stroke-width:1; shape-rendering:crispEdges; }
.chart-axis-label{ font-family: var(--font-mono); font-size:7.5px; fill: var(--ink-low); }
.chart-line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart-area{ opacity:0.14; }
.chart-hit{ fill:transparent; }
.chart-hit:hover{ cursor:crosshair; }
.chart-crosshair{ stroke: var(--ink-low); stroke-width:1; opacity:0; pointer-events:none; }

.chart-tooltip{
  position:absolute; top:2px; transform:translateX(-50%);
  background: var(--bg-raised); border:1px solid var(--line); color: var(--ink-hi);
  padding:4px 8px; border-radius: var(--radius); font-family: var(--font-mono); font-size:10.5px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .1s ease; z-index:5;
}

/* positions-by-value composition bar (part-to-whole, horizontal, categorical) */
.comp-bar{
  display:flex; gap:2px; height:22px; border-radius: var(--radius); overflow:hidden;
  background: var(--bg-panel-2);
}
.comp-bar-seg{ min-width:2px; transition: filter .1s; }
.comp-bar-seg:hover{ filter: brightness(1.2); cursor:pointer; }
.comp-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; }
.comp-legend-item{
  display:flex; align-items:center; gap:5px;
  font-family: var(--font-mono); font-size:10px; color: var(--ink-mid);
}
.comp-swatch{ width:8px; height:8px; border-radius:2px; flex:none; }

/* per-wallet diverging P&L bars */
.pnl-bar-label{ font-family: var(--font-display); font-size:10px; fill: var(--ink-mid); }
.pnl-bar-value{ font-family: var(--font-mono); font-size:9.5px; }
.pnl-baseline{ stroke: var(--line); stroke-width:1; }

/* ---- Toast ---------------------------------------------------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-raised); border:1px solid var(--line); color: var(--ink-hi);
  padding:10px 18px; border-radius: var(--radius); font-size:12.5px; opacity:0;
  transition: all .25s ease; pointer-events:none; z-index:200; font-family: var(--font-mono);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ---- Scrollbars ---------------------------------------------------- */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:3px; }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1100px){
  .layout{ grid-template-columns: 1fr; }
  .panel{ min-height:auto; }
  .feed-scroll{ max-height: 400px; }
}