:root {
    --paper: #f4f1ea;
    --paper-2: #ece8df;
    --paper-3: #e2ddd1;
    --ink: #1a1a1a;
    --ink-2: #3a3833;
    --ink-3: #6b6760;
    --ink-4: #9a958c;
    --rule: #cfc8b8;
    --rule-2: #ddd6c5;
    --brass: oklch(0.55 0.08 70);
    --brass-2: oklch(0.62 0.08 70);
    --brass-soft: oklch(0.88 0.04 70);
    --green: oklch(0.45 0.08 145);
    --green-soft: oklch(0.92 0.04 145);
    --rust: oklch(0.5 0.12 30);
    --rust-soft: oklch(0.92 0.05 30);
    --display: 'Newsreader', 'Iowan Old Style', 'Times New Roman', serif;
    --sans: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
  a { color: inherit; text-decoration: none; }
  input, select, textarea { font: inherit; color: inherit; }

  /* Render-quality product shot — simulates studio photography on a backdrop */
  .shot {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: rgba(255,255,255,0.78);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 14px 16px;
  }
  .shot::before {
    /* studio floor + soft vignette */
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background:
      radial-gradient(160% 80% at 50% 110%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.9) 100%),
      radial-gradient(80% 60% at 50% 35%, var(--shot-hi, #2a2a28) 0%, var(--shot-mid, #161513) 55%, var(--shot-lo, #0a0908) 100%);
  }
  .shot::after {
    /* subject silhouette + key light — abstract, no faked product */
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 56%; height: 64%;
    transform: translate(-50%, -52%);
    z-index: -1;
    background:
      radial-gradient(50% 60% at 38% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%),
      radial-gradient(60% 70% at 60% 60%, var(--shot-sub, rgba(180,150,90,0.18)) 0%, rgba(0,0,0,0) 70%),
      var(--shot-shape, radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0) 100%));
    filter: blur(0.4px);
  }
  .shot .tag {
    background: rgba(10,9,8,0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px 9px;
    color: rgba(255,255,255,0.82);
  }
  .shot.light {
    color: var(--ink-3);
  }
  .shot.light::before {
    background:
      radial-gradient(160% 80% at 50% 110%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 60%, rgba(0,0,0,0.14) 100%),
      radial-gradient(80% 60% at 50% 35%, #faf7f0 0%, #ece6d6 55%, #d9d1bd 100%);
  }
  .shot.light::after {
    background:
      radial-gradient(50% 60% at 38% 30%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%),
      var(--shot-shape, radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%));
  }
  .shot.light .tag {
    background: rgba(244,241,234,0.7); color: var(--ink-2);
    border-color: var(--rule);
  }
  /* per-product moods */
  .mood-batman   { --shot-hi:#1a2a3e; --shot-mid:#0b1424; --shot-lo:#050912; --shot-sub: rgba(120,170,240,0.18); }
  .mood-charizard{ --shot-hi:#3a2317; --shot-mid:#1f120a; --shot-lo:#0a0604; --shot-sub: rgba(240,140,60,0.22); }
  .mood-ap       { --shot-hi:#2e3236; --shot-mid:#16191c; --shot-lo:#080a0b; --shot-sub: rgba(200,210,220,0.18); }
  .mood-porsche  { --shot-hi:#2a2c30; --shot-mid:#101114; --shot-lo:#050608; --shot-sub: rgba(200,200,210,0.15); }
  .mood-nautilus { --shot-hi:#1f2a2e; --shot-mid:#0b1416; --shot-lo:#040708; --shot-sub: rgba(120,180,200,0.18); }
  .mood-jordan   { --shot-hi:#3a1818; --shot-mid:#1c0808; --shot-lo:#0a0303; --shot-sub: rgba(240,80,80,0.22); }
  .mood-birkin   { --shot-hi:#3a2a14; --shot-mid:#1b1308; --shot-lo:#080604; --shot-sub: rgba(230,180,80,0.22); }
  .mood-hermes   { --shot-hi:#3e2a14; --shot-mid:#1f1408; --shot-lo:#080503; --shot-sub: rgba(240,160,70,0.2); }
  .mood-paper.light { --shot-hi:#f6f1e4; --shot-mid:#e6dec8; --shot-lo:#d3c8aa; }

  /* legacy alias */
  .wf { display:flex; align-items:center; justify-content:center; }

  /* type utilities */
  .display { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
  .display-italic { font-family: var(--display); font-style: italic; font-weight: 400; }
  .mono { font-family: var(--mono); }
  .caps { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
  .micro { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); }
  .rule { border-top: 1px solid var(--rule); }

  /* App shell */
  .app {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
  }
  .topbar {
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .topbar-inner {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    height: 56px;
    padding: 0 28px;
    gap: 24px;
  }
  .wordmark {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .wordmark .mark {
    font-family: var(--display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.18em;
  }
  .wordmark .dot {
    width: 5px; height: 5px; background: var(--brass); border-radius: 50%;
    display: inline-block;
    transform: translateY(-2px);
  }
  .wordmark .tagline {
    font-family: var(--mono); font-size: 10px; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.12em;
  }
  .role-switch {
    display: flex;
    justify-content: center;
    gap: 0;
  }
  .role-switch button {
    padding: 6px 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    height: 56px;
  }
  .role-switch button.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }
  .top-utility {
    display: flex; align-items: center; gap: 18px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  }
  .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-family: var(--mono);
  }

  /* Layout: sub-nav + main */
  .layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 56px);
  }
  .subnav {
    border-right: 1px solid var(--rule);
    padding: 28px 0 28px 0;
    background: var(--paper);
  }
  .subnav h6 {
    margin: 0 28px 12px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
  }
  .subnav ul { list-style: none; padding: 0; margin: 0 0 24px 0; }
  .subnav li { }
  .subnav button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 8px 28px;
    font-size: 13px;
    color: var(--ink-2);
    border-left: 2px solid transparent;
  }
  .subnav button:hover { background: var(--paper-2); }
  .subnav button.active {
    background: var(--paper-2);
    border-left-color: var(--ink);
    color: var(--ink);
    font-weight: 500;
  }
  .subnav .step-num {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
  }
  .subnav button.active .step-num { color: var(--ink); }

  .main {
    padding: 36px 48px 80px;
    max-width: 1280px;
  }
  .page-hd {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--rule);
  }
  .page-hd .crumbs {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .page-hd h1 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 38px;
    letter-spacing: -0.015em;
    margin: 6px 0 0;
    line-height: 1.1;
  }
  .page-hd h1 em { font-style: italic; }
  .page-hd .lede {
    max-width: 360px;
    color: var(--ink-3);
    font-size: 13px;
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: background 0.12s, color 0.12s;
  }
  .btn:hover { background: var(--ink-2); }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
  }
  .btn-ghost:hover { background: var(--paper-2); }
  .btn-link {
    border: 0; padding: 4px 0; background: transparent; color: var(--ink);
    border-bottom: 1px solid var(--ink); border-radius: 0;
  }
  .btn-sm { padding: 6px 12px; font-size: 12px; }

  /* Badges */
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink-2);
  }
  .badge-verified {
    border-color: var(--green); color: var(--green); background: var(--green-soft);
  }
  .badge-brass {
    border-color: var(--brass); color: var(--brass); background: var(--brass-soft);
  }
  .badge-rust {
    border-color: var(--rust); color: var(--rust); background: var(--rust-soft);
  }
  .badge-ink {
    border-color: var(--ink); color: var(--paper); background: var(--ink);
  }
  .dot-status {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4);
    display: inline-block;
  }
  .dot-status.live { background: var(--green); animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
  }

  /* Cards */
  .card {
    background: var(--paper);
    border: 1px solid var(--rule);
  }
  .card-pad { padding: 22px; }
  .card-hd {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--rule);
  }
  .card-hd h3 {
    font-family: var(--display); font-weight: 400; font-size: 18px;
    margin: 0;
  }

  /* Drop card grid */
  .drop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
  }
  .drop-card {
    background: var(--paper);
    padding: 18px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .drop-card:hover { background: var(--paper-2); }
  .drop-card .img { aspect-ratio: 4 / 3; margin-bottom: 16px; }
  .drop-card h3 {
    font-family: var(--display); font-weight: 400; font-size: 19px;
    margin: 0 0 4px; letter-spacing: -0.01em;
  }
  .drop-card .host {
    font-size: 12px; color: var(--ink-3);
    margin-bottom: 12px;
  }
  .drop-card .meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 11px;
  }
  .drop-card .meta dt { color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; }
  .drop-card .meta dd { margin: 2px 0 0; color: var(--ink); font-size: 12px; }

  /* Progress bar */
  .progress {
    height: 4px; background: var(--rule); position: relative; overflow: hidden;
  }
  .progress > span {
    position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink);
  }

  /* Tables */
  table.t { width: 100%; border-collapse: collapse; }
  table.t th, table.t td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
  }
  table.t th {
    font-family: var(--mono); font-size: 10px; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
    background: var(--paper-2);
  }
  table.t tr:hover td { background: var(--paper-2); }

  /* Stat */
  .stat .label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
  .stat .num { font-family: var(--display); font-size: 28px; line-height: 1; margin-top: 4px; letter-spacing: -0.01em; }
  .stat .sub { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }

  /* Form */
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label {
    font-family: var(--mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--ink-3);
  }
  .field input, .field select, .field textarea {
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ink);
    outline: none;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--ink);
  }
  .field .hint { font-size: 11px; color: var(--ink-3); }

  /* Two-col layouts */
  .two-col {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
  }
  .three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
  }
  .three-col > * { background: var(--paper); padding: 18px; }

  /* Seat grid */
  .seat-grid {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 4px;
  }
  .seat {
    aspect-ratio: 1;
    border: 1px solid var(--rule);
    background: var(--paper);
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.1s;
  }
  .seat:hover { border-color: var(--ink); }
  .seat.taken {
    background: var(--paper-3);
    color: var(--ink-4);
    cursor: not-allowed;
    border-color: var(--rule);
  }
  .seat.taken:hover { border-color: var(--rule); }
  .seat.selected {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
    font-weight: 500;
  }
  .seat.winner {
    background: var(--brass); color: var(--paper); border-color: var(--brass);
  }

  /* Cinematic draw */
  .draw-stage {
    position: fixed; inset: 0;
    background: #0a0908;
    color: #f4f1ea;
    z-index: 100;
    overflow: hidden;
  }
  .draw-stage .scrim {
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 60%);
  }
  .draw-stage .grain {
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
    pointer-events: none;
  }

  /* misc */
  .stack-sm > * + * { margin-top: 8px; }
  .stack > * + * { margin-top: 16px; }
  .stack-lg > * + * { margin-top: 28px; }
  .row { display: flex; align-items: center; gap: 12px; }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
  .text-mute { color: var(--ink-3); }
  .text-num { font-family: var(--display); font-size: 28px; letter-spacing: -0.01em; }
  .text-num-sm { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; }
  .check {
    width: 14px; height: 14px; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
  }
  .check.ok { background: var(--ink); color: var(--paper); }

  /* checklist row */
  .check-row {
    display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--rule);
  }
  .check-row:last-child { border-bottom: 0; }

  /* tooltip-ish */
  .kv {
    display: grid; grid-template-columns: 1fr auto; gap: 6px;
    padding: 8px 0; border-bottom: 1px dotted var(--rule);
    font-family: var(--mono); font-size: 12px;
  }
  .kv:last-child { border-bottom: 0; }
  .kv .k { color: var(--ink-3); }
  .kv .v { color: var(--ink); }
  .kv.total { font-family: var(--sans); }
  .kv.total .v { font-family: var(--display); font-size: 18px; }

  /* notice */
  .notice {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink);
    padding: 14px 18px;
    background: var(--paper);
    font-size: 13px;
  }
  .notice.warn { border-left-color: var(--rust); }
  .notice.ok { border-left-color: var(--green); }
  .notice .micro { display: block; margin-bottom: 4px; }

  /* Tweaks panel overrides */
  body { --tweaks-anchor: 1; }

  /* GOAT-style market card */
  .goat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .goat-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .goat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
  .goat-card .shot { aspect-ratio: 4 / 5; }
  .goat-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
  .goat-card .body h3 {
    font-family: var(--display); font-weight: 400; font-size: 16px; margin: 0;
    letter-spacing: -0.005em; line-height: 1.15;
  }
  .goat-card .body .sub { font-size: 12px; color: var(--ink-3); }
  .goat-card .body .row-meta {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule);
  }
  .goat-card .price {
    font-family: var(--display); font-size: 18px; letter-spacing: -0.01em;
  }
  .goat-card .price small { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-left: 4px; }
  .goat-card .pill {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .goat-card .pill.live { color: var(--green); }
  .goat-card .pill.hot { color: var(--rust); }

  /* Hero rail */
  .hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }
  .hero-feature {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    color: #f4f1ea;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
  }
  .hero-feature .meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(244,241,234,0.7); margin-bottom: 10px;
  }
  .hero-feature h2 {
    font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3.4vw, 36px);
    letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 6px;
  }
  .hero-feature .lede { color: rgba(244,241,234,0.78); max-width: 460px; font-size: 13px; margin-bottom: 16px; }
  .hero-feature .row { gap: 10px; }
  .hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
  .hero-mini {
    position: relative;
    min-height: 200px;
    aspect-ratio: auto;
    overflow: hidden;
    color: #f4f1ea;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
  }
  .hero-mini h3 {
    font-family: var(--display); font-weight: 400; font-size: clamp(16px, 1.8vw, 22px); margin: 0;
    letter-spacing: -0.01em;
  }
  .hero-mini .meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(244,241,234,0.7); margin-bottom: 8px;
  }

  /* Reserve countdown — premium tile */
  .reserve {
    background: #0a0908;
    color: #f4f1ea;
    padding: 20px 22px;
    border: 1px solid #0a0908;
    position: relative;
    overflow: hidden;
  }
  .reserve .caps { color: rgba(244,241,234,0.5); }
  .reserve .num {
    font-family: var(--display); font-size: 56px; line-height: 1; letter-spacing: -0.02em;
    color: var(--brass-2);
  }
  .reserve .sub { color: rgba(244,241,234,0.7); font-family: var(--mono); font-size: 11px; }
  .reserve .progress {
    background: rgba(244,241,234,0.12);
    margin-top: 14px;
    height: 6px;
  }
  .reserve .progress > span { background: var(--brass-2); }
  .reserve .marker {
    position: relative;
    margin-top: 6px;
    height: 14px;
    font-family: var(--mono); font-size: 10px; color: rgba(244,241,234,0.55);
  }
  .reserve .marker .at-reserve {
    position: absolute;
    transform: translateX(-50%);
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--brass-2);
  }
  .reserve .marker .at-reserve::before {
    content: ""; display: block; width: 1px; height: 6px; background: var(--brass-2);
    margin: -10px auto 2px;
  }

  /* Countdown digits */
  .countdown { display: flex; gap: 8px; }
  .countdown .cell {
    background: rgba(244,241,234,0.06);
    border: 1px solid rgba(244,241,234,0.08);
    padding: 10px 12px;
    min-width: 56px;
    text-align: center;
  }
  .countdown .cell .v {
    font-family: var(--display); font-size: 28px; line-height: 1; letter-spacing: -0.01em;
    color: #f4f1ea;
  }
  .countdown .cell .l {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(244,241,234,0.5); margin-top: 4px;
  }

  /* Apple Pay button */
  .applepay {
    width: 100%;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 14px 18px;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    letter-spacing: 0.01em;
  }
  .applepay .glyph {
    font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
  }
  .pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .pay-tile {
    border: 1px solid var(--rule); padding: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--paper);
    font-size: 13px;
  }
  .pay-tile.active { border-color: var(--ink); }
  .pay-tile .pill {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
  }

  /* Today / daily hub */
  .streak-tile {
    background: #0a0908; color: #f4f1ea; padding: 22px; overflow: hidden; position: relative;
  }
  .streak-tile .num { font-family: var(--display); font-size: 64px; line-height: 1; color: var(--brass-2); letter-spacing: -0.02em; }
  .streak-tile .caps { color: rgba(244,241,234,0.55); }
  .streak-dots { display: flex; gap: 6px; margin-top: 16px; }
  .streak-dots .d {
    width: 22px; height: 22px; border: 1px solid rgba(244,241,234,0.18);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px; color: rgba(244,241,234,0.5);
  }
  .streak-dots .d.on { background: var(--brass-2); color: #0a0908; border-color: var(--brass-2); }
  .streak-dots .d.today { border-color: var(--brass-2); color: var(--brass-2); }

  .feed-item {
    display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--rule);
  }
  .feed-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--paper-3); color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 11px;
  }

  /* Storefront */
  .store-hero {
    position: relative; min-height: 260px;
    overflow: hidden; color: #f4f1ea;
    padding: 28px; display: flex; align-items: flex-end;
  }
  .store-hero .info { z-index: 2; }
  .store-hero h2 {
    font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.6vw, 44px);
    letter-spacing: -0.015em; margin: 0; line-height: 1.05;
  }
  .store-hero .row { gap: 12px; margin-top: 10px; color: rgba(244,241,234,0.75); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
  .store-tabs {
    display: flex; gap: 0; border-bottom: 1px solid var(--rule); margin: 24px 0 18px;
  }
  .store-tabs button {
    padding: 10px 18px; font-size: 13px; color: var(--ink-3);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .store-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }

  /* AI panel */
  .ai-panel {
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 18px 20px;
    position: relative;
  }
  .ai-panel .ai-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  }
  .ai-panel .ai-orb {
    width: 22px; height: 22px; border-radius: 50%;
    background: conic-gradient(from 90deg, var(--brass), var(--ink-2), var(--brass));
    box-shadow: inset 0 0 4px rgba(0,0,0,0.4);
  }
  .ai-pill {
    background: var(--paper-2); border: 1px solid var(--rule);
    padding: 4px 10px; font-size: 12px; cursor: pointer;
    transition: background 0.12s;
  }
  .ai-pill:hover { background: var(--paper-3); }

  /* Generic dark-shot helpers */
  .full-dark {
    background: #0a0908; color: #f4f1ea;
  }
  .full-dark::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(60% 80% at 30% 60%, var(--shot-hi, #2a2a28) 0%, rgba(0,0,0,0) 70%),
      radial-gradient(70% 90% at 75% 40%, var(--shot-sub, rgba(180,150,90,0.16)) 0%, rgba(0,0,0,0) 70%);
  }
  .full-dark > * { position: relative; z-index: 1; }