/* Tinishu design system tokens.
 *
 * Cyan is the brand colour. It reads as calm, clear and trustworthy, which is
 * what a product that takes money needs: it lowers the arousal that warm reds
 * and oranges create, so it does not push people to bid on impulse.
 * Neutrals are tinted towards cyan so the whole surface feels of a piece.
 * Amber is kept for one job only, the winning number, so the one moment of
 * celebration stands apart from the cool UI around it. Green and rose carry
 * the unique/taken result and are always paired with a text label, never
 * colour alone. Every text pair here meets WCAG AA (4.5:1) in both themes.
 */
:root {
  color-scheme: dark;
  --surface-100: #081317;   /* page */
  --surface-200: #0f1e23;   /* cards, sheets */
  --ink: #e6f4f6;
  --ink-muted: #8eaeb5;
  --accent: #22d3ee;        /* cyan 400 */
  --accent-ink: #03272e;
  --accent-soft: rgba(34, 211, 238, .14);
  --win: #fbbf24;
  --win-ink: #2b1d00;
  --unique: #4ade80;
  --taken: #fb7185;
  /* The lowest unique number, the one that wins: the brightest green in the
     app, as a fill, so it is unmistakable in a long list. */
  --lowest: #22c55e;
  --lowest-ink: #052e16;
  --lowest-soft: rgba(34, 197, 94, .14);
  --shared: #fbbf24;        /* "not unique": amber, a caution rather than an error */
  --line: #1c353c;
  --backdrop: rgba(2, 10, 12, .7);

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px;
  --radius-sm: 6px; --radius-md: 12px; --radius-pill: 999px;

  --font-text: Archivo, "Noto Sans Ethiopic", system-ui, -apple-system, sans-serif;
  --font-menu: "Space Grotesk", "Noto Sans Ethiopic", system-ui, sans-serif;   /* the top menu only */
  --font-amharic: "Noto Sans Ethiopic", system-ui, sans-serif;
  --font-numeral: "IBM Plex Mono", ui-monospace, monospace;
}

/* Light tokens apply when the user picks light, or when they have not picked
   and the OS prefers light. Keep the two blocks identical. */
:root[data-theme="light"] {
  color-scheme: light;
  --surface-100: #f2f9fa; --surface-200: #ffffff; --ink: #0a2a31;
  --ink-muted: #4a6970; --accent: #0e7490; --accent-ink: #ffffff;
  --accent-soft: rgba(14, 116, 144, .1); --win: #f59e0b; --win-ink: #2b1d00;
  --unique: #15803d; --taken: #be123c; --line: #d2e5e9; --backdrop: rgba(10, 42, 49, .45);
  --shared: #a16207;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --surface-100: #f2f9fa; --surface-200: #ffffff; --ink: #0a2a31;
    --ink-muted: #4a6970; --accent: #0e7490; --accent-ink: #ffffff;
    --accent-soft: rgba(14, 116, 144, .1); --win: #f59e0b; --win-ink: #2b1d00;
    --unique: #15803d; --taken: #be123c; --line: #d2e5e9; --backdrop: rgba(10, 42, 49, .45);
    --shared: #a16207;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--surface-100); color: var(--ink);
  font-family: var(--font-text); font-size: 15px; line-height: 23px;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}

a { color: var(--accent); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--space-3) var(--space-5); }

/* Header ---------------------------------------------------------------- */
header.bar {
  position: sticky; top: 0; z-index: 20; background: var(--surface-100);
  border-bottom: 1px solid var(--line);
}
.bar-inner {
  max-width: 720px; margin: 0 auto; padding: var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.logo { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 700; letter-spacing: -.02em; }
.logo .latin { font-size: 22px; }
.logo .fidel { font-family: var(--font-amharic); font-size: 20px; }

nav.tabs { display: flex; gap: var(--space-1); overflow-x: auto; padding: 0 var(--space-3) var(--space-2); max-width: 720px; margin: 0 auto; }
nav.tabs a {
  padding: 8px 14px; border-radius: var(--radius-pill); text-decoration: none;
  color: var(--ink-muted); font-family: var(--font-menu); font-size: 15px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
}
nav.tabs a.on { background: var(--accent-soft); color: var(--accent); }

/* Blocks ---------------------------------------------------------------- */
.card { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3); }
h1 { font-size: 32px; line-height: 36px; letter-spacing: -.01em; margin: var(--space-4) 0 var(--space-2); }
h2 { font-size: 20px; line-height: 26px; margin: var(--space-4) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
.muted { color: var(--ink-muted); }
.caption { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Gallery --------------------------------------------------------------- */
.gallery { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-md); }
.gallery img { width: 100%; flex: 0 0 100%; scroll-snap-align: center; border-radius: var(--radius-md); background: var(--surface-200); aspect-ratio: 1; object-fit: cover; }
.dots { display: flex; gap: var(--space-1); justify-content: center; margin-top: var(--space-2); }
.dots button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: var(--radius-pill);
  background: var(--line); transition: width .2s ease, background-color .2s ease;
}
.dots button.on { width: 22px; background: var(--accent); }

.gallery-wrap { position: relative; }
.gallery { scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; color: var(--ink);
  background: color-mix(in srgb, var(--surface-200) 80%, transparent);
  border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.gal-nav:hover { color: var(--accent); border-color: var(--accent); }
.gal-nav.prev { left: 10px; }
.gal-nav.next { right: 10px; }

/* Bid entry ------------------------------------------------------------- */
.amount-field { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.amount-field input {
  flex: 1; font-family: var(--font-numeral); font-size: 44px; line-height: 52px; font-weight: 500;
  background: transparent; border: none; border-bottom: 2px solid var(--line);
  color: var(--ink); padding: var(--space-2) 0; width: 100%; text-align: center;
}
.amount-field input:focus { outline: none; border-bottom-color: var(--accent); }
.stepper { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stepper button { flex: 1 0 auto; }

button, .btn {
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-200); color: var(--ink);
  border-radius: var(--radius-md); padding: 12px var(--space-3);
}
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); width: 100%; }
button.primary:disabled { opacity: .45; cursor: not-allowed; }
button.ghost { background: transparent; }

input[type=tel], input[type=text], input[type=password] {
  width: 100%; font-family: inherit; font-size: 17px; padding: 12px var(--space-3);
  background: var(--surface-100); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink);
}
input[type=text].code { font-family: var(--font-numeral); letter-spacing: .4em; text-align: center; }

/* Chips and states ------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-family: var(--font-numeral); font-size: 15px; padding: 6px 12px;
  border-radius: var(--radius-pill); background: var(--line); color: var(--ink);
}
.chip.win { background: var(--win); color: var(--win-ink); }
.stat { display: flex; gap: var(--space-4); margin: var(--space-3) 0; }
.stat div span { display: block; font-family: var(--font-numeral); font-size: 20px; }
.stat div small { color: var(--ink-muted); font-size: 13px; }

.rows { border-top: 1px solid var(--line); }
.row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--line); }
.row .num { font-family: var(--font-numeral); }
.tag { font-size: 13px; font-weight: 600; }
.tag.unique { color: var(--unique); }
.tag.taken { color: var(--taken); }

.notice { border-radius: var(--radius-md); padding: 12px var(--space-3); font-size: 14px; margin: var(--space-3) 0; border: 1px solid var(--line); }
.notice.error { border-color: var(--taken); color: var(--taken); }
.notice.ok { border-color: var(--unique); color: var(--unique); }

/* The rules line is part of the layout, never a footnote. */
.odds-line { border-top: 1px solid var(--line); margin-top: var(--space-5); padding-top: var(--space-3); }

footer { margin-top: var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-4); }
footer .links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
footer a { color: var(--ink-muted); }
footer a:hover { color: var(--accent); }

.sheet-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: flex-end; justify-content: center; z-index: 40; }
.sheet { background: var(--surface-200); border-radius: var(--radius-md) var(--radius-md) 0 0; padding: var(--space-4); width: 100%; max-width: 720px; border: 1px solid var(--line); }
@media (min-width: 640px) { .sheet-backdrop { align-items: center; } .sheet { border-radius: var(--radius-md); } }

.skeleton { background: var(--line); border-radius: var(--radius-sm); height: 14px; margin: var(--space-2) 0; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* Spinners: inline in a busy button (inherits its colour), big on the payment screen. */
.spinner {
  display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner.big { display: block; width: 46px; height: 46px; border-width: 4px; margin: var(--space-2) auto var(--space-3); color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
button[aria-busy="true"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: progress; }
/* Busy is not "unavailable": keep the button looking alive while it works. */
button.primary[aria-busy="true"]:disabled { opacity: .85; cursor: progress; }

/* A thin bar across the top while a request is out. */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
.progress.on { opacity: 1; }
.progress::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--accent); border-radius: 0 3px 3px 0; animation: progress-slide 1.1s ease-in-out infinite; }
@keyframes progress-slide { to { left: 100%; } }

/* The payment screen: centred, calm, says what is happening and for how much. */
.pay-wait-backdrop { align-items: center; padding: var(--space-3); }
.sheet.pay-wait { max-width: 420px; border-radius: var(--radius-md); text-align: center; padding: var(--space-5) var(--space-4) var(--space-4); }
.pay-wait h2 { margin: 0 0 var(--space-1); }
.pay-wait-amount { font-family: var(--font-numeral); font-size: 26px; font-weight: 600; margin: 0 0 var(--space-2); color: var(--ink); }
.pay-wait #pay-wait-text { margin: 0 auto; max-width: 34ch; }
.pay-wait .pay-logo { display: block; width: 108px; padding: 6px 8px 6px 14px; margin: 0 auto var(--space-2); }
.pay-wait-timer { margin: var(--space-2) 0 0; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.pay-wait-actions { display: flex; justify-content: center; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.pay-wait-actions.stacked { flex-direction: column; gap: var(--space-2); }
.pay-wait-actions.stacked button.primary { width: 100%; }
.pay-wait #unfinished-text { margin: 0 auto var(--space-1); max-width: 36ch; }

/* Less motion: keep a sign of life (slower spin), drop the sliding bar. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.8s; }
  .progress::before { animation: none; left: 0; width: 100%; opacity: .6; }
}

/* Theme toggle ----------------------------------------------------------- */
.bar-tools { display: inline-flex; align-items: center; gap: var(--space-1); }
.lang-toggle {
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-muted);
  font-family: var(--font-amharic); font-size: 14px; font-weight: 700;
}
.lang-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-muted);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .sun { display: none; }
  :root:not([data-theme]) .theme-toggle .moon { display: block; }
}

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

.page ul, .page ol { padding-left: var(--space-4); margin: 0 0 var(--space-3); }
.page li { margin-bottom: var(--space-1); }
.page h2:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .skeleton { animation: none; }
}

/* Sign-in call to action ------------------------------------------------- */
/* Signed out: "Sign in" stands out as an outlined button, but is not filled
   in, so it never looks like the page you are on. It fills (like any current
   tab) only on the sign-in page itself. */
nav.tabs a.cta { color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--accent); }
nav.tabs a.cta:hover { background: var(--accent-soft); }
nav.tabs a.cta.on { background: var(--accent-soft); }

/* Consent row ------------------------------------------------------------ */
.consent {
  display: flex; gap: 12px; align-items: flex-start; margin-top: var(--space-3);
  font-size: 14px; line-height: 20px; color: var(--ink-muted); cursor: pointer;
}
.consent input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.consent a { color: var(--accent); font-weight: 600; }
#send-code { margin-top: var(--space-3); }

/* Terms / Privacy reader over the sign-in sheet --------------------------- */
.reader-backdrop { z-index: 50; }
.sheet.reader {
  display: flex; flex-direction: column; max-height: 88vh; padding: 0;
}
.reader-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line);
}
.reader-head h2 { margin: 0; }
.reader-x { font-size: 24px; line-height: 1; padding: 6px 12px; border: none; }
.reader-body { overflow-y: auto; padding: var(--space-3) var(--space-4); overscroll-behavior: contain; }
.reader-foot {
  display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}
.reader-foot button { flex: 1; }

/* Admin ------------------------------------------------------------------ */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.admin-head h1 { margin-bottom: var(--space-3); }
.admin-actions { display: flex; gap: var(--space-2); }
button.primary.inline { width: auto; }
button.small { padding: 6px 12px; font-size: 13px; }
button.danger { background: transparent; color: var(--taken); border-color: var(--taken); }
button.danger:hover { background: var(--taken); color: var(--surface-200); }
button.icon {
  width: 32px; height: 32px; padding: 0; border-radius: var(--radius-pill);
  font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
button.icon:disabled { opacity: .35; cursor: default; }

.crumbs { font-size: 13px; color: var(--ink-muted); margin: var(--space-4) 0 0; }
.crumbs a { color: var(--ink-muted); }
.card.flush { padding: 0; overflow: hidden; }
.card .pad { padding: var(--space-4); margin: 0; }
h2.first { margin-top: 0; }

.admin-row {
  display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-3);
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.admin-row:last-child { border-bottom: none; }
button.admin-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font: inherit; text-align: left; cursor: pointer; }
/* Each way to pay is its own box, with a gap between them. */
.card.pay-options {
  display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3);
  background: none; border: none; overflow: visible;
}
.pay-options button.admin-row {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200); min-height: 64px;
}
.pay-options button.admin-row:last-child { border-bottom: 1px solid var(--line); }
.pay-options button.admin-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.pay-options .admin-row strong { white-space: normal; }
/* The logo is drawn on white: keep it on white in the dark theme too. */
/* A wide logo, shown whole: never squared or cropped like the item thumbnails
   (.admin-row img), and with room on the left, where the mark starts at the
   image's very edge. The white tile keeps it readable in the dark theme. */
.pay-logo, .admin-row img.pay-logo {
  flex: 0 0 auto; width: 92px; height: auto; object-fit: contain;
  padding: 5px 8px 5px 12px; margin-left: 4px; box-sizing: border-box;
  border-radius: 6px; background: #fff;
}
.admin-row:hover { background: var(--accent-soft); }
.admin-row img, .admin-row .thumb-empty {
  width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover;
  flex: 0 0 auto; background: var(--line);
}
.admin-row .grow { flex: 1; min-width: 0; }
.admin-row strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.admin-row .chev { color: var(--ink-muted); font-size: 22px; }

.badge {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--ink-muted); white-space: nowrap;
}
.badge.live { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.badge.scheduled, .badge.closing { color: var(--accent); border-color: var(--accent); }
.badge.done { color: var(--unique); border-color: var(--unique); }
.badge.cancelled { color: var(--taken); border-color: var(--taken); }

/* Forms */
.field { display: block; margin-bottom: var(--space-3); }
.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field > span small { font-weight: 400; color: var(--ink-muted); margin-left: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

input[type=number], input[type=datetime-local], textarea, select {
  width: 100%; font-family: inherit; font-size: 16px; padding: 12px var(--space-3);
  background: var(--surface-100); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink);
}
textarea { resize: vertical; line-height: 22px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled, textarea:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
.invalid { border-color: var(--taken) !important; }

.spec { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.spec input { font-size: 15px; padding: 10px 12px; }

.form-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.form-actions button { width: 100%; }
.quick { align-items: center; }
.danger-zone { border-color: color-mix(in srgb, var(--taken) 40%, var(--line)); margin-top: var(--space-5); }

/* Photos */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.thumb { position: relative; margin: 0; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--line); display: block; }
.thumb.pending img { opacity: .7; }
.thumb .cover {
  position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink); padding: 2px 8px; border-radius: var(--radius-pill);
}
.thumb-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.thumb-tools button.icon { width: 28px; height: 28px; font-size: 16px; background: var(--surface-200); }
.thumb input { margin-top: 6px; font-size: 13px; padding: 6px 10px; }
.thumb small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-muted); }

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: var(--space-4); border: 2px dashed var(--line); border-radius: var(--radius-md);
  cursor: pointer; color: var(--ink-muted); position: relative;
}
.dropzone strong { color: var(--accent); }
.dropzone small { font-size: 13px; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { border-color: var(--accent); }
.thumbs[hidden] { display: none; }

/* Ended cards, winners, bid history -------------------------------------- */
.card-actions { display: flex; gap: var(--space-2); }
.card-actions button { flex: 1; }

.winner-row {
  display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-3);
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.winner-row:last-child { border-bottom: none; }
.winner-row:hover { background: var(--accent-soft); }
.winner-row img { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; }
.winner-row .grow { flex: 1; min-width: 0; }
.winner-row strong { display: block; font-weight: 600; }
.winner-row small { color: var(--ink-muted); font-size: 13px; }

.pill {
  display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 12px;
  border-radius: var(--radius-pill); white-space: nowrap;
}
.pill.lowest { background: var(--lowest); color: var(--lowest-ink); font-family: var(--font-numeral); }
.pill.lowest.big { font-size: 28px; line-height: 34px; padding: 6px 20px; margin: 6px 0 var(--space-2); }
.tag.shared { color: var(--shared); }

.history-summary small { display: block; color: var(--ink-muted); font-size: 13px; }
.history-summary p { margin: 0; }
.history-summary.has-winner { border-color: var(--lowest); background: linear-gradient(var(--lowest-soft), var(--lowest-soft)), var(--surface-200); }
.history-tools { margin-top: var(--space-3); }
.history-tools input { font-size: 15px; }

table.history { width: 100%; border-collapse: collapse; }
table.history th {
  text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); padding: 12px var(--space-3); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface-200);
}
table.history td { padding: 10px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.history tr:last-child td { border-bottom: none; }
table.history .num { font-family: var(--font-numeral); white-space: nowrap; }
table.history .phone { color: var(--ink-muted); }
table.history tr.win td { background: var(--lowest-soft); }
table.history tr.win .num { color: var(--ink); font-weight: 700; }
@media (max-width: 480px) {
  table.history th, table.history td { padding-left: 10px; padding-right: 10px; }
  table.history .tag.shared { font-size: 12px; }
}
.readonly {
  font-family: var(--font-numeral); font-size: 16px; padding: 12px var(--space-3);
  border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--ink);
}
.field > small.caption { display: block; margin-top: 4px; }
.dropzone[hidden] { display: none; }
h2 small.caption { font-weight: 500; margin-left: 6px; }
.card.flush + .caption { margin-top: var(--space-2); }

/* Name step */
.name-meta { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: 6px; }
.name-meta .bad { color: var(--taken); }
#name-count { font-family: var(--font-numeral); }
.history-summary .winner-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; }

/* Countdown, pager, winner details --------------------------------------- */
.countdown { font-family: var(--font-numeral); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: var(--space-3) 0; }
.pg {
  min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200);
  color: var(--ink); text-decoration: none; font-family: var(--font-numeral); font-size: 14px; font-weight: 600;
}
a.pg:hover { border-color: var(--accent); color: var(--accent); }
.pg.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pg.arrow { font-family: var(--font-text); font-size: 20px; font-weight: 500; }
.pg.disabled { opacity: .35; }
.pg.gap { border: none; background: none; min-width: 20px; padding: 0; color: var(--ink-muted); }
@media (max-width: 400px) { .pg { min-width: 34px; height: 34px; padding: 0 6px; } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.section-head a { font-size: 14px; font-weight: 600; text-decoration: none; }
.history-summary .winner-phone { margin: 0 0 4px; font-size: 14px; }
.history-summary .stat { margin-bottom: 0; }
.winner-row .who { display: block; font-size: 14px; }
.who-big { font-size: 20px; font-weight: 700; margin: 0; }
.num { font-family: var(--font-numeral); }
table.history tr.mine td { box-shadow: inset 3px 0 0 var(--accent); }
table.history tr.mine td + td { box-shadow: none; }
.you {
  font-family: var(--font-text); font-size: 11px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent); padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 4px;
}
@media (max-width: 480px) { .pager .btn { padding: 8px 10px; } }

/* Toasts and inline actions ----------------------------------------------- */
.toasts {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100% - 32px));
  pointer-events: none;
}
.toast {
  background: var(--surface-200); color: var(--ink); border: 1px solid var(--line);
  border-left: 4px solid var(--unique); border-radius: var(--radius-md); padding: 12px 16px;
  font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  animation: toast-in .2s ease-out; transition: opacity .4s ease, transform .4s ease;
}
.toast.error { border-left-color: var(--taken); }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }

button.link {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: inherit; text-decoration: underline; cursor: pointer;
}
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 560px; }

/* Grouped bid history ------------------------------------------------------ */
table.history.grouped td { vertical-align: top; }
table.history.grouped td:first-child, table.history.grouped td:last-child { padding-top: 12px; }
.nowrap { white-space: nowrap; }
.count {
  display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 6px;
  border-radius: var(--radius-pill); background: var(--line); color: var(--ink);
  font-family: var(--font-numeral); font-size: 12px; font-weight: 600; text-align: center; vertical-align: 2px;
}
.count.legend { font-family: var(--font-text); text-transform: none; letter-spacing: 0; font-weight: 500; }
table.history tr.win .count { background: var(--lowest); color: var(--lowest-ink); }
.phone-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-numeral); color: var(--ink-muted); }
.phone-list li { line-height: 22px; white-space: nowrap; }
.phone-list li.mine { color: var(--ink); font-weight: 700; }
.phone-list.all { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.phones button.more { display: block; margin-top: 4px; font-size: 13px; color: var(--accent); text-decoration: none; }
.phones button.more:hover { text-decoration: underline; }
table.history.grouped tr.mine td { box-shadow: none; }
table.history.grouped tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.name-meta .good { color: var(--unique); }
.name-meta { align-items: flex-start; }
#name-hint { flex: 1; }

/* Bid button: sized to its label, with the fee beside it */
.bid-actions {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; margin-top: var(--space-3);
}
.bid-cost { display: flex; flex-direction: column; font-size: 15px; }
.bid-cost strong { font-family: var(--font-numeral); font-size: 18px; }
.bid-actions button.primary { width: auto; min-width: 168px; padding: 14px 28px; font-size: 16px; }
@media (max-width: 380px) { .bid-actions button.primary { flex: 1; } }

/* Bid screen: everything needed to bid fits on one screen ----------------- */
.bid-head h1, .bid-head h2 { font-size: 26px; line-height: 32px; margin: var(--space-3) 0 2px; }
.bid-head p { margin: 0 0 var(--space-3); font-size: 14px; line-height: 20px; }

/* The photo takes the height left after the header, title, clock and bid
   panel (about 500px together), within sensible limits. */
.gallery-wrap .gallery img {
  aspect-ratio: auto; height: clamp(140px, calc(100svh - 510px), 460px);
  object-fit: contain; background: var(--surface-200);
}
.gallery-wrap .dots {
  position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; pointer-events: none;
}
.gallery-wrap .dots button { pointer-events: auto; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.gallery-wrap .dots button.on { background: var(--accent); }

.round-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin: 10px 2px 10px; font-size: 15px;
}
.round-line .countdown { font-size: 17px; font-weight: 600; }
.round-line small { color: var(--ink-muted); font-size: 13px; }
.round-line b { font-family: var(--font-numeral); font-size: 17px; }
.icon-clock {
  display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid var(--accent); border-radius: 50%; position: relative;
}
.icon-clock::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
}

.card.bid-panel { margin-top: 0; padding: var(--space-3); }
.bid-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }
.bid-label label { font-weight: 600; font-size: 14px; }
.amount-row { display: flex; align-items: stretch; gap: var(--space-2); }
.amount-row input {
  flex: 1; min-width: 0; text-align: center; font-family: var(--font-numeral); font-size: 30px; font-weight: 500;
  padding: 8px; background: var(--surface-100); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.amount-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.amount-row .step { width: 52px; flex: 0 0 52px; padding: 0; font-size: 24px; font-weight: 500; }
/* One line, always: labels never wrap. The three steps share what is left
   after Add bid takes the width its label needs. */
.quick-steps { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.quick-steps button { flex: 1 1 0; min-width: 0; padding: 7px 6px; font-size: 13px; font-weight: 600; background: transparent; white-space: nowrap; }
.quick-steps button.add-pick { flex: 0 0 auto; padding-inline: 10px; }
@media (max-width: 380px) {
  .quick-steps { gap: 6px; }
  .quick-steps button { padding-inline: 4px; font-size: 12.5px; }
  .quick-steps button.add-pick { padding-inline: 8px; }
}
.bid-panel #bid-msg .notice { margin: var(--space-2) 0 0; }
.bid-panel .bid-actions { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.bid-cost strong { font-size: 17px; }

/* Phones: a slimmer header buys the photo more room. */
@media (max-width: 520px) {
  .bar-inner { padding: 10px var(--space-3); }
  nav.tabs { padding-bottom: 6px; }
  .bid-head h1, .bid-head h2 { font-size: 22px; line-height: 28px; margin-top: 12px; }
  .gallery-wrap .gallery img { height: clamp(130px, calc(100svh - 480px), 360px); }
  .gal-nav { width: 36px; height: 36px; font-size: 22px; }
}

nav.tabs { scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }
.bid-panel .bid-actions { flex-wrap: nowrap; }
.bid-panel .bid-cost { min-width: 0; }
@media (max-width: 520px) {
  .bar-inner { padding: 8px var(--space-3); }
  .bid-head h1, .bid-head h2 { margin-top: 10px; }
  .bid-head p { margin-bottom: 10px; }
  .card.bid-panel { padding: 12px; }
  .bid-panel .bid-actions { margin-top: 10px; padding-top: 10px; }
  .bid-panel .bid-actions button.primary { min-width: 0; padding: 12px 22px; }
  .amount-row input { font-size: 26px; padding: 6px; }
  .amount-row .step { width: 46px; flex-basis: 46px; }
  .quick-steps button { padding-block: 6px; }
  .round-line { margin: 8px 2px; }
  .gallery-wrap .gallery img { height: clamp(110px, calc(100svh - 420px), 360px); }
}

/* Admin: whole photos in the grid, and the player-view preview ------------- */
.thumb img { object-fit: contain; background: var(--surface-100); border: 1px solid var(--line); }
.thumb-pick { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 14px; background: none; }
.thumb.picked .thumb-pick { border-color: var(--accent); }

.photo-preview:empty { display: none; }
.photo-preview { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.photo-preview h3 { font-size: 16px; margin: 0 0 var(--space-3); }
.pv-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.pv-grid figure { margin: 0; }
.pv-grid figcaption { font-size: 12px; color: var(--ink-muted); margin-top: 6px; }
.pv-frame {
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; display: flex;
}
.pv-frame img, .pv-thumb img { width: 100%; height: 100%; display: block; }
.pv-frame img { object-fit: contain; }
.pv-frame.phone { width: 180px; aspect-ratio: 343 / 247; }
.pv-frame.desktop { width: 300px; aspect-ratio: 688 / 390; }
.pv-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--line); }
.pv-thumb img { object-fit: cover; }
.pv-thumb.unused { opacity: .35; }
.pv-info { list-style: none; padding: 0; margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; }
.pv-info li { padding-left: 22px; position: relative; margin-bottom: 6px; }
.pv-info li::before { content: '•'; position: absolute; left: 6px; color: var(--ink-muted); }
.pv-info li.ok::before { content: '✓'; color: var(--unique); left: 3px; }
.pv-info li.warn { color: var(--shared); }
.pv-info li.warn::before { content: '!'; color: var(--shared); font-weight: 700; left: 7px; }
@media (max-width: 520px) { .pv-frame.desktop { width: 100%; } }

/* Page turns scroll the list to just below the sticky header. */
#view .card.flush { scroll-margin-top: 132px; }

/* Full-screen photo viewer ------------------------------------------------- */
/* Always dark, whatever the theme: photos read best on near-black. */
.gallery-wrap .gallery img { cursor: zoom-in; }
.no-scroll, .no-scroll body { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 80; touch-action: none; --fade: 1; }
.viewer-bg {
  position: absolute; inset: 0; background: #020a0c;
  opacity: 0; transition: opacity .22s ease;
}
.viewer.open .viewer-bg { opacity: var(--fade); } /* solid; fades only while swiping to close */
.viewer-stage { position: absolute; inset: 0; overflow: hidden; }
.viewer-track { display: flex; width: 300%; height: 100%; will-change: transform; }
.viewer-track.single { width: 100%; }
.viewer-track.anim { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.viewer-slide {
  flex: 0 0 33.3333%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 72px 12px;
}
.viewer-track.single .viewer-slide { flex-basis: 100%; }
.viewer-slide img {
  max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none;
  transform: scale(.94); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.viewer.open .viewer-slide img { transform: none; opacity: 1; }
.viewer.closing .viewer-slide img { opacity: 0; }

.viewer-x, .viewer-nav {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .2s ease, background-color .15s ease;
}
.viewer.open .viewer-x, .viewer.open .viewer-nav { opacity: calc(var(--fade)); }
.viewer-x:hover, .viewer-nav:hover { background: rgba(255, 255, 255, .22); }
.viewer-x:focus-visible, .viewer-nav:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
.viewer-x {
  top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
  width: 56px; height: 56px; font-size: 40px; font-weight: 300; line-height: 1;
}
.viewer-nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 36px; }
.viewer-nav.prev { left: max(14px, env(safe-area-inset-left)); }
.viewer-nav.next { right: max(14px, env(safe-area-inset-right)); }
.viewer-count {
  position: absolute; z-index: 2; top: max(28px, calc(env(safe-area-inset-top) + 14px)); left: 20px; margin: 0;
  color: #fff; font-family: var(--font-numeral); font-size: 15px; opacity: calc(.85 * var(--fade));
}
.viewer-hint {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0;
  text-align: center; color: rgba(255, 255, 255, .6); font-size: 13px;
  animation: viewer-hint 3.2s ease forwards;
}
@keyframes viewer-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 520px) {
  .viewer-nav { width: 46px; height: 46px; font-size: 30px; }
  .viewer-slide { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-bg, .viewer-slide img, .viewer-x, .viewer-nav, .viewer-track.anim { transition: none; }
  .viewer-hint { animation: none; }
}

/* Feed of active rounds ---------------------------------------------------- */
.round-card + .round-card {
  margin-top: var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.round-card { scroll-margin-top: 110px; }
.feed-more { min-height: 1px; text-align: center; margin: var(--space-4) 0 0; }
.feed-more .caption { margin: 0; }

.my-numbers { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--line); }
.my-numbers .caption { display: block; margin-bottom: 6px; }
.my-numbers .chip { font-size: 13px; padding: 3px 10px; }

/* "About this item", closed until asked for */
details.about {
  margin-top: var(--space-2); background: var(--surface-200); border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
details.about summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--space-3); font-weight: 600; font-size: 15px;
}
details.about summary::-webkit-details-marker { display: none; }
details.about summary::after {
  content: ''; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
details.about[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
details.about summary:hover { color: var(--accent); }
details.about summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-md); }
.about-body { padding: 0 var(--space-3) var(--space-3); }
.about-body p { font-size: 15px; }
.about-body .rows { margin-top: var(--space-2); }

/* My bids ------------------------------------------------------------------ */
.my-round-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.my-round-head img, .my-round-head .thumb-empty {
  width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex: 0 0 auto; background: var(--line);
}
.my-round-head .grow { flex: 1; min-width: 0; }
.my-round-head h2 { margin: 0 0 2px; font-size: 17px; line-height: 22px; }
.my-round-head .caption { margin: 0; }
.my-round-head .countdown { font-size: 13px; }
.my-chips { margin-top: var(--space-3); }
.chip.pending { opacity: .6; border: 1px dashed var(--ink-muted); background: transparent; }
.chip.lowest { background: var(--lowest); color: var(--lowest-ink); font-weight: 700; }
.chip.unique { background: transparent; color: var(--unique); box-shadow: inset 0 0 0 1.5px var(--unique); }
.chip.shared { background: transparent; color: var(--shared); box-shadow: inset 0 0 0 1.5px var(--shared); }
.hidden-note { margin: 6px 0 0; }
.my-round-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line);
}
a.btn { display: inline-block; text-decoration: none; }
a.btn.small { padding: 7px 14px; font-size: 14px; font-weight: 600; }
a.btn.primary-link { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.card.my-round.won { border-color: var(--lowest); }
.badge.won { background: var(--lowest); border-color: var(--lowest); color: var(--lowest-ink); }
.legend-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.legend-row .chip { font-size: 12px; padding: 2px 8px; margin-left: 8px; }
.legend-row .chip:first-child { margin-left: 0; }
.card.account { margin-top: var(--space-5); }

/* No double-tap zoom -------------------------------------------------------
   Tapping − / + quickly reads as a double-tap, which phones treat as "zoom
   in". `manipulation` turns that off everywhere (and the tap delay that
   comes with it) while keeping pinch-to-zoom for anyone who needs it. */
html, body, button, a, input, select, textarea, label, summary, [role="button"] {
  touch-action: manipulation;
}

/* iPhones zoom into any text box whose font is under 16px when it is
   tapped. On phones, keep every field at 16px or more. */
@media (max-width: 520px) {
  .spec input, .history-tools input { font-size: 16px; }
}

/* When a round ended, on the Ended tab */
.ended-at { margin: -4px 0 var(--space-2); font-size: 14px; font-weight: 600; }
.ended-at time { font-weight: 500; }
.ended-at .muted { font-weight: 400; }

/* Sign in / join form ------------------------------------------------------ */
#auth-step .field { margin-bottom: var(--space-2); }
#auth-step input[type=tel], #auth-step input[type=text] { font-size: 17px; }
.ref-toggle { color: var(--accent) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; margin: 2px 0 6px; }
.back-link { display: block; margin: var(--space-3) auto 0; font-size: 14px; color: var(--ink-muted) !important; }
.auth-card #send-code { width: 100%; }

/* Login | Register: two equal halves, the chosen one filled. */
.auth-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: var(--space-4); border-radius: 12px; background: var(--accent-soft); }
.auth-tabs button {
  flex: 1; min-width: 0; padding: 10px 12px; border: none; border-radius: 9px;
  background: transparent; color: var(--accent); font-size: 15px; font-weight: 600;
}
.auth-tabs button.on { background: var(--accent); color: var(--accent-ink); }
#auth-step input[type=password] { font-size: 17px; }
/* The eye sits inside the password field, at its right end. */
#auth-step .field > span.pw-wrap { position: relative; display: block; width: min(92%, 360px); margin-bottom: 0; }
#auth-step .field .pw-wrap input { width: 100%; padding-right: 52px; }
.pw-wrap .pw-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 48px; min-width: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink-muted);
}
.pw-wrap .pw-toggle:hover, .pw-wrap .pw-toggle:focus-visible { color: var(--accent); }
.pw-wrap .pw-toggle svg { width: 22px; height: 22px; }
.pw-wrap .pw-toggle .eye-off, .pw-wrap .pw-toggle.shown .eye { display: none; }
.pw-wrap .pw-toggle.shown .eye-off { display: block; }

/* Free bids and invites ---------------------------------------------------- */
.free { color: var(--unique); }
.bid-cost strong.free { color: var(--unique); }
.invite-code {
  display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0;
  padding: 12px var(--space-3); border: 1px dashed var(--accent); border-radius: var(--radius-md); background: var(--accent-soft);
}
.invite-code .caption { margin: 0; }
.code-big { flex: 1; font-family: var(--font-numeral); font-size: 24px; font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.invite-stats { margin: var(--space-3) 0 0; }

.pg.word { font-family: var(--font-text); }

/* My bids: Sign out stands apart from the account card, in red */
.card.account > button { width: 100%; margin-top: var(--space-2); }
button.sign-out { display: block; width: 100%; margin-top: var(--space-4); padding: 14px; font-weight: 700; }

/* Telegram */
.tg-line { margin: 4px 0 0; }
.card.tg-messages { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card.tg-messages p { margin: 2px 0 0; }

/* Fields that look like fields ---------------------------------------------
   A visible border, a slightly sunken fill that differs from the card, and a
   clear hover and focus state, so a text box reads as "tap here and type". */
:root {
  --field-bg: #050d10;
  --field-border: #3d6670;
  --field-border-hover: #5f8f99;
  --field-placeholder: #6f8f96;
}
:root[data-theme="light"] {
  --field-bg: #f4fafb;
  --field-border: #8fb0b8;
  --field-border-hover: #5f8b95;
  --field-placeholder: #7d989e;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --field-bg: #f4fafb;
    --field-border: #8fb0b8;
    --field-border-hover: #5f8b95;
    --field-placeholder: #7d989e;
  }
}

input[type=tel], input[type=text], input[type=password], input[type=number], input[type=datetime-local], textarea, select {
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
  min-height: 48px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=tel]:hover, input[type=text]:hover, input[type=password]:hover, input[type=number]:hover, textarea:hover, select:hover {
  border-color: var(--field-border-hover);
}
input[type=tel]:focus, input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=datetime-local]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--field-placeholder); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { box-shadow: none; }
.amount-row input { border: 1.5px solid var(--field-border); background: var(--field-bg); }

/* Sign in / join, the name step and the referral-code editor: narrower than
   the card, so the fields read as boxes to fill, not as text. */
#auth-step .field input, #name-input, #ref-input {
  width: min(92%, 360px);
  display: block;
}
#auth-step .field > span { margin-bottom: 8px; }
#auth-step .field { margin-bottom: var(--space-3); }

/* Sign-in buttons (Send code, Verify, Share phone number): sized to their
   label like the fields above them, not stretched across the card. */
#auth-step button.primary,
.auth-card #send-code {
  width: auto;
  min-width: 180px;
  max-width: min(92%, 360px);
  padding: 13px 28px;
  display: block;
}
#auth-step button.primary,
.auth-card #send-code { margin-left: auto; margin-right: auto; }

/* Sign-in buttons: main action on the left; in the sheet, a faint Cancel at
   the far right end (still easy to find, never competing with the action). */
.auth-actions {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3);
}
.auth-actions button.primary, #auth-step .auth-actions button.primary { margin: 0; }
button.cancel-link {
  background: none; border: none; padding: 10px 4px; min-width: 0;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); opacity: .5;
}
button.cancel-link:hover, button.cancel-link:focus-visible { opacity: 1; }

/* Invite card: the link is the thing to share */
.invite-link { margin: var(--space-3) 0 var(--space-2); }
.invite-link .caption { display: block; margin: 0 0 4px; }
.invite-link p.caption { margin: 6px 0 0; }
.link-text {
  display: block; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent); font-family: var(--font-numeral); font-size: 14px;
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.invite-progress { display: flex; align-items: center; gap: 10px; margin: var(--space-3) 0 4px; font-size: 14px; }
.pips { display: inline-flex; gap: 5px; }
.pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--unique); }
.pips i.on { background: var(--unique); }
.invite-code { margin: var(--space-3) 0 0; padding: 8px 12px; border-style: solid; border-color: var(--line); background: transparent; }
.invite-code .code-big { font-size: 18px; color: var(--ink); }

/* Sign-in: notes that replace a field once we know the number */
.known-note {
  margin: -4px 0 var(--space-3); padding: 10px 12px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 20px; color: var(--unique);
  border: 1px solid color-mix(in srgb, var(--unique) 45%, transparent);
  background: color-mix(in srgb, var(--unique) 8%, transparent);
  width: min(92%, 360px);
}
.known-note.warn {
  color: var(--shared); border-color: color-mix(in srgb, var(--shared) 45%, transparent);
  background: color-mix(in srgb, var(--shared) 8%, transparent);
}
.known-note[hidden], #auth-step .field[hidden] { display: none; }

.field-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 17px; color: var(--ink-muted); width: min(92%, 360px); }

/* "Item Description": a small nudge that says "this opens" -------------------
   While closed, the arrow is cyan and dips twice every few seconds. Open, it
   is still. Nothing moves for people who ask for reduced motion. */
details.about summary { transition: background-color .15s ease, color .15s ease; border-radius: var(--radius-md); }
details.about summary:hover, details.about summary:active { background: var(--accent-soft); }
details.about:not([open]) summary::after {
  border-color: var(--accent);
  animation: about-nudge 3.2s ease-in-out infinite;
}
@keyframes about-nudge {
  0%, 62%, 100% { transform: rotate(45deg) translate(-1px, -1px); }
  70%           { transform: rotate(45deg) translate(3px, 3px); }
  78%           { transform: rotate(45deg) translate(-1px, -1px); }
  86%           { transform: rotate(45deg) translate(3px, 3px); }
  94%           { transform: rotate(45deg) translate(-1px, -1px); }
}
@media (prefers-reduced-motion: reduce) {
  details.about:not([open]) summary::after { animation: none; }
}

/* Several numbers at once */
.picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-2); }
.picks:empty { display: none; }
.picks .caption { margin: 0 2px 0 0; }
.chip.pick { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; font-size: 15px; background: var(--accent-soft); color: var(--accent); }
/* The remove button is a solid red-on-hover disc, big enough for a thumb. */
.chip.pick button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--taken) 18%, transparent); color: var(--taken);
}
.chip.pick button svg { width: 13px; height: 13px; }
.chip.pick button:hover, .chip.pick button:active { background: var(--taken); color: #fff; }
/* Add sits at the end of the quick-steps row, the same size as its
   neighbours, tinted so it reads as the row's action. Place bid stays the one
   solid button. */
.quick-steps button.add-pick {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}
.quick-steps button.add-pick svg { width: 14px; height: 14px; flex: none; }
.quick-steps button.add-pick:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.quick-steps button.add-pick:active { transform: translateY(1px); }
.quick-steps button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* A number past the bid limit: red, so it is clear it will not be bought. */
.amount-row input.invalid { color: var(--taken); box-shadow: 0 0 0 3px color-mix(in srgb, var(--taken) 18%, transparent); }

/* Prize tracker */
.prize-track { margin-top: var(--space-3); padding: 12px; border: 1px solid var(--lowest); border-radius: var(--radius-md); background: var(--lowest-soft); }
.prize-track ol { list-style: none; display: flex; gap: 4px; margin: 0 0 6px; padding: 0; counter-reset: s; }
.prize-track li { flex: 1; font-size: 12px; font-weight: 600; text-align: center; color: var(--ink-muted); padding-top: 8px; border-top: 3px solid var(--line); }
.prize-track li.done { border-top-color: var(--lowest); color: var(--ink); }
.prize-track li.now { color: var(--unique); }
.prize-track p { margin: 0; }
.prize-track.forfeited { border-color: var(--line); background: transparent; font-size: 14px; }

/* Limits and account */
details.limits h3 { font-size: 15px; margin: var(--space-4) 0 4px; }
details.limits h3:first-child { margin-top: 0; }
.limit-form { display: flex; gap: var(--space-2); align-items: stretch; margin: var(--space-2) 0; }
.limit-form input { flex: 1; min-width: 0; }
.limit-form select { width: auto; }
details.limits .known-note { width: auto; margin: 6px 0; }

/* Results fingerprint */
code.hash { display: block; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-100); border: 1px solid var(--line);
  font-family: var(--font-numeral); font-size: 12px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; margin: 6px 0 var(--space-2); }
details.proof { margin-top: var(--space-2); }

/* Admin: tiles, system, records */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.admin-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200);
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
}
.admin-tile:hover { border-color: var(--accent); color: var(--accent); }
.admin-tile b { font-family: var(--font-numeral); min-width: 24px; text-align: center; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--line); }
.admin-tile.warn { border-color: var(--shared); }
.admin-tile.warn b { background: var(--shared); color: #1a1200; }
.card.system .row { align-items: center; font-size: 14px; }
.claim-winner { margin: var(--space-2) 0 var(--space-3); }
.support-text { white-space: pre-wrap; margin: 8px 0; }

/* Admin reports ------------------------------------------------------------ */
.report-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.report-tiles > div { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200); min-width: 0; }
.report-tiles b { display: block; font-family: var(--font-numeral); font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }
.report-tiles span { display: block; font-size: 13px; color: var(--ink-muted); }
.report-tiles small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--ink-muted); opacity: .85; }
table.report th.r, table.report td.r { text-align: right; }
table.report td { font-size: 14px; }
table.report td:first-child { min-width: 170px; }
table.report th { white-space: nowrap; }
.admin-actions { align-items: center; }
table.report td.meter-cell { width: 28%; min-width: 90px; }
.tag.lowest { color: var(--lowest); }
/* Named "meter", not "bar": the page header is header.bar. */
.meter { display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.hours { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-bottom: 22px; }
.hours > div { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.hours i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); }
.hours span { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-size: 11px; color: var(--ink-muted); }