/* =========================================================
   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;
  /* The bar is sticky, so anything scrolled to would otherwise stop underneath
     it — on a phone that is a third of the screen, and the thing you asked to
     see is the part that is hidden. */
  scroll-padding-top: calc(var(--header-h) + 14px);
}

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: 34px; height: 34px; flex: none;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(74, 38, 16, .28));
  transition: transform var(--fast) var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.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 {
  display: inline-flex; align-items: center;
  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); }
.nav-icon { display: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-nav { display: none; }

.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-switch { text-decoration: none; opacity: .75; }
.chain-switch:hover { opacity: 1; }
.chain-switch::before { display: none; }
.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;
}
/*
   A chip whose contents are somebody's own writing, not a label of ours.

   `.tag` shouts by design — "VERIFIED", "V4 · ETH", venue names — and that is
   right for words this site chose. A ticker is not one of those: it is minted
   into the token contract exactly as it was typed, with no owner and no setter
   to change it afterwards, so displaying it in a case its creator did not choose
   makes the site disagree with the chain.
*/
.tag.literal { letter-spacing: normal; text-transform: none; }

.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; }

/* --- create studio ------------------------------------------------------ */

.create-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  max-width: 1100px; margin: 0 auto; padding: 48px 0 30px;
}
.create-hero .eyebrow { margin-bottom: 9px; }
.create-hero h1 {
  margin: 0; font-family: var(--display); font-size: clamp(36px, 5vw, 54px);
  font-weight: 600; line-height: 1.02; letter-spacing: -.025em;
}
.create-hero h1 em { color: var(--accent-deep); font-style: normal; }
.create-hero p { max-width: 610px; margin: 12px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.65; }
.create-hero-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 430px; }
.create-hero-facts span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .72); color: var(--text-2); font-size: 11px; font-weight: 800;
  box-shadow: var(--shadow-sm); backdrop-filter: blur(10px);
}
.create-hero-facts b { color: var(--accent-ink); font-family: var(--mono); font-weight: 500; }

.create-layout {
  display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 24px;
  align-items: start; max-width: 1100px; margin: 0 auto; padding-bottom: 90px;
}
.create-sidebar { position: sticky; top: calc(var(--header-h) + 22px); display: grid; gap: 14px; }
.create-progress, .create-allocation {
  padding: 19px; border: 1px solid var(--line); border-radius: 20px;
  background: rgba(255, 255, 255, .82); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px);
}
.create-progress > .eyebrow, .create-allocation > .eyebrow { margin-bottom: 15px; }
.create-progress-step { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 5px 0 17px; }
.create-progress-step:last-child { padding-bottom: 2px; }
.create-progress-step:not(:last-child)::after {
  content: ""; position: absolute; top: 31px; bottom: 1px; left: 12px; width: 1px; background: var(--line-strong);
}
.create-progress-step > span {
  position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center;
  width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface-1); color: var(--text-3); font-family: var(--mono); font-size: 10px;
}
.create-progress-step.is-active > span { border-color: transparent; background: var(--accent); color: #fff; box-shadow: 0 5px 12px rgba(255, 122, 61, .25); }
.create-progress-step b { display: block; color: var(--text-1); font-size: 12.5px; }
.create-progress-step small { display: block; margin-top: 1px; color: var(--text-3); font-size: 10.5px; line-height: 1.45; }

.allocation-bar { display: grid; grid-template-columns: 1fr 3fr; gap: 3px; height: 8px; overflow: hidden; border-radius: var(--radius-pill); }
.allocation-bar span:first-child { background: linear-gradient(90deg, #ffad64, var(--accent)); }
.allocation-bar span:last-child { background: linear-gradient(90deg, #29c78b, #14a66f); }
.allocation-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.allocation-labels b { display: block; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.allocation-labels small { color: var(--text-3); font-size: 10.5px; }
.create-allocation > p { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 10.5px; line-height: 1.55; }

.create-form-card { overflow: hidden; border-radius: 24px; box-shadow: 0 16px 44px rgba(124, 74, 32, .10); }
.create-section { padding: 30px 32px; border-bottom: 1px solid var(--line); }
.create-section-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; margin-bottom: 23px; }
.create-section-number {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-accent); border-radius: 13px;
  background: linear-gradient(145deg, #fff, var(--accent-wash)); color: var(--accent-ink);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
}
.create-section-head .eyebrow { margin: 0 0 3px; font-size: 9.5px; }
.create-section-head h2 { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.create-section-head p { margin: 4px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.55; }
.create-section .field { margin-top: 0; }
.create-field-grid, .create-identity-grid, .create-links-grid { display: grid; gap: 14px; }
.create-field-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.create-identity-grid { grid-template-columns: minmax(0, 1.65fr) minmax(170px, .65fr); }
.create-links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.create-form-card .field label { margin-bottom: 7px; color: var(--text-2); font-size: 11px; letter-spacing: .025em; }
.create-form-card .input { height: 50px; border-radius: 13px; background: #fffaf4; }
.create-form-card textarea.input { height: auto; min-height: 96px; }
/* ------------------------------------------------------------------ airdrop */

.airdrop-card { margin-top: 16px; }
.airdrop-head h2 { margin: 4px 0 6px; font-family: var(--display); font-size: 22px; }
.airdrop-head p { margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.65; }
.airdrop-shares {
  display: grid; gap: 10px; margin: 16px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.share-chip {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--surface-2); color: var(--text-1); cursor: pointer; text-align: left;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.share-chip b { font-size: 15px; font-weight: 800; }
.share-chip small { color: var(--text-3); font-size: 11.5px; }
.share-chip.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }
.share-chip-custom { gap: 6px; }
.share-chip-custom .input { height: 34px; padding: 0 10px; font-size: 13px; }
.airdrop-card textarea.input {
  height: auto; min-height: 132px; padding: 13px 15px;
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
}
.airdrop-card .btn-lg { margin-top: 12px; }

/* The seed venue's "make me one" affordance.

   `.linkish` is a <button>, and a button inside a `.field` stretches to the field's
   width with its label centred — which read as a stray link floating in the middle of
   the form rather than as an action belonging to the address box above it. Pinning it
   to the start puts it back under the field it belongs to, on every width. */
.field > .seed-mint-toggle { display: inline-block; align-self: flex-start; margin-top: 10px; text-align: left; }
.seed-mint {
  margin-top: 12px; padding: 14px;
  border: 1px dashed var(--line-strong); border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 245, 233, .75), rgba(255, 255, 255, .92));
}
.seed-mint-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.5fr) minmax(96px, .5fr); }
.seed-mint .field { margin-top: 0; }
.seed-mint .help { margin-bottom: 0; }
.seed-mint-go { width: 100%; margin-top: 12px; }

.create-artwork-field {
  margin-top: 18px !important; padding: 18px; border: 1px dashed var(--line-strong);
  border-radius: 16px; background: linear-gradient(145deg, rgba(255, 245, 233, .7), rgba(255, 255, 255, .9));
}
.create-artwork-field > label { color: var(--text-1) !important; }
.create-artwork-field .logo-drop { width: 78px; height: 78px; border-radius: 17px; background-color: #fff; }
.create-artwork-field .logo-picker { align-items: center; }
.create-artwork-field .logo-picker-text strong { font-size: 13px; }
.create-artwork-field .logo-alt { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }

.project-details { border: 1px solid var(--line); border-radius: 16px; background: #fffaf4; overflow: hidden; }
.project-details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none; color: var(--text-1); font-size: 12px; font-weight: 850;
  transition: background var(--fast) var(--ease);
}
.project-details > summary:hover { background: var(--surface-3); }
.project-details > summary::-webkit-details-marker { display: none; }
.project-details-title { display: inline-flex; align-items: center; gap: 8px; }
/* The only thing that says this panel opens, so it is not decoration: it turns
   with the panel and is the affordance a closed row otherwise has none of. */
.project-details-chevron {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--fast) var(--ease);
}
.project-details[open] > summary .project-details-chevron { transform: rotate(90deg); }
/* Filled fields hiding behind a shut panel is the one real cost of collapsing
   it, so the badge stops being a label and starts being a count. */
.project-details > summary small[data-meta-badge].filled {
  background: rgba(23, 185, 120, .14); color: #0f7a51;
}
@media (prefers-reduced-motion: reduce) {
  .project-details-chevron { transition: none; }
}
.project-details > summary small { padding: 3px 8px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-3); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.project-details[open] > summary { border-bottom: 1px solid var(--line); }
.project-details > .field, .project-details > .create-links-grid { margin-right: 16px; margin-left: 16px; }
.project-details > .field { margin-top: 16px; }
.project-details > .create-links-grid { margin-bottom: 16px; }
.create-meta-status.good {
  margin-top: 12px; padding: 10px 12px; border-radius: 11px;
  background: rgba(23, 185, 120, .10); font-size: 11px;
}

.create-submit-section { padding: 27px 32px 30px; background: linear-gradient(145deg, #fffaf5, #fff2e5); }
.create-submit-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.create-submit-copy .eyebrow { margin-bottom: 3px; }
.create-submit-copy h2 { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 600; }
.create-submit-copy p { max-width: 360px; margin: 0; color: var(--text-2); font-size: 11.5px; line-height: 1.55; text-align: right; }
.create-submit-section .btn-lg { height: 54px; border-radius: 14px; font-size: 15px; }
.create-submit-section #create-hint { margin-bottom: 0; text-align: center; font-size: 11px; }

@media (max-width: 960px) {
  .create-hero { align-items: flex-start; flex-direction: column; gap: 18px; }
  .create-hero-facts { justify-content: flex-start; max-width: none; }
  .create-layout { grid-template-columns: 1fr; }
  .create-sidebar { position: static; grid-template-columns: 1.4fr 1fr; }
  .create-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .create-progress > .eyebrow { grid-column: 1 / -1; }
  .create-progress-step { padding: 0; }
  .create-progress-step::after { display: none; }
}

@media (max-width: 720px) {
  .create-hero { padding: 30px 0 22px; }
  .create-hero h1 { font-size: 36px; }
  .create-hero p { font-size: 14px; }
  .create-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .create-hero-facts span { justify-content: center; padding: 8px 6px; text-align: center; font-size: 9.5px; }
  .create-sidebar { grid-template-columns: 1fr; }
  .create-allocation { display: none; }
  .create-progress { padding: 14px; }
  .create-progress > .eyebrow { margin-bottom: 3px; }
  .create-progress-step { gap: 7px; }
  .create-progress-step > span { width: 23px; height: 23px; border-radius: 7px; }
  .create-progress-step small { display: none; }
  .create-progress-step b { font-size: 10.5px; }
  .create-form-card { border-radius: 20px; }
  .create-section { padding: 23px 18px; }
  .create-section-head { grid-template-columns: 36px minmax(0, 1fr); gap: 11px; margin-bottom: 19px; }
  .create-section-number { width: 36px; height: 36px; border-radius: 11px; }
  .create-section-head h2 { font-size: 19px; }
  .create-section-head p { font-size: 11.5px; }
  .create-identity-grid, .create-links-grid { grid-template-columns: 1fr; }
  .create-artwork-field { padding: 14px; }
  .create-artwork-field .logo-picker { align-items: flex-start; }
  .create-artwork-field .logo-drop { width: 68px; height: 68px; }
  .create-submit-section { padding: 23px 18px 25px; }
  .create-submit-copy { align-items: flex-start; flex-direction: column; gap: 7px; }
  .create-submit-copy p { max-width: none; text-align: left; }
}

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

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

/*
  A heading over each run of venue cards, naming how that group charges for a trade.

  It spans the whole row so the cards below it read as belonging to it — `1 / -1` works
  on the three-column desktop grid and on the single-column mobile one without a second
  rule, because the grid is what changes, not this.
*/
.venue-group { grid-column: 1 / -1; margin: 10px 0 2px; }
.venue-group:first-child { margin-top: 0; }
.venue-group h3 {
  margin: 0; font-family: var(--display); font-size: 15px; font-weight: 600;
  color: var(--text-1); display: flex; align-items: center; gap: 10px;
}
.venue-group h3::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.venue-group p {
  margin: 6px 0 0; max-width: 70ch;
  color: var(--text-3); font-size: 12px; line-height: 1.6;
}
@media (max-width: 780px) {
  .venue-group { margin: 14px 0 0; }
  .venue-group p { font-size: 11.5px; }
}

.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; }
/* Folded away by default: eight cards of prose side by side is a wall, and the choice
   between venues is the label and the two facts in the foot. The reasoning is a click. */
.venue-blurb { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--line); }
.venue-blurb[hidden] { display: none; }
.venue-foot { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--text-3); }
.venue-foot b { color: var(--text-2); font-family: var(--mono); font-weight: 500; }
.venue-more {
  margin-left: auto; cursor: pointer; user-select: none;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-2); font-size: 11px; letter-spacing: .02em;
  transition: border-color var(--base) var(--ease), color var(--base) var(--ease);
}
.venue-more:hover, .venue-more:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }

/* --- 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; }
.mobile-select-trigger, .mobile-select-layer { display: none; }

.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); }
.field-msg.warn { color: var(--warn-ink); }

/* The creator's share of every launch, chosen once when a pad is deployed.
   Wider chips than the stock picker: each one carries two numbers, and the
   second — what is left as locked liquidity — is the half that matters. */
.share-pick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px;
}
.share-chip {
  cursor: pointer; text-align: center;
  padding: 10px 8px; 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;
}
.share-chip:hover { border-color: var(--line-accent); transform: translateY(-1px); }
.share-chip b { display: block; font-family: var(--display); font-size: 17px; font-weight: 600; }
.share-chip small { display: block; margin-top: 2px; color: var(--text-3); font-size: 10.5px; font-weight: 700; }
.share-chip[aria-checked="true"] {
  border-color: var(--accent); background: var(--accent-wash);
}
.share-chip[aria-checked="true"] b { color: var(--accent-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; }
/* Which pool shape a launch actually trades in — the one thing a card could not
   say before, and the only way to tell two pads on the same chain apart. */
.card-venue { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.card-venue span {
  display: inline-block; padding: 3px 9px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-2);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
/* Sits beside the venue tag and reads as money rather than as a label. */
.card-fees {
  display: inline-block; padding: 3px 9px;
  border: 1px solid var(--line-accent); border-radius: var(--radius-pill);
  background: var(--accent-wash); color: var(--accent-ink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}
.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); }

/* ============================================================ history === */

.history-head { padding-bottom: 14px; }
.history-tools { margin-bottom: 14px; }
.history-tools .input { max-width: 520px; }
.history-list { display: grid; gap: 14px; }
.history-card {
  padding: 19px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1); box-shadow: var(--shadow-sm);
}
.history-token { display: flex; align-items: center; gap: 12px; }
.history-token > div { min-width: 0; }
.history-token > .tag { margin-left: auto; flex: 0 0 auto; }
.history-logo {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-size: 16px; font-weight: 600;
}
.history-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.history-token h3 { margin: 0; font-size: 16px; }
.history-token h3 span { color: var(--text-3); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.history-token p { margin: 4px 0 0; color: var(--text-3); font-size: 12px; }
.history-description { margin: 14px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.history-data { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1px; margin: 15px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.history-data > div { min-width: 0; padding: 11px 13px; background: var(--surface-2); }
.history-data dt { margin-bottom: 5px; color: var(--text-3); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.history-data dd { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 11.5px; }
.history-data code, .history-url { min-width: 0; overflow: hidden; color: var(--text-2); font-family: var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.history-url { color: var(--accent-ink); text-decoration: underline; }
.copy-mini { flex: 0 0 auto; padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); cursor: pointer; background: var(--surface-1); color: var(--accent-ink); font-size: 10px; font-weight: 800; }
.history-actions { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 13px; }
.history-actions a { color: var(--accent-ink); font-size: 11.5px; font-weight: 800; text-decoration: underline; }
/* The claim that does not go through this site. Marked out because it is the one link
   here that moves somebody's tokens, and because it is the fallback when nothing else
   on this page works. */
.history-actions a.history-claim {
  padding: 3px 9px; border-radius: 999px; text-decoration: none;
  background: var(--accent); color: #fff;
}

@media (max-width: 700px) {
  .history-data { grid-template-columns: 1fr; }
  .history-token { align-items: flex-start; flex-wrap: wrap; }
  .history-token > .tag { margin-left: 62px; }
}

/* ============================================================== 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-project { margin: 0 24px 20px; padding: 14px 16px; border-radius: 14px; background: var(--cream-2); }
.token-project p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.token-project div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; }
.token-project a { color: var(--accent-soft); font-weight: 800; }
.token-markets { margin: 0 24px 20px; }
.token-markets-label {
  display: block;
  margin-bottom: 9px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.token-markets-links { display: flex; flex-wrap: wrap; gap: 9px; }
.token-market-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 11px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(81, 46, 25, .06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.token-market-link:hover {
  transform: translateY(-1px);
  border-color: var(--orange);
  box-shadow: 0 8px 20px rgba(235, 91, 36, .12);
}
.token-market-mark {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 900;
}
.token-market-link.uniswap .token-market-mark { background: #ff37c7; }
.token-market-link.gmgn .token-market-mark { background: #16181d; color: #b7ff38; }
.token-market-link.dexscreener .token-market-mark { background: #176bff; }
.token-market-arrow { color: var(--text-3); font-size: 13px; }
.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; }
.copy-ca {
  min-height: 28px; padding: 4px 9px; border: 1px solid var(--line-accent);
  border-radius: var(--radius-pill); background: var(--accent-wash); color: var(--accent-ink);
  cursor: pointer; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  touch-action: manipulation;
}
.copy-ca:hover { border-color: var(--accent); background: #fff; }
.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); }
/* The ceiling chip carries a dollar figure rather than a round preset, so it
   gets the full row instead of being squeezed into a third of one. */
.chips button.chip-max { grid-column: 1 / -1; font-weight: 800; }
.chips button[disabled] { opacity: .4; cursor: not-allowed; }
.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);
  /* A pad row carries a 42-character address and four controls. Without these
     three lines it simply refuses to be narrower than that — flex items do not
     shrink below their content — and the whole PAGE grows sideways on a phone
     instead of the row wrapping. It measured 684px on a 375px screen. */
  flex-wrap: wrap;
}
.pad-row > div:first-child { min-width: 0; flex: 1 1 200px; }
.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);
  overflow-wrap: anywhere;
}
.pad-row .right { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; }

/* 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); }
/* Listed, but no live pool to price it — visible so the list is the whole
   chain, dimmed so it cannot be mistaken for something a pad can open. */
.stock-chip.is-dead { cursor: not-allowed; opacity: .45; background: var(--surface-2); }
.stock-chip.is-dead:hover { border-color: var(--line); transform: none; }
/* Priced but empty — pickable, because a pad only needs the price to pair
   against it. Marked all the same: nobody can buy into it with ETH. */
.stock-chip.is-spot { border-style: dashed; }
.stock-chip.is-spot small { color: var(--warn-ink); }
.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; flex-wrap: wrap; }
.pad-stocks-head > .btn { flex: 0 0 auto; }
.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; }
/* Scoped to this row on purpose. Written bare it matched EVERY `.input-sm` on the
   site — the whole create form is built from them — and pinned each one to 190px
   wide with 13px text, whatever container it sat in. That is why the launch fields
   read as short stubs floating in their columns on desktop and on a phone alike. */
.pad-naming .input-sm { width: 190px; padding: 8px 11px; font-size: 13px; }
[data-naming-msg] { margin: 6px 2px 0; }


/* The footer used to be what kept the last card off the bottom of the window.
   With it gone the page needs its own tail, or content sits flush against the
   viewport edge on desktop. (Phones already reserve room for the tab bar.) */
main { display: block; padding-bottom: 56px; }

/* ========================================================== burn split === */

/* The two shares side by side, because they are one decision: raising the burn
   is lowering something else, and controls stacked vertically hide that. */
.burn-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.burn-math {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2);
}
.burn-math-row {
  display: grid; grid-template-columns: 4px 1fr auto;
  gap: 12px; align-items: center;
  padding: 9px 0;
}
.burn-math-row + .burn-math-row { border-top: 1px solid var(--line); }
/* The bar is 4px of colour, not a chart: it carries which row is which at a
   glance, and the numbers carry the actual quantity. */
.burn-math-bar { position: relative; height: 26px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.burn-math-bar span { position: absolute; inset: auto 0 0 0; display: block; height: 100%; }
.burn-math-row.is-burn .burn-math-bar span { background: #d8593f; }
.burn-math-row.is-creator .burn-math-bar span { background: #c98a2b; }
.burn-math-row.is-lp .burn-math-bar span { background: #17b978; }
.burn-math-row.is-bad .burn-math-bar span { background: var(--line); }

.burn-math-label b { display: block; font-size: 12.5px; font-weight: 800; }
.burn-math-label small { display: block; margin-top: 2px; color: var(--text-3); font-size: 11px; line-height: 1.4; }
.burn-math-value { text-align: right; }
.burn-math-value b { display: block; font-family: var(--mono, monospace); font-size: 14px; font-weight: 800; }
.burn-math-value small { display: block; margin-top: 2px; color: var(--text-3); font-family: var(--mono, monospace); font-size: 10.5px; }
.burn-math-row.is-bad .burn-math-value b,
.burn-math-row.is-bad .burn-math-label small { color: #c0392b; }

.burn-math-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  color: var(--text-3); font-size: 11px;
}
.burn-math-total b { font-family: var(--mono, monospace); font-size: 12px; color: var(--text-2); }

@media (max-width: 560px) {
  .burn-split-row { grid-template-columns: 1fr; }
}

/* ============================================================== logo === */

/* Artwork sits ON the crest, never instead of it. The gradient and the initials
   stay underneath, so a picture that is still loading — or whose gateway is
   having a bad minute — falls back to exactly the mark the token had before
   anybody uploaded anything, at the same size and in the same place. Both
   crests are already `position: relative; overflow: hidden`, which is what makes
   this a two-line rule rather than a second component. */
.crest img,
.token-crest img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Below the initials would be pointless; above them is the point. */
  z-index: 1;
}

.linkish {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent-ink); font: inherit; font-size: 11.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { opacity: .78; }

.logo-picker { display: flex; align-items: flex-start; gap: 14px; }
.logo-picker-text { min-width: 0; flex: 1 1 auto; }

/* The picked image previews at the size and shape it will actually be shown
   at on the board — square, rounded, cropped to fill. A preview that is not
   the crop is a preview that lies about what the logo will look like. */
.logo-drop {
  flex: 0 0 auto; width: 72px; height: 72px;
  border: 1.5px dashed var(--line-accent); border-radius: 18px;
  background: var(--surface-2) center / cover no-repeat;
  color: var(--text-3); font-size: 24px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: border-color var(--base) var(--ease), transform var(--base) var(--ease);
}
.logo-drop:hover { border-color: var(--accent); transform: translateY(-1px); }
.logo-drop.has-image { border-style: solid; color: transparent; }

/* The token page's own picker, for artwork added after the launch. */
.logo-inline { margin-top: 10px; }
.logo-inline-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logo-inline-row .input-sm { flex: 1 1 200px; min-width: 0; }

/* "or paste a link" — folded away, because uploading is the normal path and an
   empty URL box beside a file picker only makes people wonder which they owe. */
.logo-alt { margin-top: 12px; }
.logo-alt > summary {
  cursor: pointer; list-style: none;
  color: var(--accent-ink); font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.logo-alt > summary::-webkit-details-marker { display: none; }
.logo-alt > summary:hover { opacity: .78; }
.logo-alt .input-sm { margin-top: 10px; width: 100%; }

/*
  The finished logo's own link.

  This block is the answer to "I uploaded it, so where is the URL?" — the whole
  reason to host the picture here rather than on some image site is to walk away
  with a link, and a link nobody is shown is a link nobody has.
*/
.logo-result {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--line-accent); border-radius: 14px;
  background: var(--surface-2);
}
.logo-result-head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.logo-result-head img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; object-fit: cover; }
.logo-result-head strong { display: block; font-size: 13.5px; }
.logo-result-head span { display: block; margin-top: 2px; color: var(--text-3); font-size: 11.5px; line-height: 1.5; }
.logo-result-url { display: flex; align-items: center; gap: 8px; }
.logo-result-url input {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-1); color: var(--text-1);
  font-family: var(--mono); font-size: 11.5px;
}
.logo-result-url .btn { flex: 0 0 auto; }
.logo-result-mirror { margin-top: 9px; color: var(--text-3); font-size: 11px; word-break: break-all; }
.logo-result-mirror 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; }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .container, .topbar-inner { width: calc(100% - 28px); }

  /* The top bar stays compact; the four primary routes live in the thumb zone
     as a dedicated bottom bar. */
  .topbar { height: auto; padding: 9px 0; }
  .topbar-inner { flex-wrap: nowrap; gap: 10px; }
  .topbar .nav { display: none; }
  .mobile-nav {
    position: fixed; z-index: 80;
    left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 66px; padding: 6px;
    border: 1px solid rgba(124, 74, 32, .16); border-radius: 21px;
    background: rgba(255, 255, 255, .91);
    box-shadow: 0 16px 42px rgba(74, 38, 16, .22);
    backdrop-filter: blur(20px) saturate(1.4);
  }
  .mobile-nav a {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-width: 0; border-radius: 15px;
    color: var(--text-3); font-size: 10px; font-weight: 800;
    letter-spacing: .02em; transition: color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  .mobile-nav a:active { transform: scale(.96); }
  .mobile-nav a[aria-current="page"] { color: var(--accent-ink); background: linear-gradient(145deg, rgba(255, 179, 71, .22), var(--accent-wash)); }
  /* Glass leads with aqua, so the active tab's wash follows it rather than staying warm. */
  :root[data-skin="glass"] .mobile-nav a[aria-current="page"] { background: linear-gradient(145deg, rgba(146, 186, 162, .3), rgba(226, 178, 186, .18)); }
  .mobile-nav .nav-icon { display: block; width: 23px; height: 23px; }
  .mobile-nav a[aria-current="page"] .nav-icon { stroke-width: 2.15; }
  .topbar-end { gap: 8px; }
  .chain-pill { display: none; }
  .brand { gap: 7px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 15px; letter-spacing: .1em; }

  /* Some wallet WebViews focus a native <select> but never open Android's
     picker. The mobile control is ordinary DOM buttons, so it works inside
     OKX, MetaMask and other embedded browsers without depending on that UI. */
  .mobile-native-select { display: none; }
  .mobile-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    cursor: pointer; text-align: left; touch-action: manipulation;
    font-family: var(--body); font-size: 15px; font-weight: 700;
  }
  .mobile-select-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-select-trigger svg {
    flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .mobile-select-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
  .mobile-select-trigger:disabled { cursor: default; opacity: .62; }

  .mobile-select-layer:not(.hidden) {
    position: fixed; z-index: 120; inset: 0; display: flex; align-items: flex-end;
    padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
  }
  .mobile-select-scrim { position: absolute; inset: 0; border: 0; background: rgba(39, 23, 14, .48); }
  .mobile-select-sheet {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    width: 100%; max-height: min(72vh, 620px); overflow: hidden;
    border: 1px solid rgba(124, 74, 32, .16); border-radius: 24px;
    background: var(--surface-1); box-shadow: 0 24px 70px rgba(42, 22, 11, .30);
  }
  .mobile-select-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 13px; border-bottom: 1px solid var(--line); }
  .mobile-select-head h2 { margin: 3px 0 0; font-family: var(--display); font-size: 21px; }
  .mobile-select-close {
    width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 13px;
    background: var(--surface-2); color: var(--text-2); cursor: pointer;
    font-size: 25px; line-height: 1; touch-action: manipulation;
  }
  .mobile-select-options { overflow-y: auto; overscroll-behavior: contain; padding: 8px; -webkit-overflow-scrolling: touch; }
  .mobile-select-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 54px; padding: 10px 12px; border: 0; border-radius: 14px;
    background: transparent; color: var(--text-1); cursor: pointer; text-align: left;
    font-size: 14px; font-weight: 750; touch-action: manipulation;
  }
  .mobile-select-option + .mobile-select-option { margin-top: 2px; }
  .mobile-select-option[aria-selected="true"] { background: var(--accent-wash); color: var(--accent-ink); }
  .mobile-select-option:disabled { cursor: default; opacity: .5; }
  .mobile-select-check { flex: 0 0 auto; color: var(--accent); font-size: 18px; font-weight: 900; }
  body.mobile-select-open { overflow: hidden; }

  /* Name and ticker side by side leaves the ticker box about six characters wide
     on a phone. Stacked, both are full width and neither is guessing. */
  .seed-mint-grid { grid-template-columns: 1fr; }
  .seed-mint { padding: 13px; }

  .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; }
  .token-markets { margin: 0 18px 18px; }
  .token-markets-links { display: grid; grid-template-columns: 1fr; }
  .token-market-link { width: 100%; }
  .stat-row > div { padding: 13px 18px; }
  .toasts { right: 12px; left: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); justify-items: stretch; }

  /* On a phone a pad row is a stack: the name and address across the top, the
     controls on their own line under it. Anything beside a 42-character address
     is either squeezed to nothing or pushes the page sideways. */
  .pad-row { align-items: flex-start; }
  .pad-row .right { width: 100%; }
  /* Tags keep their own size; the buttons pair up on one line and split it.
     `1 1 40%` is what makes two of them share a row instead of one stretching
     the full width and pushing the other onto a line of its own. */
  .pad-row .right .tag { flex: 0 0 auto; }
  .pad-row .right .btn { flex: 1 1 40%; text-align: center; }

  /* 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; }
  .pad-stocks-head > .btn { width: 100%; }
}

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

/* -------------------------------------------------------------------- curve */

.curve-card { margin-top: 16px; }
.curve-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.curve-head h2 { margin: 4px 0 10px; font-family: var(--display); font-size: 20px; }
.curve-pct { font-family: var(--display); font-size: 22px; color: var(--accent); }
.curve-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.curve-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transition: width 0.4s ease;
}
.curve-card .help { margin-top: 12px; }

/* --------------------------------------------------------------------- fees */

.fee-card { margin-top: 16px; }
.fee-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fee-head .eyebrow { margin: 0; }
.fee-line { margin: 0 0 12px; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.fee-line a { color: var(--accent-ink); text-decoration: underline; }
.fee-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0 0 14px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 520px) { .fee-amounts { grid-template-columns: 1fr; } }
.fee-amounts > div { padding: 14px 16px; background: var(--surface-2); }
.fee-amounts dt { margin: 0 0 5px; color: var(--text-3); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fee-amounts dd { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--accent-ink); overflow: hidden; text-overflow: ellipsis; }
.fee-card .help { margin-top: 10px; }
.fee-card .note { margin-top: 12px; }
.fee-row-note { display: block; margin-top: 3px; color: var(--text-3); font-size: 11.5px; line-height: 1.5; }
#your-fees .pad-row .tag[data-fee-amount] { font-family: var(--mono); }

/* The create form's graduation target, same chips as the airdrop shares. */
.curve-targets { display: flex; flex-wrap: wrap; gap: 8px; }
.curve-targets .share-chip { min-width: 92px; justify-content: center; }

/* A board card for a coin that has not opened its market yet. */
.card-flag {
  margin-left: auto; align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.card-curve { margin-top: 8px; }
.card-curve .curve-bar { height: 6px; }
.card-curve small { display: block; margin-top: 5px; color: var(--text-3); font-size: 11px; }

/* =========================================================
   SKIN — liquid glass
   =========================================================

   A repaint of the daylight theme, not a replacement for it. Everything below is
   scoped to `:root[data-skin="glass"]`, so the original look is still exactly what
   it was and is one button away (see site/skin.js).

   ⚠️ PAINT ONLY. Not one rule here sets display, position, width, height, margin,
   padding, grid or flex. That is a hard line, and it is why this section can sit at
   the very END of the stylesheet — after the mobile block — without stealing the
   layout from it. These selectors have higher specificity than the mobile rules, so
   any layout property here would silently override the phone layout; colour, blur,
   border, radius and shadow cannot.

   What makes it read as glass rather than as "transparent":
     1. a translucent fill with the saturation pushed up, so colour behind it bleeds
        through tinted rather than grey;
     2. a bright hairline along the TOP edge and a darker one along the bottom — the
        single strongest cue that a surface has thickness;
     3. a wide, soft, low-opacity shadow instead of a tight dark one;
     4. one diagonal specular sweep across large panels, at very low alpha.

   ⚠️ `backdrop-filter` is the expensive part, and it is on a COUNTABLE number of
   surfaces on purpose: the bars, the panels, the sheets. The board draws 169 cards —
   blurring each one costs more every time somebody launches a token, and turns a
   scroll into a slideshow on a mid-range phone. Cards get the fill and the hairline
   and no blur. They look the same and cost nothing.
   ========================================================= */

:root[data-skin="glass"] {
  /*
    Glass gets its own palette, and it has to.

    The first attempt kept the cream page and laid white panes on it — 60% white over
    #fff7ed is almost exactly #fff7ed, so there was nothing to see. Glass is not a
    material, it is a RELATIONSHIP: a pane only reads as glass when there is saturated
    colour behind it to bend. So this skin brings a lavender page, four vivid washes
    under it, and panes tinted cool rather than white.

    The plain skin is untouched and one button away. Text stays dark on purpose — a dark
    flip would mean auditing 105 hardcoded colours in the rules above, and one missed
    surface is an unreadable page.
  */
  --bg: #f3f5f0;

  /* Cool-tinted panes. The second stop is violet-grey, not white, which is what makes an
     edge visible against the wash behind it. */
  --glass-fill: rgba(255, 255, 255, .5);
  --glass-fill-strong: rgba(255, 255, 255, .7);
  --glass-fill-soft: rgba(226, 233, 224, .34);
  --glass-edge: rgba(255, 255, 255, .9);
  --glass-rim: rgba(58, 78, 66, .14);
  /*
    ⚠️ The saturation boost is what made the last palette hurt. `saturate(2)` does not
    just tint the pane — it pushes everything BEHIND it toward neon, so a soft wash
    arrives on screen as a hard one. Just above 1 is enough to stop the blur washing
    colour out, and nothing more.
  */
  --glass-blur: saturate(1.15) blur(28px);
  --glass-blur-sm: saturate(1.08) blur(14px);

  /* Thickness: a bright top hairline, a violet floor, a wide cool shadow. */
  --glass-lift:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 rgba(58, 78, 66, .07),
    0 14px 38px rgba(58, 78, 66, .13);
  --glass-lift-sm:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 6px 18px rgba(58, 78, 66, .10);

  --line: rgba(58, 78, 66, .12);
  --line-strong: rgba(58, 78, 66, .24);
  --line-accent: rgba(91, 156, 130, .55);

  --text-1: #2c3a33;
  --text-2: rgba(44, 58, 51, .7);
  --text-3: rgba(44, 58, 51, .48);

  /*
    Aqua leads now, not orange.

    Orange is not gone — it is still one of the washes below, and still turns up on crests
    and tags. It just stopped being the colour every button, link and active tab is
    painted with. Aqua keeps the daylight mood the plain skin has, so this is still a
    bright, cheerful page rather than a moody one, while being unmistakably a different
    skin at a glance.
  */
  --accent: #5b9c82;
  --accent-soft: #9cc7b4;
  --accent-deep: #45806a;
  --accent-ink: #2f5b4a;
  --accent-wash: rgba(91, 156, 130, .16);

  --shadow-sm: 0 5px 16px rgba(58, 78, 66, .09);
  --shadow: 0 16px 40px rgba(58, 78, 66, .15);
  --shadow-lg: 0 30px 70px rgba(58, 78, 66, .22);

  --radius-lg: 28px;
  --radius: 18px;
  --radius-sm: 13px;
}

/*
  The aurora. Four saturated blobs, well above the subtle washes the plain skin uses —
  this is the thing the glass is bending, so if it is shy the glass is invisible.

  Both layers drift, in opposite directions and out of phase, which is where "liquid"
  comes from: the refraction through a pane changes as the colour behind it moves, so a
  still screenshot and a live page do not look the same.
*/
:root[data-skin="glass"] body::before {
  background:
    radial-gradient(760px 580px at 8% 0%, rgba(146, 186, 162, .30), transparent 64%),
    radial-gradient(700px 540px at 90% 2%, rgba(226, 178, 186, .26), transparent 62%),
    radial-gradient(600px 440px at 52% 18%, rgba(230, 214, 178, .26), transparent 66%);
  animation: glass-drift-a 26s var(--ease) infinite alternate;
}

:root[data-skin="glass"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(780px 620px at 94% 76%, rgba(178, 197, 214, .26), transparent 64%),
    radial-gradient(720px 560px at 4% 92%, rgba(154, 190, 168, .26), transparent 62%),
    radial-gradient(560px 440px at 58% 104%, rgba(224, 190, 176, .22), transparent 66%);
  animation: glass-drift-b 34s var(--ease) infinite alternate;
}

@keyframes glass-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.08); }
}
@keyframes glass-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-3%, -2%, 0) scale(1); }
}

/* A moving background is decoration. Anybody who asked for less motion gets it still. */
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="glass"] body::before,
  :root[data-skin="glass"] body::after { animation: none; }
}

/* ── the two bars, the only surfaces that sit over moving content ───────────── */

:root[data-skin="glass"] .topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(231, 237, 229, .5));
  border-bottom-color: var(--glass-rim);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 -1px 0 var(--glass-edge), 0 6px 24px rgba(124, 74, 32, .07);
}

:root[data-skin="glass"] .mobile-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(229, 236, 227, .6));
  border-color: var(--glass-rim);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 -8px 30px rgba(124, 74, 32, .12);
}

/* ── panels: few per page, so they get the full treatment ───────────────────── */

:root[data-skin="glass"] .panel {
  background: linear-gradient(158deg, var(--glass-fill-strong), var(--glass-fill));
  border-color: var(--glass-rim);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift);
  overflow: hidden;
}

/* The specular sweep. `overflow: hidden` above is the one non-paint property in this
   section and it is unavoidable — without it the highlight escapes the rounded
   corner. It changes nothing about where anything sits. */
:root[data-skin="glass"] .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 36%);
  opacity: .7;
}
:root[data-skin="glass"] .panel { position: relative; }

/* ── the many, small surfaces: fill and hairline, never blur ────────────────── */

:root[data-skin="glass"] .card,
:root[data-skin="glass"] .venue,
:root[data-skin="glass"] .rail-step[data-state="active"],
:root[data-skin="glass"] .hero-fact,
:root[data-skin="glass"] .chain-pill,
:root[data-skin="glass"] .btn,
:root[data-skin="glass"] .input,
:root[data-skin="glass"] .share-chip,
:root[data-skin="glass"] .pad-row,
:root[data-skin="glass"] .mobile-select-trigger {
  background: linear-gradient(160deg, var(--glass-fill-strong), var(--glass-fill-soft));
  border-color: var(--glass-rim);
  box-shadow: var(--glass-lift-sm);
}

:root[data-skin="glass"] .card:hover,
:root[data-skin="glass"] .venue:hover {
  border-color: var(--line-accent);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
}

:root[data-skin="glass"] .input:focus {
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 4px var(--accent-wash);
}

/* Buttons that carry a colour keep it — a translucent Buy button is a Buy button
   nobody can find. They get the top hairline and a softer, wider shadow only. */
:root[data-skin="glass"] .btn-primary,
:root[data-skin="glass"] .btn-buy,
:root[data-skin="glass"] .btn-sell {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 10px 26px rgba(124, 74, 32, .16);
}
:root[data-skin="glass"] .btn-primary { background: linear-gradient(150deg, #86bda6, var(--accent-deep)); }
:root[data-skin="glass"] .btn-ghost { background: rgba(255, 255, 255, .3); }

:root[data-skin="glass"] .tag {
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
}

/* ── the sheets, which really do float over the page ────────────────────────── */

:root[data-skin="glass"] .mobile-select-sheet,
:root[data-skin="glass"] .toast,
:root[data-skin="glass"] .board-state {
  background: linear-gradient(158deg, rgba(255, 255, 255, .86), rgba(233, 238, 231, .7));
  border-color: var(--glass-rim);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift);
}
:root[data-skin="glass"] .mobile-select-scrim {
  background: rgba(44, 58, 51, .32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ── the switch itself ──────────────────────────────────────────────────────── */

.skin-switch {
  width: 33px; height: 33px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--base) var(--ease), border-color var(--base) var(--ease),
              background var(--base) var(--ease), transform var(--base) var(--ease);
}
.skin-switch svg { width: 16px; height: 16px; }
.skin-switch svg circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.skin-switch svg path { fill: currentColor; stroke: none; }
.skin-switch:hover { color: var(--accent-ink); border-color: var(--line-accent); transform: translateY(-1px); }
.skin-switch[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--line-accent); }
:root[data-skin="glass"] .skin-switch {
  background: linear-gradient(160deg, var(--glass-fill-strong), var(--glass-fill-soft));
  box-shadow: var(--glass-lift-sm);
}

/* ── when glass is the wrong answer ─────────────────────────────────────────── */

/* Somebody who asked their system for less transparency has asked for this too.
   The fills go opaque and every blur is dropped — the layout is identical. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-skin="glass"] {
    --glass-fill: #fafbf9;
    --glass-fill-strong: #ffffff;
    --glass-fill-soft: #eef1ec;
    --glass-blur: none;
    --glass-blur-sm: none;
  }
  :root[data-skin="glass"] .panel::before,
  :root[data-skin="glass"] body::after { display: none; }
}

/* Phones do the blurring on the same chip that is drawing the page. Half the radius
   costs a fraction of the fill rate and is indistinguishable at arm's length. */
@media (max-width: 780px) {
  :root[data-skin="glass"] {
    --glass-blur: saturate(1.6) blur(14px);
    --glass-blur-sm: saturate(1.4) blur(8px);
  }
  /* Tags are small, numerous, and inside scrolling cards. Not worth a single pixel
     of blur on a phone. */
  :root[data-skin="glass"] .tag {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* =========================================================
   MOBILE — tighten the grid
   =========================================================

   Not a redesign: every rule here is spacing, wrapping or type scale. The phone
   layout worked, it just breathed too much and wrapped where it should not.

   Three things were actually wrong, and all three are the same fault — a row of
   items sized by their own text instead of by the column they sit in:

     · the hero pills wrapped 1 + 2 + 1 into a ragged staircase;
     · the three wizard steps sat at different heights because "Pick a venue"
       wrapped to two lines and the others did not;
     · headings and paragraphs ran the full width at desktop leading, so a phone
       screen held about four sentences.

   Fixed by giving each row an explicit grid and letting the cells share it. Same
   markup, same handlers, same order.
   ========================================================= */

@media (max-width: 780px) {
  /* ── the page itself ─────────────────────────────────────────────────────── */
  .hero { padding: 26px 0 22px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; }
  .hero p { font-size: 14.5px; line-height: 1.55; }
  .panel-pad { padding: 18px 16px; }
  .panel + .panel { margin-top: 12px; }
  .panel-title { font-size: 19px; line-height: 1.2; }
  .panel-sub { margin-bottom: 14px; font-size: 13px; line-height: 1.5; }
  .help { font-size: 11.5px; line-height: 1.5; }

  /* ── hero pills: two even columns, never a staircase ─────────────────────── */
  .hero-facts,
  .create-hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }
  .hero-fact,
  .create-hero-facts > * {
    display: flex; align-items: baseline; justify-content: flex-start; gap: 6px;
    min-width: 0; padding: 9px 12px;
    font-size: 12px;
  }
  /* An odd count would leave a half-width gap on the last row. The last child of
     an odd set takes the whole row instead, which reads as deliberate. */
  .hero-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero-fact span { font-size: 10.5px; }

  /* ── the wizard rail: three equal cells on one line ──────────────────────── */
  .rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
  }
  .rail-step {
    flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 6px; padding: 10px 6px; text-align: center;
  }
  .rail-step b { font-size: 11.5px; line-height: 1.25; }
  /* The subtitles are what made the cells different heights, and on a phone the
     step number and its name already say enough. */
  .rail-step small { display: none; }
  .rail-step .num { width: 24px; height: 24px; font-size: 11px; }

  /* ── venue cards ────────────────────────────────────────────────────────── */
  .venue { padding: 14px; }
  .venue-head { align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .venue-name { font-size: 14.5px; line-height: 1.25; }
  .venue-foot { gap: 10px; padding-top: 10px; font-size: 11px; }
  .venue-group h3 { font-size: 13.5px; }
  .venue-group p { margin-top: 4px; }

  /* ── board cards ────────────────────────────────────────────────────────── */
  .card { padding: 14px; }
  .card-head { gap: 9px; margin-bottom: 10px; }
  .card-price { font-size: 16px; }
  .card-foot { margin-top: 9px; padding-top: 9px; }

  /* ── forms ──────────────────────────────────────────────────────────────── */
  .field + .field { margin-top: 14px; }
  .create-field-grid { gap: 12px; }
  .terms dd { font-size: 15px; }
  .share-pick { gap: 7px; }
  .share-chip { padding: 9px 8px; }

  /* ── token page ─────────────────────────────────────────────────────────── */
  .back-link { margin-bottom: 12px; }

  /*
    The header was a desktop row folded onto a phone: crest and name on the left,
    price on the right, `flex-wrap` catching the overflow. On 375px that put the
    name in the middle of nowhere and the price on its own line, so the whole
    block read as centred by accident. One column, everything left, price under
    the name where it is read.
  */
  .token-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  /* Top-aligned, so the crest lines up with the first line of the name instead of
     floating against the middle of a three-line block. */
  .token-ident { align-items: flex-start; gap: 11px; }
  .token-crest { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; }
  .token-ident h1 { font-size: 21px; line-height: 1.15; }
  .token-sub { margin-top: 5px; gap: 5px; font-size: 11px; }
  .token-sub .tag { padding: 3px 8px; font-size: 10px; }
  .token-price { text-align: left; }
  .token-price .big { font-size: 25px; }

  /* Four figures, two columns, and one of them is a venue name that runs long.
     Smaller type and a tighter cell keep the pairs aligned instead of letting one
     tall cell push its neighbour out of line. */
  .stat-row > div { padding: 12px 16px; }
  .stat-row span { font-size: 9px; letter-spacing: .1em; }
  .stat-row strong { margin-top: 3px; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; hyphens: none; }
  /* Cells align to their own top, so a two-line venue name does not drag the
     figure beside it down with it. */
  .stat-row > div { align-content: start; }

  .token-project, .token-markets { margin: 0 16px 14px; }
  .token-market-link { padding: 9px 11px; font-size: 13px; }
  .fee-line { font-size: 12.5px; line-height: 1.5; }
  .fee-amounts dd { font-size: 14px; }
  .tabs button { padding: 0 12px; font-size: 12.5px; }

}

/* The pill labels are two words now, so two columns hold at 360px. Below that the
   grid collapses rather than letting a label wrap inside its own pill. */
@media (max-width: 340px) {
  .hero-facts,
  .create-hero-facts { grid-template-columns: 1fr; }
  .hero-fact:last-child:nth-child(odd) { grid-column: auto; }
}

/* =========================================================
   GLASS — selection, and the surfaces that were left warm
   =========================================================

   Two faults, one cause: the block above repainted the page's fills but not the
   `--surface-*` ramp, and not the selected states that were drawn FROM that ramp.

   1. Selection went invisible. `.venue[aria-pressed]`, `.share-chip`, the tabs and
      the rail all mark themselves with an orange wash over `--surface-1`. Under a
      translucent pane that wash is a few percent of a colour that is no longer the
      accent, so a chosen card and an unchosen one came out the same. A choice you
      cannot see you have made is the worst kind of control.

   2. The trade panel stayed peach. `--surface-3` and `--surface-4` are still the
      warm cream from the plain theme, and the Buy/Sell switch, the amount field,
      the asset pill and the tab strip are all painted with them — so a green page
      had an orange panel sitting in the middle of it.

   Both are fixed here, in paint only, and only under `[data-skin="glass"]`.
   ========================================================= */

:root[data-skin="glass"] {
  /* The rest of the ramp, brought into the same family as everything else. */
  --surface-1: #ffffff;
  --surface-2: #f4f7f3;
  --surface-3: #e8eee7;
  --surface-4: #d9e4da;
}

/* ── selected: a real border, a real tint, a real lift ─────────────────────── */

:root[data-skin="glass"] .venue[aria-pressed="true"] {
  border-color: var(--accent);
  background: linear-gradient(158deg, rgba(91, 156, 130, .26), rgba(255, 255, 255, .82) 68%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 1px var(--accent),
    0 12px 30px rgba(69, 128, 106, .26);
}
:root[data-skin="glass"] .venue[aria-pressed="true"] .venue-name { color: var(--accent-ink); }

/* The chips: creator share, pool fee, trade fee, curve target, stocks, airdrop.
   A 1px ring plus a tint that is actually a tint, not a rounding error. */
:root[data-skin="glass"] .share-chip[aria-checked="true"],
:root[data-skin="glass"] .share-chip.is-on,
:root[data-skin="glass"] .stock-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(91, 156, 130, .3), rgba(255, 255, 255, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 1px var(--accent), 0 6px 16px rgba(69, 128, 106, .2);
}
:root[data-skin="glass"] .share-chip[aria-checked="true"] b,
:root[data-skin="glass"] .share-chip.is-on b,
:root[data-skin="glass"] .share-chip[aria-checked="true"] small,
:root[data-skin="glass"] .stock-chip[aria-pressed="true"] b { color: var(--accent-ink); }

/* The step rail: the active step was white-on-white. */
:root[data-skin="glass"] .rail-step[data-state="active"] {
  background: linear-gradient(158deg, rgba(91, 156, 130, .24), rgba(255, 255, 255, .84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px var(--line-accent), 0 6px 16px rgba(69, 128, 106, .16);
}
:root[data-skin="glass"] .rail-step[data-state="active"] .num {
  background: linear-gradient(145deg, var(--accent-soft), var(--accent-deep));
}

/* Tabs and the phone's option sheet. */
:root[data-skin="glass"] .tabs { background: rgba(232, 238, 231, .8); }
:root[data-skin="glass"] .tabs button[aria-selected="true"] {
  background: #fff; color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--line-accent), var(--shadow-sm);
}
:root[data-skin="glass"] .mobile-select-option[aria-selected="true"] {
  background: linear-gradient(160deg, rgba(91, 156, 130, .26), rgba(255, 255, 255, .7));
  box-shadow: inset 0 0 0 1px var(--line-accent);
}

/* ── the trade panel, which is where contrast mattered most ────────────────── */

:root[data-skin="glass"] .trade-switch { background: rgba(232, 238, 231, .85); }
/* Buy and Sell keep their own colours — this only stops them sitting on cream. */
:root[data-skin="glass"] .trade-switch button[aria-pressed="true"][data-side="buy"] {
  background: var(--up); color: #fff; box-shadow: 0 6px 16px rgba(23, 185, 120, .3);
}
:root[data-skin="glass"] .trade-switch button[aria-pressed="true"][data-side="sell"] {
  background: var(--down); color: #fff; box-shadow: 0 6px 16px rgba(242, 73, 79, .28);
}

:root[data-skin="glass"] .amount-field,
:root[data-skin="glass"] .amount-quote {
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(244, 247, 243, .8));
  border-color: var(--glass-rim);
  box-shadow: var(--glass-lift-sm);
}
:root[data-skin="glass"] .amount-asset {
  background: var(--surface-4); color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
:root[data-skin="glass"] .amount-asset:hover { background: var(--accent); color: #fff; }

/* The chip row under the amount — six identical ghosts before this. */
:root[data-skin="glass"] .chips button {
  background: rgba(255, 255, 255, .72);
  border-color: var(--glass-rim);
  box-shadow: var(--glass-lift-sm);
}
:root[data-skin="glass"] .chips button:hover {
  background: linear-gradient(160deg, rgba(91, 156, 130, .26), rgba(255, 255, 255, .8));
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* The trade button was the palest thing on a pale panel — and it is the one
   control on the page somebody is looking for. */
:root[data-skin="glass"] .btn-buy {
  background: var(--up); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 26px rgba(23, 185, 120, .34);
}
:root[data-skin="glass"] .btn-sell {
  background: var(--down); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 26px rgba(242, 73, 79, .3);
}
:root[data-skin="glass"] .btn-buy:disabled,
:root[data-skin="glass"] .btn-sell:disabled { opacity: .5; box-shadow: none; }

/* The two bulk buttons over the deploy stock picker. Ninety-six chips is not a list
   anybody clicks through one at a time, and a stock pad usually wants a lot of them. */
.stock-pick-bulk {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  flex-wrap: wrap;
}

/* The own-hook warning sits inside the venue button, which is a grid row: without a
   span of its own it lands beside the fee badge instead of under it. Left-aligned and
   full width, because it is a sentence, not a chip. */
.venue-note { display: block; width: 100%; margin-top: 10px; text-align: left; line-height: 1.45; }


/* --- riwayat dompet di kolom alamat (lihat `walletHistory` di app.js) ---------
   Deretan alamat yang pernah dipakai, tepat di bawah kolomnya. Sengaja kecil dan
   tenang: ini jalan pintas, bukan bagian utama formulir. */
.wallet-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.wallet-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: 999px;
  overflow: hidden;
}
.wallet-chip button {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 11.5px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 4px 9px;
  cursor: pointer;
  opacity: .82;
}
.wallet-chip button:hover { opacity: 1; }
/* Tombol lupakan: dipisah garis supaya tidak tertekan saat memilih alamat. */
.wallet-chip-x {
  border-left: 1px solid var(--line, rgba(255,255,255,.14)) !important;
  padding: 4px 7px !important;
  opacity: .45 !important;
}
.wallet-chip-x:hover { opacity: 1 !important; }