/* =========================================================
   IMORTAL — one stylesheet.

   The look: daylight. Warm paper instead of obsidian, rounded friendly type,
   and a small band of bright colours (sun, mint, sky, bubblegum) that repeat
   across crests, tags and accents. Depth comes from soft coloured shadows,
   never from black.

   Structure: tokens, primitives, then the four views (wizard, market, token,
   create). Anything that appears once lives with its view.
   ========================================================= */

:root {
  /* Surfaces, lightest first. Cards sit ON the page rather than being cut out
     of it — the page is the warm one, the panels are cleaner. */
  --bg: #fff7ed;
  --surface-1: #ffffff;
  --surface-2: #fff5e9;
  --surface-3: #ffe9d4;
  --surface-4: #ffd9b5;

  --line: rgba(124, 74, 32, .14);
  --line-strong: rgba(124, 74, 32, .26);
  --line-accent: rgba(255, 122, 61, .55);

  --text-1: #3a2417;
  --text-2: rgba(58, 36, 23, .68);
  --text-3: rgba(58, 36, 23, .46);

  --accent: #ff7a3d;
  --accent-soft: #ff9f6b;
  --accent-deep: #ef5f22;
  --accent-ink: #b83c05;
  --accent-wash: rgba(255, 122, 61, .14);

  --sky: #2ea8e0;
  --grape: #a35ce8;
  --bubble: #ff5fa2;

  --up: #17b978;
  --up-ink: #0a6b45;
  --down: #f2494f;
  --down-ink: #a01319;
  --warn: #e39b09;
  --warn-ink: #8a5c00;

  --shadow-sm: 0 2px 6px rgba(124, 74, 32, .07);
  --shadow: 0 8px 22px rgba(124, 74, 32, .10);
  --shadow-lg: 0 18px 44px rgba(124, 74, 32, .16);

  --radius-lg: 24px;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-pill: 999px;

  --fast: .14s;
  --base: .22s;
  --slow: .4s;
  --ease: cubic-bezier(.22, .8, .28, 1);

  --display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --header-h: 66px;
  --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Two soft washes of colour high on the page, so daylight has a direction and
   the top of the site is never a flat block of cream. Fixed: it is the room. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(255, 179, 71, .38), transparent 62%),
    radial-gradient(760px 460px at 88% -4%, rgba(93, 200, 245, .30), transparent 60%),
    radial-gradient(620px 420px at 60% 8%, rgba(255, 95, 162, .12), transparent 65%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; position: relative; z-index: 1; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.up { color: var(--up-ink); }
.down { color: var(--down-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================ top bar === */

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 247, 237, .82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.3);
}
.topbar-inner {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
  display: flex; align-items: center; gap: 26px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #ffb347, var(--accent-deep));
  font-family: var(--display); font-size: 16px; font-weight: 600; color: #fff;
  box-shadow: 0 4px 12px rgba(255, 122, 61, .45);
}
.brand-name {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-1);
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav a {
  padding: 7px 14px; border-radius: var(--radius-pill);
  color: var(--text-2); font-size: 13.5px; font-weight: 700;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav a:hover { color: var(--accent-ink); background: var(--surface-3); }
.nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-wash); }

.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.chain-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-2); font-size: 12px; font-weight: 700;
}
.chain-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--up); box-shadow: 0 0 0 3px rgba(23, 185, 120, .2);
}
.chain-pill.bad::before { background: var(--down); box-shadow: 0 0 0 3px rgba(242, 73, 79, .2); }

/* ============================================================= buttons === */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 19px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-1); color: var(--text-1);
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.btn:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  border-color: transparent;
  background: linear-gradient(145deg, #ffa14d, var(--accent-deep));
  color: #fff; box-shadow: 0 8px 20px rgba(255, 122, 61, .34);
}
.btn-primary:hover { background: linear-gradient(145deg, #ffb266, var(--accent)); box-shadow: 0 12px 26px rgba(255, 122, 61, .42); }
.btn-ghost { background: transparent; border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-accent); }
.btn-buy { border-color: transparent; background: var(--up); color: #fff; box-shadow: 0 8px 20px rgba(23, 185, 120, .3); }
.btn-buy:hover { background: #13a86c; }
.btn-sell { border-color: transparent; background: var(--down); color: #fff; box-shadow: 0 8px 20px rgba(242, 73, 79, .28); }
.btn-sell:hover { background: #e13a40; }
.btn-lg { height: 50px; width: 100%; border-radius: var(--radius); font-size: 15.5px; }
.btn-sm { height: 32px; padding: 0 13px; font-size: 12.5px; }

.wallet-btn[data-state="connected"] { background: var(--surface-1); border-color: var(--line-strong); }
.wallet-btn[data-state="connected"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--up); box-shadow: 0 0 0 3px rgba(23, 185, 120, .2);
}

/* ============================================================== panels === */

.panel {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel-pad { padding: 26px; }
.panel + .panel { margin-top: 16px; }
.panel-title {
  margin: 0 0 4px;
  font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.005em;
}
.panel-sub { margin: 0 0 20px; color: var(--text-2); font-size: 13.5px; }

.eyebrow {
  display: block; margin-bottom: 10px;
  color: var(--accent-ink); font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.tag.accent { background: var(--accent-wash); color: var(--accent-ink); }
.tag.good { background: rgba(23, 185, 120, .16); color: var(--up-ink); }
.tag.warn { background: rgba(227, 155, 9, .18); color: var(--warn-ink); }

.note {
  margin-top: 14px; padding: 13px 15px;
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6;
}
.note.info { background: var(--surface-2); color: var(--text-2); }
.note.warn { background: rgba(227, 155, 9, .14); color: var(--warn-ink); }
.note.error { background: rgba(242, 73, 79, .12); color: var(--down-ink); }
.note.success { background: rgba(23, 185, 120, .13); color: var(--up-ink); }
.note a { color: inherit; text-decoration: underline; font-weight: 700; }

.spinner {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.board-state { padding: 60px 20px; text-align: center; color: var(--text-2); }
.board-state strong { display: block; margin-bottom: 6px; color: var(--text-1); font-family: var(--display); font-size: 17px; font-weight: 600; }

/* =============================================================== hero === */

.hero { padding: 62px 0 40px; }
.hero h1 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(36px, 5.4vw, 60px);
  font-weight: 600; line-height: 1.06; letter-spacing: -.02em;
  max-width: 15ch;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-deep), var(--bubble) 55%, var(--grape));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 0; max-width: 62ch; color: var(--text-2); font-size: 16.5px; line-height: 1.68; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-fact {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-1); box-shadow: var(--shadow-sm); font-size: 13px;
}
.hero-fact b { font-family: var(--mono); font-weight: 500; color: var(--accent-ink); }
.hero-fact span { color: var(--text-3); font-size: 11.5px; font-weight: 700; }

/* ============================================================= wizard === */

.wizard { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 80px; }
@media (max-width: 900px) { .wizard { grid-template-columns: 1fr; gap: 22px; } }

.rail { position: sticky; top: calc(var(--header-h) + 26px); display: grid; gap: 4px; }
@media (max-width: 900px) {
  .rail { position: static; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
  .rail-step small { display: none; }
}

.rail-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 13px; border-radius: var(--radius);
  color: var(--text-3);
  transition: background var(--base) var(--ease), color var(--base) var(--ease);
}
.rail-step b { display: block; font-size: 13.5px; font-weight: 800; }
.rail-step small { display: block; font-size: 11.5px; color: var(--text-3); }
.rail-step .num {
  flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
}
.rail-step[data-state="active"] { background: var(--surface-1); color: var(--text-1); box-shadow: var(--shadow-sm); }
.rail-step[data-state="active"] .num { border-color: transparent; background: linear-gradient(145deg, #ffa14d, var(--accent-deep)); color: #fff; }
.rail-step[data-state="done"] { color: var(--text-2); }
.rail-step[data-state="done"] .num { border-color: transparent; background: var(--up); color: #fff; }
.rail-step[data-state="done"] .num::after { content: "✓"; }
.rail-step[data-state="done"] .num span { display: none; }

/* --- venue picker ------------------------------------------------------- */

.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 780px) { .venues { grid-template-columns: 1fr; } }

.venue {
  position: relative; display: block; cursor: pointer; text-align: left;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color var(--base) var(--ease), background var(--base) var(--ease),
              transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.venue:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.venue[aria-pressed="true"] {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(255, 179, 71, .28), var(--surface-1) 62%);
  box-shadow: 0 10px 26px rgba(255, 122, 61, .22);
}
.venue-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.venue-name { font-family: var(--display); font-size: 17px; font-weight: 600; }
.venue p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.venue-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; gap: 14px; font-size: 11.5px; color: var(--text-3); }
.venue-foot b { color: var(--text-2); font-family: var(--mono); font-weight: 500; }

/* --- the name field ----------------------------------------------------- */

.field { margin-top: 6px; }
.field label { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 800; }
.field .help { margin: 8px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.6; }

.input {
  width: 100%; height: 54px; padding: 0 17px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-1);
  font-family: var(--mono); font-size: 17px; letter-spacing: -.01em;
  outline: none;
  transition: border-color var(--base) var(--ease), background var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.input::placeholder { color: var(--text-3); letter-spacing: 0; }
.input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--accent-wash); }
.input[aria-invalid="true"] { border-color: var(--down); }

textarea.input { height: auto; min-height: 88px; padding: 13px 16px; font-family: var(--body); font-size: 14.5px; line-height: 1.6; resize: vertical; }
select.input, input.input.plain { font-family: var(--body); font-size: 15px; font-weight: 600; }
.input-sm { height: 46px; font-size: 15px; }

.field-msg { margin: 8px 0 0; font-size: 12.5px; min-height: 18px; font-weight: 700; }
.field-msg.bad { color: var(--down-ink); }
.field-msg.good { color: var(--up-ink); }

/* A live preview of the line that will end up on the explorer. Seeing it
   spelled out is what makes "the name is really yours" believable. */
.name-preview {
  margin-top: 16px; padding: 16px 18px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--text-2);
  overflow-x: auto;
}
.name-preview .kw { color: var(--grape); }
.name-preview .nm { color: var(--accent-ink); font-weight: 500; }

/* --- terms table -------------------------------------------------------- */

.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 700px) { .terms { grid-template-columns: repeat(2, 1fr); } }
.terms > div { padding: 16px; background: var(--surface-2); }
.terms dt { margin: 0 0 5px; color: var(--text-3); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.terms dd { margin: 0; font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--accent-ink); }

/* --- deploy log --------------------------------------------------------- */

.steps-out { margin-top: 18px; display: grid; gap: 8px; }
.step-line {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 13px;
}
.step-line .dot { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; }
.step-line[data-state="wait"] .dot { border: 1px solid var(--line-strong); color: var(--text-3); }
.step-line[data-state="busy"] .dot { border: 1px solid var(--accent); color: var(--accent-ink); }
.step-line[data-state="done"] .dot { background: var(--up); color: #fff; }
.step-line[data-state="fail"] .dot { background: var(--down); color: #fff; }
.step-line .body { min-width: 0; }
.step-line b { display: block; font-weight: 800; }
.step-line small { display: block; margin-top: 2px; color: var(--text-3); font-size: 11.5px; word-break: break-all; }
.step-line a { color: var(--accent-ink); text-decoration: underline; }

/* ============================================================= market === */

.market-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 36px 0 20px; }
.market-head h2 { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -.01em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.card {
  display: block; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1); box-shadow: var(--shadow-sm);
  transition: border-color var(--base) var(--ease), transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.card:hover { border-color: var(--line-accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.crest {
  position: relative; overflow: hidden;
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 15px; font-weight: 600; color: #fff;
  box-shadow: var(--shadow-sm);
}
.card-name { min-width: 0; }
.card-name b { display: block; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-name span { display: block; color: var(--text-3); font-size: 11.5px; font-family: var(--mono); }
.card-price { font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); }

/* ============================================================== token === */

.token-page { padding: 26px 0 80px; }
.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 20px; padding: 0; border: 0; cursor: pointer;
  background: none; color: var(--text-2);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
}
.back-link:hover { color: var(--accent-ink); }

.token-layout { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 18px; align-items: start; }
@media (max-width: 1040px) { .token-layout { grid-template-columns: 1fr; } }

.token-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px; }
.token-ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.token-crest { position: relative; overflow: hidden; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-family: var(--display); font-size: 22px; font-weight: 600; color: #fff; box-shadow: var(--shadow); }
.token-ident h1 { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -.015em; }
.token-sub { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); font-size: 12.5px; }
.token-price { text-align: right; }
.token-price .big { font-family: var(--mono); font-size: 31px; font-weight: 500; letter-spacing: -.03em; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
@media (max-width: 620px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-row > div { padding: 16px 24px; border-right: 1px solid var(--line); }
.stat-row > div:last-child { border-right: 0; }
.stat-row span { display: block; color: var(--text-3); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stat-row strong { display: block; margin-top: 4px; font-family: var(--mono); font-size: 16px; font-weight: 500; }

.tabs { display: flex; gap: 3px; padding: 4px; margin-bottom: 18px; border-radius: var(--radius-pill); background: var(--surface-3); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto; height: 33px; padding: 0 17px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: transparent; color: var(--text-2);
  font-size: 12.5px; font-weight: 800;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.tabs button[aria-selected="true"] { background: var(--surface-1); color: var(--accent-ink); box-shadow: var(--shadow-sm); }

/* --- trade panel -------------------------------------------------------- */

.trade-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-3); margin-bottom: 16px; }
.trade-switch button {
  height: 37px; border: 0; cursor: pointer; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 800;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.trade-switch button[aria-pressed="true"][data-side="buy"] { background: var(--up); color: #fff; }
.trade-switch button[aria-pressed="true"][data-side="sell"] { background: var(--down); color: #fff; }

.amount-field { padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.amount-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.amount-field .top { display: flex; align-items: center; gap: 10px; }
.amount-field input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--mono); font-size: 25px; font-weight: 500; letter-spacing: -.03em; }
.amount-field input::placeholder { color: var(--text-3); }

.amount-asset {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  height: 31px; padding: 0 13px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--surface-4); color: var(--text-1);
  font-family: var(--body); font-size: 12.5px; font-weight: 800;
  transition: background var(--fast) var(--ease);
}
.amount-asset:hover { background: var(--accent-soft); color: #fff; }
.amount-asset.is-static { cursor: default; }
.amount-asset .swap-mark { opacity: .6; font-size: 11px; }
.amount-alt { margin-top: 7px; min-height: 16px; color: var(--text-3); font-size: 12px; }
.amount-field .bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; color: var(--text-3); font-size: 12px; }
.amount-field .bottom button { border: 0; cursor: pointer; background: transparent; color: var(--accent-ink); font-size: 12px; font-weight: 800; }

.chips { display: grid; gap: 6px; margin-top: 10px; }
.chips.chips-3 { grid-template-columns: repeat(3, 1fr); }
.chips.chips-4 { grid-template-columns: repeat(4, 1fr); }
.chips button {
  height: 32px; border: 1px solid var(--line); cursor: pointer;
  border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-2);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chips button:hover { background: var(--accent-wash); color: var(--accent-ink); border-color: var(--line-accent); }

.receive { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 17px; border-radius: var(--radius); background: var(--surface-2); }
.receive span { color: var(--text-3); font-size: 12px; }
.receive strong { font-family: var(--mono); font-size: 17px; font-weight: 500; text-align: right; word-break: break-all; }

.slip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--text-3); font-size: 12.5px; }
.slip input { width: 62px; height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-1); text-align: right; outline: none; font-family: var(--mono); }

/* --- trade history ------------------------------------------------------ */

.trades-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--shadow-sm); }
.trades-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.trades-table th {
  padding: 11px 14px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-3); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.trades-table td { padding: 11px 14px; white-space: nowrap; border-bottom: 1px solid var(--line); font-family: var(--mono); }
.trades-table tbody tr:last-child td { border-bottom: 0; }
.trades-table tbody tr:hover { background: var(--surface-2); }
.trades-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.trades-table .when { text-align: right; color: var(--text-2); }
.trades-table .when a, .trade-who { color: inherit; text-decoration: none; }
.trades-table .when a:hover, .trade-who:hover { text-decoration: underline; }
.trade-side { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-pill); font-family: var(--body); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.trade-side.buy { background: rgba(23, 185, 120, .16); color: var(--up-ink); }
.trade-side.sell { background: rgba(242, 73, 79, .14); color: var(--down-ink); }

.detail-foot { margin: 11px 0 0; color: var(--text-3); font-size: 11px; line-height: 1.5; }

@media (max-width: 640px) {
  .trades-wrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  .trades-table, .trades-table tbody, .trades-table tr, .trades-table td { display: block; width: 100%; }
  .trades-table thead { display: none; }
  .trades-table tr {
    display: grid; gap: 2px 10px; padding: 12px 14px; margin-bottom: 8px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "side amount" "who paid" "who time";
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1);
  }
  .trades-table td { padding: 0; border: 0; white-space: nowrap; }
  .trades-table td:nth-child(1) { grid-area: side; }
  .trades-table td:nth-child(2) { grid-area: amount; text-align: right; font-size: 13px; font-weight: 600; }
  .trades-table td:nth-child(3) { grid-area: paid; text-align: right; font-size: 11.5px; color: var(--text-2); }
  .trades-table td:nth-child(4) { grid-area: who; font-size: 10.5px; color: var(--text-2); }
  .trades-table td:nth-child(5) { grid-area: time; text-align: right; font-size: 10.5px; }
  .trades-table td:nth-child(3)::before { content: "for "; color: var(--text-3); }
  .trades-table a, .trade-who { position: relative; display: inline-block; padding: 6px 0; }
}

/* ============================================================== toast === */

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; gap: 8px; justify-items: end; }
.toast {
  padding: 13px 17px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: rise .28s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================== misc === */

.pad-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.pad-row + .pad-row { margin-top: 8px; }
.pad-row b { font-family: var(--display); font-size: 15px; font-weight: 600; }
.pad-row code { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.pad-row .right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* The stock shortlist a pad is deployed with. Thirty of them, so the grid is
   scrollable rather than a page of its own, and each chip is a toggle. */
.stock-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px;
  margin-top: 10px; max-height: 268px; overflow-y: auto;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.stock-chip {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-1); color: var(--text-1);
  font: inherit; transition: border-color .12s, background .12s, transform .12s;
}
.stock-chip:hover { border-color: var(--line-accent); transform: translateY(-1px); }
.stock-chip b { display: block; font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.stock-chip small {
  display: block; margin-top: 1px; color: var(--text-3); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stock-chip[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-wash);
}
.stock-chip[aria-pressed="true"] b { color: var(--accent-ink); }

/* What one of your own stock pads accepts, and how to add to it. Sits under
   its pad as a continuation of that row, not as a row of its own. */
.pad-stocks { display: block; margin-top: 6px; background: var(--surface-1); }
.pad-stocks-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pad-stocks-summary { font-size: 13px; color: var(--text-2); }
.pad-stocks-summary .tag { margin-right: 4px; }
.pad-stocks-picker { margin-top: 12px; }
.pad-stocks-picker .stock-pick { max-height: 210px; }
.pad-stocks-picker .btn { margin-top: 10px; }
.pad-stock-search { width: 100%; }

/* The row that asks a placeholder pad what it is really called. Set apart from
   the pad above it — it is a question, not another pad. */
.pad-naming { margin-top: 6px; border-style: dashed; background: var(--surface-1); }
.pad-naming b { font-size: 14px; }
.pad-naming code { font-family: var(--body); font-size: 12px; }
.input-sm { width: 190px; padding: 8px 11px; font-size: 13px; }
[data-naming-msg] { margin: 6px 2px 0; }

footer {
  margin-top: 60px; padding: 30px 0 44px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; line-height: 1.7;
}
footer a { color: var(--accent-ink); text-decoration: underline; }

/* ============================================================ mobile === */

/* These live at the end on purpose: the rail and topbar rules above are
   written for the wide layout, and at equal specificity the last one wins.
   Earlier they sat next to their component and were quietly overridden. */
@media (max-width: 900px) {
  .rail-step small { display: none; }
  .rail-step { padding: 10px; }
  .rail-step b { font-size: 12.5px; }
}

@media (max-width: 720px) {
  :root { --header-h: 60px; }
  .container, .topbar-inner { width: calc(100% - 28px); }

  /* The bar carries brand + wallet; the routes move to their own scrollable
     line underneath, which is the only way three pills and a wallet button
     fit a 360px phone without shrinking the tap targets. */
  .topbar { height: auto; padding: 9px 0; }
  .topbar-inner { flex-wrap: wrap; gap: 9px 10px; }
  .nav {
    order: 3; width: 100%; margin-left: 0; gap: 6px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 1 0 auto; text-align: center; }
  .topbar-end { gap: 8px; }
  .chain-pill { display: none; }

  .hero { padding: 34px 0 26px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); max-width: none; }
  .hero p { font-size: 15px; }
  .panel-pad { padding: 20px 17px; }
  .market-head { padding: 26px 0 16px; }
  .market-head h2 { font-size: 25px; }
  .token-head { padding: 18px; }
  .stat-row > div { padding: 13px 18px; }
  .toasts { right: 12px; left: 12px; bottom: 12px; justify-items: stretch; }

  /* A text box and a button beside a sentence do not fit a phone; stack them
     and let the box take the width it needs. */
  .pad-naming { flex-direction: column; align-items: stretch; gap: 11px; }
  .pad-naming .right { width: 100%; }
  .pad-naming .input-sm { flex: 1 1 auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}