/* project_zero — minimal dark theme
   A quiet projection room: one dark plane, system typography and a single
   accent (pilot-light amber) reserved for focus/interaction.
   No external fonts, no CDN, no frameworks. */

:root{
  /* --- colour --- */
  --bg:        #0a0a0b;   /* the void */
  --surface:   #16161a;   /* panels: cards, header */
  --surface-2: #1e1e23;   /* form fields, imageless thumbs */
  --border:        #29292f;
  --border-strong: #3a3a42;
  --text:       #ececee;
  --text-dim:   #97979f;
  --text-faint: #68686f;
  --accent:     #c99a55;              /* amber — the only accent */
  --accent-dim: rgba(201,154,85,.28);
  --danger:     #dd8271;

  --btn-bg:   #ececee;
  --btn-text: #0a0a0b;

  /* --- shape --- */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 16px;
  --maxw:        960px;
  --maxw-narrow: 400px;

  /* --- typography --- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  font-family: var(--font-sans);
  color-scheme: dark;
}

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

/* Do NOT bring `height: 100%` back here: it pins the body to the viewport
   height while the content overflows, and `position: sticky` only sticks within
   the block that contains it — past that, the navbar lets go and disappears when
   the menu is opened on a scrolled page. The `min-height: 100vh` on body below
   already guarantees the minimum height. */

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- base typography --- */
h1{
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0 0 24px;
  color: var(--text);
}

p{ margin: 0 0 16px; }

a{
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
a:hover{ text-decoration-color: var(--accent); }

.muted{ color: var(--text-dim); }

/* --- keyboard focus --- */
a, button, input{ outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==================== header ==================== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.brand__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.logout-form{ margin: 0; }

.btn-ghost{
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.btn-ghost:hover{ color: var(--text); border-color: var(--accent); }

/* ==================== main / content ==================== */
main{
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.main--center{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 24px;
}

/* ==================== forms ==================== */
form p{ margin: 0 0 18px; }

label{
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

input:not([type="hidden"]){
  width: 100%;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: 400 .9375rem/1.4 var(--font-sans);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:not([type="hidden"])::placeholder{ color: var(--text-faint); }
input:not([type="hidden"]):focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.helptext{
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  color: var(--text-faint);
}

ul.errorlist{
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: .8125rem;
  color: var(--danger);
}
ul.errorlist li{ margin-top: 2px; }

/* Altcha widget (self-hosted) — themed through custom properties that cross
   the <altcha-widget> shadow DOM */
altcha-widget{
  display: block;
  margin-top: 4px;
  --altcha-color-base:         var(--surface-2);
  --altcha-color-border:       var(--border);
  --altcha-color-border-focus: var(--accent);
  --altcha-color-text:         var(--text);
  --altcha-color-error-text:   var(--danger);
  --altcha-color-footer-bg:    var(--surface);
  --altcha-color-active:       var(--accent);
  --altcha-border-radius: 8px;
  --altcha-border-width: 1px;
  --altcha-max-width: 100%;
}

button{ font-family: var(--font-sans); }

.btn-primary{
  width: 100%;
  margin-top: 4px;
  padding: 12px 20px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 0;
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease, transform .1s ease;
}
.btn-primary:hover{ opacity: .88; }
.btn-primary:active{ transform: translateY(1px); }

/* ==================== auth card ==================== */
.auth-card{
  width: 100%;
  max-width: var(--maxw-narrow);
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -32px rgba(0,0,0,.7);
}
.auth-card h1{ margin-bottom: 28px; }

.auth-alt{
  margin: 24px 0 0;
  font-size: .875rem;
  text-align: center;
}

/* ==================== catalogue ==================== */
.page-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 32px;
}
.page-head h1{ margin: 0; }
.page-count{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
}
/* When the header stacks breadcrumb + h1 in one block, `baseline` matches the
   FIRST line — the count ended up glued to the breadcrumb, looking like part of
   it. `last baseline` aligns it with the title, which is the right pairing. */
.page-head > div + .page-count{ align-self: last baseline; }

.empty-state{ margin: 0; }

/* ==================== video grid ==================== */
/* No thumbnail (dropped from the model): the card is label + trigger — the play
   triangle (pure CSS, no external icon/SVG) is the only visual cue that the
   button opens the player, preserving the signal of the earlier design in a
   leaner component. */
.grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.card{
  position: relative;
  width: 100%;
  padding: 20px 16px 20px 58px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  font: 500 .9375rem/1.4 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, background .15s ease;
}
.card:hover{ border-color: var(--border-strong); background: var(--surface-2); }
.card:active{ transform: translateY(1px); }

/* play circle + triangle in pure CSS (no external icon/SVG) */
.card::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-dim);
  transition: background .15s ease;
}
.card::after{
  content: "";
  position: absolute;
  left: 29px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--accent);
  transition: border-color .15s ease;
}
.card:hover::before{ background: var(--accent); }
.card:hover::after{ border-left-color: var(--bg); }

/* ==================== modal player (16:9) ==================== */
/* `width` (not `max-width`) + player-wrap at 100%: with the wrap measuring the
   viewport on its own, it added the dialog padding on top and overflowed the
   width on mobile. Now only the dialog measures the screen; the rest is relative
   to it. */
#player{
  width: min(92vw, 960px);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  box-shadow: 0 32px 80px -32px rgba(0,0,0,.75);
}
#player::backdrop{ background: rgba(0,0,0,.75); }

.player-wrap{
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: calc(var(--radius-lg) - 4px);
  overflow: hidden;
}
.player-wrap video{ display: block; width: 100%; height: 100%; }

#player-close{ margin-top: 14px; }

/* ==================== lock icon (pure CSS) ==================== */
/* Same principle as the play triangle: pure geometry, no external SVG/icon —
   body (rectangle) + arc (a border with no bottom) forming the shackle. */
.lock-icon{
  display: inline-block;
  position: relative;
  width: 10px;
  height: 8px;
  margin-right: 6px;
  vertical-align: -1px;
}
.lock-icon::before{
  content: "";
  position: absolute;
  left: 1px; top: -5px;
  width: 8px; height: 7px;
  border: 1.5px solid var(--text-faint);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
}
.lock-icon::after{
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 10px; height: 6px;
  background: var(--text-faint);
  border-radius: 2px;
}
.lock-icon--lg{
  width: 26px;
  height: 20px;
  margin: 0 0 4px;
}
.lock-icon--lg::before{
  left: 3px; top: -13px;
  width: 20px; height: 18px;
  border-width: 3px;
  border-radius: 12px 12px 0 0;
}
.lock-icon--lg::after{
  left: 0; top: 7px;
  width: 26px; height: 16px;
  border-radius: 4px;
}

/* ==================== tier index ==================== */
.tier-group{ margin: 0 0 36px; }
.tier-group:last-of-type{ margin-bottom: 0; }

.tier-group__label{
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tier-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.tier-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
a.tier-card:hover{ border-color: var(--accent); background: var(--surface-2); }
a.tier-card:active{ transform: translateY(1px); }

.tier-card{ gap: 4px; }
.tier-card__name{ font-weight: 600; font-size: 1rem; }

/* how many videos are inside — worth showing on locked ones too: it is what
   gives scale to what you gain by inviting or buying */
.tier-card__meta{
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--text-faint);
}

.tier-card__status{
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tier-card__status--open{ color: var(--accent); }
.tier-card__status--buy{ color: var(--accent); }

.tier-card--locked{ color: var(--text-dim); cursor: default; }
.tier-card--locked .tier-card__name{ color: var(--text-dim); }

/* buyable: locked, but still a door — it must not look inert like the ones that
   only wait for invites */
a.tier-card--buy .tier-card__name{ color: var(--text); }
a.tier-card--buy:hover{ border-color: var(--accent); background: var(--surface-2); }

.page-foot{
  margin: 40px 0 0;
  font-size: .875rem;
}

/* ==================== locked tier (detail) ==================== */
.breadcrumb{
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.breadcrumb a{ color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover{ color: var(--accent); }

.locked-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 72px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.locked-state__reason{
  margin: 0;
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .03em;
  color: var(--text-dim);
}

/* ==================== /me — invite and progress ==================== */
.panel{
  padding: 24px;
  margin: 0 0 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.panel:last-child{ margin-bottom: 0; }

.invite-copy{ display: flex; gap: 8px; }
.invite-copy input{ font-family: var(--font-mono); font-size: .8125rem; }
.invite-copy .btn-ghost{ flex: none; }

.progress-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.progress-head__label{ font-weight: 600; }

.progress{
  height: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress > span{
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .3s ease;
}

/* ==================== header nav ==================== */
.topbar-actions{
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav{ display: flex; gap: 16px; }
.nav a{
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
}
.nav a:hover{ color: var(--accent); }

/* menu button — mobile only (see the media query) */
.nav-toggle{
  display: none;
  padding: 8px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle:hover{ border-color: var(--accent); }
/* three bars in pure geometry, like the lock and the play triangle */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text-dim);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle__bars{ position: relative; margin: 0 auto; }
.nav-toggle__bars::before,
.nav-toggle__bars::after{ content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before{ top: -6px; }
.nav-toggle__bars::after{ top: 6px; }
/* open: becomes an X, so the button states what it now does (close) */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ top: 0; transform: rotate(-45deg); }

/* generic chrome icon (telegram etc.) */
.icon{ display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; flex: none; }
.icon--lg{ width: 26px; height: 26px; vertical-align: 0; margin: 0; }

.nav-tg{ display: inline-flex; align-items: center; }

/* a button that behaves like the nav links (same type, same weight) */
.nav-copy{
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .15s ease;
}
.nav-copy:hover{ color: var(--accent); }

/* ==================== backup group (home) ==================== */
.tg-panel{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.tg-panel:hover{ border-color: var(--accent); background: var(--surface-2); }
.tg-panel .icon--lg{ color: var(--accent); }
.tg-panel__text{ display: flex; flex-direction: column; gap: 2px; }
.tg-panel__title{ font-weight: 600; }
.tg-panel .helptext{ margin: 0; }

/* ==================== tiers in the mobile menu ==================== */
/* Menu only; on desktop the tiers are already one click away on the home page. */
.nav-tiers{ display: none; }
.nav-tier{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-tier:hover{ border-color: var(--accent); }
.nav-tier__state{
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.nav-tier--locked{ color: var(--text-dim); }
.nav-tier--locked .lock-icon{ margin-right: 0; }

/* ==================== player navigation ==================== */
.player-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.player-meta{
  flex: 1 1 auto;
  min-width: 0;
  font-size: .875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-meta .muted{ font-family: var(--font-mono); font-size: .75rem; }

.player-nav{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  flex: none;
  transition: border-color .15s ease, opacity .15s ease;
}
.player-nav:hover:not(:disabled){ border-color: var(--accent); }
.player-nav:disabled{ opacity: .3; cursor: default; }
/* arrow in pure geometry, same language as the play triangle */
.player-nav__arrow{
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--text-dim);
}
.player-nav__arrow--prev{
  border-width: 6px 9px 6px 0;
  border-color: transparent var(--text-dim) transparent transparent;
}
.player-nav:hover:not(:disabled) .player-nav__arrow{ border-left-color: var(--accent); }
.player-nav:hover:not(:disabled) .player-nav__arrow--prev{ border-right-color: var(--accent); }

/* ==================== invite on the home page ==================== */
.invite-panel{ margin-bottom: 32px; }
.invite-panel label{ margin-top: 20px; }
.invite-panel .helptext{ margin-top: 8px; }

/* ==================== payment: coin picker ==================== */
/* 16 currencies is too few for a native <select> (which on top of that refuses
   the theme and clashes with everything else) and too many for prose: they
   become chips, in the same mono/uppercase language as the other labels. The
   real radio stays hidden but present — keyboard and screen reader keep
   working. Multi-network tokens (Tether, USD Coin) open a second level
   instead of adding more top-level chips -- see .coin-group below. */
.coin-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin: 0 0 24px;
}

.coin-chip{
  display: block;
  position: relative;
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  cursor: pointer;
}
.coin-chip input[type="radio"]{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  opacity: 0;
  pointer-events: none;
}
.coin-chip > span{
  display: block;
  padding: 11px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.coin-chip:hover > span{ border-color: var(--border-strong); color: var(--text); }
.coin-chip input[type="radio"]:checked + span{
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.coin-chip input[type="radio"]:focus-visible + span{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* fieldset/legend replaces label + role="radiogroup": a <details> disclosure
   nested inside the group is not valid radiogroup content (see buy.html), and
   fieldset/legend needs no ARIA at all. Reset to match the plain <label> look
   it replaces. */
.coin-fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; }
.coin-legend{
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Second level: tokens that exist on several chains. <details> carries the
   open/closed state, so no JavaScript is involved. */
.coin-group{ grid-column: 1 / -1; }

.coin-group summary{ cursor: pointer; list-style: none; }
.coin-group summary::-webkit-details-marker{ display: none; }

/* The group header reuses .coin-chip's box (border/background/padding, via
   .coin-chip > span) so it reads as the same kind of control as the seven
   simple chips -- but it spans the full row, so its content is a
   left-aligned icon/label/hint row instead of the simple chips' centred
   icon-over-label stack. */
.coin-chip--group > span{
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
/* .coin-mark's centring margin (auto left/right) is for a narrow, standalone
   chip; inside this flex row it would instead shove the icon away from the
   label, so the group variant resets it. */
.coin-chip--group .coin-mark{ margin: 0; }

/* A hint, not a second label: plain weight, sans, no letter-spacing --
   deliberately unlike the bold mono chip text it sits next to -- and pushed
   to the row's trailing edge. */
.coin-group__hint{
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-faint);
}

.coin-networks{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 8px;
  padding: 8px 0 0 8px;
}

.coin-chip--network span{ font-size: 0.85rem; }

/* The network belongs on the payment screen, not only in the picker: sending
   on the wrong chain is unrecoverable. */
.pay-network{
  color: var(--accent);
  font-size: 0.9rem;
}

/* ==================== payment: checkout ==================== */
.pay-grid{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}

/* The QR is the one place on the site that must NOT be dark: a scanner needs
   dark modules on a light background, with a quiet zone around them. Hence the
   light plate — a deliberate exception to the theme, not an oversight. */
.qr-plate{
  width: 196px;
  padding: 10px;
  background: #ececee;
  border-radius: var(--radius);
  line-height: 0;
  flex: none;
}
/* segno SVG carries a viewBox (omitsize=True) — without it the image would not
   scale and stayed anchored in a corner of its own box */
.qr-plate svg{ display: block; width: 100%; height: auto; }

/* coin marks: fill/stroke live on each <symbol> in the sprite, because BTC and
   ETH are stroke-based and the other six are fill-based */
.coin-mark{
  display: block;
  width: 19px;
  height: 19px;
  margin: 0 auto 5px;
}
.coin-mark--lg{
  display: inline-block;
  width: 21px;
  height: 21px;
  margin: 0 7px 0 0;
  vertical-align: -3px;
}

.countdown{
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--text-faint);
}

.pay-amount{
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.pay-amount__unit{ color: var(--accent); }

.pay-hint{
  margin: 0 0 20px;
  font-size: .8125rem;
  color: var(--text-faint);
}

.pay-field{ margin: 0 0 20px; }

.status-line{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.status-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.status-chip::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: none;
}
/* pending: the dot pulses slowly — the only movement on the page, and it says
   the right thing (we are waiting on the network, it has not frozen) */
.status-chip--waiting::before{
  background: var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
.status-chip--paid{
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.status-chip--paid::before{ background: var(--accent); animation: none; }

@keyframes pulse{
  0%, 100%{ opacity: 1; }
  50%     { opacity: .25; }
}

.pay-done{ margin: 18px 0 0; }

/* ==================== responsive ==================== */
@media (max-width: 640px){
  .pay-grid{ grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .pay-body{ width: 100%; }
  .qr-plate{ width: min(196px, 62vw); }
  .coin-grid{ grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  main{ padding: 40px 16px 64px; }
  .auth-card{ padding: 32px 22px; }
  h1{ font-size: 1.5rem; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .tier-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .invite-copy{ flex-direction: column; align-items: stretch; }
  #player{ padding: 12px; }
  /* the bar may wrap onto two lines before squeezing the title */
  .player-bar{ flex-wrap: wrap; gap: 8px; }
  .player-meta{ order: 3; flex-basis: 100%; }

  /* ---- navbar mobile ---- */
  .topbar{ flex-wrap: wrap; padding: 12px 16px; }
  .nav-toggle{ display: block; }
  .topbar-actions{
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .topbar-actions.is-open{ display: flex; }
  .nav{ flex-direction: column; gap: 0; align-items: stretch; }
  .nav a,
  .nav .nav-copy{ padding: 12px 4px; text-align: left; }   /* tap target, not just text */
  .nav-tiers{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .logout-form{ margin-top: 8px; }
  .logout-form .btn-ghost{ width: 100%; }
}

/* ==================== motion ==================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}