/* GroupGauntlet — 80s CRT terminal, keyed to the cyan of the logo.
   NOTE: the public dashboard has its own stylesheet (dashboard.css) and does not
   load this file, so none of this reaches a challenge's dashboard. */
:root {
  /* Surfaces are true neutral black — R, G and B are equal on purpose, so no
     panel carries a tint. The cyan lives only in text, borders and glow. */
  --bg: #000000;
  --bg-2: #0b0b0b;
  --card: rgba(17, 17, 17, 0.68);
  --card-2: #151515;
  --line: rgba(79, 210, 242, 0.22);
  --text: #d3f0fb;
  --muted: #7fa2b4;
  /* --gold is the primary accent everywhere in this file; pointing it at the
     logo's cyan re-keys the whole site without touching every rule. */
  --gold: #4fd2f2;
  --gold-dk: #1e9dc2;
  --accent: #7ee7ff;
  --green: #3df2a5;
  --red: #ff4d5a;
  --radius: 6px;
  --shadow: 0 10px 40px -12px rgba(0, 0, 0, .75);
  --glow: 0 0 18px rgba(79, 210, 242, .22);
  /* CRT intensity knobs — turn these down to calm the whole effect down. */
  --scan: rgba(0, 0, 0, .38);          /* scanline darkness */
  --scan-line: 1px;                     /* line thickness — 1 device pixel */
  --scan-pitch: 3px;                    /* line every 3 device pixels */
  --crt-bloom: .55;                     /* text glow strength */
  --crt-grain: .20;                     /* signal-noise opacity */
  --crt-vignette: .22;                  /* how dark the tube edges go */
  font-size: 16px;
}

/* Scanlines are specified in device pixels, not CSS pixels: a 1px line on a 2x
   display is two device pixels and reads as a band. Halving both the thickness
   and the pitch here keeps the physical line density identical everywhere. */
@media (min-resolution: 2dppx) {
  :root { --scan-line: .5px; --scan-pitch: 1.5px; }
}
@media (min-resolution: 3dppx) {
  :root { --scan-line: .333px; --scan-pitch: 1px; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/* Scanlines + the darkened edges of a curved tube. Sits above the page but
   ignores the pointer, so it never interferes with anything.

   Every layer here is pure black at some alpha, which matters more than it
   looks: compositing black over a color multiplies that color down, so the
   lines bite into lit pixels and leave the black background untouched. That is
   how a real tube behaves — the gap between scanlines is unlit phosphor, not a
   grey film over the whole screen — and it is why the background stays dead
   black while the text and glow pick up the banding. */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background:
    /* The scanlines themselves: one dark device pixel every three. */
    repeating-linear-gradient(to bottom,
      var(--scan) 0 var(--scan-line), transparent var(--scan-line) var(--scan-pitch)),
    /* Two more passes on longer, deliberately non-integer periods. They beat
       against the first and against each other, so lines land off the pixel
       grid and get antialiased to different weights — the uneven banding of a
       real tube, instead of one line stamped out at a perfectly even interval.
       The periods share no common factor, so the pattern takes hundreds of
       pixels to repeat and never reads as a texture tile. */
    repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, .22) 0 var(--scan-line),
      transparent var(--scan-line) calc(var(--scan-pitch) * 4.5 + .5px)),
    repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, .14) 0 calc(var(--scan-line) * 2),
      transparent calc(var(--scan-line) * 2) calc(var(--scan-pitch) * 11 + 1.5px)),
    /* curved-glass falloff — kept wide so it only shades the far corners */
    radial-gradient(ellipse at center, transparent 68%,
                    rgba(0, 0, 0, var(--crt-vignette)) 100%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .14);
}

h1, h2, h3, h4, h5, h6, .brand {
  font-family: 'Chakra Petch', 'Outfit', sans-serif;
  line-height: 1.2;
  letter-spacing: .02em;
}
h1, h2 { text-shadow: 0 0 14px rgba(79, 210, 242, .28); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: var(--card-2); padding: .1em .4em; border-radius: 3px;
  font-size: .9em; color: var(--gold);
  border: 1px solid rgba(79, 210, 242, .22);
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
h1, h2, h3 { line-height: 1.2; }

/* Header / footer */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 20;
}
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
/* "GROUP" and "GAUNTLET" are separate images laid side by side, so each word gets
   the full header height instead of being squeezed into a stacked two-line block. */
.brand { gap: .5rem; }
.brand-word { height: 26px; width: auto; display: block; }
@media (max-width: 768px) { .brand-word { height: 18px; } .brand { gap: .35rem; } }
@media (max-width: 380px) { .brand-word { height: 15px; } }
.mobile-menu-btn { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 0.5rem; }
.site-nav-container { display: flex; align-items: center; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a { color: var(--text); font-weight: 500; transition: color 0.2s; }
.site-nav a:hover { color: var(--gold); text-decoration: none; }
.site-nav .who { color: var(--muted); font-size: .95rem; }
.site-main { max-width: 1040px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.site-footer {
  border-top: 1px solid var(--line); color: var(--muted);
  text-align: center; padding: 3rem 1.5rem; font-size: .95rem;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.25rem; border-radius: 4px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-size: .92rem;
  font-family: 'Chakra Petch', 'Inter', sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  transition: all .18s cubic-bezier(.4, 0, .2, 1);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-dk)); color: #02131a; box-shadow: var(--glow); }
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 0 26px rgba(79, 210, 242, .45); }
.btn-ghost { background: rgba(79, 210, 242, .05); border-color: var(--line); color: var(--text); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(79, 210, 242, .12); border-color: rgba(79, 210, 242, .5); box-shadow: 0 0 14px rgba(79, 210, 242, .18); }
.btn-lg { padding: .88rem 1.75rem; font-size: 1rem; border-radius: 5px; }
.btn-sm { padding: .42rem .9rem; font-size: .8rem; }
.btn-block { width: 100%; margin-top: .5rem; }

/* Flash messages */
.flashes { margin-bottom: 1.5rem; display: grid; gap: .5rem; }
.flash { padding: .8rem 1rem; border-radius: 4px; border: 1px solid var(--line); }
.flash-success { background: rgba(53,196,139,.12); border-color: rgba(53,196,139,.4); }
.flash-error { background: rgba(239,71,111,.12); border-color: rgba(239,71,111,.4); }

/* Hero / landing */
.hero { text-align: center; padding: 4rem 0 2rem; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin: 0 0 1.25rem; letter-spacing: -0.03em; }
.hero .accent { color: transparent; background: linear-gradient(135deg, var(--gold), #baf3ff); -webkit-background-clip: text; background-clip: text; }
.lede { color: var(--muted); font-size: 1.2rem; max-width: 640px; margin: 0 auto 2rem; line-height: 1.7; }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.hero-note { color: var(--muted); font-size: .95rem; margin-top: 0.5rem; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 4rem 0; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow), 0 0 22px rgba(79,210,242,.12); border-color: rgba(79, 210, 242, .45); }
.feature-icon { font-size: 2.2rem; margin-bottom: 1rem; }
.feature h3 { margin: 0 0 .75rem; font-size: 1.25rem; }
.feature p { color: var(--muted); margin: 0; line-height: 1.6; }

.pricing { display: flex; gap: 2rem; justify-content: center; align-items: stretch; flex-wrap: wrap; margin: 5rem 0; }
.price-card {
  position: relative; background: var(--card); border: 1px solid var(--gold); border-radius: 8px;
  padding: 2.5rem; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow), var(--glow);
  display: flex; flex-direction: column; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
}
.price-card:hover { transform: translateY(-8px); }
.price-card-free { border-color: var(--line); box-shadow: var(--shadow); }
.price-card-free:hover { box-shadow: var(--shadow), 0 0 30px rgba(79,210,242,.10); }
.price-badge { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-dk)); color: #02131a; font-size: .78rem; font-weight: 800;
  padding: .3rem 1rem; border-radius: 999px; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(79,210,242,.32); }
.price-tag { font-size: 3.5rem; font-weight: 800; color: var(--gold); font-family: 'Outfit', sans-serif; line-height: 1; margin: 1rem 0 0.5rem; }
.price-card-free .price-tag { color: var(--text); }
.price-per { font-size: 1.1rem; font-weight: 500; color: var(--muted); }
.price-name { font-weight: 700; letter-spacing: .02em; font-size: 1.4rem; font-family: 'Outfit', sans-serif; }
.price-blurb { color: var(--muted); margin-bottom: 2rem; }
.price-card .btn { margin-top: auto; }
.price-list { list-style: none; padding: 0; margin: 1.2rem 0; text-align: left; }
.price-list li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.price-list li::before { content: "✓ "; color: var(--green); font-weight: 700; }

.how { text-align: center; margin-top: 5rem; }
.how h2 { font-size: 2.2rem; margin-bottom: 2rem; }
.steps { display: inline-block; text-align: left; color: var(--text); font-size: 1.1rem; }
.steps li { margin: 1rem 0; position: relative; padding-left: 0.5rem; }
.steps li::marker { color: var(--gold); font-weight: 800; }
.steps strong { color: var(--gold); }

/* Auth */
.auth-card {
  max-width: 480px; margin: 3rem auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 2.5rem; box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.auth-card h1 { margin-top: 0; margin-bottom: 0.5rem; }
.auth-sub { color: var(--muted); margin-bottom: 2rem; }
.auth-buttons { display: grid; gap: 1rem; margin: 2rem 0; }
.btn-oauth { padding: .9rem 1.2rem; font-size: 1.05rem; border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--text); transition: all 0.2s; backdrop-filter: blur(4px); }
.btn-oauth:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); border-color: rgba(255,255,255,0.2); }
.btn-apple { background: #000; color: #fff; }
.btn-discord { background: #5865F2; color: #fff; border-color: #5865F2; }
.oauth-icon { font-weight: 800; }
.btn-apple .oauth-icon::before { content: ""; }
/* A provider whose credentials aren't set yet: shown, but greyed and unclickable. */
.btn-oauth-pending {
  background: #f2f2f4; color: var(--muted); border-color: var(--line);
  cursor: not-allowed; opacity: .7; pointer-events: none;
}
.btn-oauth-pending .oauth-icon::before { filter: grayscale(1); }
.soon-pill {
  margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px;
  background: rgba(0,0,0,.08); color: var(--muted);
}
.auth-fine { color: var(--muted); font-size: .8rem; text-align: center; }
.demo-banner {
  background: rgba(110,168,255,.1); border: 1px solid rgba(110,168,255,.4);
  color: #cfe0ff; border-radius: 10px; padding: .8rem 1rem; font-size: .88rem;
}

/* Generic cards / forms */
.form-card, .side-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.form-card { max-width: 640px; margin: 0 auto; }
.stacked-form { margin-top: 1rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 600; margin-bottom: .4rem; }
.field input, .field select, .settings-form input, .settings-form select {
  width: 100%; padding: .65rem .8rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: 1rem;
}
.field input:focus, .field select:focus,
.settings-form input:focus, .settings-form select:focus, textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(79, 210, 242, .25);
}
.field input:disabled { opacity: .55; cursor: not-allowed; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-help { color: var(--muted); font-size: .85rem; margin: .35rem 0 0; }
.form-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Admin home */
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
.crumb { color: var(--muted); font-size: .9rem; margin-bottom: .5rem; }
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.challenge-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; backdrop-filter: blur(8px); transition: transform 0.2s, box-shadow 0.2s; }
.challenge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(255,255,255,0.2); }
.challenge-card-top { display: flex; gap: .75rem; margin-bottom: .5rem; align-items: center; }
.challenge-card h3 { margin: .2rem 0; font-size: 1.25rem; }
.challenge-dates { color: var(--muted); font-size: .9rem; margin: .2rem 0; }
.challenge-card-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-icon { font-size: 2.5rem; }
.empty-mark { height: 64px; width: auto; margin: 0 auto .75rem; display: block; opacity: .9; }
.auth-mark { height: 56px; width: auto; margin: 0 auto 1rem; display: block; }

/* Badges / pills */
.badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 3px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-family: 'Chakra Petch', 'Inter', sans-serif;
}
.badge-active { background: rgba(61,242,165,.14); color: var(--green); }
.badge-upcoming { background: rgba(126,231,255,.16); color: var(--accent); }
.badge-past { background: rgba(151,163,186,.16); color: var(--muted); }
.badge-draft { background: rgba(79,210,242,.16); color: var(--gold); }
.badge-unpaid { background: rgba(239,71,111,.16); color: var(--red); }
.pill { padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pill-in { background: rgba(53,196,139,.16); color: var(--green); }
.pill-out { background: rgba(239,71,111,.16); color: var(--red); }

/* Landing: 3D dashboard showcase carousel */
.showcase-section { text-align: center; padding: 1rem 0 2.5rem; }
.showcase-section h2 { margin-bottom: .4rem; }
.showcase-sub { color: var(--muted); max-width: 620px; margin: 0 auto 1.5rem; }
/* Clip the fanned-out cards so they never widen the page (esp. on mobile). */
.showcase { position: relative; overflow-x: clip; }
.showcase-section { overflow-x: clip; }
.showcase-stage {
  position: relative; height: 340px; margin: 0 auto; max-width: 720px;
  transform-style: preserve-3d; perspective: 1400px;
}
.showcase-card {
  position: absolute; top: 0; left: 50%; width: 460px; max-width: 78vw; height: 300px;
  margin-left: -230px; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: linear-gradient(150deg, var(--g1, #223), var(--g2, #0b1020));
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.5);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
  transform-style: preserve-3d; will-change: transform;
}
@media (max-width: 560px) { .showcase-card { margin-left: -39vw; width: 78vw; height: 240px; } .showcase-stage { height: 280px; } }
.showcase-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-card .showcase-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 1rem; text-align: left;
  font-weight: 700; letter-spacing: .01em; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
}
.showcase-card.is-active { border-color: var(--gold); box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px var(--gold); }
.showcase-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.4rem; }
.showcase-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; cursor: pointer;
  background: var(--line); transition: background .2s, transform .2s;
}
.showcase-dot.is-active { background: var(--gold); transform: scale(1.3); }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; }
.checkout-summary, .checkout-pay {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; backdrop-filter: blur(10px);
}
.order-challenge { font-weight: 700; font-size: 1.15rem; margin: .2rem 0 .8rem; }
.order-line, .order-total { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; }
.order-total { border-top: 1px solid var(--line); margin-top: .5rem; font-weight: 700; font-size: 1.2rem; }
.order-detail { color: var(--muted); border-top: 1px solid var(--line); padding-top: .8rem; }
.order-line .strike { color: var(--muted); text-decoration: line-through; }
.order-discount { color: var(--accent, #3f9e57); }
.coupon-chip { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem;
  background: rgba(63,158,87,.12); border: 1px solid rgba(63,158,87,.35); color: var(--text);
  padding: .25rem .3rem .25rem .6rem; border-radius: 999px; }
.coupon-chip form { display: inline; margin: 0; }
.coupon-remove { border: none; background: rgba(255,255,255,.08); color: var(--muted); cursor: pointer;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; line-height: 1; font-size: .75rem; padding: 0; }
.coupon-remove:hover { background: rgba(255,255,255,.16); color: var(--text); }

/* Owner support view: all challenges, searchable + filterable */
.owner-filters { display: flex; flex-direction: column; gap: 1rem; }
.owner-search { display: flex; gap: .5rem; flex-wrap: wrap; }
.owner-search input {
  flex: 1; min-width: 220px; padding: .6rem .8rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
}
.owner-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.owner-tab {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--text); font-size: .85rem; font-weight: 600;
}
.owner-tab:hover { text-decoration: none; border-color: rgba(255,255,255,.25); }
.owner-tab.is-active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.owner-tab-count { color: var(--muted); font-weight: 500; }
.table-wrap { overflow-x: auto; }
.owner-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.owner-table th, .owner-table td {
  text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.owner-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.owner-name { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.owner-row-deleted { opacity: .72; }
.badge-deleted { background: rgba(239,71,111,.15); color: #ff9db4; }

.share-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 768px) { .share-actions .btn { flex: 1 1 100%; } }

/* Chat-platform icons + the connect chip beside a challenge name */
.pfi { display: inline-flex; align-items: center; line-height: 0; }
.pfi-discord { color: #8b9bf4; }
.pfi-slack   { color: #b3d9c8; }
.pfi-groupme { color: #7fb3f0; }

.challenge-name { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.challenge-name > span { min-width: 0; overflow-wrap: anywhere; }

.challenge-title { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.chat-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  border: 1px solid rgba(78,214,142,.4); background: rgba(78,214,142,.12); color: var(--text);
}
.chat-chip:hover { text-decoration: none; filter: brightness(1.15); }
.chat-chip-off { border-color: rgba(239,71,111,.45); background: rgba(239,71,111,.12); }

/* Start/end dates sit side by side even on narrow screens (inputs are compact).
   Double class so this beats the generic .field-row collapse in the mobile
   breakpoint further down, which would otherwise stack them again. */
.field-row.field-row-dates { grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 420px) {
  .field-row.field-row-dates { grid-template-columns: 1fr; }
}

/* Connect: verify step */
.verify-card { margin-top: 1.25rem; }
.verify-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.verify-actions form { margin: 0; }

/* Admin dashboard */
.admin-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lock-note {
  background: rgba(79,210,242,.08); border: 1px solid rgba(79,210,242,.35);
  color: #bfeeff; border-radius: 4px; padding: .8rem 1rem; margin-bottom: 1.5rem;
}
.admin-columns { display: grid; grid-template-columns: 1.8fr 1fr; gap: 2rem; align-items: start; }
.admin-main { display: grid; gap: 1.5rem; }
.admin-side { display: grid; gap: 1.5rem; }

.highlight-card {
  border: 1px solid var(--gold); 
  box-shadow: var(--glow);
}
.upgrade-showcase {
  background: linear-gradient(135deg, rgba(79, 210, 242, .05), rgba(30, 157, 194, .02));
  border: 1px solid var(--gold);
  box-shadow: var(--glow);
}

.settings-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.settings-form h2 { margin-top: 0; }
.field-locked { opacity: .85; }
.lock-pill { font-size: .7rem; color: var(--gold); margin-left: .4rem; }
.mini-steps, .mini-roster { padding-left: 1.1rem; margin: .5rem 0; }
.mini-roster { list-style: none; padding: 0; }
.mini-roster li { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.mini-roster li.elim span:first-child { text-decoration: line-through; color: var(--muted); }
.share-link { width: 100%; margin-top: .5rem; padding: .5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: .8rem; }

/* Public dashboard */
.public-head { text-align: center; margin-bottom: 2rem; }
.public-head h1 { margin: .5rem 0 .2rem; }
.leaderboard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.board { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.board th, .board td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); }
.board th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.row-elim td { color: var(--muted); }

/* Onboarding overlay */
.onboarding-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50;
}
/* Respect the `hidden` attribute — a bare `display:flex` above would otherwise
   override it and keep the overlay on screen after Skip/Finish. */
.onboarding-overlay[hidden] { display: none; }
.onboarding-card {
  background: #101010; border: 1px solid var(--line); border-radius: 8px;
  padding: 1.8rem; max-width: 440px; width: 100%; box-shadow: var(--shadow);
}
.onboarding-progress { color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.onboarding-body { min-height: 150px; margin: .8rem 0 1.2rem; }
.onboarding-body h3 { margin: .2rem 0 .6rem; }
.onboarding-body p { color: var(--muted); margin: 0; }
.onboarding-actions { display: flex; justify-content: space-between; align-items: center; }
.onboarding-nav { display: flex; gap: .5rem; }

/* Roster manager */
.add-member-form { display: flex; gap: .6rem; }
.add-member-form input { flex: 1; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.roster-table { width: 100%; border-collapse: collapse; }
.roster-table th { text-align: left; padding: .6rem .7rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.roster-table td { padding: .7rem; vertical-align: top; }
.member-main-row td { border-bottom: none; }
.member-workout-row td { padding-top: .2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.member-id { display: flex; align-items: center; gap: .7rem; }
.member-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.member-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--card-2); color: var(--text); font-weight: 700; }
.member-name { font-weight: 600; }
.avatar-form { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
.avatar-form input[type=file] { font-size: .7rem; color: var(--muted); max-width: 140px; }
.avatar-save.upload-ready { background: var(--green); color: #06210f; border-color: var(--green); }
.byes-form { display: flex; gap: .4rem; align-items: center; }
.byes-form input { width: 60px; text-align: center; padding: .4rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.status-label { font-size: .65rem; font-weight: 700; margin-top: .2rem; }
.status-in { color: var(--green); }
.status-out { color: var(--red); }
.danger-text { color: var(--red); }

/* Active/eliminated toggle switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--red); transition: .3s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; transition: .3s; }
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider:before { transform: translateX(16px); }
.slider.round { border-radius: 22px; }
.slider.round:before { border-radius: 50%; }

/* Per-member workout history */
.workout-section summary { cursor: pointer; font-size: .8rem; color: var(--accent); user-select: none; }
.add-workout-form { display: flex; gap: .5rem; align-items: center; margin: .7rem 0; flex-wrap: wrap; }
.add-workout-form input { padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.btn-success { background: var(--green); color: #06210f; }
.workout-columns { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .6rem; }
.month-col { display: flex; flex-direction: column; gap: .25rem; min-width: 130px; flex-shrink: 0; }
.month-name { font-size: .62rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding-bottom: .25rem; border-bottom: 1px solid var(--line); }
.workout-entry { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .15rem .5rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; font-size: .7rem; }
.workout-entry:hover { border-color: var(--accent); }
.wo-remove { background: transparent; border: none; color: var(--muted); cursor: pointer; width: 16px; height: 16px; border-radius: 50%; font-size: .6rem; }
.wo-remove:hover { background: var(--red); color: #fff; }

/* Connect page — platform picker */
.platform-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.platform-option { display: block; border: 1px solid var(--line); border-radius: 5px; padding: 1rem; cursor: pointer; background: var(--bg-2); transition: border-color .15s; }
.platform-option:hover { border-color: var(--gold); }
.platform-option input { margin-right: .4rem; }
.platform-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.platform-disabled { opacity: .55; cursor: not-allowed; }
.platform-title { font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.platform-panel { border-top: 1px solid var(--line); padding-top: 1.2rem; margin-top: .5rem; }
.platform-panel h3 { margin-top: 0; }

/* Messages editor */
.settings-form textarea { width: 100%; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: .95rem; font-family: inherit; resize: vertical; }
.settings-form textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.msg-placeholders { font-family: ui-monospace, monospace; font-size: .72rem; color: var(--gold); margin-left: .5rem; font-weight: 500; }

/* Reworked admin dashboard — grouped cards, no long scroll */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.card h2 { margin-top: 0; font-size: 1.05rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-head h2 { margin-bottom: .4rem; }
.conn-banner { border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.conn-ok { background: rgba(53,196,139,.12); border: 1px solid rgba(53,196,139,.4); color: var(--green); }
.conn-warn { background: rgba(239,71,111,.12); border: 1px solid rgba(239,71,111,.45); color: #ffd0d9; }
.conn-warn .btn { margin-left: auto; }
.mini-label { display: block; font-size: .75rem; color: var(--muted); margin: 1rem 0 .25rem; }
.cmd-list { list-style: none; padding: 0; margin: .3rem 0; }
.cmd-list li { display: flex; align-items: baseline; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.cmd-list li:last-child { border-bottom: none; }
.cmd-list code { color: var(--gold); }
.section-heading { margin: 2rem 0 .8rem; font-size: 1.1rem; color: var(--muted); }
.challenge-grid-past { opacity: .82; }
.promo-form { margin-top: 1rem; }
.promo-form label { font-size: .8rem; color: var(--muted); }
.promo-row { display: flex; gap: .5rem; margin-top: .3rem; }
.promo-row input { flex: 1; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); text-transform: uppercase; }
.send-now-form textarea, .send-now-form input { width: 100%; }

/* Upsell blocks + or-divider */
.upsell { background: rgba(79,210,242,.08); border: 1px solid rgba(79,210,242,.35); color: #bfeeff; border-radius: 10px; padding: .9rem 1rem; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.upsell .btn { margin-left: auto; }
.or-divider { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; margin: 1rem 0; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Danger zone + confirm modal (delete challenge) */
.danger-zone { border-color: rgba(239,71,111,.4); }
.danger-zone h2 { color: var(--red); }
.modal-overlay { position: fixed; inset: 0; background: rgba(6,9,16,.7); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 60; }
.modal-overlay[hidden] { display: none; }  /* respect the hidden attribute over display:flex */
.modal-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem; max-width: 460px; width: 100%; box-shadow: var(--shadow); }
.modal-card h3 { margin-top: 0; }
.modal-card input { width: 100%; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); margin: .6rem 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger[disabled] { opacity: .5; cursor: not-allowed; }

/* Legal / prose pages */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { margin-bottom: .3rem; }
.legal h2 { margin: 1.6rem 0 .5rem; font-size: 1.1rem; color: var(--gold); }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .3rem 0; }
.footer-links { margin-top: .6rem; display: flex; gap: 1rem; justify-content: center; }
.footer-links a { color: var(--muted); font-size: .85rem; }

@media (max-width: 768px) {
  .site-header { padding: 1rem; flex-wrap: wrap; }
  .mobile-menu-btn { display: block; }
  .site-nav-container { 
    display: none; 
    width: 100%; 
    padding-top: 1rem; 
    margin-top: 1rem; 
    border-top: 1px solid var(--line); 
  }
  .site-nav-container.active { display: block; }
  .site-nav { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .site-nav a, .site-nav span { display: block; width: 100%; }

  /* Signed out: no hamburger — show the Sign in button inline in the header. */
  .site-header-simple { flex-wrap: nowrap; }
  .site-header-simple .site-nav-container {
    display: block; width: auto; padding-top: 0; margin-top: 0; border-top: none;
  }
  .site-header-simple .site-nav { flex-direction: row; }
  .site-header-simple .site-nav a { width: auto; }
  
  .hero h1 { font-size: 2.2rem; }
  .features { grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; }
  
  .pricing { grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; }
  .price-card { padding: 2rem; }
  
  .checkout, .admin-columns { grid-template-columns: 1fr; gap: 1.5rem; }
  .field-row { grid-template-columns: 1fr; }
  
  .admin-head { flex-direction: column; gap: 1rem; }
  /* Head actions: fill the row and read clearly as buttons on small screens. */
  .admin-head-actions { width: 100%; }
  .admin-head-actions .btn { flex: 1 1 calc(50% - .25rem); }
  .admin-head-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18);
  }
  .challenge-grid { grid-template-columns: 1fr; }
  
  .site-main { padding: 2rem 1rem 4rem; }
  .auth-card { padding: 2rem 1.5rem; margin: 1rem auto; }
}

/* ---- Custom dashboard editor ------------------------------------------- */
.cz-layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; align-items: start; }
/* Offset the sticky top so the preview clears the sticky site header. */
.cz-preview-pane { position: sticky; top: 5.25rem; display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 1000px) {
  .cz-layout { grid-template-columns: 1fr; }
  /* Keep the preview pinned to the top so it follows you as you scroll the form. */
  .cz-preview-pane {
    position: sticky; top: 4.75rem; order: -1; z-index: 5;
    background: var(--bg); padding-bottom: .5rem;
  }
  .cz-preview-pane .field-help { display: none; }  /* save vertical space while pinned */
}

/* Live preview: a simplified mini dashboard driven by the form, in the custom palette. */
.cz-preview {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card);
  color-scheme: light;
}
.cz-preview > h4 {
  margin: 0; padding: .55rem .8rem; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
/* Inset the content ~10% each side so the preview matches the real dashboard's
   gutters instead of running edge to edge. */
.cz-pv-page { position: relative; padding: .9rem 10%; background: #fff; background-size: cover; background-position: center; }
.cz-pv-title { text-align: center; font-weight: 800; font-size: 1rem; margin-bottom: .55rem; color: var(--text-primary); }
.cz-pv-journey {
  position: relative; overflow: hidden;
  min-height: 104px; border-radius: 8px; margin-bottom: .55rem; padding: .45rem;
  background-size: cover; background-position: center; display: flex; align-items: flex-start;
}
/* Soften the journey background the way the live map's overlay does, so the
   preview reads with the same translucency rather than a hard block of color. */
.cz-pv-journey::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.14));
  pointer-events: none;
}
.cz-pv-journey span {
  position: relative; z-index: 1;
  font-size: .66rem; font-weight: 700; color: var(--accent-gold);
  background: rgba(255,255,255,.75); padding: .1rem .35rem; border-radius: 4px;
}
.cz-pv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .55rem; }
.cz-pv-card { position: relative; border-radius: 8px; overflow: hidden; min-height: 58px;
  background-size: cover; background-position: center; }
.cz-pv-card-ov { position: absolute; inset: 0; background: linear-gradient(155deg, rgba(0,0,0,.18), rgba(0,0,0,.52)); }
.cz-pv-card-body { position: relative; padding: .35rem .45rem; color: #fff; }
.cz-pv-card-body b { display: block; font-size: .72rem; line-height: 1.15; }
.cz-pv-card-body small { font-size: .52rem; opacity: .82; display: block; margin-top: .1rem; }
.cz-pv-ach { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.cz-pv-ach-item {
  text-align: center; padding: .35rem .2rem; border-radius: 6px;
  border: 1px solid var(--border-subtle, rgba(0,0,0,.1)); background: var(--bg-card, #fff);
}
.cz-pv-ach-item .e { font-size: 1.1rem; line-height: 1; }
.cz-pv-ach-item b { display: block; font-size: .58rem; margin-top: .1rem; color: var(--text-primary); }
.cz-pv-ach-item small { font-size: .48rem; color: var(--text-muted); }

/* Effect pickers (chips) */
.cz-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cz-chip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-2); font-size: .85rem; color: var(--text);
}
.cz-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cz-chip:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: var(--card-2); }
.cz-chip-glow::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--muted); }
.cz-glow-none::before { background: transparent; border: 1px solid var(--muted); }
.cz-glow-gold::before  { background: #f6c05c; box-shadow: 0 0 6px #f6c05c; }
.cz-glow-cyan::before  { background: #5ad2ff; box-shadow: 0 0 6px #5ad2ff; }
.cz-glow-pink::before  { background: #ff78c8; box-shadow: 0 0 6px #ff78c8; }
.cz-glow-green::before { background: #5ae696; box-shadow: 0 0 6px #5ae696; }
.cz-chip-soon { opacity: .5; cursor: default; font-style: italic; }

/* Title glow (used in the live preview; the public dashboard has its own copy) */
.title-glow-gold  { text-shadow: 0 0 8px rgba(246,192,92,.95),  0 0 18px rgba(246,192,92,.55); }
.title-glow-cyan  { text-shadow: 0 0 8px rgba(90,210,255,.95),  0 0 18px rgba(90,210,255,.55); }
.title-glow-pink  { text-shadow: 0 0 8px rgba(255,120,200,.95), 0 0 18px rgba(255,120,200,.55); }
.title-glow-green { text-shadow: 0 0 8px rgba(90,230,150,.95),  0 0 18px rgba(90,230,150,.55); }

/* Animated effects preview: a real starfield/snow canvas, scoped to the card.
   The renderer appends a <canvas>; it draws transparently over the page bg. */
.cz-pv-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 1; }
.cz-pv-fx[data-fx="none"] { display: none; }
.cz-pv-fx[data-fx="stars"] { background-color: rgba(6, 10, 26, 0.55); }
.cz-pv-fx canvas { display: block; width: 100%; height: 100%; }
/* Keep the mini dashboard content above the effect layer. */
.cz-pv-title, .cz-pv-journey, .cz-pv-cards, .cz-pv-ach { position: relative; z-index: 2; }

.customizer { display: flex; flex-direction: column; gap: 1.25rem; }
.customizer .card { margin: 0; }
.cz-field { margin-bottom: 1rem; }
.cz-field > label { display: block; font-weight: 600; margin-bottom: .4rem; }
.cz-card-block {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.cz-card-block:first-of-type { border-top: none; }

.bgpick { border: 1px solid var(--line); border-radius: 10px; padding: .6rem; background: var(--bg-2); }
.bgpick-tabs { display: flex; gap: .4rem; margin-bottom: .6rem; }
.bgpick-tab {
  flex: 1; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card-2); color: var(--muted); font-size: .85rem; cursor: pointer;
}
.bgpick-tab.active { background: var(--gold); color: #241a05; border-color: var(--gold); }
.bgpick-panel[hidden] { display: none; }
.bgpick-color { display: flex; align-items: center; gap: .6rem; }
.bgpick-color input[type=color] {
  width: 3rem; height: 2.4rem; border: 1px solid var(--line); border-radius: 8px;
  background: none; cursor: pointer; padding: 2px;
}
.bgpick-hint { color: var(--muted); font-size: .82rem; }
.bgpick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .5rem; margin-bottom: .6rem;
}
.bgpick-thumb {
  aspect-ratio: 3 / 2; border-radius: 8px; border: 2px solid transparent;
  background-size: cover; background-position: center; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.bgpick-thumb.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.bgpick-upload {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem;
  color: var(--muted); cursor: pointer;
}
.bgpick-upload input[type=file] { font-size: .8rem; }

.cz-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.cz-ach {
  display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: auto auto;
  gap: .35rem .6rem; align-items: center; padding: .7rem;
  border: 1px solid var(--line); border-radius: 10px;
}
/* Text inputs inside the editor share the app's dark field styling. */
.customizer input[type=text] {
  width: 100%; padding: .6rem .8rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: 1rem;
}
.customizer input[type=text]:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.cz-emoji {
  grid-row: 1 / 3; width: 3rem; height: 3rem; text-align: center; font-size: 1.4rem; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--text);
}
.cz-ach-name { font-weight: 600; }
.cz-ach-sub { grid-column: 2; color: var(--muted); font-size: .78rem; }

.customizer-actions {
  display: flex; justify-content: flex-end; gap: .75rem; align-items: center;
  position: sticky; bottom: 0; padding: 1rem 0; z-index: 5;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
@media (max-width: 760px) {
  .cz-card-block { grid-template-columns: 1fr; }
}


/* ---- Customizer preview: deliberately NOT CRT ---------------------------- */
/* This block mirrors the public dashboard, which keeps its own light styling.
   Give it a plain surface so the terminal theme around it doesn't misrepresent
   what the admin's dashboard will actually look like. */
.cz-preview { background: #0d0d0d; border-color: rgba(79, 210, 242, .3); }
.cz-preview > h4 { font-family: 'Chakra Petch', 'Inter', sans-serif; letter-spacing: .08em; }
.cz-pv-page { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }

/* ---- CRT bloom, grain and drift ----------------------------------------- */
/* Phosphor bleeds, the gun misregisters, and there's always static on the tube.
   Everything below is decoration and pointer-transparent. Intensity is driven by
   the --crt-* knobs at the top of this file, so it can all be dialled back from
   one place. */

/* Everything glows a little — this is what stops the page reading as "clean". */
body {
  text-shadow: 0 0 4px rgba(79, 210, 242, calc(var(--crt-bloom) * .55)),
               0 0 12px rgba(79, 210, 242, calc(var(--crt-bloom) * .22));
}

/* Display type blooms hard, with the colour fringing of a misaligned gun. */
.hero h1,
.how h2,
.showcase-section h2,
.price-tag,
.admin-head h1 {
  text-shadow:
    -0.8px 0 rgba(255, 60, 85, .40),
     0.8px 0 rgba(120, 250, 255, .40),
     0 0 8px rgba(79, 210, 242, calc(var(--crt-bloom) + .25)),
     0 0 22px rgba(79, 210, 242, var(--crt-bloom)),
     0 0 48px rgba(79, 210, 242, calc(var(--crt-bloom) * .55));
}
h1, h2 {
  text-shadow: 0 0 8px rgba(79, 210, 242, calc(var(--crt-bloom) * .8)),
               0 0 26px rgba(79, 210, 242, calc(var(--crt-bloom) * .45));
}
h3, h4, .badge, .price-name, .section-heading {
  text-shadow: 0 0 8px rgba(79, 210, 242, calc(var(--crt-bloom) * .5));
}
a, code, .site-nav a, strong {
  text-shadow: 0 0 7px rgba(126, 231, 255, calc(var(--crt-bloom) * .6));
}

/* Gradient-filled words are clipped to their glyphs, so a text-shadow would
   paint a solid slab behind them. Bloom those with a drop-shadow instead. */
.hero .accent {
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(79, 210, 242, .55))
          drop-shadow(0 0 30px rgba(79, 210, 242, .35));
}

/* Brand art halates the way lit phosphor does. */
.brand-word {
  filter: drop-shadow(0 0 4px rgba(79, 210, 242, .65))
          drop-shadow(0 0 14px rgba(79, 210, 242, .35))
          drop-shadow(0 0 34px rgba(79, 210, 242, .18));
}
.empty-mark, .auth-mark {
  filter: drop-shadow(0 0 6px rgba(79, 210, 242, .55))
          drop-shadow(0 0 26px rgba(79, 210, 242, .28));
}

/* Chrome carries its own light. drop-shadow is used rather than box-shadow so
   these never replace the shadows those components already set for themselves. */
.card, .feature, .price-card, .auth-card, .modal-card, .onboarding-card {
  filter: drop-shadow(0 0 14px rgba(79, 210, 242, .10));
}
.btn { filter: drop-shadow(0 0 8px rgba(79, 210, 242, .22)); }
.btn-primary { filter: drop-shadow(0 0 14px rgba(79, 210, 242, .45)); }
.btn:hover { filter: drop-shadow(0 0 20px rgba(79, 210, 242, .55)); }
.btn-primary:hover { filter: brightness(1.12) drop-shadow(0 0 26px rgba(79, 210, 242, .6)); }
.site-header { box-shadow: 0 1px 26px rgba(79, 210, 242, .16); }
.field input, .field select, .settings-form input, .settings-form select, textarea {
  box-shadow: inset 0 0 12px rgba(79, 210, 242, .07);
}

/* What you type stays sharp: glow on top of an input's own value is the one
   place the effect actively gets in the way. */
input, select, textarea, .owner-table td, .roster-table td {
  text-shadow: none;
}

/* Signal noise. Two things make this read as broadcast interference rather
   than photographic film grain:

   1. The turbulence is anisotropic — baseFrequency is ~80x higher vertically
      than horizontally, so each sample is wide and short. That produces the
      horizontal smears and dropouts of a weak signal instead of isotropic
      speckle, which is what the logo has.
   2. feColorMatrix throws away the noise's color and feeds its red channel
      into alpha instead, with a negative bias to clip the low end. The result
      is transparent-to-black, never grey, so like the scanlines it only ever
      darkens: the blacks stay black and the streaks appear across lit pixels. */
html::after {
  content: "";
  position: fixed; inset: -60%; pointer-events: none; z-index: 9997;
  opacity: var(--crt-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 400px 200px;
  /* Deliberately not moved. Now that the noise is horizontal streaks, shifting
     it vertically makes those streaks read as scanlines crawling up the screen
     — the texture is stationary and only its strength varies. */
}

/* The only motion on the page: the whole overlay breathing very slightly, on a
   slow ease so there is no perceptible step. Nothing translates, so nothing
   appears to travel across the screen. */
body::after { animation: crt-breathe 7s ease-in-out infinite; }
@keyframes crt-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .9; }
}
/* The noise needs its own keyframes rather than sharing the one above: an
   animation overrides the property outright, and its resting opacity is
   --crt-grain, not 1. The period is deliberately coprime with the overlay's so
   the two never line up into a single visible pulse. */
html::after { animation: crt-breathe-grain 11s ease-in-out infinite; }
@keyframes crt-breathe-grain {
  0%, 100% { opacity: var(--crt-grain); }
  50%      { opacity: calc(var(--crt-grain) * .7); }
}

@media (prefers-reduced-motion: reduce) {
  html::after, body::after { animation: none; }
}

/* The customizer preview stands in for the real dashboard, so none of the CRT
   treatment above may touch it — an admin picking colours has to see what a
   member will actually see, on a clean screen. */
.cz-preview, .cz-preview * {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}
/* Lift it above the scanline/vignette overlay (body::after, z-index 9999) and
   the grain (html::after, 9997). Those are fixed to the viewport and painted
   over everything, so switching off text-shadow and filters was never enough
   on its own — the preview still sat behind a striped, grainy film. The pane
   as well as the box, so the heading above it clears the lines too. */
.cz-preview-pane { z-index: 10000; }   /* already position: sticky */
.cz-preview { position: relative; z-index: 10000; }

/* Which leaves a three-way conflict with no plain z-index solution:
     - a preview must sit ABOVE the CRT overlay, or it is covered in lines;
     - the sticky header must sit ABOVE the preview, or it is hidden as soon as
       you scroll a preview under it;
     - the header should sit BELOW the overlay, or it is the one element on the
       page without lines.
   The first two are non-negotiable, so the header goes on top and carries its
   own copy of the scanlines instead of relying on the global overlay. */
.site-header { z-index: 10001; }
.site-header::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    var(--scan) 0 var(--scan-line), transparent var(--scan-line) var(--scan-pitch));
}

/* ---------------------------------------------------------------------------
   Dashboard simulator (owner only). Controls on the left, the real dashboard
   in an iframe on the right. The iframe renders the light-themed dashboard, so
   it gets a plain white surface and none of the CRT treatment above.
   --------------------------------------------------------------------------- */
.sim-layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem;
  align-items: start;
}
.sim-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; position: sticky; top: 5rem; display: grid; gap: 1.1rem;
}
.sim-group { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sim-group legend {
  font-family: 'Chakra Petch', sans-serif; font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  padding: 0 0 .3rem;
}
.sim-group .field { display: grid; gap: .25rem; }
.sim-group .field > span { font-size: .82rem; color: var(--muted); }
.sim-group input[type="range"] { width: 100%; accent-color: var(--gold); }
.sim-btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.sim-color {
  display: flex; align-items: center; gap: .6rem; font-size: .82rem;
  color: var(--muted);
}
.sim-color input[type="color"] {
  width: 40px; height: 26px; padding: 0; border-radius: 4px;
  border: 1px solid var(--line); background: var(--bg-2); cursor: pointer;
}

.sim-stage-wrap { display: grid; gap: .6rem; min-width: 0; }
.sim-transport {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .8rem;
}
.sim-transport #scrub { flex: 1; min-width: 140px; accent-color: var(--gold); }
.sim-speed {
  padding: .3rem .5rem; border-radius: 4px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text); font-size: .8rem;
}
.sim-readout {
  display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .8rem;
  color: var(--muted); padding: 0 .2rem;
}
.sim-readout b { color: var(--text); }
.sim-out { color: var(--red); }
#sim-frame {
  width: 100%; height: 78vh; min-height: 560px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff;
  /* Above the CRT overlay (body::after, z-index 9999). The scanlines and grain
     are fixed to the viewport and would otherwise be painted straight over the
     preview — and the whole point of this pane is to show the dashboard as a
     member actually sees it, on a clean white page. */
  position: relative; z-index: 10000;
}

@media (max-width: 900px) {
  .sim-layout { grid-template-columns: 1fr; }
  .sim-panel { position: static; }
  #sim-frame { height: 60vh; }
}

/* Background pickers inside the simulator's narrow panel: same markup as the
   customizer, but the column is a good deal narrower, so the photo grid and the
   upload row both need to be tightened or they overflow the card. */
.sim-bg-label {
  font-size: .78rem; color: var(--muted); margin-top: .2rem;
}
.sim-panel .bgpick { padding: .5rem; min-width: 0; }
.sim-panel .bgpick-grid { grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.sim-panel .bgpick-thumb { height: 34px; }
.sim-panel .bgpick-tabs { gap: .3rem; }
.sim-panel .bgpick-tab { padding: .3rem .4rem; font-size: .72rem; }
/* Stack the upload control instead of letting the file input push the label
   into a three-line wrap. */
.sim-panel .bgpick-upload {
  display: block; font-size: .72rem; margin-top: .4rem;
}
.sim-panel .bgpick-upload input[type="file"] {
  display: block; width: 100%; margin-top: .25rem; font-size: .7rem;
}
.sim-panel .bgpick-color { display: flex; align-items: center; gap: .4rem; }
/* Respect `hidden`: the tabs toggle these panels with the attribute, and a bare
   display:flex above beats it, leaving the colour picker on screen while the
   Image tab is selected. */
.sim-panel .bgpick-color[hidden] { display: none; }
.sim-panel .bgpick-hint { font-size: .7rem; }