/* =========================================================
   IMORTAL — V2, the Commons look
   =========================================================

   A second skin for the same site. Everything here is scoped to
   `:root[data-ver="v2"]`, so V1 — the daylight/glass design this site shipped
   with — is still exactly what it was and is one button away (see site/skin.js).

   ⚠️ THE RULE THIS FILE LIVES BY: paint, type and the small amount of spacing
   that type demands. Not one selector here changes `display`, `position`,
   `grid-template-*`, `flex-*`, `width` or `height` on an existing component.
   That is what makes a repaint safe: this stylesheet loads AFTER styles.css,
   which means it also loads after that file's `max-width` mobile block, so any
   layout property written here would silently steal the phone layout.

   MOBILE FIRST. The rules outside a media query are the phone. Desktop is the
   exception, and it is opted into at `min-width: 721px` — the same breakpoint
   styles.css already uses for its own phone block, so the two never disagree
   about which layout is on screen.

   THE PALETTE, and why it is a ramp and not a mood. Every colour below was
   chosen against the surface it actually lands on, not against the page:
     · body text ....... ≥ 12:1
     · secondary text .. ≥  8:1
     · the smallest labels (10–11px, --text-3) ≥ 5:1
     · anything that sits ON a filled control gets the control's own opposite,
       never `#fff` — which is the single fault this file has the most rules
       about, because the base stylesheet paints white on `var(--accent)` in
       fifteen places and V2's accent is cream.

   Reference: commonsmade.com — #111713 ground, #f3eedd type, Young Serif
   headings, Inter UI, JetBrains Mono for anything that counts, 12px radii, and
   depth that comes from one soft offset shadow plus a bright top hairline.
   ========================================================= */

/* ============================================================ tokens === */

:root[data-ver="v2"] {
  /* ── the ground, darkest first ───────────────────────────────────────── */
  --v2-shell: #0b0f0c;
  --bg: #111713;
  --surface-1: #171f1a;   /* cards, panels, the raised things */
  --surface-2: #141b16;   /* fields and wells — recessed, not raised */
  --surface-3: #1e2721;   /* tab strips, tags, the quiet chips */
  --surface-4: #27332a;   /* the asset pill, the one filled control in a well */

  --line: rgba(243, 238, 221, .13);
  --line-strong: rgba(243, 238, 221, .26);
  --line-accent: rgba(243, 238, 221, .52);

  --text-1: #f3eedd;
  --text-2: rgba(243, 238, 221, .72);
  --text-3: rgba(243, 238, 221, .54);

  /*
    On this design the accent IS the cream — a filled control is a slab of paper
    on a dark room, exactly as Commons draws its one primary button. That makes
    `--accent-ink`, which the base stylesheet uses as TEXT on tinted washes, a
    LIGHT colour here. Every rule further down that paints `#fff` on top of
    `var(--accent)` is corrected, because cream on cream is nothing at all.
  */
  --accent: #f3eedd;
  --accent-soft: #e2dabd;
  --accent-deep: #cfc5a4;
  --accent-ink: #f6f2e4;
  --accent-wash: rgba(243, 238, 221, .10);

  --sky: #7fc9ee;
  --grape: #c2a4f0;
  --bubble: #f79ac0;

  /* Fills stay saturated enough to read as green/red; the `-ink` pair is the
     text variant, lifted until it clears 8:1 on a dark card. */
  --up: #5cc894;
  --up-ink: #8fe0b7;
  --down: #ff8078;
  --down-ink: #ffaaa5;
  --warn: #edbb45;
  --warn-ink: #f2cc6b;

  /*
    Depth, the Commons way: one soft offset shadow away from the light, plus a
    hairline of the page's own cream along the top edge. No black rings — on a
    near-black ground a dark border is invisible and a bright one is the only
    cue a surface has thickness.
  */
  --shadow-sm:
    3px 3px 9px rgba(4, 7, 5, .5),
    inset 0 0 0 1px rgba(243, 238, 221, .045);
  --shadow:
    6px 6px 18px rgba(4, 7, 5, .62),
    inset 0 1px 0 rgba(243, 238, 221, .07),
    inset 0 0 0 1px rgba(243, 238, 221, .04);
  --shadow-lg:
    12px 12px 34px rgba(4, 7, 5, .74),
    inset 0 1px 0 rgba(243, 238, 221, .08),
    inset 0 0 0 1px rgba(243, 238, 221, .05);

  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 9px;

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ── the glass, kept ─────────────────────────────────────────────────── */
  --v2-bar: rgba(17, 23, 19, .72);
  --v2-pane: rgba(243, 238, 221, .045);
  --v2-sheet: rgba(20, 27, 22, .88);
  --v2-scrim: rgba(4, 7, 5, .64);
  --v2-blur: blur(16px) saturate(1.15);
  --v2-blur-sm: blur(9px) saturate(1.1);
  --v2-rim: inset 0 1px 0 rgba(243, 238, 221, .10);

  /* ── the type ────────────────────────────────────────────────────────── */
  --display: 'Young Serif', Cambria, Georgia, 'Times New Roman', serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: dark;
}

/* ── V2, daylight ────────────────────────────────────────────────────────
   Not a different design — the same one, printed. Commons has no light mode,
   so this is built from its own two colours swapped: the cream becomes the
   paper and the near-black green becomes the ink and the accent. Every ratio
   above is re-checked against the new ground below. */

:root[data-ver="v2"][data-theme="light"] {
  --v2-shell: #e7dfcc;
  --bg: #f2ecdd;
  --surface-1: #fbf7ec;
  --surface-2: #f5efe0;
  --surface-3: #e9e2cf;
  --surface-4: #dbd2b9;

  --line: rgba(19, 26, 21, .15);
  --line-strong: rgba(19, 26, 21, .30);
  --line-accent: rgba(19, 26, 21, .58);

  --text-1: #131a15;
  --text-2: rgba(19, 26, 21, .72);
  --text-3: rgba(19, 26, 21, .56);

  --accent: #131a15;
  --accent-soft: #2f3d33;
  --accent-deep: #080c09;
  --accent-ink: #131a15;
  --accent-wash: rgba(19, 26, 21, .09);

  --sky: #14638b;
  --grape: #5f34a6;
  --bubble: #ad2f66;

  --up: #0f7d57;
  --up-ink: #0a5a3d;
  --down: #c53727;
  --down-ink: #96261a;
  --warn: #8c6104;
  --warn-ink: #6f4d03;

  --shadow-sm:
    3px 3px 9px rgba(19, 26, 21, .07),
    inset 0 0 0 1px rgba(19, 26, 21, .035);
  --shadow:
    6px 6px 18px rgba(19, 26, 21, .10),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(19, 26, 21, .04);
  --shadow-lg:
    12px 12px 34px rgba(19, 26, 21, .16),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 0 0 1px rgba(19, 26, 21, .05);

  --v2-bar: rgba(242, 236, 221, .78);
  --v2-pane: rgba(19, 26, 21, .045);
  --v2-sheet: rgba(251, 247, 236, .92);
  --v2-scrim: rgba(19, 26, 21, .38);
  --v2-rim: inset 0 1px 0 rgba(255, 255, 255, .75);

  color-scheme: light;
}

/* ============================================================== page === */

:root[data-ver="v2"] body {
  background: var(--bg);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.003em;
}

/* The room. Commons lights its ground from the middle rather than from the
   corners, and keeps the very edges darker than the centre — which is what
   stops a flat black page from reading as a switched-off screen. */
:root[data-ver="v2"] body::before {
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(243, 238, 221, .055), transparent 66%),
    radial-gradient(760px 520px at 12% 4%, rgba(126, 196, 158, .045), transparent 62%),
    radial-gradient(900px 700px at 100% 110%, rgba(4, 7, 5, .55), transparent 60%);
}
:root[data-ver="v2"][data-theme="light"] body::before {
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(255, 255, 255, .8), transparent 66%),
    radial-gradient(760px 520px at 12% 4%, rgba(15, 125, 87, .05), transparent 62%),
    radial-gradient(900px 700px at 100% 110%, rgba(19, 26, 21, .07), transparent 60%);
}

/* Cream on cream would be a blank selection. */
:root[data-ver="v2"] ::selection { background: var(--accent); color: var(--bg); }
:root[data-ver="v2"] :focus-visible { outline-color: var(--accent); border-radius: 6px; }

/* ============================================================== type === */

/*
  Young Serif ships one weight. Asking for 600 gets a synthetic bold — smeared
  stems, closed counters — so every heading is pinned back to the weight that
  actually exists, and synthesis is switched off as a belt to that brace.
*/
:root[data-ver="v2"] { font-synthesis-weight: none; }

:root[data-ver="v2"] .brand-name,
:root[data-ver="v2"] .panel-title,
:root[data-ver="v2"] .board-state strong,
:root[data-ver="v2"] .hero h1,
:root[data-ver="v2"] .create-hero h1,
:root[data-ver="v2"] .create-section-head h2,
:root[data-ver="v2"] .airdrop-head h2,
:root[data-ver="v2"] .create-submit-copy h2,
:root[data-ver="v2"] .venue-group h3,
:root[data-ver="v2"] .venue-name,
:root[data-ver="v2"] .share-chip b,
:root[data-ver="v2"] .market-head h2,
:root[data-ver="v2"] .crest,
:root[data-ver="v2"] .history-logo,
:root[data-ver="v2"] .token-market-mark,
:root[data-ver="v2"] .token-crest,
:root[data-ver="v2"] .token-ident h1,
:root[data-ver="v2"] .pad-row b,
:root[data-ver="v2"] .mobile-select-head h2,
:root[data-ver="v2"] .curve-head h2,
:root[data-ver="v2"] .curve-pct { font-weight: 400; }

/* Commons sets its display type tight and large. The tracking is the tell. */
:root[data-ver="v2"] .hero h1,
:root[data-ver="v2"] .create-hero h1 { letter-spacing: -.038em; line-height: 1.04; }
:root[data-ver="v2"] .market-head h2,
:root[data-ver="v2"] .token-ident h1 { letter-spacing: -.03em; }
:root[data-ver="v2"] .panel-title { letter-spacing: -.02em; font-size: 21px; }

/* The em in the hero used to be a three-colour gradient clipped to the glyphs.
   Clipped text is invisible the moment anything about that gradient fails, and
   a rainbow is not this design. One solid tone, one shade off the cream. */
:root[data-ver="v2"] .hero h1 em,
:root[data-ver="v2"] .create-hero h1 em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--accent-soft);
}

:root[data-ver="v2"] .brand-name {
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: none;
}

/* The mono micro-label is the Commons signature: 10px, uppercase, wide. */
:root[data-ver="v2"] .eyebrow {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
}
:root[data-ver="v2"] .terms dt,
:root[data-ver="v2"] .stat-row span,
:root[data-ver="v2"] .history-data dt,
:root[data-ver="v2"] .fee-amounts dt,
:root[data-ver="v2"] .token-markets-label,
:root[data-ver="v2"] .trades-table th {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--text-3);
}

/* Inter does not need 800 to look set. It needs 600 and some room. */
:root[data-ver="v2"] .nav a,
:root[data-ver="v2"] .btn,
:root[data-ver="v2"] .field label,
:root[data-ver="v2"] .card-name b,
:root[data-ver="v2"] .step-line b,
:root[data-ver="v2"] .tabs button,
:root[data-ver="v2"] .trade-switch button { font-weight: 600; }

:root[data-ver="v2"] .tag,
:root[data-ver="v2"] .card-venue span,
:root[data-ver="v2"] .card-fees,
:root[data-ver="v2"] .card-flag,
:root[data-ver="v2"] .trade-side {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .1em;
}
:root[data-ver="v2"] .tag.literal { letter-spacing: normal; }

/* ============================================================ topbar === */

:root[data-ver="v2"] .topbar {
  background: var(--v2-bar);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: var(--v2-blur);
  backdrop-filter: var(--v2-blur);
}
:root[data-ver="v2"] .brand-mark {
  filter: none;
  border-radius: 9px;
}
:root[data-ver="v2"] .nav a { color: var(--text-2); }
:root[data-ver="v2"] .nav a:hover { color: var(--text-1); background: var(--v2-pane); }
:root[data-ver="v2"] .nav a[aria-current="page"] {
  color: var(--bg);
  background: var(--accent);
}

:root[data-ver="v2"] .chain-pill {
  background: var(--v2-pane);
  border-color: var(--line);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: var(--v2-blur-sm);
  backdrop-filter: var(--v2-blur-sm);
}

/* ── the two switches ─────────────────────────────────────────────────────
   Written for both versions, because the markup is the same in both and a
   switch that is styled in only one of them is a switch that looks broken in
   the other. Sizing lives in styles.css; this is the icon geometry and V2's
   own fill. */

.skin-switch[hidden] { display: none !important; }
.skin-switch svg path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skin-switch svg path.solid { fill: currentColor; stroke: none; }
.ver-switch {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

:root[data-ver="v2"] .skin-switch {
  background: var(--v2-pane);
  border-color: var(--line);
  color: var(--text-2);
  box-shadow: var(--v2-rim);
  -webkit-backdrop-filter: var(--v2-blur-sm);
  backdrop-filter: var(--v2-blur-sm);
}
:root[data-ver="v2"] .skin-switch:hover,
:root[data-ver="v2"] .skin-switch[aria-pressed="true"] {
  color: var(--text-1);
  border-color: var(--line-accent);
}

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

:root[data-ver="v2"] .btn {
  background: var(--surface-1);
  border-color: var(--line);
  color: var(--text-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
:root[data-ver="v2"] .btn:hover { background: var(--surface-3); box-shadow: var(--shadow); }

/* The one slab of paper in the room. Cream fill, page-coloured type. */
:root[data-ver="v2"] .btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--bg);
  box-shadow: var(--shadow);
}
:root[data-ver="v2"] .btn-primary:hover {
  background: var(--accent-ink);
  color: var(--bg);
  box-shadow: var(--shadow-lg);
}
:root[data-ver="v2"] .btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-1);
}
:root[data-ver="v2"] .btn-ghost:hover { background: var(--v2-pane); border-color: var(--line-accent); }

/* Buy and sell keep their meaning and lose the white type: on a fill this light
   the label has to be the page, not the paper. */
:root[data-ver="v2"] .btn-buy {
  background: var(--up);
  color: #06120c;
  box-shadow: var(--shadow);
}
:root[data-ver="v2"] .btn-buy:hover { background: #74d5a5; }
:root[data-ver="v2"] .btn-sell {
  background: var(--down);
  color: #1a0605;
  box-shadow: var(--shadow);
}
:root[data-ver="v2"] .btn-sell:hover { background: #ff958d; }
:root[data-ver="v2"][data-theme="light"] .btn-buy,
:root[data-ver="v2"][data-theme="light"] .btn-sell { color: #fbf7ec; }
:root[data-ver="v2"][data-theme="light"] .btn-buy:hover { background: #0c6c4a; }
:root[data-ver="v2"][data-theme="light"] .btn-sell:hover { background: #ae2f21; }

:root[data-ver="v2"] .wallet-btn[data-state="connected"] {
  background: var(--v2-pane);
  border-color: var(--line-strong);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
}

/* =========================================================== surfaces === */

:root[data-ver="v2"] .panel,
:root[data-ver="v2"] .card,
:root[data-ver="v2"] .history-card,
:root[data-ver="v2"] .trades-wrap,
:root[data-ver="v2"] .toast {
  background: var(--surface-1);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
:root[data-ver="v2"] .card:hover,
:root[data-ver="v2"] .venue:hover { border-color: var(--line-accent); box-shadow: var(--shadow); }
:root[data-ver="v2"] .toast { box-shadow: var(--shadow-lg); }

:root[data-ver="v2"] .venue,
:root[data-ver="v2"] .pad-row,
:root[data-ver="v2"] .step-line,
:root[data-ver="v2"] .receive,
:root[data-ver="v2"] .amount-field,
:root[data-ver="v2"] .name-preview,
:root[data-ver="v2"] .burn-math,
:root[data-ver="v2"] .logo-result,
:root[data-ver="v2"] .stock-pick {
  background: var(--surface-2);
  border-color: var(--line);
}

/* Selected: a real ring, a real tint. The base rule paints an orange wash that
   is a rounding error on a dark card. */
:root[data-ver="v2"] .venue[aria-pressed="true"] {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(243, 238, 221, .13), var(--surface-1) 70%);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
:root[data-ver="v2"] .venue[aria-pressed="true"] .venue-name { color: var(--accent-ink); }
:root[data-ver="v2"] .venue-more:hover,
:root[data-ver="v2"] .venue-more:focus-visible { border-color: var(--accent); color: var(--accent-ink); }

:root[data-ver="v2"] .share-chip,
:root[data-ver="v2"] .stock-chip,
:root[data-ver="v2"] .chips button,
:root[data-ver="v2"] .slip input,
:root[data-ver="v2"] .copy-mini,
:root[data-ver="v2"] .logo-result-url input {
  background: var(--surface-1);
  border-color: var(--line);
  color: var(--text-1);
}
:root[data-ver="v2"] .chips button { color: var(--text-2); }
:root[data-ver="v2"] .chips button:hover {
  background: var(--accent-wash);
  border-color: var(--line-accent);
  color: var(--accent-ink);
}
:root[data-ver="v2"] .share-chip[aria-checked="true"],
:root[data-ver="v2"] .share-chip.is-on,
:root[data-ver="v2"] .stock-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent);
}
:root[data-ver="v2"] .share-chip[aria-checked="true"] b,
:root[data-ver="v2"] .share-chip.is-on,
:root[data-ver="v2"] .stock-chip[aria-pressed="true"] b { color: var(--accent-ink); }
:root[data-ver="v2"] .share-chip:hover,
:root[data-ver="v2"] .stock-chip:hover { border-color: var(--line-accent); }
:root[data-ver="v2"] .stock-chip.is-dead { background: var(--surface-2); }

:root[data-ver="v2"] .tag { background: var(--surface-3); color: var(--text-1); }
:root[data-ver="v2"] .tag.accent { background: var(--accent-wash); color: var(--accent-ink); }
:root[data-ver="v2"] .tag.good { background: rgba(92, 200, 148, .16); color: var(--up-ink); }
:root[data-ver="v2"] .tag.warn { background: rgba(237, 187, 69, .16); color: var(--warn-ink); }

:root[data-ver="v2"] .note.info { background: var(--surface-3); color: var(--text-2); }
:root[data-ver="v2"] .note.warn { background: rgba(237, 187, 69, .13); color: var(--warn-ink); }
:root[data-ver="v2"] .note.error { background: rgba(255, 128, 120, .13); color: var(--down-ink); }
:root[data-ver="v2"] .note.success { background: rgba(92, 200, 148, .13); color: var(--up-ink); }

/* ============================================================= fields === */

:root[data-ver="v2"] .input,
:root[data-ver="v2"] .create-form-card .input {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text-1);
}
:root[data-ver="v2"] .input:focus {
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
:root[data-ver="v2"] .input::placeholder { color: var(--text-3); }

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

:root[data-ver="v2"] .rail-step[data-state="active"] { background: var(--surface-1); border-color: var(--line-accent); }
:root[data-ver="v2"] .rail-step[data-state="active"] .num {
  background: var(--accent);
  color: var(--bg);
}
:root[data-ver="v2"] .rail-step[data-state="done"] .num { background: var(--up); color: #06120c; }
:root[data-ver="v2"][data-theme="light"] .rail-step[data-state="done"] .num { color: #fbf7ec; }

:root[data-ver="v2"] .step-line[data-state="busy"] .dot { border-color: var(--accent); color: var(--accent-ink); }
:root[data-ver="v2"] .step-line[data-state="done"] .dot { background: var(--up); color: #06120c; }
:root[data-ver="v2"] .step-line[data-state="fail"] .dot { background: var(--down); color: #1a0605; }
:root[data-ver="v2"][data-theme="light"] .step-line[data-state="done"] .dot,
:root[data-ver="v2"][data-theme="light"] .step-line[data-state="fail"] .dot { color: #fbf7ec; }
:root[data-ver="v2"] .step-line a { color: var(--accent-ink); }

:root[data-ver="v2"] .terms { background: var(--line); border-color: var(--line); }
:root[data-ver="v2"] .terms > div { background: var(--surface-2); }
:root[data-ver="v2"] .terms dd { color: var(--text-1); }

:root[data-ver="v2"] .name-preview .kw { color: var(--grape); }
:root[data-ver="v2"] .name-preview .nm { color: var(--accent-ink); }

/* ====================================================== create studio === */

:root[data-ver="v2"] .create-hero-facts span,
:root[data-ver="v2"] .create-progress,
:root[data-ver="v2"] .create-allocation {
  background: var(--v2-pane);
  color: var(--text-2);
  box-shadow: var(--v2-rim);
}
:root[data-ver="v2"] .create-hero-facts b { color: var(--accent-ink); }
:root[data-ver="v2"] .create-progress-step > span { background: var(--surface-2); border-color: var(--line); color: var(--text-3); }
:root[data-ver="v2"] .create-progress-step.is-active > span {
  background: var(--accent);
  border-color: transparent;
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}
:root[data-ver="v2"] .allocation-bar span:first-child { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
:root[data-ver="v2"] .allocation-bar span:last-child { background: linear-gradient(90deg, #3f9d78, var(--up)); }
:root[data-ver="v2"] .allocation-labels b { color: var(--text-1); }

:root[data-ver="v2"] .create-form-card { box-shadow: var(--shadow); }
:root[data-ver="v2"] .create-section-number {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
:root[data-ver="v2"] .seed-mint,
:root[data-ver="v2"] .create-artwork-field {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
:root[data-ver="v2"] .create-artwork-field .logo-drop { background-color: var(--surface-3); }
:root[data-ver="v2"] .project-details { background: var(--surface-2); border-color: var(--line); }
:root[data-ver="v2"] .project-details > summary:hover { background: var(--surface-3); }
:root[data-ver="v2"] .project-details > summary small { background: var(--surface-3); color: var(--text-3); }
/* Dark-green-on-dark-green: the badge that said a field was filled could not be
   read at all until this line. */
:root[data-ver="v2"] .project-details > summary small[data-meta-badge].filled {
  background: rgba(92, 200, 148, .16);
  color: var(--up-ink);
}
:root[data-ver="v2"] .create-meta-status.good {
  background: rgba(92, 200, 148, .12);
  color: var(--up-ink);
}
:root[data-ver="v2"] .create-submit-section { background: var(--surface-2); }

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

:root[data-ver="v2"] .card-venue span { background: var(--surface-3); border-color: var(--line); color: var(--text-2); }
:root[data-ver="v2"] .card-fees,
:root[data-ver="v2"] .card-flag { background: var(--accent-wash); border-color: var(--line-accent); color: var(--accent-ink); }

:root[data-ver="v2"] .history-data { background: var(--line); border-color: var(--line); }
:root[data-ver="v2"] .history-data > div { background: var(--surface-2); }
:root[data-ver="v2"] .history-url,
:root[data-ver="v2"] .history-actions a,
:root[data-ver="v2"] .copy-mini,
:root[data-ver="v2"] .linkish,
:root[data-ver="v2"] .logo-alt > summary,
:root[data-ver="v2"] .logo-result-mirror a,
:root[data-ver="v2"] .fee-line a,
:root[data-ver="v2"] .amount-field .bottom button { color: var(--accent-ink); }
:root[data-ver="v2"] .history-actions a.history-claim {
  background: var(--accent);
  color: var(--bg);
}

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

:root[data-ver="v2"] .token-project {
  background: var(--surface-2);
  border: 1px solid var(--line);
}
:root[data-ver="v2"] .token-project p { color: var(--text-2); }
:root[data-ver="v2"] .token-project a { color: var(--accent-ink); text-decoration: underline; }

/* `--white`, `--ink` and `--orange` were never declared anywhere on this site,
   so this link had no fill and inherited its colour by accident. Given both,
   explicitly, rather than left to luck. */
:root[data-ver="v2"] .token-market-link {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-1);
  box-shadow: var(--shadow-sm);
}
:root[data-ver="v2"] .token-market-link:hover { border-color: var(--line-accent); box-shadow: var(--shadow); }
:root[data-ver="v2"] .token-market-arrow { color: var(--text-3); }

:root[data-ver="v2"] .copy-ca { background: var(--accent-wash); border-color: var(--line-accent); color: var(--accent-ink); }
:root[data-ver="v2"] .copy-ca:hover { background: var(--surface-3); border-color: var(--accent); }
:root[data-ver="v2"] .back-link:hover { color: var(--accent-ink); }

:root[data-ver="v2"] .tabs { background: var(--surface-2); }
:root[data-ver="v2"] .tabs button[aria-selected="true"] {
  background: var(--accent);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}

:root[data-ver="v2"] .trade-switch { background: var(--surface-2); }
:root[data-ver="v2"] .trade-switch button[aria-pressed="true"][data-side="buy"] { background: var(--up); color: #06120c; }
:root[data-ver="v2"] .trade-switch button[aria-pressed="true"][data-side="sell"] { background: var(--down); color: #1a0605; }
:root[data-ver="v2"][data-theme="light"] .trade-switch button[aria-pressed="true"][data-side="buy"],
:root[data-ver="v2"][data-theme="light"] .trade-switch button[aria-pressed="true"][data-side="sell"] { color: #fbf7ec; }

:root[data-ver="v2"] .amount-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
:root[data-ver="v2"] .amount-asset { background: var(--surface-4); color: var(--text-1); }
:root[data-ver="v2"] .amount-asset:hover { background: var(--accent); color: var(--bg); }

:root[data-ver="v2"] .trades-table th { background: var(--surface-2); }
:root[data-ver="v2"] .trades-table tbody tr:hover { background: var(--surface-2); }
:root[data-ver="v2"] .trade-side.buy { background: rgba(92, 200, 148, .16); color: var(--up-ink); }
:root[data-ver="v2"] .trade-side.sell { background: rgba(255, 128, 120, .15); color: var(--down-ink); }
@media (max-width: 640px) {
  :root[data-ver="v2"] .trades-table tr { background: var(--surface-1); border-color: var(--line); }
}

:root[data-ver="v2"] .curve-pct { color: var(--accent-ink); }
:root[data-ver="v2"] .curve-bar { background: var(--surface-3); }
:root[data-ver="v2"] .curve-bar span { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }

:root[data-ver="v2"] .fee-amounts { background: var(--line); border-color: var(--line); }
:root[data-ver="v2"] .fee-amounts > div { background: var(--surface-2); }
:root[data-ver="v2"] .fee-amounts dd { color: var(--text-1); }

/* The burn split: three bars that have to stay apart from each other AND from
   the ground behind them. */
:root[data-ver="v2"] .burn-math-bar { background: var(--surface-3); }
:root[data-ver="v2"] .burn-math-row.is-burn .burn-math-bar span { background: #ff8078; }
:root[data-ver="v2"] .burn-math-row.is-creator .burn-math-bar span { background: #edbb45; }
:root[data-ver="v2"] .burn-math-row.is-lp .burn-math-bar span { background: #5cc894; }
:root[data-ver="v2"] .burn-math-row.is-bad .burn-math-value b,
:root[data-ver="v2"] .burn-math-row.is-bad .burn-math-label small { color: var(--down-ink); }
:root[data-ver="v2"][data-theme="light"] .burn-math-row.is-burn .burn-math-bar span { background: #c53727; }
:root[data-ver="v2"][data-theme="light"] .burn-math-row.is-creator .burn-math-bar span { background: #8c6104; }
:root[data-ver="v2"][data-theme="light"] .burn-math-row.is-lp .burn-math-bar span { background: #0f7d57; }

:root[data-ver="v2"] .logo-drop { border-color: var(--line-accent); background-color: var(--surface-2); }
:root[data-ver="v2"] .logo-drop:hover { border-color: var(--accent); }
:root[data-ver="v2"] .logo-result { background: var(--surface-2); border-color: var(--line-accent); }

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

/* The phone bar. Same glass as the topbar so the two ends of the screen agree. */
@media (max-width: 720px) {
  :root[data-ver="v2"] .mobile-nav {
    background: var(--v2-sheet);
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: var(--v2-blur);
    backdrop-filter: var(--v2-blur);
  }
  :root[data-ver="v2"] .mobile-nav a { color: var(--text-3); }
  :root[data-ver="v2"] .mobile-nav a[aria-current="page"] {
    color: var(--bg);
    background: var(--accent);
  }
  :root[data-ver="v2"] .mobile-select-scrim {
    background: var(--v2-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  :root[data-ver="v2"] .mobile-select-sheet {
    background: var(--v2-sheet);
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: var(--v2-blur);
    backdrop-filter: var(--v2-blur);
  }
  :root[data-ver="v2"] .mobile-select-close { background: var(--surface-2); border-color: var(--line); color: var(--text-2); }
  :root[data-ver="v2"] .mobile-select-option[aria-selected="true"] { background: var(--accent-wash); color: var(--accent-ink); }
  :root[data-ver="v2"] .mobile-select-check { color: var(--accent); }
  :root[data-ver="v2"] .mobile-select-trigger { background: var(--surface-2); border-color: var(--line-strong); }
  :root[data-ver="v2"] .mobile-select-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

  /* Brand, two switches and the wallet on a 320px row. The switches give up
     three pixels each so nothing has to wrap. */
  :root[data-ver="v2"] .skin-switch { width: 30px; height: 30px; }
  :root[data-ver="v2"] .skin-switch svg { width: 15px; height: 15px; }
  :root[data-ver="v2"] .topbar-end { gap: 6px; }
  :root[data-ver="v2"] .wallet-btn { padding: 0 13px; font-size: 12.5px; }
}

/*
  The narrowest phones still sold — 320 CSS pixels, an iPhone SE in a wallet's
  in-app browser with its own chrome on top.

  V2's top row carries one more control than V1's did, and a connected wallet's
  label is eleven characters of monospace. Measured at 320px it ran 11px past the
  container and the address was clipped mid-word. Everything below is that 11px,
  taken back from padding and tracking rather than from anything anybody reads.
*/
@media (max-width: 380px) {
  :root[data-ver="v2"] .brand { gap: 6px; }
  :root[data-ver="v2"] .brand-name { font-size: 15px; letter-spacing: 0; }
  :root[data-ver="v2"] .topbar-end { gap: 5px; }
  :root[data-ver="v2"] .wallet-btn { padding: 0 9px; font-size: 11.5px; }
}

/* Mobile-first type. The phone gets the whole scale set for it, and the desktop
   sizes below are the exception rather than the default. */
:root[data-ver="v2"] .hero { padding: 30px 0 24px; }
:root[data-ver="v2"] .hero h1 { font-size: clamp(31px, 9vw, 44px); }
:root[data-ver="v2"] .hero p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
:root[data-ver="v2"] .market-head h2 { font-size: 27px; }
:root[data-ver="v2"] .token-ident h1 { font-size: 25px; }
:root[data-ver="v2"] .token-price .big { font-size: 27px; }

@media (min-width: 721px) {
  :root[data-ver="v2"] .hero { padding: 66px 0 42px; }
  :root[data-ver="v2"] .hero h1 { font-size: clamp(42px, 5.6vw, 64px); }
  :root[data-ver="v2"] .hero p { font-size: 16px; }
  :root[data-ver="v2"] .market-head h2 { font-size: 34px; }
  :root[data-ver="v2"] .token-ident h1 { font-size: 30px; }
  :root[data-ver="v2"] .token-price .big { font-size: 32px; }
}

/* Somebody who asked their system for less transparency has asked for this too.
   The panes go opaque; the layout is identical. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-ver="v2"] {
    --v2-bar: #111713;
    --v2-sheet: #171f1a;
    --v2-blur: none;
    --v2-blur-sm: none;
  }
  :root[data-ver="v2"][data-theme="light"] {
    --v2-bar: #f2ecdd;
    --v2-sheet: #fbf7ec;
  }
}

/* =========================================================
   THE WALLET MENU
   =========================================================

   Written for BOTH versions — the control is new to the site, not new to V2 —
   so every colour here is a token and nothing is hard-coded. Layout is its own
   because the component is its own; the rule about not touching layout is about
   components that already existed.
   ========================================================= */

.wallet-menu {
  position: fixed;
  z-index: 130;
  width: min(304px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
  animation: wallet-menu-in .16s var(--ease);
}
.wallet-menu[hidden] { display: none; }
@keyframes wallet-menu-in { from { opacity: 0; transform: translateY(-6px); } }

:root[data-ver="v2"] .wallet-menu {
  background: var(--v2-sheet);
  -webkit-backdrop-filter: var(--v2-blur);
  backdrop-filter: var(--v2-blur);
}

.wallet-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 12px;
}
.wallet-menu-dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--up);
  /* A ring of the same green. Declared twice so a browser without color-mix
     still gets a ring rather than none. */
  box-shadow: 0 0 0 3px rgba(92, 200, 148, .22);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent);
}
.wallet-menu-who { min-width: 0; flex: 1 1 auto; }
.wallet-menu-who b {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wallet-menu-who span {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wallet-menu-copy {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  touch-action: manipulation;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.wallet-menu-copy:hover { color: var(--text-1); border-color: var(--line-accent); }

.wallet-menu-balance {
  padding: 14px 13px 15px;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.wallet-menu-balance > span {
  display: block;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wallet-menu-balance b {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--text-1);
}
.wallet-menu-balance small {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
}

.wallet-menu-actions { display: grid; gap: 2px; margin-top: 6px; }
.wallet-menu-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.wallet-menu-action:hover { background: var(--surface-3); }
.wallet-menu-action span { color: var(--text-3); font-size: 12px; }
.wallet-menu-action.is-danger { color: var(--down-ink); }
.wallet-menu-action.is-danger:hover { background: rgba(255, 128, 120, .13); }
.wallet-menu-action.is-danger:hover { background: color-mix(in srgb, var(--down) 14%, transparent); }

/* =========================================================
   TRADE & ANALYTICS — three marks, one row
   =========================================================

   Written for BOTH versions, because the markup changed for both: the labels
   ("Swap on Uniswap") and the letter-in-a-coloured-square are gone, replaced by
   each service's own mark. A rule that only repainted V2 would leave V1 with three
   empty full-width bars.

   This is the one place in this file that sets layout on a pre-existing component,
   and it is deliberate: the component was redesigned, not repainted. It also has to
   beat `styles.css`'s phone rule, which stacks these into one column — which is
   exactly the stack this change exists to remove.
   ========================================================= */

.token-markets-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.token-market-link {
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  padding: 8px 6px;
}
/* Now an <img>, not a lettered <span>: the marks arrive with their own fields —
   Uniswap on pale pink, GMGN and DexScreener on black — so this must not paint one
   underneath, and must not stretch a square logo into the box. */
.token-market-mark {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
  background: transparent;
}
.token-market-arrow { font-size: 12px; line-height: 1; }

/* A phone is where the old stack hurt most, so the row gets a little tighter rather
   than being allowed to wrap back into one. */
@media (max-width: 420px) {
  .token-markets-links { gap: 7px; }
  .token-market-link { min-height: 44px; padding: 7px 4px; gap: 5px; }
  .token-market-mark { width: 24px; height: 24px; }
}

/* =========================================================
   SWITCHING
   =========================================================

   Set on <html> by skin.js for the one frame in which the theme or the version
   changes, and taken off again immediately.

   Without it, every rule on this site that animates `color` or `background` on
   hover also animates the palette swap — and a transition between two palettes
   runs THROUGH the midpoint, which on a dark/light flip is the old text colour on
   the new ground. For half a second the page looks broken. It is not: it is a
   crossfade nobody asked for.

   Unscoped, and `!important`, on purpose: this has to beat every transition in
   both stylesheets, in both versions, without knowing any of their names.
   ========================================================= */

:root[data-switching] *,
:root[data-switching] *::before,
:root[data-switching] *::after {
  transition: none !important;
  animation: none !important;
}

:root[data-ver="v2"] .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; }