/* Genesis 95 — layout and components.
   Base design: Figma "tonsurge" (genesis ui1–ui3, 440 px frames); premium refinement pass Oct 2026.
   Principles: depth from surface contrast and hairlines (no coloured shadows or glows), one type
   scale, three radii, tabular numbers, gold only for ownership/winning. Tokens are in brand.css.
   Every class/ID that app.js renders or queries is kept; ui.js adds the read-only extras. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 400;
  font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; -webkit-tap-highlight-color: transparent; font-feature-settings: "ss01";
}
body.app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
body.sheet-open, body.pop-open { overflow: hidden; }
h1, h2, h3, p { margin: 0; font-weight: 500; }
p { font-weight: 400; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--text); color: #000; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.muted { color: var(--t60); }
.num, .stat-value, .price, .amt, .clock { font-variant-numeric: tabular-nums; }

/* press feedback on everything tappable */
.tap { transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.16s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.tap:active { transform: scale(0.975); filter: brightness(1.12); }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 30; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 0 18px;
  background: rgba(0, 0, 0, 0.74); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.wordmark { height: 24px; width: auto; }
.top-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.btn-connect {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--grad-connect); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 160px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.btn-connect[data-connected="true"] { background: var(--s3); border-color: var(--line-2); color: var(--text); padding: 0 13px 0 11px; }
.btn-connect[data-connected="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.btn-connect[data-connected="true"]:hover { background: var(--s4); }
.btn-connect[disabled] { opacity: 0.6; cursor: default; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; flex: none;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--s2); color: var(--t80);
}
.icon-btn:hover { background: var(--s3); color: #fff; }
.icon-btn[aria-expanded="true"] { background: var(--s4); border-color: var(--line-3); color: #fff; }
.badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 500; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px #000;
}

/* ---------- notifications ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 35; padding: 68px 12px 0;
  background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; justify-content: flex-end; align-items: flex-start; animation: fade-in 0.16s ease-out;
}
body.bell-open .top { z-index: 36; }
.pop-panel {
  width: min(372px, 100%); max-height: calc(100vh - 100px); overflow-y: auto; padding: 14px 12px 10px; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: #0d0d0f; box-shadow: var(--float), var(--sheen); animation: pop-in 0.18s ease-out;
}
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 10px; }
.pop-head h2 { font-size: 16px; }
.link-btn { border: 0; background: none; color: var(--blue-ink); font-size: 13px; padding: 4px 6px; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.notes li { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; padding: 11px 10px; border-radius: 14px; background: transparent; border: 1px solid transparent; }
.notes li[data-read="false"] { background: var(--s2); border-color: var(--line); }
.note-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--s3); color: var(--t80); }
.note-ic[data-kind="won"], .note-ic[data-kind="pass"] { background: var(--gold-wash); color: var(--gold-ink); }
.note-ic[data-kind="outbid"] { background: var(--red-wash); color: var(--red-ink); }
.note-ic[data-kind="bid"] { background: var(--blue-wash); color: var(--blue-ink); }
.note-ic[data-kind="refund"] { background: var(--amber-wash); color: var(--amber-ink); }
.note-text { font-size: 13px; line-height: 1.4; color: var(--t80); }
.note-time { display: block; margin-top: 3px; font-size: 11px; color: var(--t40); }
.notes .list-empty { display: block; grid-template-columns: none; background: none; }

/* ---------- notices ---------- */
.notice {
  display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 16px; font-size: 11px; color: var(--t50); text-align: center; border-bottom: 1px solid var(--line); letter-spacing: 0.01em;
}
.notice-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex: none; }
.notice-sep { color: var(--t30); }
html[data-network="mainnet"] .notice { display: none; }
.origin-warn { max-width: 440px; margin: 12px auto 0; padding: 12px 14px; border-radius: 14px; background: var(--amber-wash); border: 1px solid rgba(245, 165, 36, 0.3); color: var(--amber-ink); font-size: 13px; }

/* ---------- views ---------- */
.view { width: 100%; max-width: 440px; margin: 0 auto; padding: 0 16px; animation: fade-in 0.22s ease-out; }

/* ---------- brand effects (brand-fx.js) ---------- */
.fx { position: relative; isolation: isolate; }
.fx-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fx-fallback { position: absolute; inset: var(--fx-inset, 8%); width: calc(100% - 2 * var(--fx-inset, 8%)); height: calc(100% - 2 * var(--fx-inset, 8%)); object-fit: contain; transition: opacity 0.6s ease; pointer-events: none; }
.fx[data-fx-ready="true"] .fx-fallback { opacity: 0; }

/* ---------- loading: brand introduction (Electric Logo) ---------- */
.boot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 150px); min-height: calc(100svh - 150px); padding: 24px 16px 60px; text-align: center; }
.boot-mark { width: 176px; height: 176px; --fx-inset: 21%; }
.boot-mark .fx-fallback { opacity: 0.16; }
.boot-mark[data-fx-fallback="true"] .fx-fallback { opacity: 0.9; }
.boot-title { margin-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--t70); padding-left: 0.32em; }
.boot-sub { margin-top: 10px; font-size: 12.5px; color: var(--t40); }
.boot-dots::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.4s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1.2em; } }
.tile.loading .tile-label, .tile.loading .amt, .tile.loading .m1, .tile.loading .m2, .tile.loading .tile-btn { color: transparent; }
.tile.loading .amt, .tile.loading .tile-label, .tile.loading .tile-micro span { background: var(--s3); border-radius: 6px; }
.tile.loading .tile-btn::after { opacity: 0; }
.stat-value.loading { color: transparent !important; -webkit-text-fill-color: transparent; background: var(--s3) !important; border-radius: 8px; min-width: 2.2em; }

/* ---------- start page (no wallet) ---------- */
.landing { padding-bottom: 0; }
.bleed { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.hero {
  text-align: center; padding: 34px 4px 0;
  margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50% + 4px);
  background: radial-gradient(70% 46% at 50% 0%, #161618 0%, #070708 62%, #000 100%);
}
.hero-mark { width: 112px; height: 112px; margin: 0 auto 18px; --fx-inset: 4%; }
.hero-mark .fx-fallback { opacity: 0.92; }
.live-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--s2); font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--t80);
}
.pulse-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 0 3px rgba(47, 211, 107, 0.16); }
.hero-title {
  margin-top: 18px; font-size: 64px; font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; white-space: nowrap; padding-bottom: 4px;
  background: var(--silver-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { width: 360px; max-width: 100%; margin: 16px auto 0; font-size: 15px; line-height: 1.55; color: var(--t50); }
.hero-tags { display: flex; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hero-tags li {
  height: 30px; display: grid; place-items: center; padding: 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: transparent; font-size: 12.5px; color: var(--t70); white-space: nowrap;
}
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.cta {
  height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--s2); color: #fff; font-size: 15px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.cta:hover { background: var(--s3); }
.cta.primary { background: var(--grad-button); border-color: transparent; }
.cta.primary:hover { filter: brightness(1.06); }

.pass-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; margin-top: 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pass-row::-webkit-scrollbar { display: none; }
.pass-card { margin: 0; scroll-snap-align: start; padding: 6px; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sheen); }
.pass-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 17px; }
.pass-card figcaption { display: grid; gap: 2px; padding: 12px 6px 8px; text-align: center; }
.pass-card b { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; }
.pass-card span { font-size: 12px; color: var(--t46); font-variant-numeric: tabular-nums; }

.about { margin-top: 52px; }
.about h2 { font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.about > p { max-width: 380px; margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--t50); }
.chips {
  display: flex; gap: 8px; margin: 26px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%);
  overflow-x: auto; scrollbar-width: none; scroll-padding-inline: calc(50vw - 50%);
}
.chips::-webkit-scrollbar { display: none; }
.bchip {
  flex: none; height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: var(--s2); color: var(--t80); font-size: 13.5px; white-space: nowrap; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.bchip[aria-selected="true"] { background: #fff; border-color: #fff; color: #000; }
.benefits {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; margin: 20px -4px 0; padding: 0 0 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.benefits::-webkit-scrollbar { display: none; }
.benefit { scroll-snap-align: center; border-radius: 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sheen); }
.benefit-art {
  position: relative; height: 150px; display: grid; place-items: center;
  background: url("benefit-shield.jpg") center / cover no-repeat, linear-gradient(180deg, #2f9cf0 0%, #64c4fb 100%);
}
.benefit-art.has-sticker { background: linear-gradient(180deg, #2f9cf0 0%, #64c4fb 100%); }
.benefit-art canvas { width: 124px; height: 124px; opacity: 0; transition: opacity 0.3s ease; }
.benefit-art.has-sticker canvas { opacity: 1; }
.benefit-body { padding: 24px 22px 28px; text-align: center; }
.benefit-body h3 { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.benefit-body p { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--t50); }

.how { margin-top: 56px; padding-top: 52px; padding-bottom: 48px; background: #060607; border-top: 1px solid var(--line); scroll-margin-top: 60px; }
.how-title { font-size: 32px; font-weight: 500; line-height: 1.15; text-align: center; letter-spacing: -0.025em; }
.how-sub { margin-top: 8px; font-size: 14px; text-align: center; color: var(--t50); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; max-width: 408px; margin-inline: auto; }
.how-card {
  min-height: 128px; padding: 16px 14px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--sheen);
}
.how-card h3 { font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.how-card p { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--t50); }
.how-card.wide { grid-column: 1 / -1; min-height: 0; }
.how-card.blue { border-color: rgba(108, 203, 255, 0.35); background: linear-gradient(115deg, #2b97ea 0%, #4cb5fb 100%); }
.how-card.blue p { color: rgba(255, 255, 255, 0.88); }

/* ---------- cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sheen); }

/* ---------- section titles ---------- */
.section-title { font-size: 30px; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; white-space: nowrap; }
.section-title.center { text-align: center; }
.section-title.small { margin-top: 40px; font-size: 22px; }
.ids { padding-top: 26px; }
.page-title { margin-top: 30px; font-size: 30px; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; padding-left: 2px; }
.page-title.sub { margin-top: 36px; font-size: 22px; padding-left: 2px; }
.page-sub { margin-top: 6px; padding-left: 2px; font-size: 13px; color: var(--t46); }

/* ---------- segmented filter ---------- */
.seg { display: flex; height: 38px; margin-top: 20px; padding: 3px; border-radius: var(--r-pill); background: var(--s2); border: 1px solid var(--line); }
.seg button {
  flex: 1 1 auto; min-width: 0; height: 30px; border: 0; border-radius: var(--r-pill); background: transparent;
  font-size: 13.5px; font-weight: 500; line-height: 30px; color: var(--t50); white-space: nowrap; padding: 0 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.seg button:hover { color: var(--t80); }
.seg button[aria-pressed="true"] { background: var(--s4); color: #fff; box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.seg-4 { max-width: 360px; margin-top: 14px; }

.search-row { display: flex; gap: 8px; margin-top: 10px; }
.field { display: flex; align-items: center; height: 40px; border-radius: var(--r-pill); background: var(--s2); border: 1px solid var(--line); color: var(--t80); }
.field.search { position: relative; flex: 1 1 auto; min-width: 0; }
.field:focus-within { border-color: var(--line-3); }
.search-ic { position: absolute; left: 14px; color: var(--t40); pointer-events: none; }
.field input {
  width: 100%; height: 38px; border: 0; background: transparent; font-size: 13.5px; outline: none; border-radius: var(--r-pill); padding: 0 14px 0 36px; text-align: left;
}
.field input::placeholder { color: var(--t40); }
.field input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.6; }

/* themed dropdown (replaces the system select) */
.dropdown { position: relative; flex: 0 0 136px; }
.dd-btn { width: 100%; justify-content: space-between; gap: 6px; padding: 0 14px; font-size: 13.5px; color: var(--t80); }
.dd-btn:hover { border-color: var(--line-2); }
.dd-btn svg { color: var(--t46); transition: transform 0.2s ease; flex: none; }
.dd-btn[aria-expanded="true"] { border-color: var(--line-3); }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-list {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 228px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--line-2); border-radius: 18px; background: #0f0f11;
  box-shadow: var(--float); animation: pop-in 0.16s ease-out;
}
.dd-list li { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; color: var(--t80); cursor: pointer; font-variant-numeric: tabular-nums; }
.dd-list li::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--t30); flex: none; }
.dd-list li[aria-selected="true"] { color: #fff; }
.dd-list li[aria-selected="true"]::after { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 0 3.5px, transparent 4px); }
.dd-list li:hover, .dd-list li.active { background: var(--s3); }

/* ---------- lead note + ending-soon rail (ui.js) ---------- */
.lead-note {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--blue-line); background: linear-gradient(180deg, rgba(48, 161, 245, 0.09), rgba(48, 161, 245, 0.03));
  font-size: 13px; line-height: 1.45; color: var(--t70);
}
.lead-note b { color: #fff; font-weight: 500; }
.lead-note .ln-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--blue-wash); color: var(--blue-ink); flex: none; margin-top: 1px; }
.lead-note[data-kind="won"] { border-color: var(--gold-line); background: linear-gradient(180deg, rgba(216, 180, 106, 0.09), rgba(216, 180, 106, 0.03)); }
.lead-note[data-kind="won"] .ln-ic { background: var(--gold-wash); color: var(--gold-ink); }
.lead-note .ln-go { margin-left: auto; align-self: center; flex: none; border: 0; background: none; padding: 4px 2px 4px 8px; color: var(--blue-ink); font-size: 13px; font-weight: 500; }
.lead-note[data-kind="won"] .ln-go { color: var(--gold-ink); }

.ending { margin-top: 22px; }
.ending-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--t70); letter-spacing: 0.01em; }
.ending-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.ending-rail {
  display: flex; gap: 10px; margin: 10px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%) 2px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 16px;
}
.ending-rail::-webkit-scrollbar { display: none; }
.rail-item {
  flex: none; width: 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px 13px; scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--sheen); color: #fff; text-align: left;
}
.rail-item:hover { border-color: var(--line-2); }
.rail-item[data-mine="true"] { border-color: var(--blue-line); }
.ri-id { font-size: 13px; font-weight: 500; color: var(--t80); }
.ri-clock { font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--amber-ink); }
.ri-amt { font-size: 11.5px; color: var(--t50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-variant-numeric: tabular-nums; }
.rail-item[data-mine="true"] .ri-amt { color: var(--blue-ink); }

[data-urgency="soon"] { color: var(--amber-ink) !important; }
[data-urgency="now"] { color: var(--red-ink) !important; }

/* ---------- ID cards ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 196px; padding: 14px 14px 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sheen);
  text-align: left; overflow: hidden; color: inherit;
}
.tile:hover { border-color: var(--line-2); }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 20px; }
.tile-id { font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; }
.tile-label { margin-top: 16px; font-size: 11px; line-height: 14px; color: var(--t46); white-space: nowrap; align-self: flex-start; letter-spacing: 0.01em; }
.price { display: flex; align-items: baseline; gap: 5px; margin-top: 3px; font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; white-space: nowrap; }
.price small, .usdt { font-size: 10px; font-weight: 500; color: var(--t40); letter-spacing: 0.06em; }
.bar { position: relative; height: 2px; margin-top: 12px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--green); transform-origin: left center; transform: scaleX(0); transition: transform 1s linear; }
.tile[data-phase="ending"] .bar i, .tile[data-phase="closing"] .bar i { background: var(--amber); }
.tile[data-phase="sold"] .bar i { background: rgba(255, 255, 255, 0.28); }
.tile-micro { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: var(--t46); white-space: nowrap; min-width: 0; }
.tile-micro span { overflow: hidden; text-overflow: ellipsis; }
.tile-micro .m2 { order: -1; color: var(--t80); font-variant-numeric: tabular-nums; }
.tile-micro .m1 { font-size: 10.5px; color: var(--t40); font-variant-numeric: tabular-nums; }
.tile[data-phase="ending"] .m2, .tile[data-phase="closing"] .m2 { color: var(--amber-ink); }
.tile[data-mine="lost"][data-phase="live"] .m2 { color: var(--red-ink); }
.tile-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 40px; margin: auto -14px 0; padding: 0 14px;
  border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); font-size: 12.5px; font-weight: 500; color: var(--t80);
}
.tile-btn::after {
  content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.55; margin-right: 3px;
}
.tile:hover .tile-btn { background: rgba(255, 255, 255, 0.035); color: #fff; }
/* your leading ID: precise blue keyline, no glow */
.tile[data-mine="lead"] { border-color: var(--blue-line); background: linear-gradient(180deg, rgba(48, 161, 245, 0.07) 0%, rgba(48, 161, 245, 0) 46%), var(--surface); }
.tile[data-mine="lead"] .tile-btn { color: var(--blue-ink); }
.tile[data-mine="lead"][data-phase="live"] .m2 { color: var(--blue-ink); }
/* your won ID: Genesis gold keyline */
.tile[data-mine="lead"][data-phase="sold"] { border-color: var(--gold-line); background: linear-gradient(180deg, rgba(216, 180, 106, 0.08) 0%, rgba(216, 180, 106, 0) 46%), var(--surface); }
.tile[data-mine="lead"][data-phase="sold"] .tile-btn, .tile[data-mine="lead"][data-phase="sold"] .m2 { color: var(--gold-ink); }
.tile[data-mine="lead"][data-phase="sold"] .bar i { background: var(--gold); }
.tile[data-phase="sold"]:not([data-mine="lead"]) .price { color: var(--t70); }

/* status pills: tinted, never neon */
.status {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); flex: none;
  font-size: 10.5px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--t70); background: rgba(255, 255, 255, 0.07); letter-spacing: 0.01em;
}
.status[data-tone="green"] { background: var(--green-wash); color: var(--green-ink); }
.status[data-tone="amber"] { background: var(--amber-wash); color: var(--amber-ink); }
.status[data-tone="blue"] { background: var(--blue-wash); color: var(--blue-ink); }
.status[data-tone="red"] { background: var(--red-wash); color: var(--red-ink); }
.status[data-tone="dim"] { background: rgba(255, 255, 255, 0.05); color: var(--t60); }
.status[data-tone="gold"] { background: var(--gold-wash); color: var(--gold-ink); }
.status:empty { display: none; }

.empty { margin-top: 24px; text-align: center; color: var(--t50); }
.link-more { display: flex; align-items: center; gap: 6px; margin: 20px auto 0; padding: 0 18px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s2); font-size: 13.5px; font-weight: 500; line-height: 1; color: var(--t80); }
.link-more:hover { background: var(--s3); color: #fff; }
.link-more .chev { color: var(--t46); transition: transform 0.25s ease; }
.link-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.freshness { margin-top: 10px; text-align: center; font-size: 11.5px; color: var(--amber-ink); }

/* ---------- Overview ---------- */
.live-card { margin-top: 20px; }
.ov-hero, .w-hero {
  padding: 22px 18px 16px; text-align: center; border-radius: var(--r-xl);
  background: radial-gradient(120% 70% at 50% 0%, #171719 0%, #0c0c0d 58%, #09090a 100%);
}
.w-hero { margin-top: 20px; padding-top: 24px; }
.ov-pill { font-size: 13px; }
.ov-label { margin-top: 18px; font-size: 12px; color: var(--t46); letter-spacing: 0.02em; }
.w-hero .ov-label { margin-top: 0; }
.ov-volume { margin-top: 2px; font-size: 52px; font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; }
.ov-volume .stat-value { display: block; width: 100%; white-space: nowrap; overflow: hidden; }
.ov-hero .live-sub { width: auto; max-width: 300px; margin: 8px auto 0; font-size: 13px; color: var(--t46); min-height: 18px; }
.next-strip {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 20px; padding: 10px 12px 10px 10px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s2); color: #fff;
}
.next-strip:not([disabled]):hover { border-color: var(--line-2); background: var(--s3); }
.next-strip[disabled] { cursor: default; }
.next-strip[disabled]:active { transform: none; filter: none; }
.ns-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--s3); color: var(--t70); flex: none; }
.ns-text { display: flex; flex-direction: column; min-width: 0; }
.ns-label { font-size: 11px; color: var(--t46); }
.ns-sub { font-size: 13.5px; font-weight: 500; color: var(--t80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-clock { margin-left: auto; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.ns-chev { color: var(--t40); flex: none; }
.next-strip[disabled] .ns-chev { opacity: 0; }
.next-strip[disabled] .ns-clock { color: var(--t40); }
.ov-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ov-stats.three { grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.ov-stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 2px 4px; text-decoration: none; color: inherit; border-radius: 10px; }
.ov-stat + .ov-stat::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.ov-stat .stat-value { display: block; max-width: 100%; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; }
.ov-stat-label { font-size: 11px; color: var(--t46); white-space: nowrap; }
a.ov-stat:hover .ov-stat-label { color: var(--t80); }
.ov-stat.top .stat-value { color: var(--gold-ink); }
.ov-foot { margin-top: 12px; font-size: 11.5px; color: var(--t40); }

/* legacy stat tiles (Profile) */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; text-align: left; }
.stat { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 15px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); text-decoration: none; overflow: hidden; }
.stat-label { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--t50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { font-weight: 500; white-space: nowrap; overflow: hidden; }
.stat-sub { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--t46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-card { margin-top: 12px; padding: 10px; border-radius: var(--r-xl); }
.stats.big .stat-value { margin-top: 6px; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.stats.big .wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.stats.big .wide .stat-value { margin-top: 0; font-size: 22px; }
.stat-value .unit { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--t40); letter-spacing: 0.06em; }
.green { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- my bids ---------- */
.bid-list { display: grid; gap: 12px; margin-top: 14px; }
.bid-card {
  position: relative; display: flex; flex-direction: column; padding: 16px 16px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sheen); overflow: hidden;
}
.bid-card .tile-id { font-size: 16px; }
.bid-card .tile-label { margin-top: 14px; font-size: 11.5px; }
.bid-card .price { font-size: 32px; margin-top: 2px; }
.bid-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bid-row span { display: block; font-size: 11px; line-height: 1.4; color: var(--t46); }
.bid-row b { display: block; margin-top: 1px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bid-row > div:last-child { text-align: right; }
.bid-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.bid-btns button, .bid-btns a {
  height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s3); font-size: 14px; font-weight: 500; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; text-decoration: none;
}
.bid-btns button:hover { background: var(--s4); }
.bid-btns .primary { background: var(--grad-button); border-color: transparent; }
.bid-btns .primary:hover { background: var(--grad-button); filter: brightness(1.06); }
.bid-btns [disabled] { opacity: 0.55; cursor: default; }
.bid-btns .lost { background: var(--red-wash); border-color: rgba(255, 107, 107, 0.25); color: var(--red-ink); opacity: 1 !important; }
.bid-card[data-kind="leading"] { border-color: var(--blue-line); }
.bid-card[data-kind="won"] { border-color: var(--gold-line); background: radial-gradient(110% 80% at 0% 0%, rgba(216, 180, 106, 0.1) 0%, rgba(216, 180, 106, 0) 55%), var(--surface); }
.bid-card[data-kind="won"] .status { background: var(--gold-wash); color: var(--gold-ink); }
.bid-card[data-kind="won"] .bid-btns .primary { background: var(--grad-gold); color: #1d1606; }
.bid-card[data-kind="won"] .bid-row > div:last-child b { color: var(--gold-ink); }
.list-empty { padding: 28px 20px; text-align: center; color: var(--t50); border: 1px dashed var(--line-2); border-radius: var(--r-lg); font-size: 13.5px; }

/* ---------- on-chain details ---------- */
.onchain { margin-top: 12px; }
.chain-card { margin-top: 14px; padding: 16px 14px 12px; border-radius: var(--r-xl); font-size: 13.5px; }
.chain-card > .muted { padding: 0 4px 6px; font-size: 13px; line-height: 1.5; color: var(--t50); }
.chain { display: grid; gap: 6px; margin: 10px 0 0; }
.chain-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); }
.chain-row dt { font-size: 11.5px; color: var(--t46); }
.chain-row dd { margin: 2px 0 0; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-row dd.mono { font-family: var(--mono); font-size: 12.5px; }
.row-btns { display: flex; gap: 6px; }
.mini-icon {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--s3); color: var(--t80); text-decoration: none; flex: none;
}
.mini-icon:hover { background: var(--s4); color: #fff; }

/* ---------- winners ---------- */
.list-card { margin-top: 14px; padding: 2px 16px; border-radius: var(--r-xl); }
.winners { list-style: none; margin: 0; padding: 0; }
.winners li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 76px; padding: 13px 0; border-top: 1px solid var(--line); }
.winners li:first-child { border-top: 0; }
.w-art { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); }
.w-id { font-size: 15.5px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.w-addr { font-size: 12px; color: var(--t50); font-weight: 400; font-variant-numeric: tabular-nums; }
.w-time { display: block; margin-top: 1px; font-size: 11px; color: var(--t40); }
.w-amt { text-align: right; font-size: 16px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.w-amt small { display: block; margin-top: 1px; font-size: 10px; color: var(--t40); font-weight: 500; letter-spacing: 0.06em; }
.winners li[data-mine="true"] .w-addr { color: var(--gold-ink); }
.winners .list-empty { display: block; border: 0; min-height: 0; }

/* ---------- profile ---------- */
.profile-card { margin-top: 20px; padding: 18px 16px 16px; }
.profile-head { display: flex; align-items: center; gap: 15px; min-height: 66px; }
.avatar-wrap { position: relative; flex: none; }
.avatar { width: 66px; height: 66px; border-radius: 19px; object-fit: cover; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); }
.avatar.big { width: 92px; height: 92px; border-radius: 26px; }
.edit-box {
  position: absolute; left: -5px; bottom: -5px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 2px solid #0b0b0c; border-radius: 9px; background: var(--grad-button); color: #fff;
}
.profile-id { min-width: 0; flex: 1 1 auto; }
.profile-name { font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
.profile-addr { font-family: var(--mono); font-size: 12px; color: var(--t50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.addr-row .mini-icon { width: 26px; height: 26px; border-radius: 8px; }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 18px; }
.pill-info, .pill-btn {
  min-width: 0; height: 54px; border-radius: var(--r-md); background: var(--s2); color: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 13px; text-decoration: none;
}
.pi-label { font-size: 10px; font-weight: 500; color: var(--t46); letter-spacing: 0.1em; }
.pi-value { margin-top: 1px; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-variant-numeric: tabular-nums; }
.pill-btn { align-items: center; font-size: 13.5px; font-weight: 500; color: var(--t80); }
.pill-btn:hover { background: var(--s3); color: #fff; }
.alert { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--amber-wash); border: 1px solid rgba(245, 165, 36, 0.28); color: var(--amber-ink); font-size: 13px; }
.refund-card { margin-top: 12px; padding: 14px 14px 14px 18px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-color: rgba(245, 165, 36, 0.3); }
.refund-card p { font-size: 12.5px; color: var(--t60); }
.refund-card strong { display: block; margin-top: 2px; font-size: 19px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.refund-card .pill-btn { width: auto; height: 42px; flex: none; padding: 0 18px; border-radius: var(--r-pill); border-color: transparent; background: var(--grad-button); color: #fff; }

/* Genesis Pass (ui.js) — the collectible, presented with a silver bevel; art is never recoloured */
.holder { margin-top: 12px; padding: 16px; border-color: var(--gold-line); background: radial-gradient(120% 60% at 50% 0%, rgba(216, 180, 106, 0.08) 0%, rgba(216, 180, 106, 0) 60%), var(--surface); }
.holder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chip-gold { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--gold-wash); border: 1px solid var(--gold-line); color: var(--gold-ink); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; }
.holder-status { font-size: 12px; color: var(--t50); display: inline-flex; align-items: center; gap: 6px; }
.holder-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.holder-status[data-state="pending"]::before { background: var(--amber); }
.pass-frame { position: relative; margin: 14px 0 0; padding: 1px; border-radius: 22px; background: linear-gradient(155deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.07) 32%, rgba(255, 255, 255, 0.05) 68%, rgba(255, 255, 255, 0.26) 100%); }
.pass-frame img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 21px; background: var(--s2); }
.holder-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.holder-id { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.holder-sub { margin-top: 4px; font-size: 12.5px; color: var(--t50); font-variant-numeric: tabular-nums; }
.holder-price { text-align: right; flex: none; }
.holder-price span { display: block; font-size: 11px; color: var(--t46); }
.holder-price b { display: block; margin-top: 1px; font-size: 18px; font-weight: 500; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.holder-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.holder-actions .btn { margin-top: 0; height: 44px; }

.tg-card { margin-top: 12px; padding: 16px; border-radius: var(--r-xl); }
.tg-head { display: flex; gap: 12px; align-items: flex-start; }
.tg-head h2 { font-size: 15px; font-weight: 500; }
.tg-head p { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--t50); }
.tg-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-wash); color: var(--blue-ink); flex: none; }
.tg-card .btn { margin-top: 14px; height: 44px; }
.tg-card .btn[aria-disabled="true"] { opacity: 1; pointer-events: none; background: var(--s3); border: 1px solid var(--line-2); color: var(--t50); }

/* ---------- footer ---------- */
.foot { margin-top: 48px; border-top: 1px solid var(--line); padding: 22px 0 26px; }
body[data-view="landing"] .foot { margin-top: 0; padding: 30px 0 56px; background: #060607; }
body[data-view="boot"] .foot { display: none; }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; width: 100%; max-width: 440px; margin: 0 auto; padding: 0 18px; }
.foot-brand .wordmark { height: 22px; opacity: 0.92; }
.copy { margin-top: 8px; font-size: 10.5px; color: var(--t40); white-space: nowrap; }
.foot-links { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 18px; align-content: start; padding-top: 2px; }
.foot-links a, .foot-links span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--t50); text-decoration: none; white-space: nowrap; }
.foot-links svg, .foot-links img { flex: none; width: 13px; height: 13px; color: var(--t70); }
.foot-links a:hover { color: #fff; }

/* ---------- bottom tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 32; display: flex; justify-content: space-around;
  padding: 0 6px env(safe-area-inset-bottom); height: calc(72px + env(safe-area-inset-bottom));
  background: rgba(6, 6, 7, 0.86); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
.tab {
  position: relative; flex: 1 1 0; max-width: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #62656d; text-decoration: none; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
}
.tab svg { width: 24px; height: 24px; transition: color 0.2s ease, transform 0.2s ease; }
.tab:hover { color: var(--t70); }
.tab[aria-current="page"] { color: #fff; }
.tab[aria-current="page"] svg { color: var(--blue); }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px; margin-left: -14px; border-radius: 0 0 2px 2px; background: var(--blue);
}

/* ---------- sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.64); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade-in 0.16s ease-out; }
.panel {
  position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: #0b0b0c; box-shadow: var(--float), var(--sheen);
  animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.sheet-head { display: flex; align-items: center; gap: 10px; }
.sheet-head h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.sheet-head .status { height: 22px; font-size: 11px; padding: 0 9px; }
.close { display: grid; place-items: center; margin-left: auto; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--s3); font-size: 20px; line-height: 1; color: var(--t80); padding: 0 0 2px; }
.close:hover { background: var(--s4); color: #fff; }
.sheet-state { margin-top: 6px; font-size: 13px; color: var(--t50); }
.sheet-state[data-phase="ending"], .sheet-state[data-phase="closing"] { color: var(--amber-ink); }
.sheet-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; margin-top: 16px; padding: 16px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); }
.sh-label { display: block; font-size: 11.5px; color: var(--t46); }
.sh-value { display: block; margin-top: 2px; font-size: 34px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-side { text-align: right; }
.sh-side .sh-value { font-size: 24px; letter-spacing: -0.01em; }
.sheet-hero[data-mine="true"] { border-color: var(--blue-line); }
.sheet-hero[data-won="true"] { border-color: var(--gold-line); }
.sheet-hero[data-won="true"] .sh-main .sh-value { color: var(--gold-ink); }
.won-box { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: var(--r-md); background: var(--gold-wash); border: 1px solid var(--gold-line); }
.won-box img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; }
.won-box p { flex: 1 1 auto; font-size: 13.5px; font-weight: 500; color: var(--gold-ink); }
.won-box .mini-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--grad-gold); border: 0; color: #1d1606; }
.facts { display: grid; gap: 0; margin: 12px 0 0; padding: 2px 14px; border-radius: var(--r-md); background: transparent; border: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; }
.facts dt { font-size: 13px; color: var(--t50); }
.facts dd { margin: 0; font-size: 13.5px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.facts div[data-k="Next bid at least"] dd { color: var(--blue-ink); }
.sheet-hero:not([hidden]) ~ .facts div[data-k="Highest bid"],
.sheet-hero:not([hidden]) ~ .facts div[data-k="Time left"],
.sheet-hero:not([hidden]) ~ .facts div[data-k="Timer"] { display: none; }
.sheet-hero:not([hidden]) ~ .facts div[data-k="Minimum bid"] { border-top: 0; }
.bid { margin-top: 16px; }
.bid label { display: block; font-size: 12.5px; color: var(--t50); }
.amount { display: flex; align-items: center; height: 58px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--s2); transition: border-color 0.2s ease; }
.amount input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; outline: none; font-variant-numeric: tabular-nums; }
.amount input::placeholder { color: var(--t30); }
.amount span { font-size: 12px; font-weight: 500; color: var(--t46); letter-spacing: 0.06em; }
.amount:focus-within { border-color: var(--blue-line); }
.hint { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--t46); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--s3); font-size: 15px; font-weight: 500; color: #fff; text-decoration: none;
}
.btn:hover { background: var(--s4); }
.btn.primary { background: var(--grad-button); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.gold { background: var(--grad-gold); border-color: transparent; color: #1d1606; }
.btn[disabled] { opacity: 0.55; }
.sheet-actions .note { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--t70); }
.sheet-actions .note[data-tone="lost"] { padding: 11px 13px; border-radius: 14px; background: var(--red-wash); border: 1px solid rgba(255, 107, 107, 0.22); color: #ffc4c4; }
.sheet-actions .note[data-tone="held"] { padding: 11px 13px; border-radius: 14px; background: var(--blue-wash); border: 1px solid var(--blue-line); color: #d3eaff; }
.flow { margin-top: 14px; padding: 13px 14px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); }
.flow[data-step="done"] { border-color: rgba(47, 211, 107, 0.45); }
.flow[data-step="failed"] { border-color: rgba(255, 107, 107, 0.45); }
.steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; font-size: 11px; color: var(--t40); }
.steps li { flex: 1; padding-top: 7px; border-top: 2px solid rgba(255, 255, 255, 0.1); }
.steps li[data-state="now"] { color: #fff; border-color: var(--blue); }
.steps li[data-state="done"] { color: var(--t70); border-color: var(--green); }
.flow-msg { margin-top: 8px; font-size: 13px; line-height: 1.45; color: #fff; }

/* edit profile */
.edit-photo { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.edit-photo-btns { display: grid; gap: 8px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s3); font-size: 13px; font-weight: 500; color: #fff; }
.edit-label { display: block; margin-top: 18px; font-size: 12.5px; color: var(--t50); }
.edit-input { width: 100%; height: 52px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--s2); font-size: 17px; outline: none; }
.edit-input:focus { border-color: var(--blue-line); }
#edit-note[data-tone="error"] { color: #ffb3b3; }

/* centred popup (after a bid) */
.sheet.modal { align-items: center; padding: 20px; }
.panel.pop { border-radius: var(--r-xl); border-bottom: 1px solid var(--line-2); max-width: 360px; text-align: center; padding: 18px 22px 20px; animation: pop-in 0.2s ease-out; }
.panel.pop::before { display: none; }
.pop-mark { width: 112px; height: 112px; margin: 0 auto -6px; --fx-inset: 26%; }
.pop-mark .pop-icon { position: absolute; inset: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--green-wash); color: var(--green-ink); transition: opacity 0.5s ease; }
.pop-mark[data-fx-ready="true"] .pop-icon { opacity: 0; }
.panel.pop h3 { margin-top: 6px; font-size: 21px; letter-spacing: -0.015em; }
.panel.pop p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--t60); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 50; transform: translateX(-50%);
  padding: 11px 16px; border-radius: 14px; background: #1a1a1d; border: 1px solid var(--line-2); color: #fff; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--float); animation: pop-in 0.18s ease-out; white-space: nowrap;
}

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  .hero-title { font-size: 54px; }
  .hero-tags li { font-size: 12px; padding: 0 10px; }
  .cta { font-size: 14px; }
  .section-title { font-size: 27px; }
  .page-title { font-size: 27px; }
  .wordmark { height: 21px; }
  .top { padding: 0 12px; }
  .btn-connect { max-width: 132px; padding: 0 10px; }
  .tile { padding-left: 12px; padding-right: 12px; }
  .tile-btn { margin-left: -12px; margin-right: -12px; padding: 0 12px; }
  .price { font-size: 21px; }
  .seg button { font-size: 12.5px; }
  .dropdown { flex-basis: 120px; }
  .profile-actions { gap: 6px; }
  .pill-info, .pill-btn { padding: 0 10px; }
  .ov-volume { font-size: 44px; }
  .foot-links { gap: 12px 14px; }
  .tab { font-size: 11px; }
}

/* ---------- tablets and desktop: composed layouts, not a stretched phone ---------- */
@media (min-width: 768px) {
  .top { padding: 0 32px; height: 64px; }
  .wordmark { height: 26px; }
  .view { max-width: 1120px; padding-inline: 32px; }
  .view[data-view="profile"], .view[data-view="winners"] { max-width: 920px; }
  .origin-warn { max-width: 1056px; }
  .hero { padding-top: 64px; }
  .hero-mark { width: 136px; height: 136px; }
  .hero-title { font-size: 92px; }
  .lede { width: 460px; font-size: 17px; }
  .cta-row { max-width: 440px; margin-left: auto; margin-right: auto; }
  .pass-row { grid-auto-columns: 240px; justify-content: center; }
  .about { max-width: 960px; margin-left: auto; margin-right: auto; }
  .about h2 { font-size: 32px; }
  .chips { margin-inline: 0; padding-inline: 0; }
  .benefits { grid-auto-columns: calc((100% - 24px) / 3); margin-inline: 0; padding-inline: 0; }
  .how-title { font-size: 40px; }
  .how-grid { max-width: 820px; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .how-card.wide { grid-column: span 2; grid-row: span 1; }
  .how-card p { font-size: 13px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .bid-list { grid-template-columns: 1fr 1fr; }
  .ending-rail { margin-inline: 0; padding-inline: 0; }
  .rail-item { width: 172px; }
  .foot-inner { max-width: 1120px; padding-inline: 32px; }
  .sheet { align-items: center; }
  .panel { border-radius: var(--r-xl); border-bottom: 1px solid var(--line-2); max-width: 460px; }
  .panel::before { display: none; }
  .tabbar { left: 50%; right: auto; width: 480px; margin-left: -240px; bottom: 16px; height: 66px; padding-bottom: 0; border: 1px solid var(--line-2); border-radius: 22px; background: rgba(12, 12, 13, 0.82); box-shadow: var(--float); }
  .tab[aria-current="page"]::before { top: 0; }
  body.app { padding-bottom: 108px; }
  .toast { bottom: 104px; }
  .seg, .search-row { max-width: 560px; margin-left: auto; margin-right: auto; }
  .seg-4 { margin-left: 0; }
  .lead-note { max-width: 560px; margin-left: auto; margin-right: auto; }
  .ov-hero { padding: 28px 28px 22px; }
}

@media (min-width: 1024px) {
  /* Auction: title left, filters and search on one line */
  .ids { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: 12px; align-items: center; padding-top: 34px; }
  .ids > * { grid-column: 1 / -1; }
  .ids > .section-title.center { text-align: left; font-size: 34px; }
  .ids > #filters { grid-column: 1; margin: 22px 0 0; max-width: none; }
  .ids > .search-row { grid-column: 2; margin: 22px 0 0; max-width: 420px; justify-self: end; width: 100%; }
  .ids > .lead-note { max-width: none; margin-left: 0; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }

  /* Overview: headline figure left, live controls right */
  .ov-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 44px; text-align: left; align-items: start; padding: 32px 32px 26px; }
  .ov-hero > .ov-pill { grid-column: 1; grid-row: 1; justify-self: start; }
  .ov-hero > .ov-label { grid-column: 1; grid-row: 2; margin-top: 22px; }
  .ov-hero > .ov-volume { grid-column: 1; grid-row: 3; font-size: 72px; }
  .ov-hero > .live-sub { grid-column: 1; grid-row: 4; margin: 6px 0 0; max-width: 380px; }
  .ov-hero > .next-strip { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: start; }
  .ov-hero > .ov-stats { grid-column: 2; grid-row: 3 / span 2; align-self: end; margin-top: 18px; padding: 14px 0 0; }
  .ov-hero > .ov-foot { grid-column: 2; grid-row: 5; text-align: right; }
  .ov-stat .stat-value { font-size: 28px; }

  /* Winners: totals pinned left, list right */
  .view[data-view="winners"] { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .view[data-view="winners"] > * { grid-column: 1 / -1; }
  .view[data-view="winners"] > .w-hero { grid-column: 1; grid-row: 3 / span 2; position: sticky; top: 92px; margin-top: 22px; padding: 28px 22px 20px; }
  .view[data-view="winners"] > .w-hero .ov-volume { font-size: 48px; }
  .view[data-view="winners"] > .w-hero .ov-stat .stat-value { font-size: 21px; }
  .view[data-view="winners"] > #winners-list-title { grid-column: 2; grid-row: 3; margin-top: 22px; text-align: left; }
  .view[data-view="winners"] > .list-card { grid-column: 2; grid-row: 4; }

  /* Profile: wallet and stats left, the Genesis Pass showcased right */
  .view[data-view="profile"]:has(#holder:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 20px; align-items: start; }
  .view[data-view="profile"]:has(#holder:not([hidden])) > * { grid-column: 1; }
  .view[data-view="profile"]:has(#holder:not([hidden])) > .page-title { grid-column: 1 / -1; }
  .view[data-view="profile"]:has(#holder:not([hidden])) > #holder { grid-column: 2; grid-row: 2 / span 6; margin-top: 20px; position: sticky; top: 92px; }
  .view[data-view="profile"]:not(:has(#holder:not([hidden]))) { max-width: 640px; }
  .stats-card .stats.big { grid-template-columns: repeat(4, 1fr); }
}

@media (hover: none) {
  .tile:hover, .rail-item:hover { border-color: var(--line); }
  .tile[data-mine="lead"]:hover, .rail-item[data-mine="true"]:hover { border-color: var(--blue-line); }
  .tile[data-mine="lead"][data-phase="sold"]:hover { border-color: var(--gold-line); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }