/* ============================================================
   ALLOC — design system
   near-black · four steps of gray · one white accent
   Space Grotesk (display) · JetBrains Mono (data)
   ============================================================ */

:root{
  --bg:      #0b0b0b;
  --panel:   #101010;
  --panel2:  #161616;
  --line:    #222222;
  --line2:   #2e2e2e;
  --txt:     #f2f2f2;
  --dim:     #9a9a9a;
  --dim2:    #6d6d6d;
  --dim3:    #474747;
  --grad:    linear-gradient(90deg,#f2f2f2 0%,#8a8a8a 60%,#565656 100%);
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --disp:    "Space Grotesk", system-ui, sans-serif;
  --r:       4px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg); }
body{
  font-family:var(--mono); font-size:13px; line-height:1.55;
  color:var(--txt); background:var(--bg);
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:#f2f2f2; color:#0b0b0b; }
a{ color:inherit; text-decoration:none; }
input,button{ font-family:inherit; font-size:inherit; color:inherit; }
b{ font-weight:700; }
code{ background:var(--panel2); border:1px solid var(--line); padding:0 5px; border-radius:3px; font-size:12px; }
.num, .tk-price, .sum{ font-variant-numeric:tabular-nums; }

/* ---------- header ---------- */
#hdr{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:28px;
  padding:0 22px; height:54px;
  background:rgba(11,11,11,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.mark{ width:22px; height:22px; display:block; }
.wordmark{
  font-family:var(--disp); font-weight:600; letter-spacing:.22em; font-size:14px;
}
#nav{ display:flex; gap:20px; margin-left:8px; }
#nav a{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  padding:4px 0; border-bottom:1px solid transparent; transition:color .15s,border-color .15s;
}
#nav a:hover{ color:var(--txt); }
#nav a.active{ color:var(--txt); border-bottom-color:var(--txt); }
.hdr-right{ margin-left:auto; display:flex; gap:8px; align-items:center; }

.chip{
  background:transparent; border:1px solid var(--line2); border-radius:99px;
  color:var(--dim); padding:5px 12px; font-size:11px; cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.chip:hover{ color:var(--txt); border-color:var(--dim2); }
.chip-strong{ color:var(--txt); border-color:var(--dim2); }
.chip-strong.connected{ background:var(--panel2); }

/* ---------- layout ---------- */
#main{ flex:1; width:100%; max-width:1080px; margin:0 auto; padding:34px 22px 80px; }
.view{ display:none; }
.view.active{ display:block; animation:fadeIn .18s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ---------- hero ---------- */
.hero{ padding:38px 0 34px; }
.hero h1{
  font-family:var(--disp); font-weight:600; font-size:44px; letter-spacing:-.01em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{ margin-top:12px; max-width:560px; color:var(--dim); }
.numrow{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2);
}
.numrow i{ font-style:normal; color:var(--dim3); }
.page-head{ padding:12px 0 26px; }
.page-head h2{ font-family:var(--disp); font-weight:600; font-size:26px; }
.page-head .sub{ color:var(--dim); margin-top:6px; max-width:560px; }

/* ---------- cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:20px;
}
.card + .card{ margin-top:16px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.lbl{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim2);
  display:block;
}
.tr{ text-align:right; }
.tier{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line2); border-radius:99px; padding:3px 10px; }
.tier.holder{ color:var(--txt); border-color:var(--dim2); }

/* ---------- fields ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field.grow{ flex:1; }
.field.slim{ width:170px; }
input{
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 11px; outline:none; transition:border-color .15s;
}
input:focus{ border-color:var(--dim2); }
input::placeholder{ color:var(--dim3); }
input[type=number]::-webkit-inner-spin-button{ opacity:.3; }
.c-meta{ display:flex; gap:14px; margin-bottom:22px; }

/* ---------- composer legs ---------- */
.legs-head, .leg-row{
  display:grid; align-items:center; gap:12px;
  grid-template-columns: 1.4fr .8fr .55fr .7fr 1.6fr .9fr 26px;
}
.legs-head{ padding:0 2px 8px; border-bottom:1px solid var(--line); }
.leg-row{ padding:11px 2px; border-bottom:1px solid var(--line); }
.leg-row:hover{ background:var(--panel2); }
.leg-sym{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.leg-sym b{ font-size:13px; letter-spacing:.04em; }
.leg-sym small{ color:var(--dim3); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leg-price, .leg-est{ text-align:right; color:var(--dim); }
.leg-chg{ text-align:right; }
.chg-up{ color:var(--txt); }
.chg-dn{ color:var(--dim2); }
.leg-w input{
  width:100%; text-align:right; padding:6px 8px; background:var(--bg);
}
.wbar{ height:6px; background:var(--panel2); border-radius:3px; overflow:hidden; }
.wbar i{ display:block; height:100%; background:var(--grad); border-radius:3px;
  transition:width .25s ease; }
.leg-x{
  background:none; border:none; color:var(--dim3); cursor:pointer; font-size:15px;
  transition:color .15s; line-height:1;
}
.leg-x:hover{ color:var(--txt); }
.legs-empty{ padding:34px 0; text-align:center; color:var(--dim3); }

.legs-foot{ display:flex; align-items:center; margin-top:14px; gap:10px; }
.foot-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.sum{ font-size:12px; color:var(--dim2); border:1px solid var(--line2);
  border-radius:99px; padding:4px 12px; }
.sum.ok{ color:var(--txt); border-color:var(--dim2); }
.sum.over{ color:var(--txt); border-color:var(--txt); }

.c-actions{ display:flex; align-items:flex-end; gap:12px; margin-top:22px; }
.spacer{ flex:1; }
.hint{ margin-top:14px; color:var(--dim3); font-size:11px; }

/* ---------- buttons ---------- */
.btn{
  background:var(--txt); color:var(--bg); border:1px solid var(--txt);
  border-radius:var(--r); padding:9px 18px; cursor:pointer; font-weight:500;
  letter-spacing:.02em; transition:opacity .15s; display:inline-block; text-align:center;
}
.btn:hover{ opacity:.85; }
.btn:disabled{ opacity:.3; cursor:default; }
.btn-ghost{
  background:transparent; color:var(--txt); border:1px solid var(--line2);
  border-radius:var(--r); padding:9px 18px; cursor:pointer; transition:border-color .15s;
}
.btn-ghost:hover{ border-color:var(--dim2); }
.btn-ghost:disabled{ opacity:.3; cursor:default; }
.btn-mini{
  background:transparent; border:1px solid var(--line2); border-radius:var(--r);
  color:var(--dim); padding:4px 10px; font-size:11px; cursor:pointer; transition:all .15s;
}
.btn-mini:hover{ color:var(--txt); border-color:var(--dim2); }
.icon{
  background:none; border:none; color:var(--dim2); cursor:pointer; font-size:18px;
  line-height:1; padding:2px 6px; transition:color .15s;
}
.icon:hover{ color:var(--txt); }

/* ---------- basket page ---------- */
.b-pass{ padding:26px 22px; }
.b-top{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.b-name{ font-family:var(--disp); font-weight:600; font-size:30px; letter-spacing:.01em; }
.b-cur{ color:var(--dim2); font-size:12px; }
.b-stats{ display:flex; gap:34px; margin:22px 0 6px; flex-wrap:wrap; }
.b-stat .lbl{ margin-bottom:4px; }
.b-stat b{ font-size:19px; font-weight:500; }
.b-stat small{ color:var(--dim2); margin-left:5px; }
.spark-wrap{ margin:18px 0 4px; }
.spark-wrap canvas{ width:100%; height:56px; display:block; }
.spark-note{ color:var(--dim3); font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }

.b-legs{ margin-top:10px; }
.b-leg{
  display:grid; gap:12px; align-items:center; padding:10px 2px;
  grid-template-columns: 1.3fr .8fr .55fr .6fr 2fr;
  border-bottom:1px solid var(--line);
}
.b-leg:last-child{ border-bottom:none; }
.b-actions{ display:flex; gap:12px; margin-top:22px; align-items:flex-end; flex-wrap:wrap; }
.raw-toggle{ margin-top:18px; }
.rawbox{
  margin-top:10px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; font-size:11px; color:var(--dim);
  white-space:pre-wrap; word-break:break-all; display:none;
}
.rawbox.show{ display:block; }
.b-err{ text-align:center; padding:60px 0; color:var(--dim2); }

/* ---------- gallery ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.g-card{ cursor:pointer; transition:border-color .15s; }
.g-card:hover{ border-color:var(--dim2); }
.g-name{ font-family:var(--disp); font-weight:600; font-size:17px; letter-spacing:.02em; }
.g-sub{ color:var(--dim2); font-size:11px; margin-top:2px; }
.g-bars{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.g-bar{ display:grid; grid-template-columns:64px 1fr 44px; gap:10px; align-items:center; font-size:11px; }
.g-bar span:last-child{ text-align:right; color:var(--dim2); }
.g-open{ margin-top:16px; display:flex; justify-content:space-between; align-items:center; }
.g-open .lbl{ color:var(--dim3); }

/* ---------- my alloc ---------- */
.me-empty{ text-align:center; padding:70px 0; color:var(--dim2); }
.me-empty .btn{ margin-top:18px; }
.t-card{ cursor:pointer; transition:border-color .15s; }
.t-card:hover{ border-color:var(--dim2); }
.t-row{ display:flex; align-items:baseline; gap:12px; }
.t-row b{ font-family:var(--disp); font-size:16px; }
.t-row .spacer{ flex:1; }
.t-nav{ font-size:15px; }
.t-sub{ color:var(--dim2); font-size:11px; margin-top:4px; }

.d-head{ display:flex; align-items:center; gap:14px; margin-bottom:4px; }
.d-head h2{ font-family:var(--disp); font-weight:600; font-size:24px; }
.d-stats{ display:flex; gap:34px; margin:18px 0; flex-wrap:wrap; }
.drift-meter{ margin:8px 0 18px; }
.drift-meter .wbar{ height:8px; }
.pos-row{
  display:grid; gap:12px; align-items:center; padding:11px 2px;
  grid-template-columns: 1fr .9fr .9fr .7fr .7fr 1.4fr;
  border-bottom:1px solid var(--line); font-size:12px;
}
.pos-row .dimm{ color:var(--dim2); }
.dualbar{ position:relative; height:6px; background:var(--panel2); border-radius:3px; }
.dualbar .cur{ position:absolute; left:0; top:0; height:100%; background:var(--grad); border-radius:3px; }
.dualbar .tgt{ position:absolute; top:-3px; width:2px; height:12px; background:var(--dim); }
.receipts{ margin-top:8px; }
.r-row{ display:flex; gap:14px; padding:9px 2px; border-bottom:1px solid var(--line);
  font-size:11px; color:var(--dim); flex-wrap:wrap; }
.r-row a{ color:var(--txt); border-bottom:1px solid var(--line2); }
.detail-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }

/* ---------- manual ---------- */
.manual{ max-width:640px; }
.m-block{ padding:20px 0; border-bottom:1px solid var(--line); }
.m-block:last-child{ border-bottom:none; }
.m-block h3{ font-family:var(--disp); font-weight:600; font-size:15px; margin-bottom:8px; }
.m-block p{ color:var(--dim); }
.m-block em{ font-style:normal; color:var(--txt); }

/* ---------- modals ---------- */
.modal{
  position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start; justify-content:center;
  padding:9vh 18px 18px; background:rgba(0,0,0,.72); backdrop-filter:blur(4px);
}
.modal.hidden{ display:none; }
.modal-card{
  width:100%; max-width:440px; background:var(--panel); border:1px solid var(--line2);
  border-radius:6px; padding:20px; animation:fadeIn .15s ease;
  max-height:82vh; overflow-y:auto;
}
.modal-card.wide{ max-width:600px; }
.modal-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;
  font-family:var(--disp); font-weight:600; letter-spacing:.02em;
}
.modal-actions{ margin-top:18px; display:flex; gap:10px; justify-content:flex-end; }
.modal label.lbl{ margin:12px 0 6px; }
.modal input{ width:100%; }

.s-results{ margin-top:12px; display:flex; flex-direction:column; }
.s-row{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:10px 6px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s;
}
.s-row:hover{ background:var(--panel2); }
.s-row .s-sym b{ letter-spacing:.03em; }
.s-row .s-sym small{ display:block; color:var(--dim3); font-size:10px; }
.s-row .s-liq, .s-row .s-price{ color:var(--dim2); font-size:11px; text-align:right; }
.s-note{ padding:14px 4px; color:var(--dim3); font-size:11px; }

.linkbox{ display:flex; gap:8px; }
.linkbox input{ flex:1; font-size:11px; color:var(--dim); }

/* ---------- flow (fill / rebalance) ---------- */
.f-head{ font-family:var(--disp); font-weight:600; font-size:17px; margin-bottom:4px; }
.f-sub{ color:var(--dim2); font-size:11px; margin-bottom:16px; }
.f-row{
  display:grid; grid-template-columns:1fr .9fr .9fr .6fr 74px; gap:10px; align-items:center;
  padding:9px 2px; border-bottom:1px solid var(--line); font-size:12px;
}
.f-row .dimm{ color:var(--dim2); }
.f-row .tr{ text-align:right; }
.f-warn{ color:var(--txt); }
.f-warn::before{ content:"⚠ "; }
.f-status{ text-align:right; font-size:11px; color:var(--dim2); }
.f-status a{ border-bottom:1px solid var(--line2); }
.f-status.ok{ color:var(--txt); }
.f-status.bad{ color:var(--dim); text-decoration:line-through; }
.f-foot{ margin-top:14px; display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--dim2); }
.f-foot b{ color:var(--txt); font-weight:500; }
.f-total{ display:flex; justify-content:space-between; padding-top:10px; margin-top:6px;
  border-top:1px solid var(--line); font-size:13px; }
.f-actions{ margin-top:18px; display:flex; gap:10px; justify-content:flex-end; }
.f-done{ text-align:center; padding:26px 0 10px; }
.f-done .big{ font-family:var(--disp); font-size:20px; font-weight:600; }
.f-done p{ color:var(--dim2); margin-top:8px; font-size:12px; }

/* ---------- toasts ---------- */
#toasts{ position:fixed; bottom:22px; right:22px; z-index:80; display:flex; flex-direction:column; gap:8px; }
.toast{
  background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r);
  padding:10px 14px; font-size:12px; max-width:340px; animation:fadeIn .18s ease;
}
.toast.err{ border-color:var(--dim); }

/* ---------- footer ---------- */
#ftr{
  border-top:1px solid var(--line); padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
#ftr .numrow{ margin:0; }
.ftr-links{ display:flex; gap:18px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); }
.ftr-links a:hover{ color:var(--txt); }

/* ---------- statusbar / pulse ---------- */
#statusbar{
  position:sticky; top:54px; z-index:35;
  display:flex; align-items:center; gap:18px;
  height:34px; padding:0 22px;
  background:rgba(11,11,11,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  font-size:11px; color:var(--dim); overflow:hidden;
}
.sb-sol{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.sol-mark{ width:13px; height:11px; display:block; flex:none; }
#sbSolPrice{ font-weight:500; color:var(--txt); }
#sbSolChg.chg-up::before{ content:"▲"; margin-right:2px; font-size:9px; }
#sbSolChg.chg-dn::before{ content:"▼"; margin-right:2px; font-size:9px; }
.sb-chain{ color:var(--dim2); white-space:nowrap; }
.sb-chain b{ color:var(--dim); font-weight:500; }
.sb-movers{ margin-left:auto; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.sb-movers::-webkit-scrollbar{ display:none; }
.mv{
  background:none; border:1px solid var(--line); border-radius:99px; color:var(--dim);
  font:inherit; padding:3px 10px; cursor:pointer; white-space:nowrap; transition:all .15s;
}
.mv:hover{ color:var(--txt); border-color:var(--dim2); }
.mv b{ font-weight:500; }
.flash{ animation:flash .6s ease; }
@keyframes flash{ 0%{ color:#ffffff; text-shadow:0 0 8px rgba(255,255,255,.35); } 100%{ color:inherit; text-shadow:none; } }
.hero-best{ margin-top:14px; font-size:12px; color:var(--dim2); min-height:16px; }
.hero-best a{ color:var(--txt); border-bottom:1px solid var(--line2); }
.hero-best a:hover{ border-color:var(--txt); }

/* ---------- backtest ---------- */
.bt-wrap{ margin:18px 0 6px; }
.bt-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.bt-res{ font-size:13px; color:var(--txt); }
.bt-res.dim{ color:var(--dim2); }
.bt-wrap canvas{ width:100%; height:120px; display:block; }

/* ---------- responsive ---------- */
@media (max-width: 860px){
  #nav{ gap:14px; }
  .hero h1{ font-size:32px; }
  .legs-head{ display:none; }
  .leg-row{ grid-template-columns: 1.2fr .8fr .9fr 26px; grid-template-areas:
    "sym price w x" "bar bar bar bar"; row-gap:8px; }
  .leg-row .leg-sym{ grid-area:sym; } .leg-row .leg-price{ grid-area:price; }
  .leg-row .leg-chg, .leg-row .leg-est{ display:none; }
  .leg-row .leg-w{ grid-area:w; } .leg-row .wbar{ grid-area:bar; } .leg-row .leg-x{ grid-area:x; }
  .b-leg{ grid-template-columns: 1fr .8fr .6fr; }
  .b-leg .b-l-chg, .b-leg .b-l-bar{ display:none; }
  .pos-row{ grid-template-columns: 1fr .9fr .9fr; }
  .pos-row .pr-cur, .pos-row .pr-tgt, .pos-row .pr-bar{ display:none; }
  .f-row{ grid-template-columns:1fr .9fr 74px; }
  .f-row .f-impact, .f-row .f-min{ display:none; }
  .c-meta{ flex-direction:column; }
  .c-actions{ flex-wrap:wrap; }
}
@media (max-width: 860px){
  .sb-chain{ display:none; }
}
@media (max-width: 560px){
  #hdr{ gap:14px; padding:0 14px; }
  #statusbar{ padding:0 14px; }
  .wordmark{ display:none; }
  #main{ padding:22px 14px 60px; }
  #slipChip{ display:none; }
}