/* ============================================================
   FACET — App shell
   ============================================================ */
:root{ --rail:250px; --topbar:62px }

body.app{ background:var(--bg) }

/* ---------------- Left rail ---------------- */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:70;
  background:var(--paper); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:14px 12px;
  transition: transform .38s var(--e-out);
}
.rail-top{ display:flex; align-items:center; gap:9px; padding:6px 8px 16px }
.rail-top .logo{ font-size:1.0625rem }
.rail-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; margin-inline:-4px; padding-inline:4px }
.rail-scroll::-webkit-scrollbar{ width:6px }
.rail-scroll::-webkit-scrollbar-thumb{ border:2px solid var(--paper) }

.nav-group{ margin-bottom:18px }
.nav-group h6{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4); padding:0 10px; margin-bottom:7px;
}
.nav-item{
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 11px; border-radius:var(--r-md); margin-bottom:2px;
  font-size:.9062rem; font-weight:450; color:var(--ink-2); text-align:left;
  transition: background-color var(--t), color var(--t), transform var(--t) var(--e-out);
}
.nav-item:hover{ background:var(--sunk); color:var(--ink) }
.nav-item[aria-current="page"]{ background:var(--brand-wash); color:var(--brand-ink); font-weight:500 }
.nav-item[aria-current="page"]::before{
  content:""; position:absolute; left:-12px; top:50%; width:3px; height:20px; border-radius:0 3px 3px 0;
  background:var(--brand); transform:translateY(-50%) scaleY(0);
  animation: rail-mark .4s var(--e-spring) forwards;
}
@keyframes rail-mark{ to{ transform:translateY(-50%) scaleY(1) } }
.nav-item .ni{ width:19px;height:19px;flex:none;opacity:.85 }
.nav-item .nk{
  margin-left:auto; font-family:var(--mono); font-size:.625rem; color:var(--ink-4);
  background:var(--sunk); padding:2px 6px; border-radius:5px;
}
.nav-item[aria-current="page"] .nk{ background:color-mix(in srgb,var(--brand) 16%, transparent); color:var(--brand-ink) }
.nav-item .badge{ margin-left:auto; font-size:.6875rem; font-weight:600; color:var(--pos) }

.rail-foot{ padding:12px 8px 4px; border-top:1px solid var(--line); margin-top:8px }
.rail-chain{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-md);
  background:var(--bg); font-size:.8125rem; color:var(--ink-3);
}

/* ---------------- Topbar ---------------- */
.topbar{
  position:fixed; top:0; left:var(--rail); right:0; height:var(--topbar); z-index:60;
  display:flex; align-items:center; gap:12px; padding:0 clamp(14px,2vw,26px);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.tb-search{
  display:flex; align-items:center; gap:9px; height:36px; padding:0 13px; min-width:0;
  border-radius:var(--r-pill); background:var(--paper); color:var(--ink-4);
  box-shadow: inset 0 0 0 1px var(--line); font-size:.875rem; max-width:300px; flex:1;
  transition: box-shadow var(--t), color var(--t);
}
.tb-search:hover{ box-shadow: inset 0 0 0 1px var(--line-strong); color:var(--ink-3) }
.tb-search svg{ width:15px;height:15px;flex:none }
.tb-search kbd{
  margin-left:auto; font-family:var(--mono); font-size:.625rem; padding:2px 6px;
  border-radius:5px; background:var(--sunk); color:var(--ink-4);
}
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:8px }
.tb-clock{ font-family:var(--mono); font-size:.6875rem; color:var(--ink-4); letter-spacing:.02em }

.wallet-btn{ gap:9px }
.wallet-btn .addr{ font-family:var(--mono); font-size:.8125rem }
.wallet-avatar{ width:20px;height:20px;border-radius:99px;flex:none; background:var(--spectrum); background-size:300% 100% }

/* ---------------- Main ---------------- */
.appmain{ margin-left:var(--rail); padding-top:var(--topbar); min-height:100vh }
.view{ padding:clamp(20px,3vw,38px) clamp(14px,2.4vw,34px) 90px; max-width:1420px }
.view-head{ margin-bottom:clamp(18px,2.4vw,30px) }
.view-head .eyebrow{ display:block; margin-bottom:9px }
.view-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap }
.view-title h1{ font-size:clamp(1.75rem,3.4vw,2.6rem); font-weight:600; letter-spacing:-.042em; line-height:1.05 }
.view-head p.lede{ margin-top:10px; max-width:66ch; font-size:.9375rem }

/* View transition */
.view{ animation: view-in .5s var(--e-out) both }
@keyframes view-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.view [data-seq]{ animation: seq-in .55s var(--e-out) both; animation-delay: calc(var(--s,0) * 55ms + 60ms) }
@keyframes seq-in{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

/* ---------------- Mobile ---------------- */
.rail-scrim{ display:none }
@media (max-width:1024px){
  :root{ --rail:0px }
  .rail{ width:260px; transform:translateX(-100%); box-shadow:var(--sh-4) }
  .rail.open{ transform:none }
  .rail-scrim{ display:block; position:fixed; inset:0; z-index:69; background:rgba(12,12,20,.4);
    backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s }
  .rail-scrim.on{ opacity:1; pointer-events:auto }
  .topbar{ left:0 }
  .appmain{ margin-left:0; padding-bottom:64px }
  .tb-menu{ display:inline-flex !important }
}
.tb-menu{ display:none }

/* Bottom tab bar (mobile) */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:65; display:none;
  background:color-mix(in srgb,var(--paper) 90%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
@media (max-width:1024px){ .tabbar{ display:flex } }
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
  font-size:.625rem; color:var(--ink-4); border-radius:var(--r-sm);
  transition:color var(--t), background-color var(--t);
}
.tabbar a svg{ width:20px;height:20px }
.tabbar a[aria-current="page"]{ color:var(--brand) }

/* ---------------- Shared app blocks ---------------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:clamp(10px,1.2vw,14px); margin-bottom:clamp(16px,2vw,24px) }
.kpi{ padding:17px 19px; border-radius:var(--r-lg); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); position:relative; overflow:hidden }
.kpi::after{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--c,var(--brand)); opacity:.75 }
.kpi-l{ display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--ink-4); margin-bottom:7px }
.kpi-k{ font-size:clamp(1.3rem,2.2vw,1.75rem); font-weight:600; letter-spacing:-.038em; line-height:1.1; font-variant-numeric:tabular-nums }
.kpi-s{ font-size:.75rem; color:var(--ink-4); margin-top:5px }

.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px }
.toolbar .field{ flex:1; min-width:180px; max-width:320px; height:40px }
.toolbar .field svg{ width:15px;height:15px;color:var(--ink-4);flex:none }

.empty{
  display:grid; place-items:center; gap:14px; padding:clamp(34px,6vw,70px) 20px; text-align:center;
  border-radius:var(--r-xl); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
.empty-ico{ width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--sunk);color:var(--ink-4) }
.empty-ico svg{ width:24px;height:24px }
.empty h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-.026em }
.empty p{ font-size:.875rem; color:var(--ink-3); max-width:44ch }

/* Data table */
.tbl-wrap{ overflow-x:auto; border-radius:var(--r-lg); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1) }
table.tbl{ min-width:620px }
.tbl th{
  text-align:left; padding:12px 16px; font-size:.6875rem; font-weight:500; color:var(--ink-4);
  text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--line); white-space:nowrap;
  font-family:var(--mono);
}
.tbl td{ padding:13px 16px; font-size:.875rem; border-bottom:1px solid var(--line); vertical-align:middle }
.tbl tbody tr:last-child td{ border-bottom:0 }
.tbl tbody tr{ transition:background-color var(--t) }
.tbl tbody tr:hover{ background:var(--bg) }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums }
.tbl .cell-asset{ display:flex; align-items:center; gap:10px }
.tbl .cell-asset .mark{ border-radius:9px; flex:none }
.tbl .cell-asset b{ font-weight:600; letter-spacing:-.02em; display:block; line-height:1.25 }
.tbl .cell-asset span{ font-size:.6875rem; color:var(--ink-4) }

/* ---------------- Pools ---------------- */
.pool-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:clamp(11px,1.3vw,15px) }
.pool{ padding:18px 19px; border-radius:var(--r-lg); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out); position:relative }
.pool:hover{ transform:translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-3) }
.pool-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px }
.pool-top .mark{ border-radius:12px; flex:none }
.pool-nm{ flex:1; min-width:0 }
.pool-nm b{ display:block; font-size:.9375rem; font-weight:600; letter-spacing:-.024em }
.pool-nm span{ font-size:.75rem; color:var(--ink-4) }
.pool-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; margin-bottom:15px }
.pool-kpis div span{ display:flex; align-items:center; gap:5px; font-size:.6875rem; color:var(--ink-4); margin-bottom:3px }
.pool-kpis div b{ font-size:1rem; font-weight:600; letter-spacing:-.026em; font-variant-numeric:tabular-nums }
.pool-spark{ height:40px; margin-bottom:14px; color:var(--brand) }
.pool-actions{ display:flex; gap:8px }
.pool-actions .btn{ flex:1 }
.pool-mine{ box-shadow: inset 0 0 0 1.5px var(--brand), var(--sh-2) }
.pool-tag{ position:absolute; top:14px; right:16px }

/* Details disclosure */
.disc{ margin-top:13px; border-top:1px solid var(--line); padding-top:11px }
.disc summary{ list-style:none; cursor:pointer; font-size:.8125rem; color:var(--ink-3); display:flex; align-items:center; gap:6px }
.disc summary::-webkit-details-marker{ display:none }
.disc summary svg{ width:13px;height:13px; transition:transform .3s var(--e-out) }
.disc[open] summary svg{ transform:rotate(90deg) }
.disc-body{ display:grid; gap:7px; padding-top:11px; animation: seq-in .35s var(--e-out) both }
.disc-row{ display:flex; justify-content:space-between; gap:12px; font-size:.8125rem }
.disc-row span{ color:var(--ink-4) } .disc-row b{ font-weight:500; font-variant-numeric:tabular-nums }

/* ---------------- Swap / trade panels ---------------- */
.trade-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:clamp(14px,2vw,24px); align-items:start }
@media (max-width:980px){ .trade-wrap{ grid-template-columns:1fr } }
.tcard{ padding:clamp(16px,2vw,22px); border-radius:var(--r-xl); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2) }
.tcard-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px }
.tcard-head h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-.026em }

.leg{
  padding:14px 15px; border-radius:var(--r-md); background:var(--bg);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t) var(--e-out);
}
.leg:focus-within{ box-shadow: inset 0 0 0 1.5px var(--brand) }
.leg-top{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-4); margin-bottom:8px }
.leg-top button{ color:var(--brand); font-weight:500; font-size:.75rem }
.leg-main{ display:flex; align-items:center; gap:12px }
.leg-main input{
  flex:1; min-width:0; font-size:1.625rem; font-weight:600; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; background:none;
}
.leg-main input::placeholder{ color:var(--ink-4) }
.leg-main input::-webkit-outer-spin-button,.leg-main input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 }
.tokpill{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 13px 0 8px; flex:none;
  border-radius:var(--r-pill); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  font-size:.875rem; font-weight:600; letter-spacing:-.02em;
}
.tokpill .mark{ border-radius:99px }
.leg-sub{ font-size:.75rem; color:var(--ink-4); margin-top:7px }

.flip{
  display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-pill);
  background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  margin:-12px auto; position:relative; z-index:2; color:var(--ink-2);
  transition: transform .45s var(--e-spring), box-shadow var(--t);
}
.flip:hover{ box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-2) }
.flip.spin{ transform:rotate(180deg) }
.flip svg{ width:17px;height:17px }

.quote{ margin-top:14px; display:grid; gap:9px; padding:13px 14px; border-radius:var(--r-md); background:var(--bg) }
.quote-row{ display:flex; justify-content:space-between; gap:14px; font-size:.8125rem }
.quote-row > span{ color:var(--ink-4); display:flex; align-items:center; gap:5px }
.quote-row > b{ font-weight:500; font-variant-numeric:tabular-nums }

.pctrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px }
.pctrow button{
  height:32px; border-radius:var(--r-sm); background:var(--bg); font-size:.8125rem; font-weight:500; color:var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line); transition: all var(--t) var(--e-out);
}
.pctrow button:hover{ background:var(--brand-wash); color:var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand) }

/* ---------------- Wallet ---------------- */
.port{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(16px,3vw,44px); align-items:center;
  padding:clamp(20px,3vw,32px); border-radius:var(--r-xl); background:var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); margin-bottom:18px; overflow:hidden; position:relative }
@media (max-width:760px){ .port{ grid-template-columns:1fr } }
.port::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--spectrum); background-size:100% 300%;
  writing-mode:vertical-lr }
.port-k{ font-size:clamp(2rem,4.6vw,3.2rem); font-weight:600; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums }
.port-legend{ display:grid; gap:9px; margin-top:18px }
.pl{ display:flex; align-items:center; gap:10px; font-size:.8125rem }
.pl i{ width:9px;height:9px;border-radius:3px;flex:none }
.pl span{ color:var(--ink-3) } .pl b{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600 }

/* ---------------- Docs ---------------- */
.docs{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:start }
@media (max-width:900px){ .docs{ grid-template-columns:1fr } }
.docs-toc{ position:sticky; top:calc(var(--topbar) + 20px) }
@media (max-width:900px){ .docs-toc{ position:static } }
.docs-toc h6{ font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-bottom:10px; padding-left:11px }
.toc-item{
  display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border-radius:var(--r-md);
  font-size:.875rem; color:var(--ink-3); text-align:left; margin-bottom:2px;
  transition: background-color var(--t), color var(--t);
}
.toc-item:hover{ background:var(--sunk); color:var(--ink) }
.toc-item[aria-current="true"]{ background:var(--paper); color:var(--ink); font-weight:500; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1) }
.toc-item i{ font-family:var(--mono); font-style:normal; font-size:.6875rem; color:var(--ink-4) }
.toc-item[aria-current="true"] i{ color:var(--brand) }

.doc-body{ max-width:74ch }
.doc-body .eyebrow{ display:block; margin-bottom:12px }
.doc-body h2{ font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:600; letter-spacing:-.04em; line-height:1.08; margin-bottom:16px }
.doc-body h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-.026em; margin:26px 0 8px }
.doc-body p{ color:var(--ink-2); line-height:1.72; margin-bottom:14px; font-size:.9375rem }
.doc-body ul{ margin:0 0 16px; display:grid; gap:9px }
.doc-body li{ position:relative; padding-left:20px; color:var(--ink-2); font-size:.9375rem; line-height:1.66 }
.doc-body li::before{ content:""; position:absolute; left:4px; top:10px; width:6px;height:6px;border-radius:99px;background:var(--brand) }
.doc-body code{ font-family:var(--mono); font-size:.86em; background:var(--sunk); padding:2px 6px; border-radius:5px }
.doc-body strong{ font-weight:600; color:var(--ink) }
.doc-flow{
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,3vw,34px); flex-wrap:wrap;
  padding:clamp(18px,3vw,30px); border-radius:var(--r-xl); background:var(--paper);
  box-shadow: inset 0 0 0 1px var(--line); margin:22px 0;
}
.doc-flow .fx{ text-align:center }
.doc-flow .fx b{ display:block; font-size:clamp(1.25rem,2.6vw,1.9rem); font-weight:600; letter-spacing:-.04em }
.doc-flow .fx span{ font-size:.75rem; color:var(--ink-4) }
.doc-flow .fa{ color:var(--ink-4) } .doc-flow .fa svg{ width:20px;height:20px }
.callout{
  display:flex; gap:13px; padding:15px 17px; border-radius:var(--r-lg); margin:18px 0;
  background:var(--brand-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%, transparent);
}
.callout svg{ width:19px;height:19px;flex:none;color:var(--brand);margin-top:2px }
.callout p{ margin:0; font-size:.875rem; color:var(--ink-2) }
.callout.warn{ background:color-mix(in srgb,var(--warn) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--warn) 30%, transparent) }
.callout.warn svg{ color:var(--warn) }
.doc-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line) }
.doc-nav a,.doc-nav button{ font-size:.875rem; color:var(--ink-3); transition:color var(--t) }
.doc-nav a:hover,.doc-nav button:hover{ color:var(--ink) }
.doc-nav a b,.doc-nav button b{ display:block; font-size:.9375rem; color:var(--ink); font-weight:600; letter-spacing:-.022em; margin-top:2px }

/* ---------------- Analytics ---------------- */
.an-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(12px,1.6vw,18px); align-items:start }
@media (max-width:1000px){ .an-grid{ grid-template-columns:1fr } }
.chart-card{ padding:clamp(16px,2vw,22px); border-radius:var(--r-xl); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1) }
.chart-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px }
.chart-head h3{ font-size:1rem; font-weight:600; letter-spacing:-.026em }
.chart-body{ position:relative; min-height:200px }

/* ---------------- Stake / Earn hero cards ---------------- */
.yield-hero{
  position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(24px,3.4vw,40px);
  color:#fff; box-shadow:var(--sh-3);
}
.yield-hero::before{ content:""; position:absolute; inset:0; background:var(--g); }
.yield-hero::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 100% at 80% 0%, rgba(255,255,255,.4), transparent 60%) }
.yield-hero > *{ position:relative; z-index:2 }
.yield-k{ font-size:clamp(3rem,7vw,5rem); font-weight:600; letter-spacing:-.055em; line-height:.92; font-variant-numeric:tabular-nums }
.yield-k small{ font-size:.34em; font-weight:500; margin-left:4px }
.yield-t{ font-size:clamp(1.05rem,2vw,1.4rem); font-weight:500; letter-spacing:-.028em; margin-top:14px; max-width:20ch }
.yield-s{ font-size:.8125rem; opacity:.82; margin-top:10px }
.yield-orbs{ position:absolute; inset:0; overflow:hidden; z-index:1 }
.yield-orbs i{ position:absolute; border-radius:50%; background:rgba(255,255,255,.16); animation: orb 9s var(--e-inout) infinite alternate }
@keyframes orb{ to{ transform:translate(14px,-18px) scale(1.14) } }

/* ---------------- Forge ---------------- */
.forge-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,430px); gap:clamp(16px,2.4vw,30px); align-items:start }
@media (max-width:1000px){ .forge-grid{ grid-template-columns:1fr } }
.form-row{ margin-bottom:15px }
.form-row label{ display:block; font-size:.8125rem; font-weight:500; margin-bottom:7px; color:var(--ink-2) }
.form-row label em{ font-style:normal; color:var(--ink-4); font-weight:400; margin-left:5px }
.form-row textarea{
  width:100%; min-height:82px; resize:vertical; padding:12px 15px; border-radius:var(--r-md);
  background:var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size:.9375rem; line-height:1.5;
  transition: box-shadow var(--t);
}
.form-row textarea:focus{ box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px var(--brand-wash) }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:520px){ .form-2{ grid-template-columns:1fr } }

.stockpick{ display:flex; flex-wrap:wrap; gap:7px }
.stockpick button{
  display:flex; align-items:center; gap:7px; height:36px; padding:0 12px 0 7px; border-radius:var(--r-pill);
  background:var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size:.8125rem; font-weight:500;
  transition: all var(--t) var(--e-out);
}
.stockpick button:hover{ transform:translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-1) }
.stockpick button[aria-pressed="true"]{ background:var(--brand-wash); box-shadow: inset 0 0 0 1.5px var(--brand); color:var(--brand-ink) }
.stockpick .mark{ border-radius:99px }

.swatches{ display:flex; gap:7px; flex-wrap:wrap }
.swatches button{ width:30px;height:30px;border-radius:9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .3s var(--e-spring) }
.swatches button:hover{ transform:scale(1.12) }
.swatches button[aria-pressed="true"]{ box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink) }

.split-bar{ display:flex; height:12px; border-radius:99px; overflow:hidden; margin:14px 0 12px; box-shadow: inset 0 0 0 1px var(--line) }
.split-bar i{ height:100%; transition: width .6s var(--e-out) }

/* ---------------- Command palette ---------------- */
.cmd-input{
  display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1px solid var(--line);
}
.cmd-input svg{ width:18px;height:18px;color:var(--ink-4) }
.cmd-input input{ flex:1; font-size:1.0625rem; letter-spacing:-.02em }
.cmd-list{ max-height:min(56vh,420px); overflow:auto; padding:8px }
.cmd-item{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:var(--r-md);
  text-align:left; font-size:.9375rem; transition:background-color .15s;
}
.cmd-item:hover,.cmd-item.sel{ background:var(--brand-wash); color:var(--brand-ink) }
.cmd-item .ci{ width:18px;height:18px;flex:none;opacity:.8 }
.cmd-item small{ margin-left:auto; font-family:var(--mono); font-size:.6875rem; color:var(--ink-4) }
.cmd-empty{ padding:30px; text-align:center; color:var(--ink-4); font-size:.875rem }

/* Connect-wallet grid */
.wgrid{ display:grid; gap:9px }
.wopt{
  display:flex; align-items:center; gap:13px; padding:14px 15px; border-radius:var(--r-md);
  background:var(--bg); box-shadow: inset 0 0 0 1px var(--line); text-align:left;
  transition: all var(--t) var(--e-out);
}
.wopt:hover{ transform:translateY(-2px); box-shadow: inset 0 0 0 1px var(--brand), var(--sh-2) }
.wopt-ico{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:1.1rem }
.wopt b{ display:block; font-size:.9375rem; font-weight:600; letter-spacing:-.022em }
.wopt span{ font-size:.75rem; color:var(--ink-4) }

/* Tx receipt */
.receipt{ display:grid; gap:11px }
.receipt-hero{ text-align:center; padding:8px 0 16px }
.receipt-ico{ width:56px;height:56px;border-radius:99px;display:grid;place-items:center;margin:0 auto 14px;
  background:color-mix(in srgb,var(--pos) 14%, transparent); color:var(--pos); animation: pop .6s var(--e-spring) both }
@keyframes pop{ from{transform:scale(.5);opacity:0} to{transform:none;opacity:1} }
.receipt-ico svg{ width:27px;height:27px }
.receipt-hero b{ display:block; font-size:1.25rem; font-weight:600; letter-spacing:-.03em }
.receipt-hero span{ font-size:.875rem; color:var(--ink-3) }

/* Activity rows */
.act-ico{ width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none }
.act-ico svg{ width:16px;height:16px }

/* ---------------- Icon sizing ----------------
   Every icon emitted by ic() carries .ico, so it can never
   fall back to filling its container. Context rules override. */
.ico{ width:18px; height:18px; flex:none }
.nav-item .ico{ width:19px; height:19px }
.tabbar .ico{ width:20px; height:20px }
.btn .ico{ width:17px; height:17px }
.btn-sm .ico{ width:15px; height:15px }
.empty-ico .ico{ width:24px; height:24px }
.act-ico .ico{ width:16px; height:16px }
.cmd-item .ico{ width:18px; height:18px }
.cmd-input .ico{ width:18px; height:18px }
.tip .ico,.kpi-l .ico,.pool-kpis span .ico,.quote-row .ico,.disc summary .ico{ width:13px; height:13px }
.chip .ico{ width:13px; height:13px }
.callout .ico{ width:19px; height:19px }
.doc-flow .fa .ico{ width:20px; height:20px }
.pairx .ico{ width:22px; height:22px }
.wopt .ico{ width:17px; height:17px; color:var(--ink-4); margin-left:auto }

.wopt-txt{ min-width:0 }
.wopt-txt b{ display:block; font-size:.9375rem; font-weight:600; letter-spacing:-.022em }
.wopt-txt span{ display:block; font-size:.75rem; color:var(--ink-4) }

/* Tooltip triggers rendered as <i> inside labels */
.pool-kpis span .tip,.kpi-l .tip,.quote-row .tip{ border:0; display:inline-flex; color:var(--ink-4) }

/* ---------------- Forge pair preview + fee split ----------------
   These live here rather than in landing.css because the app
   never loads that sheet. */
.pairview{ display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,20px); padding:20px 0 14px; flex-wrap:nowrap }
.pairview .mark{ border-radius:18px; box-shadow:var(--sh-2) }
.pairx{ color:var(--ink-4); display:grid; place-items:center; flex:none }
.pairlbl{ text-align:center; margin-bottom:6px }
.pairlbl b{ display:block; font-size:1.125rem; font-weight:600; letter-spacing:-.028em }
.pairlbl span{ font-size:.8125rem; color:var(--ink-4) }

.fee-list{ display:grid; gap:11px; margin-top:4px }
.fee-item{ display:flex; align-items:flex-start; gap:12px }
.fee-item i{ width:10px; height:10px; border-radius:3px; flex:none; margin-top:6px }
.fee-item b{ display:block; font-size:.9375rem; font-weight:600; letter-spacing:-.022em }
.fee-item span{ display:block; font-size:.8125rem; color:var(--ink-3); line-height:1.5 }

/* ---------------- Narrow-screen topbar ----------------
   Below 640px the search collapses to its icon so the wallet
   button and theme toggle keep their room. */
@media (max-width:640px){
  .tb-search{ flex:0 0 auto; width:36px; max-width:36px; padding:0; justify-content:center }
  .tb-search span,.tb-search kbd{ display:none }
  .tb-clock{ display:none }
  .topbar{ gap:8px; padding-inline:14px }
  .wallet-btn .addr{ font-size:.75rem }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .kpi{ padding:13px 14px }
  .kpi-k{ font-size:1.125rem }
  .view-title h1{ font-size:1.75rem }
  .view-head p.lede{ font-size:.875rem }
  .toolbar{ gap:8px }
  .toolbar .field{ max-width:none }
  .seg button{ padding:0 12px; font-size:.8125rem }
  .trade-wrap,.forge-grid,.an-grid{ gap:12px }
  .leg-main input{ font-size:1.375rem }
  .port-k{ font-size:2rem }
  .modal{ border-radius:var(--r-lg) }
}
@media (max-width:420px){
  .pool-kpis{ gap:10px 8px }
  .pool-kpis div b{ font-size:.9375rem }
  .stockpick button{ height:32px; font-size:.75rem }
}

/* ---------------- Overflow containment ----------------
   Grid items default to a min-content floor, which lets a wide
   child (a <select>, a long nowrap label) push a 1fr track past
   the viewport. Pin every track's minimum to zero instead. */
.trade-wrap > *,.forge-grid > *,.an-grid > *,.docs > *,
.kpis > *,.pool-grid > *,.stack > *{ min-width:0 }
.tcard,.chart-card,.card,.panel,.pool,.kpi{ max-width:100% }
.select{ max-width:100% }
.tcard-head{ flex-wrap:wrap }
.leg-top{ flex-wrap:wrap; row-gap:2px }
.view{ overflow-x:clip }