/* 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); }

/* Sheets fit the part of the screen the keyboard leaves visible (--vv-*, set
   by app.js from window.visualViewport), so a field is never hidden under it.
   Without that support they fall back to the whole screen. */
.sheet-backdrop {
  position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-height, 100%);
  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);
  max-height: calc(var(--vv-height, 100dvh) - 12px); overflow-y: auto; overscroll-behavior: contain;
}
@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: min(88vh, calc(var(--vv-height, 100dvh) - 12px)); overflow: hidden; 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); }

/* Profile ------------------------------------------------------------------ */
.profile-head {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--surface-200), color-mix(in srgb, var(--accent) 16%, var(--surface-200)));
}
.profile-head .grow { flex: 1; min-width: 0; }
.avatar {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 24px; font-weight: 700; letter-spacing: .02em;
}
.profile-name { margin: 0; font-size: 20px; font-weight: 700; line-height: 26px; overflow-wrap: anywhere; }
.profile-phone { margin: 2px 0 6px; color: var(--ink-muted); }
.verified {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600;
}
.verified svg { width: 14px; height: 14px; }
.profile-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: var(--space-3) 0; }
@media (min-width: 560px) { .profile-tiles { grid-template-columns: repeat(4, 1fr); } }
.profile-tiles > div { padding: var(--space-3); border-radius: 16px; border: 1px solid var(--line); background: var(--surface-200); min-width: 0; }
.profile-tiles span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.profile-tiles span svg, .card.invite h2 svg, .card.coupons h2 svg { width: 18px; height: 18px; flex: 0 0 auto; }
.profile-tiles b { display: block; margin-top: 6px; font-family: var(--font-numeral); font-size: 26px; line-height: 32px; }
.profile-tiles b.free { color: var(--accent); }
.card.invite h2, .card.coupons h2 { display: flex; align-items: center; gap: 8px; }
.card.invite h2 svg, .card.coupons h2 svg { color: var(--accent); }
.link-box {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0;
  padding: 6px 6px 6px var(--space-3); border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-100);
}
.link-box .link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.icon-btn {
  flex: 0 0 auto; width: 40px; height: 40px; min-width: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: none;
}
.icon-btn svg { width: 18px; height: 18px; }
.share-big {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; border-radius: var(--radius-pill); font-size: 16px; letter-spacing: .03em; text-transform: uppercase;
}
.share-big svg { width: 20px; height: 20px; }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.ref-stats > div { text-align: center; padding: var(--space-3) 4px; border-radius: 16px; background: var(--accent-soft); }
.ref-stats b { display: block; font-family: var(--font-numeral); font-size: 22px; line-height: 28px; }
.ref-stats span { display: block; font-size: 12.5px; line-height: 16px; color: var(--ink-muted); }
.card.coupons .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.card.coupons .card-head h2 { margin: 0; }
.count-pill { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.card.coupons .row small { display: block; }
/* The link sits inside the pill: drop the dashed box it has elsewhere. */
.link-box .link-text { border: none; padding: 0; background: none; font-family: inherit; color: var(--ink); }

/* ==========================================================================
   Native layer: the look and feel of an iPhone app.
   Comes last and overrides the rules above. The rules it follows:
   - Motion only where it explains something (a sheet rising from below, a
     button giving under the thumb), never on things done all day (switching
     tabs). Strong ease-out curves, under 300ms, except the iOS sheet curve.
   - Press feedback on everything tappable: a slight scale, at once.
   - Only transform and opacity animate. Reduced motion is respected.
   - Frosted glass only where the browser supports it; a solid colour
     otherwise, so older phones never show text through the bars.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Apple's own fonts on iPhone and Mac (SF Pro, SF Pro Rounded for numbers),
     each platform's system font elsewhere. Nothing to download. */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Noto Sans Ethiopic", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Noto Sans Ethiopic", sans-serif;
  --font-numeral: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-menu: var(--font-text);

  --radius-md: 14px;
  --radius-card: 20px;
  --tabbar-h: 54px;

  --glass: rgba(8, 19, 23, .78);
  --fill: rgba(255, 255, 255, .07);       /* quiet controls: segmented tracks, icon buttons */
  --fill-strong: rgba(255, 255, 255, .14);
  --seg-on: rgba(255, 255, 255, .16);
  --hairline: rgba(255, 255, 255, .09);
  --card-shadow: none;
  --sheet-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] {
  --glass: rgba(242, 249, 250, .8);
  --fill: rgba(10, 42, 49, .055);
  --fill-strong: rgba(10, 42, 49, .1);
  --seg-on: #ffffff;
  --hairline: rgba(10, 42, 49, .1);
  --card-shadow: 0 1px 2px rgba(10, 42, 49, .04), 0 6px 20px rgba(10, 42, 49, .05);
  --sheet-shadow: 0 -12px 40px rgba(10, 42, 49, .14);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --glass: rgba(242, 249, 250, .8);
    --fill: rgba(10, 42, 49, .055);
    --fill-strong: rgba(10, 42, 49, .1);
    --seg-on: #ffffff;
    --hairline: rgba(10, 42, 49, .1);
    --card-shadow: 0 1px 2px rgba(10, 42, 49, .04), 0 6px 20px rgba(10, 42, 49, .05);
    --sheet-shadow: 0 -12px 40px rgba(10, 42, 49, .14);
  }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-size: 16px; line-height: 1.45; letter-spacing: -.011em;
  -webkit-tap-highlight-color: transparent;
  /* Room for the tab bar and the home indicator under it. */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
a, button, .btn, summary, label { touch-action: manipulation; }

/* Large titles, as on iOS. */
h1 { font-family: var(--font-display); font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -.024em; margin: 20px 0 12px; }
h2 { font-family: var(--font-display); font-size: 20px; line-height: 25px; font-weight: 650; letter-spacing: -.017em; }
.num, .countdown, .chip, .pill, table .num, .stat span, .report-tiles b, .profile-tiles b, .ref-stats b {
  font-variant-numeric: tabular-nums;
}

/* Top bar: slim, frosted, a hairline under it. --------------------------- */
header.bar {
  padding-top: env(safe-area-inset-top);
  background: var(--surface-100);
  border-bottom: .5px solid var(--hairline);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.bar, .tabbar { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.bar-inner { min-height: 52px; padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); }
.logo .latin { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.bar-tools { gap: 6px; }
.lang-toggle, .theme-toggle, .bar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px; border: none; border-radius: var(--radius-pill);
  background: var(--fill); color: var(--ink); text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.theme-toggle, .bar-btn { width: 36px; padding: 0; }
.bar-btn svg { width: 20px; height: 20px; }
.bar-btn.on { background: var(--accent); color: var(--accent-ink); }
.lang-toggle:active, .theme-toggle:active, .bar-btn:active { transform: scale(.92); }
.bar-btn[hidden] { display: none; }

/* Tab bar: fixed to the bottom, above the home indicator. ---------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center; align-items: stretch;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
  background: var(--surface-100);
  border-top: .5px solid var(--hairline);
  -webkit-user-select: none; user-select: none;
}
.tabbar .tab {
  flex: 1 1 0; max-width: 128px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-muted); text-decoration: none;
  font-family: var(--font-text); font-size: 10.5px; line-height: 13px; font-weight: 600; letter-spacing: .005em;
}
.tabbar .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar .tab svg { width: 26px; height: 26px; transition: transform 160ms var(--ease-out); }
.tabbar .tab:active svg { transform: scale(.86); }
.tabbar .tab.on { color: var(--accent); }
.tabbar .tab.on svg { stroke-width: 2.3; }
/* Sheets, the photo viewer and the keyboard sit above it. */
.sheet-backdrop { z-index: 40; }

/* Cards: grouped, rounder, a hairline instead of a border. --------------- */
.card {
  border: .5px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--card-shadow); padding: 20px;
}
.card.flush { padding: 0; }
.card.bid-panel { padding: 16px; }

/* Buttons: bigger targets, and they give under the thumb. ---------------- */
button, .btn {
  border-radius: 14px; font-size: 16px; letter-spacing: -.011em;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
button.primary { min-height: 50px; font-size: 17px; font-weight: 650; border: none; }
button.small, .btn.small { border-radius: 10px; }
button:active:not(:disabled), .btn:active { transform: scale(.97); }
/* Buttons that are positioned with transform keep their place when pressed. */
.gal-nav:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
.viewer-nav:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
.quick-steps button.add-pick:active { transform: scale(.97); }

/* Fields: 17px so iPhones do not zoom in, iOS-style rounded boxes. */
input[type=tel], input[type=text], input[type=password], input[type=number], input[type=datetime-local], textarea, select {
  font-size: 17px; border-radius: 12px; min-height: 50px;
}

/* Segmented controls: Active | Ended, Login | Register. ------------------ */
.segmented, .auth-tabs {
  display: flex; gap: 2px; padding: 3px; margin: 4px 0 18px;
  border-radius: 12px; background: var(--fill);
}
.segmented a, .auth-tabs button {
  flex: 1 1 0; min-width: 0; padding: 8px 10px; border: none; border-radius: 9px;
  background: transparent; color: var(--ink); text-align: center; text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 20px; min-height: 0;
}
.segmented a.on, .auth-tabs button.on {
  background: var(--seg-on); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 3px 10px rgba(0, 0, 0, .08);
}
.auth-tabs button:active:not(:disabled) { transform: none; }

/* Sheets rise from the bottom on iOS's curve, with a grab handle. -------- */
.sheet {
  border: none; border-radius: 22px 22px 0 0; box-shadow: var(--sheet-shadow);
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
}
.sheet::before {
  content: ''; display: block; width: 36px; height: 5px; margin: 0 auto 14px;
  border-radius: 3px; background: var(--fill-strong);
}
.sheet.reader::before { margin: 8px auto 0; }
.sheet-backdrop { animation: native-fade 240ms var(--ease-out); }
.sheet-backdrop > .sheet { animation: native-sheet-up 380ms var(--ease-drawer); }
@keyframes native-fade { from { opacity: 0; } }
@keyframes native-sheet-up { from { transform: translateY(100%); } }
@media (min-width: 640px) {
  .sheet { border-radius: 22px; padding-bottom: 24px; }
  .sheet::before { display: none; }
  .sheet-backdrop > .sheet { animation: native-pop 220ms var(--ease-out); }
}
@keyframes native-pop { from { opacity: 0; transform: scale(.96); } }

/* Toasts: frosted pills above the tab bar. ------------------------------- */
.toasts { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
.toast {
  border: .5px solid var(--hairline); border-left: 4px solid var(--unique); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  animation: native-toast-in 260ms var(--ease-out);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .toast { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
@keyframes native-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Hover effects only where there is a mouse: a tap must not leave them on. */
@media (hover: none) {
  .lang-toggle:hover, .theme-toggle:hover, .gal-nav:hover { color: inherit; border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-backdrop, .sheet-backdrop > .sheet, .toast { animation: native-fade 160ms ease; }
  button, .btn, .tabbar .tab svg, .lang-toggle, .theme-toggle, .bar-btn { transition: none; }
  button:active:not(:disabled), .btn:active, .tabbar .tab:active svg { transform: none; }
}

/* Text buttons look like iOS ones: tinted, no underline. */
.back-link, button.back-link { text-decoration: none; color: var(--accent) !important; font-size: 15px; font-weight: 600; }
footer a { text-decoration: none; }
.verified { white-space: nowrap; }

/* One app name at a time: APP_NAME in English, APP_NAME_LOCAL in Amharic. */
.logo.has-local .fidel { display: none; }
:root[lang="am"] .logo.has-local .fidel { display: inline; font-size: 21px; font-weight: 700; }
:root[lang="am"] .logo.has-local .latin { display: none; }

/* How to play ------------------------------------------------------------ */
.sheet.how { max-width: 560px; }
.how-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.how-head h2 { margin: 0; font-size: 24px; line-height: 30px; }
.how-head .bar-btn { font-size: 24px; line-height: 1; }
.how-body p { margin: 0 0 12px; }
.how-lead { font-size: 17px; line-height: 1.45; }
.how-am { margin-top: 22px; padding-top: 20px; border-top: .5px solid var(--hairline); font-family: var(--font-amharic); }
.how-example { list-style: none; margin: 6px 0 14px; padding: 4px 14px; border-radius: 16px; background: var(--fill); }
.how-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: .5px solid var(--hairline); font-size: 14px; }
.how-row:last-child { border-bottom: none; }
.how-row .pill { justify-self: start; min-width: 88px; text-align: center; background: var(--fill-strong); color: var(--ink); }
.how-holders { color: var(--ink-muted); }
.how-tag { font-weight: 600; text-align: right; }
.how-row.shared .how-tag { color: var(--shared); }
.how-row.win .pill { background: var(--lowest); color: var(--lowest-ink); }
.how-row.win .how-tag { color: var(--lowest); }
.sheet.how > button.primary { margin-top: 6px; }
/* The way out stays in reach while the text scrolls under it. */
.sheet.how > button.primary {
  position: sticky; bottom: 0; z-index: 1;
  box-shadow: 0 -14px 18px 4px var(--surface-200);
}

/* How to play: a tinted, labelled pill in the top bar, easy to see and hit. */
.how-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; min-height: 0; padding: 0 14px 0 10px; border: none; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
  position: relative;
}
.how-pill svg { width: 20px; height: 20px; flex: 0 0 auto; }
.how-pill:active:not(:disabled) { transform: scale(.95); }
/* First visits only: a soft ring breathes out three times, then stops. */
.how-pill.fresh::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--accent); opacity: .55; pointer-events: none;
  animation: how-ring 1.8s var(--ease-out) 3 1s;
}
@keyframes how-ring { to { box-shadow: 0 0 0 8px var(--accent); opacity: 0; } }
@media (max-width: 340px) { .how-pill span { display: none; } .how-pill { padding: 0; width: 36px; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .how-pill.fresh::after { animation: none; } }

/* Selected and pressed states that read in both themes ---------------------
   In light mode the brand colour and the muted grey are nearly the same
   lightness, so colour alone could not show which tab is on. The selected
   tab gets a capsule behind its icon (a shape, not only a colour), the
   selected segment is filled, and a pressed button darkens as well as gives. */
.tabbar .tab svg { box-sizing: content-box; padding: 3px 14px; border-radius: 999px; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.tabbar .tab.on svg { background: var(--accent-soft); }
.tabbar .tab.on span { font-weight: 700; }
.tabbar .tab { gap: 1px; }

:root[data-theme="light"] .tabbar .tab.on svg { background: rgba(14, 116, 144, .16); }
:root[data-theme="light"] .segmented a.on, :root[data-theme="light"] .auth-tabs button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(14, 116, 144, .3); }
:root[data-theme="light"] button:active:not(:disabled):not(.primary), :root[data-theme="light"] .btn:active { background-color: var(--fill-strong); }
:root[data-theme="light"] button.primary:active:not(:disabled) { filter: brightness(.9); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tabbar .tab.on svg { background: rgba(14, 116, 144, .16); }
  :root:not([data-theme]) .segmented a.on, :root:not([data-theme]) .auth-tabs button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(14, 116, 144, .3); }
  :root:not([data-theme]) button:active:not(:disabled):not(.primary), :root:not([data-theme]) .btn:active { background-color: var(--fill-strong); }
  :root:not([data-theme]) button.primary:active:not(:disabled) { filter: brightness(.9); }
}

/* Time left: the numbers carry the weight; d, h, m and s are light and muted. */
.countdown { font-weight: 700; }
.countdown .u { font-weight: 400; color: var(--ink-muted); font-size: .8em; margin-left: 1px; }
.round-line .countdown { font-weight: 700; }

/* Category chips: small cards in a row that scrolls sideways, edge to edge. */
.cat-row {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 6px calc(-1 * max(16px, env(safe-area-inset-left))) 14px; padding: 2px max(16px, env(safe-area-inset-left)) 6px;
  scroll-snap-type: x proximity; scroll-padding-left: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cat-row::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; min-height: 0; padding: 0 14px 0 11px; border-radius: 12px;
  border: .5px solid var(--hairline); background: var(--surface-200); color: var(--ink);
  box-shadow: var(--card-shadow); font-size: 14px; font-weight: 600; white-space: nowrap; scroll-snap-align: start;
}
.cat-chip svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.cat-chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.cat-chip.on svg { color: inherit; }
.cat-chip:active:not(:disabled) { transform: scale(.96); }
.feed > .card:first-child h2.first { margin-top: 0; }

/* Admin: tick the categories an item is in. */
.cat-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pick { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; font-size: 14px; font-weight: 600; }
.cat-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.cat-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* − / + and ±1.00 repeat while held: no long-press menu or text selection,
   and the button stays visibly pressed for as long as it repeats. */
[data-nudge] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
[data-nudge].holding { transform: scale(.94); background-color: var(--fill-strong); }

/* ==========================================================================
   Design: deep navy with a cyan-to-azure gradient (after the sample UI).
   Comes last and overrides the colours and the components above:
   - Cyan is the main colour, with a touch of azure blue as its partner;
     the two meet in a gradient on the logo, the main buttons
     and the selected tab.
   - Featured auctions wear a glowing gold frame.
   - Photos carry small tags: red for the time left, blue for the price.
   - The tab bar floats; the selected tab is a raised blue circle.
   ========================================================================== */
:root {
  --surface-100: #05121b;          /* page */
  --surface-200: #0c1e2a;          /* cards */
  --ink: #e9f7fb;
  --ink-muted: #8aa6b3;
  --accent: #12bfe0;               /* the main cyan */
  --accent-ink: #ffffff;
  --accent-soft: rgba(18, 191, 224, .16);
  --cyan: #12bfe0;
  --azure: #1d8fe8;                /* the touch of blue in the gradient */
  --brand-grad: linear-gradient(135deg, #12bfe0 0%, #1d8fe8 100%);
  --gold: #f5c444;
  --gold-glow: 0 0 0 1px rgba(245, 196, 68, .3), 0 0 18px rgba(245, 196, 68, .3);
  --tag-time: #ef3b45;
  --tag-price: #0b8db3;
  --line: #173544;
  --hairline: rgba(255, 255, 255, .08);
  --glass: rgba(6, 20, 30, .84);
  --fill: rgba(255, 255, 255, .06);
  --fill-strong: rgba(255, 255, 255, .12);
  --seg-on: rgba(18, 191, 224, .9);
  --backdrop: rgba(2, 10, 15, .72);
  --tabbar-h: 64px;
  --tabbar-room: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom));
}
:root[data-theme="light"] {
  --surface-100: #f1f8fb; --surface-200: #ffffff; --ink: #0a2430; --ink-muted: #4f6873;
  --accent: #0891b2; --accent-soft: rgba(8, 145, 178, .1); --cyan: #0891b2;
  --brand-grad: linear-gradient(135deg, #0aa6c9 0%, #1f74d6 100%);
  --line: #d3e6ee; --hairline: rgba(10, 36, 48, .1); --glass: rgba(241, 248, 251, .86);
  --fill: rgba(10, 36, 48, .05); --fill-strong: rgba(10, 36, 48, .1); --seg-on: #0891b2; --backdrop: rgba(10, 36, 48, .45);
  --gold-glow: 0 0 0 1px rgba(214, 160, 20, .35), 0 6px 18px rgba(214, 160, 20, .25);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --surface-100: #f1f8fb; --surface-200: #ffffff; --ink: #0a2430; --ink-muted: #4f6873;
    --accent: #0891b2; --accent-soft: rgba(8, 145, 178, .1); --cyan: #0891b2;
    --brand-grad: linear-gradient(135deg, #0aa6c9 0%, #1f74d6 100%);
    --line: #d3e6ee; --hairline: rgba(10, 36, 48, .1); --glass: rgba(241, 248, 251, .86);
    --fill: rgba(10, 36, 48, .05); --fill-strong: rgba(10, 36, 48, .1); --seg-on: #0891b2; --backdrop: rgba(10, 36, 48, .45);
    --gold-glow: 0 0 0 1px rgba(214, 160, 20, .35), 0 6px 18px rgba(214, 160, 20, .25);
  }
}

/* A soft blue light from the top of the page, as in the sample. */
body {
  background:
    radial-gradient(900px 520px at 50% -160px, rgba(18, 191, 224, .2), transparent 65%),
    radial-gradient(600px 400px at 100% 10%, rgba(29, 143, 232, .08), transparent 60%),
    var(--surface-100);
  background-attachment: fixed;
  padding-bottom: var(--tabbar-room);
}
:root[data-theme="light"] body { background: radial-gradient(900px 520px at 50% -160px, rgba(8, 145, 178, .12), transparent 65%), var(--surface-100); background-attachment: fixed; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) body { background: radial-gradient(900px 520px at 50% -160px, rgba(8, 145, 178, .12), transparent 65%), var(--surface-100); background-attachment: fixed; }
}

/* The name in the gradient, bold, so it stands out. */
.logo .latin, :root[lang="am"] .logo.has-local .fidel {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; letter-spacing: -.03em;
}

/* Main buttons in the gradient, with a soft glow. */
button.primary { background: var(--brand-grad); border: none; color: #fff; box-shadow: 0 6px 18px rgba(18, 191, 224, .32); }
button.primary:disabled { box-shadow: none; }
.segmented a.on, .auth-tabs button.on { background: var(--seg-on); color: #fff; box-shadow: 0 2px 10px rgba(18, 191, 224, .35); }
:root[data-theme="light"] .segmented a.on, :root[data-theme="light"] .auth-tabs button.on { background: var(--accent); box-shadow: 0 2px 8px rgba(8, 145, 178, .3); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .segmented a.on, :root:not([data-theme]) .auth-tabs button.on { background: var(--accent); box-shadow: 0 2px 8px rgba(8, 145, 178, .3); }
}

/* Cards: a whisper of blue at the top. */
.card { background: linear-gradient(180deg, rgba(18, 191, 224, .06), transparent 140px), var(--surface-200); }

/* Section titles: "Featured Auctions", "Ending soon". */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.section-head h2 { margin: 0; font-size: 21px; line-height: 26px; font-weight: 750; }

/* The floating tab bar: the selected tab rises as a blue circle. --------- */
.tabbar {
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: var(--tabbar-h); padding: 0 6px;
  border: .5px solid var(--hairline); border-radius: 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
  overflow: visible;
}
:root[data-theme="light"] .tabbar { box-shadow: 0 10px 28px rgba(10, 36, 48, .14); }
.tabbar .tab { gap: 2px; font-size: 11px; position: relative; }
.tabbar .tab svg { width: 24px; height: 24px; padding: 0; background: none !important; border-radius: 0; }
.tabbar .tab.on { color: var(--accent); }
.tabbar .tab.on svg {
  box-sizing: content-box; padding: 12px; border-radius: 50%;
  background: var(--brand-grad) !important; color: #fff; stroke-width: 2.2;
  transform: translateY(-14px); margin-bottom: -14px;
  box-shadow: 0 8px 20px rgba(18, 191, 224, .5), 0 0 0 5px var(--surface-100);
}
.tabbar .tab.on:active svg { transform: translateY(-14px) scale(.92); }
.toasts { bottom: calc(var(--tabbar-room) + 8px); }

/* Categories: an icon tile (solid blue when chosen) with the name under it. */
.cat-row { gap: 12px; padding-top: 4px; padding-bottom: 8px; }
.cat-chip {
  flex-direction: column; gap: 6px; width: 72px; height: auto; padding: 0;
  border: none; background: none; box-shadow: none; color: var(--ink-muted);
  font-size: 11.5px; font-weight: 600; white-space: normal;
}
.cat-tile {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 17px;
  background: var(--surface-200); border: .5px solid var(--hairline);
}
.cat-chip svg { width: 26px; height: 26px; color: var(--ink-muted); }
.cat-name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.cat-chip.on { background: none; color: var(--accent); }
.cat-chip.on .cat-tile { background: var(--accent); border-color: transparent; box-shadow: 0 6px 16px rgba(18, 191, 224, .4); }
.cat-chip.on svg { color: #fff; }

/* Tags on photos, the size of those in the sample. ----------------------- */
.tag {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 7px; border-radius: 7px;
  font-family: var(--font-text); font-size: 11.5px; line-height: 1; font-weight: 700; color: #fff;
  white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.tag svg { width: 12px; height: 12px; flex: 0 0 auto; }
.tag .countdown, .tag .countdown .u { font-size: inherit; font-weight: 700; color: inherit; }
.tag .countdown .u { opacity: .85; margin-left: 0; }
.tag-word { font-weight: 600; opacity: .85; }
.tag-time { top: 8px; left: 8px; background: var(--tag-time); }
.tag-price { bottom: 8px; left: 8px; background: var(--tag-price); }
.photo-tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gallery-wrap .tag-time { top: 10px; left: 10px; }
.gallery-wrap .tag-price { bottom: 10px; left: 10px; }

/* Featured Auctions: gold-framed cards in a row that scrolls sideways. --- */
.featured:empty { display: none; }
.feat-row {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding: 6px max(16px, env(safe-area-inset-left)) 14px;
  scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.feat-row::-webkit-scrollbar { display: none; }
.feat-card {
  flex: 0 0 168px; display: flex; flex-direction: column; padding: 6px; border-radius: 18px;
  background: var(--surface-200); border: 1.5px solid var(--gold); box-shadow: var(--gold-glow);
  color: var(--ink); text-decoration: none; scroll-snap-align: start;
  transition: transform 160ms var(--ease-out);
}
.feat-card:active { transform: scale(.97); }
.feat-photo { position: relative; display: block; aspect-ratio: 1; border-radius: 13px; overflow: hidden; background: #fff; }
.feat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-empty { display: block; width: 100%; height: 100%; background: var(--fill); }
.feat-name { display: block; margin: 8px 4px 2px; font-size: 14px; line-height: 18px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-meta { display: block; margin: 0 4px 4px; font-size: 11.5px; line-height: 15px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A featured auction keeps its gold frame in the list below too. */
.round-card.is-featured .gallery-wrap { border-radius: var(--radius-md); box-shadow: 0 0 0 1.5px var(--gold), var(--gold-glow); }

/* Admin reports: the period picker. ‹ name › on top, presets, then any two days. */
.period { background: var(--surface-200); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; margin: 0 0 var(--space-3); }
.period-now { display: flex; align-items: center; gap: 8px; }
.period-label { flex: 1; text-align: center; display: flex; flex-direction: column; line-height: 1.25; }
.period-label b { font-size: 17px; }
.period-label small { color: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.period-presets { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.period-presets::-webkit-scrollbar { display: none; }
.period-presets .chip { font-family: var(--font-text); font-size: 13px; padding: 5px 11px; white-space: nowrap; text-decoration: none; }
.period-presets .chip.on { background: var(--brand-grad, var(--accent)); color: #fff; }
.period-custom { margin-top: 8px; }
.period-custom summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 600; }
.period-custom form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-top: 8px; }
.period-custom label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-muted); gap: 2px; }
.period-custom input[type="date"] { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-100);
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; min-width: 150px; }

/* Admin > SMS: the message box, picking items and auctions, the group's size. */
.sms-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -6px 0 14px; }
.sms-tools .check { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.sms-tools .r { text-align: right; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--space-3); }
.pick-list input[type="search"] { width: 100%; margin-bottom: 6px; min-height: 40px; font-size: 15px; }
.pick-scroll { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px; background: var(--surface-100); }
.pick { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.pick:hover { background: var(--accent-soft); }
.pick[hidden] { display: none; }
.pick input { margin-top: 3px; }
.pick small { display: block; color: var(--ink-muted); font-size: 12px; }
.pick-count { color: var(--accent) !important; font-weight: 600 !important; }
.date-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-pair input { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-100); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.sms-audience { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.sms-audience p { margin: 4px 0; }
.sms-audience b { font-size: 22px; color: var(--accent); }
.sms-body { white-space: pre-wrap; margin: 0 0 8px; }
.sms-preview { min-width: 220px; }
.segmented label { flex: 1 1 0; min-width: 0; cursor: pointer; }
.segmented label input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label span { display: block; padding: 8px 10px; border-radius: 9px; text-align: center; font-size: 15px; font-weight: 600; line-height: 20px; }
.segmented label input:checked + span { background: var(--seg-on); color: #fff; box-shadow: 0 2px 10px rgba(18, 191, 224, .35); }
.segmented label input:focus-visible + span { outline: 2px solid var(--accent); }

/* Admin > Visitors: a visit page by page, and two tables side by side. */
.visit-path { min-width: 240px; line-height: 2; }
.visit-path .chip { font-size: 12px; padding: 2px 8px; white-space: nowrap; }
.visit-path .arrow { color: var(--ink-muted); margin: 0 3px; }
.report-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--space-3); }

/* Admin: the Featured badge and switch. */
.badge.featured { color: var(--gold); border-color: var(--gold); margin-right: 6px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch-row strong { display: block; }
.switch-row small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; margin-top: 2px; }
input.switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 51px; height: 31px; margin: 0;
  border-radius: 999px; background: var(--fill-strong); position: relative; cursor: pointer; transition: background-color 200ms ease;
}
input.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform 200ms var(--ease-out);
}
input.switch:checked { background: var(--gold); }
input.switch:checked::after { transform: translateX(20px); }
input.switch:disabled { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .feat-card, .tabbar .tab.on svg { transition: none; }
  .feat-card:active { transform: none; }
}