/* ============================================================
   ChampStudios — app design system
   Tokens extracted from the existing marketing page (index.html)
   to keep one visual language: near-black surfaces, gold accent,
   Inter, generous spacing, subtle glows.
   Rule of thumb: ~90% dark, ~7% white/gray, ~3% gold.
   ============================================================ */

:root {
  /* tokens from the marketing page */
  --gold: #f4b021;
  --gold-2: #f7c04a;
  --gold-deep: #c8891a;
  --ink: #0c0805;
  --txt: #f4efe6;
  --muted: #b7b0a4;
  --line: rgba(255, 255, 255, 0.09);
  --card: rgba(20, 15, 9, 0.62);
  --maxw: 1280px;
  /* app additions */
  --bg: #0a0806;
  --surface: #120d08;
  --gold-soft: rgba(244, 176, 33, 0.16);
  --gold-faint: rgba(244, 176, 33, 0.08);
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 11px;
  --shadow-card: 0 0 0 1px rgba(244, 176, 33, 0.05), 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(244, 176, 33, 0.1);
  --shadow-gold: 0 4px 16px rgba(244, 176, 33, 0.2);
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.12);
  --warn: #fbbf24;
  --danger: #f87171;
  --info: #7dd3fc;
  --topbar-h: 62px;
  --nav-h: 64px;
}

/* ---------- reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(244, 176, 33, 0.35); color: #fff; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ---------- typography ---------- */
.h-display { font-size: clamp(30px, 7vw, 52px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.08; }
.h1 { font-size: clamp(24px, 5vw, 34px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.h2 { font-size: 20px; font-weight: 700; line-height: 1.25; }
.h3 { font-size: 15px; font-weight: 700; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.tiny { font-size: 12px; }
.small { font-size: 13.5px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-sm);
  padding: 12px 22px;
  min-height: 44px; /* sensible touch target */
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #241704;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { box-shadow: 0 6px 22px rgba(244, 176, 33, 0.28); }
.btn-ghost { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--txt); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.btn-outline { background: transparent; border: 1px solid var(--gold-deep); color: var(--gold); }
.btn-outline:hover { background: var(--gold-faint); }
.btn-dark { background: var(--card); border: 1px solid var(--line); color: var(--txt); }
.btn-dark:hover { border-color: rgba(255, 255, 255, 0.22); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; min-height: 38px; font-size: 13.5px; }
.btn-lg { padding: 15px 26px; font-size: 15.5px; min-height: 52px; }
.btn-danger { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.35); color: var(--danger); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.18); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--txt);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.18s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.icon-btn:active { transform: scale(0.94); }

/* ---------- chips & badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { color: var(--txt); border-color: rgba(255, 255, 255, 0.22); }
.chip[aria-pressed="true"],
.chip.active {
  background: var(--gold-faint);
  border-color: rgba(244, 176, 33, 0.45);
  color: var(--gold);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.badge-gold { background: var(--gold-faint); border-color: rgba(244, 176, 33, 0.4); color: var(--gold); }
.badge-live { background: var(--gold-faint); border-color: rgba(244, 176, 33, 0.4); color: var(--gold); }
.badge-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.8s infinite;
}
.badge-ok { background: var(--ok-soft); border-color: rgba(74, 222, 128, 0.35); color: var(--ok); }
.badge-warn { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); color: var(--warn); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 176, 33, 0.5); }
  55% { box-shadow: 0 0 0 6px rgba(244, 176, 33, 0); }
}

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.card-pad { padding: 20px; }
.card-gold { border-color: rgba(244, 176, 33, 0.3); box-shadow: var(--shadow-card); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.input, .textarea, .select {
  width: 100%;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 16px; /* ≥16px prevents iOS focus zoom */
  color: var(--txt);
  min-height: 48px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.input::placeholder, .textarea::placeholder { color: rgba(183, 176, 164, 0.55); }
.input:hover, .textarea:hover, .select:hover { border-color: rgba(255, 255, 255, 0.26); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
  background: rgba(255, 255, 255, 0.05);
}
.textarea { min-height: 110px; resize: vertical; }
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b7b0a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}
.select option { background: var(--surface); color: var(--txt); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.check input { accent-color: var(--gold); width: 18px; height: 18px; margin-top: 2px; flex: none; }

/* ---------- app shell: top bar (desktop) ---------- */
.app-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.logo .dot { color: var(--gold); }
.logo-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #241704;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; letter-spacing: 0;
  box-shadow: var(--shadow-gold);
  flex: none;
}
.topbar-links { display: flex; gap: 4px; margin-left: 12px; }
.topbar-link {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}
.topbar-link:hover { color: var(--txt); background: rgba(255, 255, 255, 0.05); }
.topbar-link.active { color: var(--gold); background: var(--gold-faint); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.user-chip:hover { border-color: rgba(244, 176, 33, 0.4); background: rgba(255, 255, 255, 0.07); }
.user-chip img { width: 28px; height: 28px; border-radius: 50%; }

/* ---------- app shell: bottom nav (mobile) ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: rgba(10, 8, 6, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.bnav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.bnav-item svg { width: 22px; height: 22px; }
.bnav-item.active { color: var(--gold); }
.bnav-item.active::after {
  content: "";
  position: absolute;
  top: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}
.bnav-item:hover { color: var(--txt); }
/* The centre action stays the product's entry point, but it should
   not permanently compete with the content: a slightly tighter
   circle and a softer halo, still unmistakably gold. */
.bnav-plus .plus-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #241704;
  display: flex; align-items: center; justify-content: center;
  margin-top: -12px;
  box-shadow: 0 2px 10px rgba(244, 176, 33, 0.18), 0 0 0 4px rgba(10, 8, 6, 0.92);
  transition: transform 0.2s, box-shadow 0.2s;
}
.bnav-plus.active .plus-circle { box-shadow: 0 3px 12px rgba(244, 176, 33, 0.26), 0 0 0 4px rgba(10, 8, 6, 0.92); }
.bnav-plus:active .plus-circle { transform: scale(0.93); }
.bnav-plus .plus-circle svg { width: 19px; height: 19px; }
.bnav-plus .bnav-label { margin-top: 3px; }
.bnav-plus.active::after { display: none; }

/* ---------- page layout ---------- */
.page {
  min-height: 100dvh;
  padding: calc(var(--topbar-h) + 24px) clamp(16px, 4vw, 40px) 48px;
}
.page-narrow { max-width: 680px; margin: 0 auto; }
.page-medium { max-width: 1020px; margin: 0 auto; }
.page-wide { max-width: var(--maxw); margin: 0 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.page-head .h1 { display: flex; align-items: center; gap: 10px; }
.section { margin-top: 34px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head .more { font-size: 13.5px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 3px; }
.section-head .more svg { width: 15px; height: 15px; }

/* ---------- stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 10px;
  text-align: center;
  display: flex; flex-direction: column; gap: 3px;
}
.stat b { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.stat span { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }

/* ---------- toast ---------- */
.toast-region {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(420px, calc(100vw - 32px));
  background: rgba(18, 13, 8, 0.94);
  border: 1px solid rgba(244, 176, 33, 0.35);
  color: var(--txt);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(244, 176, 33, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast svg { width: 17px; height: 17px; color: var(--gold); flex: none; }
.toast.out { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.96); } }

/* ---------- skeleton loading ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- empty state ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 26px 18px;
  color: var(--muted);
}
.empty-state .empty-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--gold-faint);
  border: 1px solid rgba(244, 176, 33, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.empty-state .empty-icon svg { width: 21px; height: 21px; }
.empty-state p { font-size: 13.5px; max-width: 300px; }

/* ---------- list rows (leaderboard etc.) ---------- */
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.list-row:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.list-row .grow { flex: 1; min-width: 0; }

/* ---------- participant row ---------- */
.participant { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.participant img { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(244, 176, 33, 0.5); flex: none; object-fit: cover; }
.participant .p-name { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.participant .city { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* ---------- entry card (explore / watch / contest grids) ---------- */
.entry-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0d0906;
  border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.entry-card img, .entry-card video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.entry-card video { background: #050403; }
.entry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 176, 33, 0.4);
  box-shadow: 0 0 0 1px rgba(244, 176, 33, 0.14), 0 22px 50px rgba(0, 0, 0, 0.5);
}
.entry-card:active { transform: scale(0.98); }
.entry-card:hover img { transform: scale(1.05); }
.entry-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 4, 3, 0.35), rgba(5, 4, 3, 0) 30%, rgba(5, 4, 3, 0.85) 100%);
}
.entry-card-rank { position: absolute; top: 8px; left: 8px; }
.entry-card-cat { position: absolute; top: 8px; right: 8px; }
.entry-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.entry-card:hover .entry-card-play,
.entry-card:focus-visible .entry-card-play { opacity: 1; }
.entry-card-play .play-circle {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(12, 8, 5, 0.6);
  border: 1px solid rgba(244, 176, 33, 0.5);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.entry-card-play svg { width: 20px; height: 20px; margin-left: 2px; }
.entry-card-info {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.entry-card-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-card-title { font-size: 12px; line-height: 1.35; color: rgba(244, 239, 230, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.entry-card-meta { font-size: 11.5px; line-height: 1.4; color: var(--muted); display: flex; gap: 6px; align-items: center; font-weight: 600; }
.entry-card-meta svg { width: 11px; height: 11px; color: var(--gold); }

/* ---------- spinner (gold buttons) ---------- */
.spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(36, 23, 4, 0.35);
  border-top-color: #241704;
  animation: spin 0.7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- success state (checkout / upload) ---------- */
.success-check {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--gold-faint);
  border: 1px solid rgba(244, 176, 33, 0.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  margin: 6px auto 18px;
  animation: pop-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.success-check svg { width: 38px; height: 38px; }
.success-title { font-size: 22px; font-weight: 800; text-align: center; }
.success-sub { color: var(--muted); text-align: center; margin-top: 6px; }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- back link (checkout, participant) ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 16px;
  transition: color 0.2s;
}
.back-link:hover { color: var(--txt); }
.back-link .icon-btn { width: 34px; height: 34px; }
.back-link .icon-btn svg { width: 16px; height: 16px; }

/* ---------- misc ---------- */
.divider { height: 1px; background: var(--line); border: 0; margin: 18px 0; }
.avatar { border-radius: 50%; object-fit: cover; }
.avatar-ring { border: 1.5px solid rgba(244, 176, 33, 0.5); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}
.note svg { width: 16px; height: 16px; flex: none; color: var(--gold); margin-top: 1px; }

/* ---------- responsive shell ---------- */
@media (max-width: 1023.98px) {
  .app-topbar { display: none; }
  /* top inset: iOS standalone draws under the status bar (black-translucent);
     bottom inset: clear the Home indicator + fixed bottom nav */
  .page { padding: calc(16px + env(safe-area-inset-top)) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px); }
  .section { margin-top: 26px; }
  /* app-like touch targets (Apple HIG 44pt floor) — visual padding
     unchanged, the min-height only widens the tappable area */
  .btn { min-height: 44px; }
}
@media (min-width: 1024px) {
  .bottom-nav { display: none; }
  .toast-region { bottom: 26px; }
  .hide-desktop { display: none !important; }
}
@media (max-width: 1023.98px) {
  .hide-mobile { display: none !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- onboarding coach marks (stage #023 recomposition) ----------
   Anchored cards that point AT the feature being explained. Solid
   elevated surface (readable over bright or dark video), never covers
   the target, the bottom nav, or leaves the viewport (positioner).
   Desktop gets the same system with side placements + a connector
   caret — no modal, no dimmed backdrop: the video stays primary. */
.onboard-coach {
  position: fixed;
  z-index: 85; /* above content, BELOW the bottom nav's stacking where nav is chrome */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: ob-in 0.22s ease both;
  visibility: hidden; /* positioner reveals when placed */
}
@keyframes ob-in {
  from { opacity: 0; transform: translateY(6px); }
}
.onboard-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.onboard-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.onboard-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
}
.onboard-icon svg {
  width: 20px;
  height: 20px;
}
.onboard-text {
  min-width: 0;
  flex: 1;
}
.onboard-count {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.onboard-title {
  display: block;
  margin-top: 2px;
  font-weight: 800;
}
.onboard-copy {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.onboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 50px; /* aligns with the text column */
}
.onboard-dots {
  display: inline-flex;
  gap: 5px;
  margin-left: auto;
}
.onboard-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.onboard-dots i.on {
  background: var(--gold);
}
/* connector caret — rotated per placement (class set by the positioner) */
.onboard-caret {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  transform: rotate(45deg);
  z-index: -1;
}
.onboard-caret.caret-above { bottom: -7px; left: 50%; margin-left: -6px; border-top: none; border-left: none; }
.onboard-caret.caret-below { top: -7px; left: 50%; margin-left: -6px; border-bottom: none; border-right: none; }
.onboard-caret.caret-right { left: -7px; top: 50%; margin-top: -6px; border-left: none; border-bottom: none; }
.onboard-caret.caret-left { right: -7px; top: 50%; margin-top: -6px; border-right: none; border-top: none; }
.onboard-caret.caret-up { top: -7px; left: 50%; margin-left: -6px; border-bottom: none; border-right: none; }
.onboard-caret.caret-down { bottom: -7px; left: 50%; margin-left: -6px; border-top: none; border-left: none; }
/* target highlight — brief, subtle, never occluding */
.onboard-target {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
  animation: ob-pulse 1.6s ease-in-out infinite;
}
@keyframes ob-pulse {
  0%, 100% { outline-color: var(--gold); }
  50% { outline-color: rgba(244, 176, 33, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .onboard-coach { animation: none; }
  .onboard-target { animation: none; }
}
/* compact coach card on mobile — the top lane must stay unobtrusive */
@media (max-width: 1023px) {
  .onboard-coach {
    border-radius: var(--r-md);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  }
  .onboard-body { padding: 12px 14px; gap: 8px; }
  .onboard-icon { width: 30px; height: 30px; }
  .onboard-icon svg { width: 16px; height: 16px; }
  .onboard-title { font-size: 14px; }
  .onboard-copy { font-size: 12.5px; line-height: 1.4; }
  .onboard-actions { margin-left: 42px; margin-top: 8px; }
}
@media (min-width: 1024px) {
  .onboard-coach {
    border-radius: var(--r-lg, 20px);
  }
  .onboard-copy { font-size: 13.5px; }
}
/* ---------- help page (stage #021) ---------- */
.help-video-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.help-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 340px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(244, 176, 33, 0.12), rgba(244, 176, 33, 0.03));
  border: 1px dashed var(--gold-deep);
}
.play-circle {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: #000;
}
.play-circle svg {
  width: 26px;
  height: 26px;
}
.help-steps {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.help-step {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.step-num {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 800;
}
.help-step b {
  display: block;
}
.help-step p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- profile edit + security (stage #021) ---------- */
.profile-ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
  font-size: 13px;
  color: var(--gold);
}
.profile-ig svg {
  width: 15px;
  height: 15px;
}
.profile-edit-form,
.mfa-code-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
}
.mfa-panel {
  margin-top: 12px;
}
.mfa-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mfa-enroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mfa-qr {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #fff;
}
.mfa-secret {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  width: 100%;
  max-width: 460px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}
.mfa-secret-label {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mfa-secret-code {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  padding: 8px 12px;
  color: #ffffff; /* stage #023C §7-§8: immediately legible key */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-all;
  max-width: 100%;
}
.mfa-secret-code:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.mfa-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  background: var(--gold-faint);
  color: var(--gold);
  cursor: pointer;
  white-space: nowrap;
}
.mfa-copy svg { width: 14px; height: 14px; }
.mfa-copy.copied {
  border-color: rgba(74, 222, 128, 0.5);
  color: var(--ok);
  background: rgba(74, 222, 128, 0.1);
}
.mfa-recovery-copy {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  background: var(--gold-faint);
  color: var(--gold);
  cursor: pointer;
}
.mfa-recovery-copy.copied {
  border-color: rgba(74, 222, 128, 0.5);
  color: var(--ok);
}
.mfa-recovery {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--gold-deep);
  border-radius: var(--r-md);
  background: var(--gold-faint);
}
.mfa-recovery-title {
  font-weight: 800;
  color: var(--gold);
}
.mfa-recovery-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.mfa-recovery-list {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  list-style: none;
  padding: 0;
}
.mfa-recovery-list li {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}
.mfa-recovery-copy {
  margin-top: 10px;
}
.mfa-done-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}