/* =====================================================================
   PAPER — a trading terminal drawn inside a paper notebook
   ===================================================================== */
:root {
  --desk: #352a22;
  --desk-2: #2a211b;
  --paper: #f5f0e4;
  --paper-2: #eee7d6;
  --paper-3: #e6dec9;
  --ink: #23211d;
  --ink-2: #4b473f;
  --pencil: #857f72;
  --pencil-2: #b3ac9c;
  --rule: rgba(77, 111, 168, .13);
  --margin: rgba(196, 72, 60, .28);
  --green: #2c8549;
  --green-ink: #1f6b39;
  --green-bg: #dbead6;
  --green-fill: #3d9659;
  --red: #c0392b;
  --red-ink: #a3301f;
  --red-bg: #f4dcd5;
  --blue: #3f63a0;
  --blue-bg: #c9d8ef;
  --amber-bg: #f6e7b8;
  --font-hand: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', system-ui, sans-serif;
  --font-head: 'Kalam', 'Patrick Hand', 'Segoe Print', cursive;
  --font-marker: 'Permanent Marker', 'Kalam', cursive;
  --r-sketch: 7px 11px 6px 12px / 11px 6px 12px 7px;
  --r-sketch-2: 12px 6px 11px 7px / 6px 12px 7px 11px;
  --r-pill: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden;
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--font-hand); font-size: 16px; line-height: 1.35;
  background: var(--desk);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 220, 170, .07), transparent 60%), repeating-linear-gradient(95deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px), linear-gradient(180deg, var(--desk), var(--desk-2));
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }
::selection { background: var(--amber-bg); }
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--pencil); }
.small { font-size: 13px; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- desk + notebook ---------- */
.desk { padding: 22px 22px 22px 40px; min-height: 100vh; }
.notebook {
  position: relative; max-width: 1720px; margin: 0 auto; min-height: calc(100vh - 44px); display: flex; flex-direction: column;
  background-color: var(--paper);
  background-image: var(--grain), radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.55), transparent 70%), radial-gradient(ellipse at 100% 100%, rgba(150,120,70,.12), transparent 55%);
  border-radius: 6px 16px 16px 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3), 6px 6px 0 -2px #d9d0bb, 7px 7px 0 -2px rgba(0,0,0,.2);
}
.notebook::after { /* faint page edge wear */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(140, 110, 60, .18), inset 0 0 6px rgba(140, 110, 60, .25);
}
.spiral {
  position: absolute; left: -26px; top: 18px; bottom: 18px; width: 52px; z-index: 5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23161412'/%3E%3Cstop offset='.45' stop-color='%23605a52'/%3E%3Cstop offset='.6' stop-color='%23a19a8f'/%3E%3Cstop offset='1' stop-color='%23222'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='37' cy='15' rx='4.2' ry='4.4' fill='%23241d17' opacity='.85'/%3E%3Cpath d='M38 13 C 30 3, 10 3, 6 13 C 4 19, 9 22, 14 19' fill='none' stroke='url(%23g)' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-y; background-size: 52px 30px;
}

/* ---------- header ---------- */
.nb-header {
  display: flex; align-items: center; gap: 22px; padding: 14px 22px 12px 44px; position: relative; z-index: 20;
  border-bottom: 1.5px solid rgba(35,33,29,.55);
}
.nb-header::after { content: ''; position: absolute; left: 40px; right: 18px; bottom: -5px; border-bottom: 1px solid rgba(35,33,29,.18); transform: rotate(-.15deg); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-crown svg { width: 42px; height: 42px; display: block; }
/* site logo: crumpled paper P (interactive, see js/logo.js) */
.brand-crown { perspective: 260px; }
.brand-logo { --rx: 0deg; --ry: 0deg; --sx: 0px; --sy: 2px; --lift: 0px; --sc: 1;
  width: 48px; height: 48px; display: block; cursor: pointer; will-change: transform;
  filter: drop-shadow(0 0 .8px rgba(50,32,10,.85)) drop-shadow(0 0 1.5px rgba(50,32,10,.35)) drop-shadow(calc(var(--sx) + 1px) calc(var(--sy) + 2px) 3px rgba(55,38,15,.6));
  transform: translateY(var(--lift)) rotate(-4deg) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
  transition: transform .18s ease-out, filter .18s ease-out; }
.brand-logo.lift { --lift: -2px; --sc: 1.1; filter: drop-shadow(0 0 .8px rgba(50,32,10,.85)) drop-shadow(0 0 1.5px rgba(50,32,10,.35)) drop-shadow(calc(var(--sx) + 1px) calc(var(--sy) + 5px) 6px rgba(55,38,15,.55)); }
.logo-doodle { display: block; margin: 0 auto; object-fit: contain; cursor: pointer;
  filter: drop-shadow(0 0 .8px rgba(50,32,10,.8)) drop-shadow(0 0 1.5px rgba(50,32,10,.3)) drop-shadow(2px 3px 3px rgba(55,38,15,.55)); transition: transform .2s ease-out; }
.logo-doodle:hover { animation: logo-wiggle .5s ease-in-out; }
.logo-crumple { animation: logo-crumple .62s cubic-bezier(.3,1.4,.5,1) !important; }
@keyframes logo-crumple {
  0% { transform: rotate(-4deg) scale(1); }
  22% { transform: rotate(-18deg) scale(.68, .6); filter: drop-shadow(0 0 .6px rgba(60,40,15,.7)) brightness(.9) contrast(1.25); }
  48% { transform: rotate(10deg) scale(1.16, 1.12); }
  70% { transform: rotate(-7deg) scale(.96); }
  100% { transform: rotate(-4deg) scale(1); }
}
@keyframes logo-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.05); } 60% { transform: rotate(6deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .brand-logo, .logo-doodle { transition: none; animation: none !important; } }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--font-marker); font-size: 36px; letter-spacing: .5px; line-height: 1; }
.brand-tag { font-size: 13px; letter-spacing: 1.6px; margin-top: 4px; border-bottom: 1.5px solid var(--ink); align-self: flex-start; padding-bottom: 1px; }
.top-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.top-tabs a { text-decoration: none; font-size: 19px; padding: 4px 10px; position: relative; white-space: nowrap; }
.top-tabs a:hover { color: var(--blue); }
.top-tabs a.active::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 25 2, 50 7, 98 3' fill='none' stroke='%233f63a0' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.search { position: relative; margin-left: auto; width: min(300px, 26vw); }
.search input {
  width: 100%; padding: 9px 38px 9px 14px; background: rgba(255,255,255,.45); border: 1.7px solid var(--ink); border-radius: var(--r-sketch);
  font-size: 17px; outline: none;
}
.search input:focus { background: #fffdf6; box-shadow: 2px 2px 0 rgba(35,33,29,.15); }
.search input::-webkit-search-cancel-button { display: none; }
.search-ico { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; }
.search-ico svg { width: 20px; height: 20px; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 340px; max-height: 420px; overflow: auto; z-index: 60; display: none;
  background: #fbf8ef; border: 1.6px solid var(--ink); border-radius: var(--r-sketch-2); box-shadow: 4px 5px 0 rgba(35,33,29,.14);
}
.search-results.open { display: block; }
.search-results .sr-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px dashed rgba(35,33,29,.15); }
.search-results .sr-item:hover, .search-results .sr-item.hl { background: var(--blue-bg); }
.search-results .sr-msg { padding: 12px; color: var(--pencil); }
.stamp {
  font-family: var(--font-marker); font-size: 13px; line-height: 1.2; text-align: center; padding: 6px 10px; border: 2px solid var(--ink-2); color: var(--ink-2);
  border-radius: 4px 9px 5px 8px; transform: rotate(-7deg); letter-spacing: .5px; opacity: .85; flex-shrink: 0;
}
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; padding: 0; border-radius: 50%; flex-shrink: 0; }
.icon-btn svg { width: 30px; height: 30px; }
.icon-btn:hover { background: rgba(35,33,29,.06); }
.menu-btn { display: none; }
.demo-banner { margin: 8px 22px 0 44px; padding: 6px 12px; background: var(--amber-bg); border: 1.5px dashed var(--ink-2); border-radius: var(--r-sketch); text-align: center; font-size: 15px; }

/* ---------- body layout ---------- */
.nb-body { flex: 1; display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 0; padding: 16px 20px 10px 40px; min-height: 0; }
.side { padding: 4px 18px 0 6px; border-right: 1.5px solid rgba(35,33,29,.4); display: flex; flex-direction: column; gap: 18px; position: relative; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; white-space: nowrap; text-decoration: none; font-size: 18px; border-radius: var(--r-sketch); position: relative; }
.side-nav a svg { width: 22px; height: 22px; flex-shrink: 0; }
.side-nav a:hover { background: rgba(63,99,160,.09); }
.side-nav a.active { background: var(--blue-bg); box-shadow: inset 0 0 0 1px rgba(63,99,160,.25); }
.side-nav a.active::before { /* highlighter edge */ content: ''; position: absolute; inset: 2px -3px 2px -2px; border-radius: 3px 14px 4px 10px; background: rgba(63,99,160,.12); transform: rotate(-.6deg); z-index: -1; }
.side-nav .sep { height: 1px; border-top: 1.5px dashed rgba(35,33,29,.25); margin: 8px 6px; }
.side-nav .badge { margin-left: auto; font-size: 12px; background: var(--green-bg); border: 1px solid var(--green); color: var(--green-ink); padding: 0 6px; border-radius: 9px; }
.side-note { margin-top: 6px; padding: 14px 10px; border: 1.6px solid var(--ink-2); border-radius: 3px 8px 4px 9px; transform: rotate(-3deg); text-align: center; font-family: var(--font-marker); font-size: 15px; line-height: 1.25; position: relative; background: rgba(255,255,255,.25); }
.side-note::before, .side-note::after { content: ''; position: absolute; width: 34px; height: 12px; background: rgba(230, 214, 160, .75); top: -7px; }
.side-note::before { left: -8px; transform: rotate(-30deg); }
.side-note::after { right: -8px; transform: rotate(30deg); }
.side-note i { display: block; margin: 6px auto 0; width: 40px; height: 40px; }
.side-note i .logo-doodle { width: 40px; height: 40px; transform: rotate(6deg); }
.side-note i svg { width: 34px; height: 24px; }
.side-wallet { margin-top: auto; padding: 12px 6px 8px; border-top: 1.5px dashed rgba(35,33,29,.25); font-size: 15px; }
.side-wallet .big { font-size: 22px; }
.app { min-width: 0; padding: 0 0 8px 20px; outline: none; }

/* ---------- footer ---------- */
.nb-footer { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; padding: 12px 22px 16px 44px; border-top: 1.5px solid rgba(35,33,29,.4); font-size: 15px; letter-spacing: 1px; }
.nb-footer span { display: inline-flex; align-items: center; gap: 8px; }
.nb-footer span + span:not(.attrib)::before { content: '|'; margin-right: 18px; color: var(--pencil); }
.nb-footer .fi svg { width: 20px; height: 20px; }
.nb-footer .attrib { margin-left: auto; letter-spacing: 0; color: var(--pencil); font-size: 14px; }

/* ---------- panels (hand-drawn cards) ---------- */
.panel {
  position: relative; background: rgba(250, 247, 238, .55); border: 1.7px solid var(--ink); border-radius: var(--r-sketch);
  padding: 14px 16px; min-width: 0;
}
.panel::after { content: ''; position: absolute; inset: -3px -2px -2px -3px; border: 1px solid rgba(35,33,29,.28); border-radius: var(--r-sketch-2); pointer-events: none; transform: rotate(.25deg); }
.panel.flat::after { display: none; }
.panel.lined { background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); }
.panel-head { display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; }
.panel-head h2, .panel-head h3 { font-family: var(--font-head); font-weight: 700; font-size: 22px; margin: 0; line-height: 1.1; display: flex; align-items: center; gap: 8px; }
.panel-head h2 svg, .panel-head h3 svg { width: 24px; height: 24px; }
.panel-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-sub { font-size: 14px; color: var(--pencil); margin: -6px 0 10px; }
.page-title { font-family: var(--font-head); font-weight: 700; font-size: 34px; margin: 0; line-height: 1.05; }
.page-title u { text-decoration: none; background: linear-gradient(transparent 62%, rgba(246, 210, 90, .55) 62% 92%, transparent 92%); padding: 0 3px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 2px 0 16px; }
.page-head .right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.annot { font-family: var(--font-head); color: var(--ink-2); font-size: 16px; transform: rotate(-2deg); display: inline-block; }
.annot-arrow svg { width: 50px; height: 24px; vertical-align: middle; }
.grid { display: grid; gap: 18px; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 16px; font-size: 17px; cursor: pointer; text-decoration: none;
  background: rgba(255,255,255,.4); border: 1.7px solid var(--ink); border-radius: var(--r-pill); color: var(--ink); line-height: 1.2;
  transition: transform .06s ease, box-shadow .1s ease, background .15s; box-shadow: 1.5px 2px 0 rgba(35,33,29,.55); position: relative;
}
.btn:hover { background: #fffdf5; transform: translate(-.5px, -.5px); box-shadow: 2.5px 3px 0 rgba(35,33,29,.55); }
.btn:active { transform: translate(1px, 1.5px); box-shadow: 0 0 0 rgba(35,33,29,.55); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 1.5px 2px 0 rgba(35,33,29,.3); }
.btn svg { width: 18px; height: 18px; }
.btn-sm { padding: 3px 10px; font-size: 15px; }
.btn-lg { padding: 11px 22px; font-size: 20px; }
.btn-block { width: 100%; }
.btn-buy, .btn-sell, .btn-ink { color: #fff; border-color: var(--ink); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.btn-buy { background: var(--green-fill); background-image: var(--grain); }
.btn-buy:hover { background-color: #378a51; background-image: var(--grain); }
.btn-sell { background: #c4473a; background-image: var(--grain); }
.btn-sell:hover { background-color: #b23c30; background-image: var(--grain); }
.btn-ink { background: var(--ink); background-image: var(--grain); }
.btn-ink:hover { background-color: #3a3730; background-image: var(--grain); }
.btn-ghost { box-shadow: none; background: none; border-style: dashed; }
.btn-ghost:hover { box-shadow: none; transform: none; background: rgba(35,33,29,.05); }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: rgba(63,99,160,.5); text-underline-offset: 3px; color: var(--blue); }
.star-btn { background: none; border: 0; cursor: pointer; padding: 2px; color: var(--pencil-2); display: inline-grid; place-items: center; }
.star-btn svg { width: 19px; height: 19px; }
.star-btn:hover { color: var(--ink); }
.star-btn.on { color: #c9932a; }
.star-btn.on svg path { fill: #f0c75a; }

/* ---------- tabs / chips / filters ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab, .chip {
  padding: 4px 12px; font-size: 16px; border: 1.5px solid var(--ink); background: rgba(255,255,255,.3); cursor: pointer;
  border-radius: 8px 4px 9px 5px / 5px 9px 4px 8px; white-space: nowrap; line-height: 1.25;
}
.tab:hover, .chip:hover { background: #fffdf5; }
.tab.active, .chip.active { background: var(--blue-bg); border-color: var(--blue); color: #1f3a66; box-shadow: inset 0 -2px 0 rgba(63,99,160,.35); }
.tabs.plain .tab { border-color: transparent; background: none; }
.tabs.plain .tab.active { border-color: var(--blue); background: var(--blue-bg); }
.chip.green.active { background: var(--green-bg); border-color: var(--green); color: var(--green-ink); }
.chip.red.active { background: var(--red-bg); border-color: var(--red); color: var(--red-ink); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; padding: 10px 12px; border: 1.5px dashed rgba(35,33,29,.4); border-radius: var(--r-sketch); margin-bottom: 12px; background: rgba(255,255,255,.2); }
.filters label { display: flex; flex-direction: column; font-size: 13px; color: var(--ink-2); gap: 2px; }
.field, select.field {
  padding: 6px 10px; border: 1.5px solid var(--ink); border-radius: 6px 3px 7px 4px / 4px 7px 3px 6px; background: rgba(255,255,255,.5); font-size: 16px; outline: none; min-width: 0;
}
.field:focus { background: #fffdf6; border-color: var(--blue); }
.filters .field { width: 104px; padding: 4px 8px; font-size: 15px; }
select.field { appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1' fill='none' stroke='%2323211d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }

/* ---------- token visuals ---------- */
.tk-ico { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper-3); flex-shrink: 0; object-fit: cover; display: grid; place-items: center; font-family: var(--font-marker); font-size: 14px; overflow: hidden; }
.tk-ico.sm { width: 28px; height: 28px; font-size: 11px; }
.tk-ico.lg { width: 58px; height: 58px; font-size: 20px; border-width: 2px; }
.tk-name { font-size: 17px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-sub { font-size: 13px; color: var(--pencil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chg { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chg.up { color: var(--green); }
.chg.down { color: var(--red); }
.chg .tri { font-size: .75em; margin-right: 2px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; font-size: 13px; border: 1.3px solid var(--ink-2); border-radius: 10px 6px 11px 5px; background: rgba(255,255,255,.4); white-space: nowrap; }
.tag.dark { background: var(--ink); color: var(--paper); }
.tag.green { background: var(--green-bg); border-color: var(--green); color: var(--green-ink); }
.tag.red { background: var(--red-bg); border-color: var(--red); color: var(--red-ink); }
.tag.blue { background: var(--blue-bg); border-color: var(--blue); color: #1f3a66; }
.tag.amber { background: var(--amber-bg); }
.side-tag { display: inline-block; padding: 0 9px; border-radius: 4px; font-size: 14px; border: 1px solid; }
.side-tag.buy { background: var(--green-bg); border-color: rgba(44,133,73,.5); color: var(--green-ink); }
.side-tag.sell { background: var(--red-bg); border-color: rgba(192,57,43,.45); color: var(--red-ink); }
.progress { height: 8px; border: 1.3px solid var(--ink); border-radius: 6px 3px 6px 3px; overflow: hidden; background: rgba(255,255,255,.4); }
.progress i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--green-fill) 0 5px, #57ad72 5px 10px); }

/* ---------- token list (feed) ---------- */
.tlist { display: flex; flex-direction: column; }
.tlist-head, .trow { display: grid; grid-template-columns: minmax(0, 1fr) 62px 78px 60px 20px; gap: 5px; align-items: center; }
.trow { font-size: 15px; }
.trow .tk { gap: 8px; }
.trow .tk-ico { width: 32px; height: 32px; font-size: 11px; }
.trow > * { min-width: 0; overflow: hidden; }
.trow .r { text-overflow: ellipsis; white-space: nowrap; }
.tlist-head { font-size: 14px; color: var(--ink-2); padding: 0 6px 6px; border-bottom: 1.5px solid var(--ink); }
.tlist-head span:not(:first-child), .trow > .r { text-align: right; }
.trow { padding: 8px 6px; border-bottom: 1px solid rgba(35,33,29,.18); cursor: pointer; text-decoration: none; position: relative; }
.trow:hover { background: rgba(63,99,160,.07); }
.trow.sel { background: rgba(63,99,160,.12); box-shadow: inset 3px 0 0 var(--blue); }
.trow .tk { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trow .tk > div { min-width: 0; }
.trow .r .sub { display: block; font-size: 12px; color: var(--pencil); }
.trow .meta { display: flex; gap: 7px; font-size: 12px; color: var(--pencil); margin-top: 1px; white-space: nowrap; overflow: hidden; }
.trow .meta .b { color: var(--green); } .trow .meta .s { color: var(--red); }

/* full tables */
.tbl-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl th { text-align: left; font-weight: normal; color: var(--ink-2); font-size: 14px; padding: 6px 8px; border-bottom: 1.6px solid var(--ink); white-space: nowrap; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th.sortable { cursor: pointer; }
.tbl th.sortable:hover { color: var(--blue); }
.tbl th.sorted { color: var(--blue); text-decoration: underline wavy rgba(63,99,160,.5); }
.tbl td { padding: 8px; border-bottom: 1px solid rgba(35,33,29,.16); vertical-align: middle; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: rgba(63,99,160,.07); }
.tbl tr.me td { background: rgba(246, 210, 90, .22); }
.tbl .tk { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.tbl .sub { display: block; font-size: 12px; color: var(--pencil); }
.rank { font-family: var(--font-marker); font-size: 18px; }
.rank.r1 { color: #b8860b; } .rank.r2 { color: #6f6f6f; } .rank.r3 { color: #9a5b2e; }

/* ---------- dashboard (Discover) ---------- */
.dash { display: grid; grid-template-columns: minmax(330px, 420px) minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; }
.dash .feed { position: sticky; top: 10px; }
.feed .tlist { max-height: calc(100vh - 330px); min-height: 380px; overflow-y: auto; margin-right: -8px; padding-right: 6px; scrollbar-width: thin; }
.feed-tabs { margin: 0 0 10px; padding: 0 0 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.feed-tabs .tab { font-size: 14px; padding: 2px 9px; }
.feed-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--pencil); margin-top: 8px; }
.tok-head { display: flex; gap: 14px; align-items: flex-start; }
.tok-head .ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tok-head h1 { font-family: var(--font-marker); font-size: 30px; margin: 0; font-weight: normal; line-height: 1.05; }
.tok-head .px { margin-left: auto; text-align: right; }
.tok-head .px .p { font-size: 32px; line-height: 1; }
.tok-head .px .chg { font-size: 19px; }
.addr { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-2); cursor: pointer; background: none; border: 0; padding: 0; }
.addr svg { width: 15px; height: 15px; }
.addr:hover { color: var(--blue); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 12px; border-top: 1.4px solid rgba(35,33,29,.5); border-bottom: 1.4px solid rgba(35,33,29,.5); }
.stats > div { padding: 9px 12px; }
.stats > div + div { border-left: 1px dashed rgba(35,33,29,.3); }
.stats .k { font-size: 14px; color: var(--ink-2); }
.stats .v { font-size: 22px; line-height: 1.15; }
.stats .v .sub { font-size: 13px; color: var(--pencil); margin-left: 4px; }
.stats.more { grid-template-columns: repeat(4, 1fr); margin-top: -12px; border-top: 0; }
.stats.more .v { font-size: 17px; }
.chart-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.chart-bar .tab { padding: 1px 10px; font-size: 15px; }
.chart-bar .right { margin-left: auto; font-size: 13px; color: var(--pencil); }
.chart-box { position: relative; height: 360px; border: 1.4px solid rgba(35,33,29,.55); border-radius: 4px 7px 5px 8px; overflow: hidden;
  background-color: rgba(255,255,255,.28); background-image: linear-gradient(rgba(77,111,168,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(77,111,168,.09) 1px, transparent 1px); background-size: 24px 24px; }
.chart-box .chart-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--ink-2); }
.chart-box .chart-src { position: absolute; right: 70px; bottom: 6px; font-size: 12px; color: var(--pencil); z-index: 3; pointer-events: none; }
.links-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.links-row a { color: var(--blue); }

/* ---------- trade panel ---------- */
.trade { margin-top: 14px; border: 1.6px solid var(--ink); border-radius: var(--r-sketch-2); padding: 14px; background: rgba(255,255,255,.3); position: relative; }
.trade-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.trade-grid > * { min-width: 0; }
.dash > *, .stack > * { min-width: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1.6px solid var(--ink); border-radius: 7px 4px 8px 5px; overflow: hidden; }
.seg button { padding: 7px; border: 0; background: rgba(255,255,255,.35); cursor: pointer; font-size: 18px; }
.seg button + button { border-left: 1.6px solid var(--ink); }
.seg button.on.buy { background: var(--green-fill); color: #fff; background-image: var(--grain); }
.seg button.on.sell { background: #c4473a; color: #fff; background-image: var(--grain); }
.amt { display: flex; align-items: center; border: 1.6px solid var(--ink); border-radius: 6px 3px 7px 4px / 4px 7px 3px 6px; background: #fffdf6; margin-top: 10px; }
.amt span { padding: 0 4px 0 12px; font-size: 20px; color: var(--ink-2); }
.amt input { flex: 1; width: 100%; border: 0; background: none; padding: 8px 10px 8px 2px; font-size: 21px; outline: none; min-width: 0; }
.amt .unit { font-size: 15px; padding-right: 12px; color: var(--pencil); }
.pcts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 12px; }
.pcts button { padding: 4px 0; border: 1.5px solid var(--ink); background: rgba(255,255,255,.35); border-radius: 6px 3px 7px 4px; cursor: pointer; font-size: 16px; box-shadow: 1px 1.5px 0 rgba(35,33,29,.4); }
.pcts button:hover { background: #fffdf5; }
.pcts button.on { background: var(--blue-bg); border-color: var(--blue); }
.est { font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.est .ln { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted rgba(35,33,29,.25); padding-bottom: 3px; }
.est .ln span:first-child { color: var(--ink-2); }
.est .total { font-size: 17px; border-bottom: 0; padding-top: 3px; }
.est .warn { color: var(--red-ink); font-size: 14px; }
.est-foot { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border-top: 1.4px solid rgba(35,33,29,.4); }
.est-foot > div { padding: 8px 10px 0; font-size: 14px; color: var(--ink-2); }
.est-foot > div + div { border-left: 1px dashed rgba(35,33,29,.3); }
.est-foot b { display: block; font-weight: normal; color: var(--ink); font-size: 16px; }
.trade-note { margin-top: 10px; font-size: 14px; text-decoration: underline; text-decoration-color: rgba(35,33,29,.4); text-underline-offset: 3px; display: flex; justify-content: space-between; align-items: center; }
.book-pick { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.book-pick select { flex: 1; }

/* ---------- right column ---------- */
.wallet-big { font-size: 38px; line-height: 1.05; margin: 4px 0 2px; }
.wallet-sub { color: var(--ink-2); font-size: 16px; }
.motto { position: absolute; right: 14px; top: 12px; font-family: var(--font-marker); font-size: 14px; line-height: 1.25; text-align: right; transform: rotate(-6deg); color: var(--ink-2); }
.mini-list { display: flex; flex-direction: column; }
.mini-head, .mini-row { display: grid; grid-template-columns: minmax(0, 1.5fr) .8fr .8fr; gap: 6px; align-items: center; }
.mini-head { font-size: 14px; color: var(--ink-2); padding-bottom: 4px; border-bottom: 1.4px solid var(--ink); }
.mini-head span:not(:first-child), .mini-row .r { text-align: right; }
.mini-row { padding: 8px 2px; border-bottom: 1px solid rgba(35,33,29,.16); cursor: pointer; }
.mini-row:hover { background: rgba(63,99,160,.07); }
.mini-row .tk { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mini-row.trades { grid-template-columns: minmax(0, 1.4fr) .6fr .8fr .7fr; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 15px; }
.kv .k { color: var(--ink-2); font-size: 13px; }
.kv .v { font-size: 19px; }
.scrawl { font-family: var(--font-marker); font-size: 18px; text-align: center; transform: rotate(-4deg); margin: 14px 0 2px; line-height: 1.2; }
.scrawl span { border-bottom: 2px solid var(--ink); }

/* ---------- summary cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.card-stat { padding: 12px 14px; border: 1.6px solid var(--ink); border-radius: var(--r-sketch); background: rgba(255,255,255,.3); position: relative; }
.card-stat:nth-child(even) { border-radius: var(--r-sketch-2); }
.card-stat .k { font-size: 14px; color: var(--ink-2); }
.card-stat .v { font-size: 25px; line-height: 1.15; }
.card-stat .d { font-size: 13px; color: var(--pencil); }
.alloc { display: flex; height: 22px; border: 1.6px solid var(--ink); border-radius: 6px 3px 7px 4px; overflow: hidden; margin: 6px 0 8px; }
.alloc i { display: block; height: 100%; border-right: 1px solid rgba(35,33,29,.5); }
.alloc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.alloc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.alloc-legend b { width: 12px; height: 12px; border: 1px solid var(--ink); border-radius: 3px; display: inline-block; }
.perf-box { height: 260px; position: relative; }

/* ---------- pulse ---------- */
.pulse-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pulse-col .tlist { max-height: calc(100vh - 340px); min-height: 400px; overflow-y: auto; scrollbar-width: thin; }
.pcard { text-decoration: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 10px 6px; border-bottom: 1px solid rgba(35,33,29,.18); cursor: pointer; align-items: center; }
.pcard:hover { background: rgba(63,99,160,.07); }
.pcard .l2 { display: flex; gap: 10px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.pcard .l2 b { font-weight: normal; color: var(--ink); }
.pcard .rt { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pcard .rt .mc { font-size: 17px; }
.pcard .progress { margin-top: 5px; }

/* ---------- tournaments ---------- */
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.tour { display: flex; flex-direction: column; gap: 10px; }
.tour h3 { font-family: var(--font-head); font-size: 22px; margin: 0; }
.tour .when { font-size: 15px; color: var(--ink-2); }
.tour .cd { font-family: var(--font-marker); font-size: 26px; }
.tour .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.tour .foot { display: flex; gap: 10px; align-items: center; margin-top: auto; }
.rules { margin: 0; padding-left: 20px; font-size: 16px; }
.rules li { margin: 4px 0; }

/* ---------- states ---------- */
.empty { text-align: center; padding: 34px 16px; color: var(--ink-2); }
.empty h3 { font-family: var(--font-head); font-size: 24px; margin: 6px 0 4px; color: var(--ink); }
.empty p { margin: 4px auto 14px; max-width: 420px; }
.empty .doodle svg { width: 70px; height: 56px; opacity: .8; }
.empty .doodle .logo-doodle { width: 64px; height: 64px; transform: rotate(-5deg); }
.err-box { padding: 12px 14px; border: 1.6px dashed var(--red); border-radius: var(--r-sketch); background: rgba(244, 220, 213, .55); color: var(--red-ink); font-size: 15px; }
.info-box { padding: 10px 14px; border: 1.5px dashed var(--ink-2); border-radius: var(--r-sketch); background: rgba(255,255,255,.3); font-size: 15px; color: var(--ink-2); }
.stale { color: #9a6a00; }
.skel { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, rgba(35,33,29,.08), rgba(35,33,29,.16), rgba(35,33,29,.08)); background-size: 200% 100%; animation: sk 1.3s infinite linear; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-row { display: grid; grid-template-columns: 38px 1fr 60px; gap: 10px; align-items: center; padding: 10px 6px; border-bottom: 1px solid rgba(35,33,29,.12); }
.skel-row .c { width: 38px; height: 38px; border-radius: 50%; }
.dot-live { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: inline-block; box-shadow: 0 0 0 0 rgba(44,133,73,.5); animation: pulse 1.6s infinite; }
.dot-live.off { background: var(--pencil-2); animation: none; }
.dot-live.bad { background: var(--red); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(44,133,73,.45); } 70% { box-shadow: 0 0 0 7px rgba(44,133,73,0); } 100% { box-shadow: 0 0 0 0 rgba(44,133,73,0); } }
.flash-up { animation: fu .8s; } .flash-down { animation: fd .8s; }
@keyframes fu { from { background: rgba(44,133,73,.25); } to { background: transparent; } }
@keyframes fd { from { background: rgba(192,57,43,.22); } to { background: transparent; } }

/* ---------- toasts + modal ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; max-width: min(380px, calc(100vw - 32px)); }
.toast { padding: 10px 14px 10px 16px; background: #fbf8ef; background-image: var(--grain); border: 1.7px solid var(--ink); border-radius: var(--r-sketch); box-shadow: 3px 4px 0 rgba(0,0,0,.25); font-size: 16px; animation: tin .2s ease-out; display: flex; gap: 10px; align-items: flex-start; }
.toast.ok { border-left: 7px solid var(--green); }
.toast.err { border-left: 7px solid var(--red); }
.toast b { font-weight: normal; font-family: var(--font-head); font-size: 18px; display: block; }
@keyframes tin { from { transform: translateY(10px) rotate(1deg); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-bg { position: fixed; inset: 0; background: rgba(30, 22, 16, .55); z-index: 150; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background-color: var(--paper); background-image: var(--grain), repeating-linear-gradient(180deg, transparent 0 29px, var(--rule) 29px 30px); border: 2px solid var(--ink); border-radius: var(--r-sketch); padding: 20px 22px; box-shadow: 6px 8px 0 rgba(0,0,0,.3); position: relative; transform: rotate(-.3deg); }
.modal h3 { font-family: var(--font-head); font-size: 26px; margin: 0 0 10px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal .x { position: absolute; right: 10px; top: 8px; }
.modal .est .ln { font-size: 16px; }

/* ---------- side scrim (mobile) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; display: none; }
.scrim.open { display: block; }

/* =================== responsive =================== */
@media (max-width: 1500px) {
  .stamp-top { display: none; }
  .nb-header { gap: 14px; }
  .search { width: auto; flex: 0 1 260px; min-width: 130px; }
  .top-tabs a { font-size: 17px; padding: 4px 6px; }
}
@media (max-width: 1440px) {
  .top-tabs { display: none; } /* the sidebar has the same links */
  .dash { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(270px, 320px); }
}
@media (max-width: 1320px) {
  .dash { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .dash .feed { grid-column: 1 / -1; position: static; order: 3; }
  .feed .tlist { max-height: 480px; }
  .top-tabs a { font-size: 17px; padding: 4px 6px; }
}
@media (max-width: 1100px) {
  .top-tabs { display: none; }
  .pulse-cols { grid-template-columns: 1fr; }
  .pulse-col .tlist { max-height: 520px; min-height: 0; }
}
@media (max-width: 960px) {
  .desk { padding: 0; }
  .notebook { border-radius: 0; min-height: 100vh; box-shadow: none; }
  .spiral { display: none; }
  .nb-header { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .nb-header::after { left: 12px; right: 12px; }
  .menu-btn { display: inline-grid; }
  .brand-name { font-size: 28px; }
  .brand-crown svg { width: 32px; height: 32px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-tag { font-size: 11px; }
  .search { order: 5; width: 100%; margin: 0; }
  .avatar-btn { margin-left: auto; }
  .demo-banner { margin: 8px 14px 0; }
  .nb-body { grid-template-columns: 1fr; padding: 14px 14px 8px; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; width: 260px; z-index: 100; background-color: var(--paper); background-image: var(--grain); padding: 20px 16px; border-right: 2px solid var(--ink); transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto; }
  .side.open { transform: none; }
  .app { padding: 0; }
  .dash { grid-template-columns: 1fr; }
  .dash .feed { order: 3; }
  .nb-footer { padding: 12px 14px 18px; gap: 6px 14px; font-size: 13px; }
  .nb-footer span + span:not(.attrib)::before { display: none; }
  .nb-footer .attrib { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .page-title { font-size: 28px; }
  .stats, .stats.more { grid-template-columns: repeat(2, 1fr); }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px dashed rgba(35,33,29,.3); }
  .trade-grid { grid-template-columns: minmax(0, 1fr); }
  .tok-head h1 { font-size: 24px; }
  .tok-head .px .p { font-size: 24px; }
  .chart-box { height: 280px; }
  .tlist-head, .trow { grid-template-columns: minmax(0, 1fr) 70px 70px 22px; }
  .tlist-head .hide-sm, .trow .hide-sm { display: none; }
  .panel { padding: 12px; }
  .wallet-big { font-size: 32px; }
  .est-foot { grid-template-columns: 1fr 1fr 1fr; }
  .modal { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =================== Pulse (Axiom-style board) =================== */
@media (min-width: 961px) {
  .notebook.wide .nb-body { grid-template-columns: minmax(0, 1fr); }
  .notebook.wide .side { display: none; }
  .notebook.wide .app { padding-left: 0; }
}
.ax-top { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.ax-top .right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ax-book { color: var(--ink-2); padding: 3px 10px; border: 1.3px dashed rgba(35,33,29,.4); border-radius: var(--r-sketch); }
.ax-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ax-col { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1.7px solid var(--ink); border-radius: var(--r-sketch); background: rgba(250, 247, 238, .55); }
.ax-col:nth-child(2) { border-radius: var(--r-sketch-2); }
.ax-col::after { content: ''; position: absolute; inset: -3px -2px -2px -3px; border: 1px solid rgba(35,33,29,.25); border-radius: var(--r-sketch-2); pointer-events: none; transform: rotate(.2deg); }
.ax-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1.6px solid var(--ink); }
.ax-head h2 { font-family: var(--font-head); font-weight: 700; font-size: 21px; margin: 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ax-head h2 .ico { width: 20px; height: 20px; }
.ax-paused { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #9a6a00; background: var(--amber-bg); border: 1px solid #c9a24a; border-radius: 8px; padding: 0 6px; }
.ax-search { flex: 1; min-width: 60px; margin-left: auto; padding: 4px 9px; font-size: 14px; border: 1.4px solid var(--ink); border-radius: 6px 3px 7px 4px; background: rgba(255,255,255,.5); outline: none; }
.ax-search:focus { background: #fffdf6; border-color: var(--blue); }
.ax-qbset { display: inline-flex; align-items: center; gap: 1px; font-size: 14px; border: 1.4px solid var(--ink); border-radius: 6px 3px 7px 4px; padding: 2px 6px; background: rgba(255,255,255,.4); }
.ax-qbset .ico { width: 14px; height: 14px; color: var(--green); }
.ax-qbset input { width: 42px; border: 0; background: none; outline: none; font-size: 14px; padding: 0; }
.ax-ico-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: 5px; text-decoration: none; flex-shrink: 0; }
.ax-ico-btn .ico { width: 15px; height: 15px; vertical-align: 0; }
.ax-ico-btn:hover { background: rgba(63,99,160,.12); color: var(--blue); }
.ax-ico-btn.on { color: var(--blue); background: var(--blue-bg); }
.ax-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 10px 12px; border-bottom: 1.4px dashed rgba(35,33,29,.4); background: rgba(255,255,255,.25); }
.ax-filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-2); gap: 2px; }
.ax-filters .field { padding: 3px 7px; font-size: 14px; width: 100%; }
.ax-list { overflow-y: auto; height: calc(100vh - 290px); min-height: 420px; scrollbar-width: thin; }
.ax-foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px; border-top: 1.4px solid rgba(35,33,29,.45); font-size: 12.5px; color: var(--pencil); }

.ax-card { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 11px; padding: 11px 12px 12px; border-bottom: 1px solid rgba(35,33,29,.17); }
.ax-card:hover { background: rgba(63,99,160,.06); }
.ax-card.ax-new { animation: axnew 1.6s ease-out; }
@keyframes axnew { 0% { background: rgba(246, 210, 90, .45); } 100% { background: transparent; } }
.ax-img { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; }
.tk-ico.ax { width: 66px; height: 66px; border-radius: 7px 4px 8px 5px; border-width: 1.8px; font-size: 18px; box-shadow: 2px 2px 0 rgba(35,33,29,.25); }
.ax-ca { font-size: 11px; color: var(--pencil); white-space: nowrap; }
.ax-mid { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ax-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ax-sym { font-family: var(--font-head); font-weight: 700; font-size: 18px; text-decoration: none; white-space: nowrap; line-height: 1.1; }
.ax-sym:hover { color: var(--blue); }
.ax-name { color: var(--ink-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ax-dex { font-size: 11px; color: var(--pencil); border: 1px solid var(--pencil-2); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.ax-l2 { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.ax-age { color: var(--green); font-size: 14px; margin-right: 2px; }
.ax-stat { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; margin-left: 4px; }
.ax-stat .ico { width: 13px; height: 13px; vertical-align: 0; }
.ax-l3 { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.ax-chip { font-size: 12px; padding: 0 5px; flex-shrink: 0; border: 1px solid rgba(35,33,29,.3); border-radius: 7px 4px 8px 4px; white-space: nowrap; background: rgba(255,255,255,.35); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ax-chip.up { color: var(--green-ink); border-color: rgba(44,133,73,.45); background: rgba(219,234,214,.6); }
.ax-chip.down { color: var(--red-ink); border-color: rgba(192,57,43,.4); background: rgba(244,220,213,.6); }
.ax-chip.curve { color: #7a5a00; border-color: #c9a24a; background: rgba(246,231,184,.7); }
.ax-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.ax-vm { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: 15px; }
.ax-vm .k { font-size: 11.5px; color: var(--pencil); margin-left: 4px; }
.ax-vm b { font-weight: normal; font-size: 18px; }
.ax-vm.sub { font-size: 13px; color: var(--ink-2); }
.mc-lo { color: var(--blue); } .mc-mid { color: #a8750a; } .mc-hi { color: var(--green); }
.ax-qb { margin-top: auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px; font-size: 14px; cursor: pointer; color: #fff; background: var(--green-fill); background-image: var(--grain); border: 1.5px solid var(--ink); border-radius: var(--r-pill); box-shadow: 1px 1.5px 0 rgba(35,33,29,.55); white-space: nowrap; }
.ax-qb .ico { width: 14px; height: 14px; vertical-align: 0; }
.ax-qb:hover { background-color: #378a51; transform: translate(-.5px, -.5px); }
.ax-qb:active { transform: translate(1px, 1px); box-shadow: none; }
.ax-qb:disabled { opacity: .55; cursor: wait; }
.ax-curve { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 4px; border-radius: 3px; background: rgba(35,33,29,.1); overflow: hidden; }
.ax-curve i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--green-fill) 0 5px, #57ad72 5px 10px); }
@media (max-width: 1200px) {
  .ax-cols { grid-template-columns: 1fr; }
  .ax-list { height: auto; max-height: 560px; min-height: 0; }
}
@media (max-width: 640px) {
  .ax-card { grid-template-columns: 52px minmax(0, 1fr); }
  .tk-ico.ax { width: 50px; height: 50px; }
  .ax-right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 10px; min-width: 0; }
  .ax-right .ax-qb { margin-left: auto; }
  .ax-vm b { font-size: 16px; }
  .ax-qb { margin-top: 0; }
  .ax-search { min-width: 0; }
}

/* currency switch */
.ccy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1.6px solid var(--ink); border-radius: var(--r-pill); background: rgba(255,255,255,.4); cursor: pointer; font-size: 15px; flex-shrink: 0; box-shadow: 1px 1.5px 0 rgba(35,33,29,.4); }
.ccy-btn span { padding: 0 6px; border-radius: 9px; color: var(--pencil); white-space: nowrap; }
.ccy-btn span.on { background: var(--ink); color: var(--paper); }
.ccy-btn .sw { padding: 0; color: var(--ink-2); }
@media (max-width: 960px) { .ccy-btn { font-size: 13px; } }

/* =================== Instant Trade =================== */
.it { padding: 12px 14px; }
.it-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.it-head h3 { font-family: var(--font-head); font-size: 20px; margin: 0; display: flex; align-items: center; gap: 6px; }
.it-head h3 .ico { color: var(--green); }
.it-groups { display: flex; gap: 2px; margin-left: auto; border: 1.4px solid var(--ink); border-radius: 7px 4px 8px 5px; overflow: hidden; }
.it-groups button { border: 0; background: rgba(255,255,255,.35); padding: 1px 9px; font-size: 14px; cursor: pointer; }
.it-groups button.on { background: var(--ink); color: var(--paper); }
.it-row { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 6px; font-size: 15px; }
.it-row b { font-family: var(--font-head); font-size: 17px; }
.it-bal { margin-left: auto; color: var(--ink-2); font-size: 14px; }
.it-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.it-btn { padding: 6px 0; font-size: 16px; cursor: pointer; border-radius: var(--r-pill); background: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; transition: transform .05s; }
.it-btn.buy { border: 1.7px solid var(--green); color: var(--green-ink); }
.it-btn.buy:hover:not(:disabled) { background: var(--green-bg); }
.it-btn.sell { border: 1.7px solid var(--red); color: var(--red-ink); }
.it-btn.sell:hover:not(:disabled) { background: var(--red-bg); }
.it-btn:active:not(:disabled) { transform: translateY(1px); }
.it-btn:disabled { opacity: .45; cursor: not-allowed; }
.it-in { width: 100%; min-width: 0; padding: 5px 4px; text-align: center; font-size: 15px; border: 1.5px dashed var(--blue); border-radius: 8px; background: #fffdf6; outline: none; }
.it-foot { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; border-top: 1.4px solid rgba(35,33,29,.45); }
.it-foot > div { padding: 6px 4px 0; display: flex; flex-direction: column; min-width: 0; }
.it-foot > div + div { border-left: 1px dashed rgba(35,33,29,.3); padding-left: 8px; }
.it-foot span { font-size: 12px; color: var(--ink-2); }
.it-foot b { font-weight: normal; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-foot small { font-size: 11px; }
.it-note { margin-top: 8px; font-size: 12px; color: var(--pencil); }

.ax-card { cursor: pointer; }

.chart-bar .cmode { margin-left: 10px; padding-left: 10px; border-left: 1.4px dashed rgba(35,33,29,.35); }
.chart-bar { flex-wrap: wrap; }

/* ---- rounds ---- */
.round-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.6px solid var(--ink); border-radius: 4px 8px 5px 9px; background: var(--paper-2, #f6f0e2); color: var(--ink); text-decoration: none; font-family: var(--font-marker); font-size: 16px; box-shadow: 2px 2px 0 rgba(35,33,29,.25); white-space: nowrap; }
.round-chip .ico { width: 16px; height: 16px; }
.round-chip.hot { background: #fde7c7; border-color: #b8620b; color: #8a3f00; animation: chip-pulse 1.2s ease-in-out infinite; }
@keyframes chip-pulse { 50% { box-shadow: 2px 2px 0 rgba(184,98,11,.35), 0 0 0 4px rgba(184,98,11,.12); } }
.side-round { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 8px; margin-bottom: 10px; border: 1.4px dashed var(--ink-2); border-radius: 6px; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.35); }
.side-round span { font-size: 11px; letter-spacing: .06em; color: var(--ink-2); }
.side-round b { font-family: var(--font-marker); font-weight: normal; font-size: 18px; }
.busted-note { margin-top: 10px; padding: 7px 8px; border: 2px solid var(--red); color: var(--red-ink); background: var(--red-bg); font-family: var(--font-marker); font-size: 17px; line-height: 1.1; transform: rotate(-2deg); text-align: center; border-radius: 4px; }
.busted-note span { font-family: var(--font-hand, inherit); font-size: 12px; letter-spacing: 0; }
.round-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.round-clock { text-align: center; padding: 18px 12px; }
.round-clock .lbl { font-size: 13px; letter-spacing: .12em; color: var(--ink-2); }
.round-clock .big-cd { font-family: var(--font-marker); font-size: clamp(46px, 8vw, 78px); line-height: 1; margin: 8px 0 6px; }
.round-clock .when { color: var(--ink-2); font-size: 15px; }
.prize-split { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.prize-split .place { min-width: 86px; padding: 8px 10px; border: 1.6px solid var(--ink); border-radius: 5px 9px 6px 10px; background: rgba(255,255,255,.45); text-align: center; box-shadow: 2px 2px 0 rgba(35,33,29,.2); }
.prize-split .place b { display: block; font-family: var(--font-marker); font-weight: normal; font-size: 26px; }
.prize-split .place.p1 { transform: rotate(-2deg); border-color: #b8860b; } .prize-split .place.p2 { transform: rotate(1.5deg); } .prize-split .place.p3 { transform: rotate(-1deg); border-color: #9a5b2e; }
.round-rules li { margin: 4px 0; }
.past-round { padding: 12px 0; border-bottom: 1.4px dashed rgba(35,33,29,.25); }
.past-round:last-child { border-bottom: 0; }
.past-round .hd { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.winner-row { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) 90px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 4px 0; }
.winner-row .w { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.winner-row.me { background: rgba(77,111,168,.10); border-radius: 4px; }
@media (max-width: 760px) {
  .round-hero { grid-template-columns: minmax(0, 1fr); }
  .winner-row { grid-template-columns: 36px minmax(0, 1fr) 70px; }
  .winner-row .w, .winner-row .pz { grid-column: 2 / -1; }
  .round-chip { font-size: 14px; padding: 4px 8px; }
}

/* ---- coin box (sidebar) + footer X ---- */
.side-coin { margin: 14px 2px 4px; padding: 9px 10px; border: 1.6px solid var(--ink); border-radius: 4px 9px 5px 8px; background: rgba(255,255,255,.45); box-shadow: 2px 2px 0 rgba(35,33,29,.2); transform: rotate(1deg); }
.side-coin .coin-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-marker); font-size: 18px; }
.side-coin .coin-x { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.4px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--paper, #f3ecdc); }
.side-coin .coin-x .ico { width: 14px; height: 14px; }
.side-coin .coin-ca { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 6px; padding: 4px 6px; border: 1.2px dashed var(--ink-2); border-radius: 4px; background: transparent; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink); cursor: pointer; }
.side-coin .coin-ca .ico { width: 13px; height: 13px; margin-left: auto; }
.side-coin .coin-buy { display: block; margin-top: 6px; font-size: 14px; }
.foot-x { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: inherit; }
.foot-x .ico { width: 14px; height: 14px; }
.round-coin { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ---- header corner: contract address + crumpled-paper X ---- */
.ca-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.6px dashed var(--ink); border-radius: 5px 9px 4px 8px; background: rgba(255,255,255,.5); color: var(--ink); font-family: var(--font-hand); font-size: 15px; white-space: nowrap; cursor: pointer; transform: rotate(-1.5deg); box-shadow: 2px 2px 0 rgba(35,33,29,.18); flex-shrink: 0; transition: transform .15s; }
.ca-chip:hover { transform: rotate(0deg) translateY(-1px); }
.ca-chip .ca-lbl { font-family: var(--font-marker); font-size: 15px; }
.ca-chip .ca-val { color: var(--ink-2); }
.ca-chip:not(.soon) .ca-val { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--ink); }
.ca-chip.soon { cursor: default; }
.ca-chip.soon .ca-val { font-style: italic; }
.ca-chip .ico { width: 14px; height: 14px; }
.x-paper { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; perspective: 220px; text-decoration: none; }
.x-paper img { --rx: 0deg; --ry: 0deg; --sx: 0px; --sy: 2px; --lift: 0px; --sc: 1;
  width: 36px; height: 36px; display: block; cursor: pointer; will-change: transform;
  filter: drop-shadow(0 0 .8px rgba(50,32,10,.85)) drop-shadow(0 0 1.5px rgba(50,32,10,.35)) drop-shadow(calc(var(--sx) + 1px) calc(var(--sy) + 2px) 3px rgba(55,38,15,.6));
  transform: translateY(var(--lift)) rotate(6deg) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
  transition: transform .18s ease-out, filter .18s ease-out; }
.x-paper img.lift { --lift: -2px; --sc: 1.14; filter: drop-shadow(0 0 .8px rgba(50,32,10,.85)) drop-shadow(0 0 1.5px rgba(50,32,10,.35)) drop-shadow(calc(var(--sx) + 1px) calc(var(--sy) + 5px) 6px rgba(55,38,15,.55)); }
.x-paper.soon img { opacity: .85; }

/* ---- PnL tracker ---- */
.pnl-btn.on { background: rgba(35,33,29,.1); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pnl-btn svg { width: 26px; height: 26px; }
.pnl-card { position: fixed; z-index: 150; width: 330px; padding: 12px 16px 10px; border: 2px solid var(--ink); border-radius: 6px 12px 7px 11px;
  background-color: var(--paper, #f3ecdc); background-image: var(--grain), repeating-linear-gradient(transparent 0 25px, rgba(77,111,168,.13) 25px 26px);
  box-shadow: 4px 5px 0 rgba(35,33,29,.28), 0 10px 30px rgba(35,33,29,.18); cursor: grab; user-select: none; touch-action: none; transform: rotate(-.6deg); }
.pnl-card.dragging { cursor: grabbing; transform: rotate(0deg) scale(1.02); }
.pnl-card::before { content: ''; position: absolute; left: 50%; top: -9px; width: 64px; height: 16px; margin-left: -32px; background: rgba(230,214,160,.8); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pnl-card .pnl-close { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; opacity: .55; }
.pnl-card .pnl-close:hover { opacity: 1; }
.pnl-card .pnl-close svg { width: 14px; height: 14px; }
.pnl-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.pnl-cell b { display: block; font-family: var(--font-marker); font-weight: normal; font-size: 27px; line-height: 1.05; white-space: nowrap; }
.pnl-cell span { font-size: 13px; color: var(--ink-2); letter-spacing: .04em; }
.pnl-cell.r { text-align: right; }
.pnl-cell .pnl-pct { font-style: normal; margin-left: 2px; }
.pnl-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-marker); font-size: 11px; letter-spacing: .1em; color: var(--ink-2); }
.pnl-mid .logo-doodle { width: 34px; height: 34px; }
.pnl-foot { margin-top: 6px; padding-top: 5px; border-top: 1.2px dashed rgba(35,33,29,.3); font-size: 13px; color: var(--ink-2); text-align: center; }
.pnl-card.up { border-color: var(--green); } .pnl-card.down { border-color: var(--red); }

@media (max-width: 1440px) { .ca-chip { font-size: 14px; padding: 4px 8px; } }
@media (max-width: 960px) {
  .ca-chip .ca-val { display: none; }
  .ca-chip.soon .ca-lbl::after { content: ' soon'; font-family: var(--font-hand); font-style: italic; font-size: 13px; }
  .pnl-card { width: min(330px, calc(100vw - 16px)); }
  .pnl-cell b { font-size: 22px; }
}
.search { width: auto; flex: 0 1 300px; min-width: 150px; }
@media (max-width: 960px) {
  .search { flex-basis: 100%; min-width: 0; }
  .ca-chip, .x-paper { order: 4; }
  .x-paper { width: 38px; height: 38px; }
  .x-paper img { width: 30px; height: 30px; }
  .nb-header .ccy-btn { padding: 3px 6px; }
}
.top-tabs { flex: 0 1 auto; min-width: 0; overflow: hidden; }
@media (max-width: 1600px) { .top-tabs { display: none; } }
@media (max-width: 960px) {
  .nb-header { gap: 6px; }
  .ca-chip { padding: 3px 7px; }
  .ca-chip .ico { display: none; }
}
/* tabs that don't fit wrap onto a hidden second line, so a tab is never cut in half */
.top-tabs { flex-wrap: wrap; max-height: 38px; align-content: flex-start; }