/* THE DESK v2 — tokens, base, shell layout. Modules append their own files. */
/* NLYRA brand guide v1 — "Two AI minds, one brand": NERON violet + LYRA magenta,
   navy surfaces, Space Grotesk display + Inter body, radii 6/9/14/999.
   Verdict colours are reserved for SAFE/CAUTION/DANGER; price direction has its own pair. */
:root{
  --neron:#8B7CF6;--lyra:#E84FE0;
  --brand-grad:linear-gradient(90deg,var(--neron),var(--lyra));
  --s0:#070B18;--s1:#0B1022;--s2:#0F1528;--s3:#141B33;--s4:#1A2240;
  --line-soft:rgba(233,238,248,.06);--line:#1E2747;--line-hot:#2C3760;
  --ink0:#E9EEF8;--ink1:#C3CCDF;--ink2:#9AA7BD;--ink3:#5D6A82;--ink4:#3E485E;
  --acc:var(--neron);--acc-t:#A89CFF;--acc-bg:rgba(139,124,246,.12);--acc-line:rgba(139,124,246,.35);
  --acc2:var(--lyra);--acc2-bg:rgba(232,79,224,.12);
  --up:#4ADE80;--down:#F87171;--flat:#5D6A82;
  --up-bg:rgba(74,222,128,.12);--down-bg:rgba(248,113,113,.12);
  --v-safe:#4ADE80;--v-safe-bg:rgba(74,222,128,.12);
  --v-caution:#FBBF24;--v-caution-bg:rgba(251,191,36,.12);
  --v-danger:#F87171;--v-danger-bg:rgba(248,113,113,.12);
  --v-blue:#8B7CF6;--v-blue-bg:rgba(139,124,246,.14);
  --v-unknown:#5D6A82;--v-unknown-bg:rgba(93,106,130,.16);
  --gold:#FBBF24;--gold-bg:rgba(251,191,36,.12);
  --sans:'Inter',system-ui,-apple-system,sans-serif;--display:'Space Grotesk','Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r1:6px;--r2:9px;--r3:14px;--pill:999px;
  --tap:44px;--top:48px;--nav:56px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --sh2:0 4px 16px -4px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);
  --sh3:0 24px 64px -12px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--s0)}
body{color:var(--ink0);font:400 13px/1.45 var(--sans);font-variant-numeric:tabular-nums slashed-zero;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--acc-t);text-decoration:none}
.mono{font-family:var(--mono)}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--flat)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
::selection{background:rgba(34,211,238,.25)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--line-hot);border-radius:5px}::-webkit-scrollbar-track{background:transparent}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ── shell ── */
#app{height:100dvh;display:grid;grid-template-rows:var(--top) 1fr auto}
#top{display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--s1);border-bottom:1px solid var(--line);padding-top:var(--safe-t);height:calc(var(--top) + var(--safe-t))}
#top .brand{display:flex;align-items:center;gap:9px;font:600 15px var(--display);letter-spacing:.02em;color:var(--ink0);white-space:nowrap}
#top .brand svg{width:30px;height:20px;flex:0 0 auto}
#top .brand .the{color:var(--ink2);font-weight:500;margin-right:-4px}
#top .brand .x{color:var(--ink3);font-weight:500;margin:0 2px}
#top .brand .lyra{color:var(--lyra)}
/* the brand gradient appears once per screen: the single primary CTA */
.btn.primary{background:var(--brand-grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.sheet h3,.empty b,h1,h2{font-family:var(--display)}
#top .search{flex:1;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:var(--r2);background:var(--s2);border:1px solid var(--line);min-width:0}
#top .search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:16px;color:var(--ink0)}
#top .search input::placeholder{color:var(--ink3);font-size:13px}
#top .right{display:flex;align-items:center;gap:8px}
#view{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#nav{display:flex;background:var(--s1);border-top:1px solid var(--line);padding-bottom:var(--safe-b);height:calc(var(--nav) + var(--safe-b))}
#nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink3);font:590 9.5px var(--sans);letter-spacing:.1em;min-height:var(--nav)}
#nav a svg.i{width:20px;height:20px}
#nav a[aria-current="page"]{color:var(--acc-t)}

/* ── primitives ── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--pill);font:600 10.5px/1 var(--sans);letter-spacing:.07em;white-space:nowrap}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.safe{color:var(--v-safe);background:var(--v-safe-bg)}.chip.caution{color:var(--v-caution);background:var(--v-caution-bg)}
.chip.danger{color:var(--v-danger);background:var(--v-danger-bg)}.chip.bluechip{color:var(--v-blue);background:var(--v-blue-bg)}
.chip.unknown,.chip.unscanned{color:var(--v-unknown);background:var(--v-unknown-bg)}
.chip.gold{color:var(--gold);background:var(--gold-bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 16px;border-radius:var(--r2);font:680 13.5px var(--sans);letter-spacing:.02em;transition:transform .12s,filter .12s}
.btn:active{transform:translateY(1px);filter:brightness(.95)}
.btn.buy{background:var(--up);color:#04140D;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn.sell{background:var(--down);color:#2A0710;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn.danger{background:var(--v-danger);color:#fff}
.btn.acc{background:var(--acc);color:#04141A}
.btn.ghost{background:var(--s2);border:1px solid var(--line);color:var(--ink1)}
.btn:disabled{opacity:.45;cursor:default;transform:none;filter:none}
.seg{display:flex;gap:3px;padding:3px;border-radius:var(--pill);background:var(--s0);border:1px solid var(--line)}
.seg button{flex:1;padding:9px 0;border-radius:var(--pill);color:var(--ink3);font:590 12px/1 var(--sans);letter-spacing:.04em}
.seg button[aria-pressed="true"]{background:var(--s3);color:var(--ink0)}
.card{background:var(--s2);border:1px solid var(--line);border-radius:var(--r2);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.k{font:510 10px/1 var(--sans);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
.v{font:590 13px/1 var(--mono);color:var(--ink0)}
.skel{position:relative;overflow:hidden;background:var(--s3);border-radius:6px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:sk 1.1s linear infinite}
@keyframes sk{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.flash-up{animation:fu .6s ease-out}.flash-down{animation:fd .6s ease-out}
@keyframes fu{from{background:var(--up-bg)}to{background:transparent}}@keyframes fd{from{background:var(--down-bg)}to{background:transparent}}
.empty{padding:40px 20px;text-align:center;color:var(--ink3);font-size:13px}

/* ── toast & sheet ── */
#toasts{position:fixed;left:50%;bottom:calc(var(--nav) + var(--safe-b) + 14px);transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:6px;width:min(440px,calc(100% - 24px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r2);background:var(--s3);border:1px solid var(--line-hot);box-shadow:var(--sh3);font:510 12.5px/1.35 var(--sans);animation:tin .18s ease-out}
.toast.ok{border-color:rgba(59,224,160,.4)}.toast.err{border-color:rgba(255,107,133,.45)}
.toast a{margin-left:auto;font:590 11px var(--sans);letter-spacing:.04em;white-space:nowrap}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sheet-bg{position:fixed;inset:0;z-index:80;background:rgba(8,11,17,.72);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(460px,100%);max-height:92dvh;overflow:auto;background:var(--s2);border-radius:var(--r3) var(--r3) 0 0;box-shadow:var(--sh3);padding:8px 16px calc(18px + var(--safe-b));display:flex;flex-direction:column;gap:12px}
.sheet .grab{width:36px;height:4px;border-radius:var(--pill);background:var(--line-hot);align-self:center}
.sheet h3{font:600 16px/1.2 var(--sans);letter-spacing:-.01em}
.sheet p{font-size:12.5px;line-height:1.45;color:var(--ink2)}
.sheet .row{display:flex;gap:8px}.sheet .row .btn{flex:1}
.field{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-radius:var(--r2);background:var(--s0);border:1px solid var(--line-hot)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;font:600 16px var(--mono)}
.field .u{font:600 12px var(--sans);color:var(--ink2);letter-spacing:.04em}

/* ── desktop ── */
@media(min-width:861px){
  #top{padding:0 20px}
  #top .search{max-width:420px}
  #nav{display:none}
  #app{grid-template-rows:var(--top) 1fr}
  .sheet-bg{align-items:center}.sheet{border-radius:var(--r3)}
  #toasts{bottom:24px}
  /* the token screen owns a 3-column grid (see token.css); lists own a table */
}

/* ── overflow guards: nothing may widen the phone ── */
#app{width:100%;max-width:100vw;overflow:hidden}
#top{min-width:0}
#top .search{flex:1 1 0;min-width:0}
#top .right{flex:0 1 auto;min-width:0}
#view{max-width:100vw}
@media(max-width:860px){
  #top .brand .the{display:none}
  #top .search input::placeholder{content:'search'}
}