/* ============================================================================
   Before You Pop™ — SITEWIDE DESIGN SYSTEM  (byp-design.css)
   ----------------------------------------------------------------------------
   The approved BYP visual language, shared across EVERY customer-facing page.
   True black base · white primary text · neon pink / electric blue / violet ·
   lime (Harmony / positive / success only). Gold reserved for special.

   Loaded globally (after styles-entry / gameplay / checkflow) so these rules
   win regardless of which page renders. It is the single source of truth for:

     • section headings (accent line + glow + generous spacing)
     • page cards / content blocks (dark card, subtle border, glow, padding)
     • the button system (hover / focus / pressed / selected, context colors)
     • form fields + labels (readable, high-contrast, not tiny grey)
     • the guided Event Setup sections + progress nav
     • typography spacing on desktop / tablet / mobile

   All component classes are additive and safe with existing markup.
   ========================================================================= */

/* ---------- shared brand mini icon (balloon-burst) ---------- */
:root{
  /* typography scale */
  --h1:clamp(26px,6vw,40px);          /* page title */
  --h2:clamp(19px,4vw,26px);          /* page intro / big section step number */
  --h3:clamp(15px,3.4vw,19px);          /* section title */
  --label:12.5px;                     /* field label */
  --body:15px;
  --support:12.5px;                   /* help / description text */
  /* glow + edge tokens — STRICTLY the approved palette:
     pink (primary), blue (secondary), light blue (soft), and a purple BRIDGE
     that sits between pink and blue for blended glows/transitions only.
     TUNED BACK: the first energy pass swung these to near-neon (.58-.68), which
     pushed the Main Home page away from the approved look. These values are the
     mid-point — clearly brighter than the original flat ~.30 wash, but restrained
     enough that the Home page keeps the design that was approved. */
  --glow-pink:0 0 20px rgba(255,46,196,.38);
  --glow-blue:0 0 20px rgba(0,229,255,.34);
  --glow-bridge:0 0 20px rgba(168,85,255,.32);
  --glow-soft:0 0 16px rgba(124,233,255,.30);
  /* SURFACES + RIMS — coloured depth instead of flat grey.
     Grey #1e1e1e borders on pure-black cards were the main cause of the site
     reading muted/flat. These tie every surface into the accent families so black
     has real depth and the pink/blue accents sit on something lit. */
  --card-bg:#000000;
  --card-bg2:#000000;
  --card-bg3:#000000;
  /* LIT SURFACE SCALE — black is the base, but a surface must never be a bare
     #000 rectangle with a grey hairline on a #000 page: that is exactly the
     "dark grey boxes" flatness. These give three lit depths built from approved
     washes so every panel catches light at the top and falls off at the bottom. */
  --surf-0:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 58%,rgba(0,229,255,.022));
  --surf-1:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.016) 58%,rgba(0,229,255,.03));
  --surf-2:linear-gradient(168deg,rgba(255,255,255,.095),rgba(255,255,255,.02) 58%,rgba(168,85,255,.035));
  --surf-pink:linear-gradient(160deg,rgba(255,46,196,.18),rgba(168,85,255,.07) 50%,rgba(0,0,0,0) 88%);
  --surf-blue:linear-gradient(160deg,rgba(0,229,255,.17),rgba(124,233,255,.07) 50%,rgba(0,0,0,0) 88%);
  /* A lit hairline: bright at the left, fading right — reads as an edge catching
     light rather than a flat 1px grey rule. */
  --edge:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 45%,rgba(255,255,255,.02));
  --line:rgba(124,233,255,.24);
  --line-strong:rgba(124,233,255,.40);
  --line-pink:rgba(255,46,196,.44);
  --line-blue:rgba(0,229,255,.42);
  --support:rgba(255,255,255,.17);    /* faint section stroke */
  --grad-surface:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.014) 60%,rgba(0,229,255,.03));
  --grad-surface-2:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,0));
  --grad-pink:linear-gradient(150deg,rgba(255,46,196,.30),rgba(168,85,255,.11) 46%,rgba(0,0,0,0) 78%);
  --grad-blue:linear-gradient(150deg,rgba(0,229,255,.29),rgba(124,233,255,.11) 46%,rgba(0,0,0,0) 78%);
  --grad-bridge:linear-gradient(150deg,rgba(168,85,255,.29),rgba(0,229,255,.12) 52%,rgba(0,0,0,0) 80%);
  --rule-brand:linear-gradient(90deg,var(--pink),var(--bridge) 48%,var(--blue));
  --highlight:inset 0 1px 0 rgba(255,255,255,.10);
  --shadow-card:0 1px 0 rgba(255,255,255,.08) inset,0 18px 44px rgba(0,0,0,.74);
  --shadow-lift:0 1px 0 rgba(255,255,255,.11) inset,0 26px 62px rgba(0,0,0,.84);
  --ring-pink:0 0 0 1px var(--line-pink),0 14px 40px rgba(255,46,196,.20);
  --ring-blue:0 0 0 1px var(--line-blue),0 14px 40px rgba(0,229,255,.18);
  --ring-bridge:0 0 0 1px rgba(168,85,255,.44),0 14px 40px rgba(168,85,255,.18);
  --shell-r:18px;                     /* card radius */
  --press:scale(.985);
}

/* ============================================================================
   0. SITEWIDE DEPTH FIELD
   ----------------------------------------------------------------------------
   Every customer page sits on true black lifted by coloured radials, so the
   background reads as LIT space rather than a flat dark rectangle.

   TUNED BACK to the approved Home look: the first energy pass built this field
   from strong electric-blue / electric-pink washes (.20 / .19 / .13), which
   visibly re-tinted the Main Home background the user had already approved.
   The depth field is now deliberately RESTRAINED — the accents still lift the
   black very slightly (so it never reads as a flat grey-blue haze), but they sit
   far enough down that the Home page keeps the background it was approved with.
   The accents stay the most saturated colour on screen because these washes are
   gentle over pure black.
   ========================================================================= */
html{background:var(--bg)}
body{
  background:
    radial-gradient(1180px 660px at 14% -10%,rgba(0,229,255,.055),rgba(0,0,0,0) 62%),
    radial-gradient(980px 560px at 92% 110%,rgba(255,46,196,.052),rgba(0,0,0,0) 66%),
    radial-gradient(680px 400px at 50% 46%,rgba(168,85,255,.045),rgba(0,0,0,0) 72%),
    var(--bg);
  background-attachment:fixed;
}

/* SIGNED-IN PAGE SCROLL SAFETY
   Fixed navigation must not turn the document into a one-screen viewport. */
html,body{
  min-height:100%;
  height:auto;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.byp-signed-in{min-height:100vh}
#entryView,#matchView,#gamePlayView,#liveView,#enterGameView,#growthProtectionView{
  min-height:100vh;
  height:auto;
  overflow-y:visible;
}

/* ============================================================================
   0b. SITEWIDE LIT-SURFACE LAYER  (the anti-flatness fix)
   ----------------------------------------------------------------------------
   WHY THIS EXISTS: the palette was correct but the site still read flat, because
   ~70 panels across gameplay/checkflow/entry were written as

       background:#000000; border:1px solid #222;   (also #333 #2a2a2a #242424 #1f1f1f)

   A pure-black rectangle with a near-invisible grey hairline, sitting on a pure
   black page, has NO depth: it reads as a grey box outline rather than a lit
   panel. That is the "too flat and muted" report.

   This layer gives those surfaces the approved treatment WITHOUT rewriting every
   component rule: black stays the base, but a panel now catches a soft white/blue
   wash at the top, carries a coloured rim instead of a grey hairline, and keeps a
   top catch-light. It is additive and only repaints surfaces that were previously
   flat, so component-specific colours (pink/blue/purple variants, states) still
   win wherever they are declared with higher specificity.

   Loaded after styles-entry / gameplay / checkflow, so it wins on equal
   specificity — which is what makes the flat originals disappear.
   ========================================================================= */
.gp-card, .gp-panel, .gp-pane, .gp-post, .gp-event-card, .gp-member-card,
.gp-empty, .gp-verify-row, .gp-admin-row, .gp-report-row, .gp-share-link,
.gp-upload, .gp-chat-msg, .gp-chat-input, .gp-act-menu, .find-member-row,
.gp-station-row, .gp-marrow, .gp-mstip, .gp-preview-sheet,
.flow-card, .person-pick, .guess-cat, .vs-row, .hist-row, .md-panel,
.admin-sec, .byp-pay-offer, .byp-me-card, .slot-card, .live-panel,
.pc-box, .prow, .you-id, .you-play, .game-code-box input,
.help-chip, .help-float, .result .sb, .result .detail,
.bypguide-panel, .bypguide-ctx, .bypguide-step, .bypguide-ch,
.byp-universal-intro, .gp-member-options-body, .byp-desktop-share, .byp-modal{
  background-image:var(--surf-1);
  border-color:var(--line);
  box-shadow:var(--shadow-card),var(--highlight);
}
/* Inputs stay flatter than cards (a lit field reads as disabled) but still gain
   the coloured rim + a soft inner top shade so they don't look like holes. */
input[type="text"], input[type="date"], input[type="number"], input[type="password"]{
  border-color:var(--line);
  background-image:var(--surf-0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.5);
}
/* Section separators / step shells that were literally #000 on #000 (invisible)
   become a real lit hairline. */
.gp-divider::before, .gp-divider::after{background:var(--edge)}
.step-indicator .step-seg{background:var(--surf-2);box-shadow:var(--highlight)}
/* The retired flat-grey hairlines that survived in a couple of rows. */
.gp-marrow, .gp-overflow{border-color:var(--line)}
.gp-marrow:hover:not(:disabled){border-color:var(--blue);background-image:var(--surf-blue)}

/* ============================================================================
   0c. ACCENT CTA GLOW
   ----------------------------------------------------------------------------
   The accent buttons were FLAT fills (a bare background of one accent colour),
   which is the other half of why the site read muted: a flat pink rectangle has no
   light on it, so the pink/blue accents never feel electric. Every accent CTA now
   carries a gradient fill plus a coloured glow, so the brand colour is the
   brightest thing on the panel. Kinetic on hover/press. */
.gp-btn.primary, .cbtn.primary, .byp-modal-btn.primary, .byp-modal-btn.danger,
.byp-ui-btn.primary, .btn-pink{
  background-image:linear-gradient(135deg,rgba(255,46,196,.92),rgba(168,85,255,.92));
  box-shadow:0 8px 24px rgba(255,46,196,.34),var(--highlight);
}
.gp-btn.blue, .cbtn.action:not(:disabled):hover, .btn-blue{
  background-image:linear-gradient(135deg,rgba(0,229,255,.90),rgba(124,233,255,.90));
  box-shadow:0 8px 24px rgba(0,229,255,.34),var(--highlight);
  border-color:rgba(0,229,255,.55);
}
.btn-violet, .byp-modal-btn.violet{
  background-image:linear-gradient(135deg,rgba(168,85,255,.92),rgba(255,46,196,.90));
  box-shadow:0 8px 24px rgba(168,85,255,.34),var(--highlight);
  border-color:rgba(168,85,255,.55);
}
.gp-btn.primary:hover, .cbtn.primary:not(:disabled):hover,
.byp-modal-btn.primary:hover, .btn-pink:hover{
  box-shadow:0 10px 30px rgba(255,46,196,.52),var(--highlight);
  transform:translateY(-1px);
}
.gp-btn.blue:hover, .btn-blue:hover{
  box-shadow:0 10px 30px rgba(0,229,255,.50),var(--highlight);
  transform:translateY(-1px);
}
.btn-violet:hover{
  box-shadow:0 10px 30px rgba(168,85,255,.50),var(--highlight);
  transform:translateY(-1px);
}
/* Selected segmented controls (likert / harmony / category) carry the same lit
   selected state instead of a flat swatch. */
.likert button.sel, .harmony-choice button.sel, .scan .cat.sel, .scan .cat.active{
  box-shadow:0 6px 18px rgba(255,46,196,.34),var(--highlight);
}
.harmony-choice button.sel{box-shadow:0 6px 18px rgba(168,85,255,.34),var(--highlight)}

/* ============================================================================
   1. SECTION HEADINGS — immediately scannable, guarded with accent + spacing
   ========================================================================= */
/* Default containers added on every page get consistent breathing room. */
#gamePlayView.gp, .checkflow, #matchView, #liveView, #enterGameView{
  padding-bottom:140px;                 /* clear the persistent bottom nav/chips */
}

/* ---- section heading component (drop-in) ---- */
.gp-sec{
  display:flex;align-items:flex-start;gap:12px;
  margin:30px 0 14px;
  flex-wrap:wrap;
}
.gp-sec-badge{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;font-family:'Archivo';font-weight:900;font-size:15px;
  color:#000;background:linear-gradient(135deg,var(--pink),var(--violet));
  box-shadow:0 0 16px rgba(255,46,196,.28);
}
.gp-sec-txt{flex:1;min-width:0}
.gp-sec-title{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:var(--h3);letter-spacing:.01em;line-height:1.2;color:#fff;
  text-transform:uppercase;
}
.gp-sec-rule{
  margin-top:7px;height:2px;border-radius:2px;width:min(120px,42%);
  background:var(--rule-brand);
  box-shadow:0 0 12px rgba(255,46,196,.5),0 0 22px rgba(0,229,255,.22);
}
.gp-sec :is(.gp-label-help,.gp-sec-sub,.gp-sub,.gp-muted){
  margin-top:6px;
}

/* ---- theme variants for section accent lines ---- */
/* ---- theme variants for section accent lines ----
   Every badge/rule blends through the PURPLE BRIDGE so pink and blue always
   transition smoothly instead of meeting as two flat blocks. */
.gp-sec.blue .gp-sec-badge{background:linear-gradient(135deg,#7ce9ff,#00e5ff)}
.gp-sec.blue .gp-sec-rule{background:linear-gradient(90deg,var(--blue),var(--violet))}
.gp-sec.violet .gp-sec-badge{background:linear-gradient(135deg,var(--pink),var(--bridge))}
.gp-sec.violet .gp-sec-rule{background:linear-gradient(90deg,var(--violet),var(--pink))}
.gp-sec.lime .gp-sec-badge{background:linear-gradient(135deg,var(--bridge),var(--blue))}
.gp-sec.lime .gp-sec-rule{background:linear-gradient(90deg,var(--lime),var(--blue))}

/* ---- legacy .gp-pane-title / .pane-title upgraded to the same system ---- */
.gp-pane-title, .pane-title, .flow-card .label-head{
  display:flex;align-items:center;gap:9px;
  font-size:var(--label);letter-spacing:.22em;text-transform:uppercase;
  color:#fff;font-weight:800;
}
.gp-pane-title::before, .pane-title::before, .flow-card .label-head::before{
  content:'';flex:none;width:10px;height:10px;border-radius:3px;
  background:linear-gradient(135deg,var(--pink),var(--blue));
  box-shadow:0 0 8px rgba(255,46,196,.5);
}
/* Fancy divider under pane titles living at the top of a card body. */
.gp-pane-headline{font-weight:800;color:#fff;font-size:var(--h3);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}

/* ============================================================================
   2. PAGE CARDS / CONTENT BLOCKS
   Dark card interior + subtle border + rounded corners + soft glow + padding.
   ========================================================================= */
.gp-pane, .flow-card{
  background:var(--grad-surface-2);
  border:1px solid var(--line-strong);
  border-radius:var(--shell-r);
  padding:18px;
  margin:16px 0;
  box-shadow:var(--shadow-card);
}
.gp-pane{position:relative;overflow:hidden}
/* brand top-edge glow on cards — the pink<->blue sweep, so every card carries
   a lit edge instead of a bare rounded dark rectangle. */
.gp-pane::after, .flow-card::after{
  content:'';position:absolute;top:0;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,transparent,var(--pink) 22%,var(--bridge) 50%,var(--blue) 78%,transparent);
  opacity:.7;pointer-events:none;filter:blur(.4px);
}
.gp-pane.pane-active, .gp-setup-step{box-shadow:0 0 0 1px var(--line-pink),0 0 34px rgba(255,46,196,.16),var(--shadow-card)}

/* ============================================================================
   3. BUTTON SYSTEM — clear hover / focus / pressed / selected states.
   Default: black bg + white text + white/light border. Active intent uses a
   brand accent, chosen by context (pink primary, blue secondary, violet,
   lime success). Never one flat color for everything.
   ========================================================================= */
.gp-btn, .cbtn{
  position:relative;overflow:hidden;
  min-height:44px;padding:12px 22px;
  border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);
  background:transparent;color:#fff;cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.gp-btn:not(:disabled):hover, .cbtn:not(:disabled):hover{transform:translateY(-1px)}
.gp-btn:active, .cbtn:active{transform:var(--press)}
.gp-btn:focus-visible, .cbtn:focus-visible{outline:2px solid var(--gpx, var(--blue));outline-offset:2px}
.gp-btn:disabled, .cbtn:disabled{opacity:.4;cursor:not-allowed}

/* default / unselected — deep navy surface, white text, lit rim.
   (Previously flat #000 with a grey border, which is why default actions read
   as dead. The navy + blue rim keeps them quiet but alive.) */
.gp-btn.ghost, .cbtn.ghost{
  background:linear-gradient(180deg,var(--card-bg),#000000);
  color:#fff;border-color:var(--line-strong);
  box-shadow:var(--highlight);
}
.gp-btn.ghost:not(:disabled):hover{
  background:linear-gradient(180deg,var(--card-bg3),var(--card-bg));
  border-color:rgba(124,233,255,.6);
  box-shadow:var(--highlight),0 0 22px rgba(0,229,255,.18);
}

/* active/important — pink. WHITE text: black-on-dark-pink failed contrast on
   the live Continue/primary CTAs and did not match the BYP system. */
.gp-btn.primary, .cbtn.primary{
  background:linear-gradient(135deg,var(--pink),var(--bridge));
  border-color:var(--pink);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:var(--glow-pink),inset 0 1px 0 rgba(255,255,255,.35);
}
.gp-btn.primary:not(:disabled):hover, .cbtn.primary:not(:disabled):hover{box-shadow:0 0 34px rgba(255,46,196,.65),inset 0 1px 0 rgba(255,255,255,.4)}

/* secondary — electric blue (e.g. GAME PLAY, universal, info actions).
   WHITE text for the same contrast reason as primary (black-on-blue was weak). */
.gp-btn.blue, .cbtn.blue, .gp-btn.info{
  background:linear-gradient(135deg,var(--lightblue),var(--blue));
  border-color:var(--blue);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:var(--glow-blue),inset 0 1px 0 rgba(255,255,255,.35);
}
.gp-btn.blue:not(:disabled):hover{box-shadow:0 0 32px rgba(0,229,255,.6),inset 0 1px 0 rgba(255,255,255,.4)}

/* violet */
.gp-btn.violet, .cbtn.violet{
  background:linear-gradient(135deg,var(--bridge),var(--blue));
  border-color:var(--violet);color:#fff;
  box-shadow:var(--glow-bridge),inset 0 1px 0 rgba(255,255,255,.3);
}
.gp-btn.violet:not(:disabled):hover{box-shadow:0 0 32px rgba(168,85,255,.55),inset 0 1px 0 rgba(255,255,255,.35)}

/* success / affirmative — electric blue (lime retired). WHITE text. */
.gp-btn.green, .cbtn.green, .gp-btn.lime, .cbtn.lime{
  background:linear-gradient(135deg,var(--lightblue),var(--blue));
  border-color:var(--blue);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:var(--glow-soft),inset 0 1px 0 rgba(255,255,255,.3);
}
.gp-btn.green:not(:disabled):hover{box-shadow:0 0 30px rgba(124,233,255,.55)}

/* danger / destructive — red outline */
.gp-btn.warn, .cbtn.danger, .gp-btn.danger{
  background:transparent;border-color:rgba(255,46,196,.7);color:#ff2ec4;
}
.gp-btn.warn:not(:disabled):hover, .cbtn.danger:not(:disabled):hover{background:rgba(255,46,196,.08);border-color:#ff2ec4;color:#ff2ec4}
.gp-btn.warn:active{transform:var(--press)}

/* ============================================================================
   4. FORMS — visible labels above fields, larger inputs, real pickers.
   ========================================================================= */
.gp-form, .flow-form{display:flex;flex-direction:column;gap:8px}
.gp-form label, .checkflow .flow-card label, .flow-card label, .gp-field label{
  font-size:var(--label);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.9);font-weight:700;
  margin:6px 0  4px;display:block;
}
.gp-form label:first-child, .flow-card label:first-child{margin-top:0}
.gp-form label .req, .flow-card label .req{color:var(--pink)}

/* large readable fields — never tiny grey */
.gp-form input:not([type=file]):not([type=checkbox]), .gp-form textarea,
.gp-code-box input, .checkflow input[type=text], .checkflow input[type=date],
.checkflow input[type=time], .checkflow input[type=email], .checkflow input[type=tel],
.checkflow input[type=password], .checkflow select,
.gp-field input[type=text], .gp-field input[type=date], .gp-field input[type=time], .gp-field select{
  width:100%;background:#000000;border:1px solid var(--line-strong);
  border-radius:12px;color:#fff;padding:14px 15px;
  font-size:16px;font-family:inherit;
  transition:border-color .16s, box-shadow .16s;
}
.gp-form input:focus, .gp-form textarea:focus, .gp-code-box input:focus,
.checkflow input:focus, .checkflow select:focus,
.gp-field input:focus, .gp-field select:focus{
  outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,46,196,.14), var(--glow-pink);
}
input[type=date], input[type=time]{color-scheme:dark}

/* readable helper / description text — smaller but high contrast */
.gp-form .hint, .gp-form ul.hint, .gp-help, .gp-muted, .muted{
  font-size:var(--support);color:rgba(255,255,255,.72);line-height:1.55;
}
.gp-form .hint b, .gp-help b, .muted b{color:#fff}

/* field grouped blocks */
.gp-field{display:flex;flex-direction:column;gap:4px}
.gp-grid2, .gp-setup-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gp-setup-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* ============================================================================
   5. GUIDED EVENT SETUP  — sectioned, progress-aware, expand/collapse.
   ========================================================================= */
.gp-setup-wrap{position:relative}
.gp-progress{
  display:flex;gap:6px;align-items:center;margin:6px 0 18px;
}
.gp-prog-seg{height:5px;flex:1;border-radius:3px;background:var(--line-strong);transition:background .25s}
.gp-prog-seg.done{background:linear-gradient(90deg,var(--pink),var(--violet));box-shadow:0 0 8px rgba(255,46,196,.4)}
.gp-prog-seg.now{background:linear-gradient(90deg,var(--pink),var(--blue));box-shadow:0 0 10px rgba(255,46,196,.55)}
.gp-prog-num{font-family:Consolas,monospace;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.55);white-space:nowrap}

.gp-setup-step{
  background:linear-gradient(180deg,var(--card-bg2),var(--card-bg));
  border:1px solid var(--line-strong);border-radius:var(--shell-r);
  overflow:hidden;margin-bottom:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.gp-step-head{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:transparent;border:none;color:inherit;cursor:pointer;
  padding:18px 18px;
}
.gp-step-num{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:'Archivo';font-weight:900;font-size:15px;
  background:#000000;border:1px solid var(--line-strong);color:rgba(255,255,255,.6);
  transition:all .2s;
}
.gp-setup-step.open .gp-step-num{background:linear-gradient(135deg,var(--pink),var(--violet));color:#000;border-color:transparent;box-shadow:var(--glow-pink)}
.gp-step-title{flex:1;min-width:0}
.gp-step-title .t{font-family:'Archivo';font-weight:800;font-size:var(--h3);text-transform:uppercase;letter-spacing:.01em;color:#fff}
.gp-step-title .s{display:block;font-size:var(--support);color:rgba(255,255,255,.6);margin-top:2px;font-weight:400;letter-spacing:0;text-transform:none}
.gp-step-state{
  flex:none;font-size:10.5px;letter-spacing:.2em;color:var(--lime);font-weight:800;
  text-transform:uppercase;display:none;align-items:center;gap:4px;
}
.gp-step-state.ok{display:inline-flex}
.gp-step-chev{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);color:rgba(255,255,255,.7);font-size:14px;transition:transform .2s;
}
.gp-setup-step.open .gp-step-chev{transform:rotate(180deg)}
.gp-step-body{display:none;padding:4px 18px 20px}
.gp-setup-step.open .gp-step-body{display:block}

.gp-setup-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.gp-setup-nav .spacer{flex:1}

/* REVIEW summary rows */
.gp-review-card{
  background:#000000;border:1px solid var(--line-strong);border-radius:14px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.gp-review-row{display:flex;gap:10px;font-size:14px;line-height:1.5}
.gp-review-row .k{flex:none;width:130px;color:rgba(255,255,255,.55);font-size:12.5px;letter-spacing:.06em}
.gp-review-row .v{color:#fff;word-break:break-word}
.gp-review-row .v .gp-chip{margin:0}

/* ============================================================================
   6. PEOPLE / MEMBER PRESENCE + EMPTY STATE
   ========================================================================= */
.gp-empty{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,46,196,.09),rgba(0,229,255,.08) 60%);
  border:1px dashed rgba(255,255,255,.28);
  border-radius:var(--shell-r);padding:32px 20px;text-align:center;
}
.gp-empty .gp-empty-glow{position:absolute;left:50%;top:-40%;transform:translateX(-50%);width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,46,196,.28),transparent);filter:blur(6px);pointer-events:none}
.gp-empty .gp-empty-emoji{position:relative;font-size:44px;margin-bottom:8px;animation:softPulse 3s ease-in-out infinite}
.gp-empty .gp-empty-title{position:relative;font-family:'Archivo';font-weight:800;font-size:16px;letter-spacing:.04em;color:#fff}
.gp-empty .gp-empty-sub{position:relative;font-size:13px;color:rgba(255,255,255,.66);margin-top:6px;max-width:360px;margin-left:auto;margin-right:auto;line-height:1.5}

/* People "here" table header — strong, count badge */
.gp-count{color:var(--pink);border-color:rgba(255,46,196,.5);background:rgba(255,46,196,.08);padding:2px 10px;border-radius:999px;font-size:12.5px}

/* refined participant card */
.gp-member-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  border:1px solid var(--line-strong);border-radius:14px;
  padding:14px;
}
.gp-member-card:hover{border-color:var(--blue);box-shadow:0 4px 18px rgba(0,229,255,.12)}
.gp-member-name{font-family:'Archivo';font-weight:800;font-size:15.5px}
.gp-member-code{font-size:12px}

/* single preset button — black + white + subtle outline, pink/blue states */
.gp-preset{
  background:#000;border:1px solid rgba(255,255,255,.34);color:#fff;
  border-radius:999px;padding:9px 16px;font-size:13px;cursor:pointer;
  transition:transform .12s,border-color .16s, box-shadow .16s, background .16s;
}
.gp-preset:hover{transform:translateY(-1px);border-color:var(--pink);color:#fff;background:rgba(255,46,196,.1)}
.gp-preset:active{transform:var(--press)}

/* preset subgroup heading */
.gp-preset-group{
  width:100%;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.9);font-weight:800;margin:14px 0 6px;
  display:flex;align-items:center;gap:8px;
}
.gp-preset-group:first-child{margin-top:0}
.gp-preset-group::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,46,196,.4),transparent);opacity:.5}

/* ============================================================================
   7. GUIDED choice cards (WHERE ARE YOU GOING?) — pink & blue families
   ========================================================================= */
.gp-choice-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.gp-choice{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  border:1px solid var(--line);
  border-radius:22px;padding:30px 20px;text-align:center;cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
  min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.gp-choice::after{content:'';position:absolute;left:12%;right:12%;bottom:-30px;height:60px;border-radius:50%;filter:blur(10px);pointer-events:none;opacity:.9}
.gp-choice:hover{transform:translateY(-6px)}
.gp-choice .gp-choice-art{font-size:54px;width:80px;height:80px;display:grid;place-items:center;line-height:1}
/* EVENT ROOM — neon pink family */
.gp-choice.event{border-color:rgba(255,46,196,.45)}
.gp-choice.event::after{background:radial-gradient(closest-side,rgba(255,46,196,.4),transparent)}
.gp-choice.event:hover{border-color:var(--pink);box-shadow:0 0 30px rgba(255,46,196,.24),0 12px 30px rgba(0,0,0,.5)}
.gp-choice.event .gp-choice-name{color:#fff}
/* UNIVERSAL ROOM — electric cool-blue family */
.gp-choice.universal{border-color:rgba(0,229,255,.45)}
.gp-choice.universal::after{background:radial-gradient(closest-side,rgba(0,229,255,.4),transparent)}
.gp-choice.universal:hover{border-color:var(--blue);box-shadow:0 0 30px rgba(0,229,255,.24),0 12px 30px rgba(0,0,0,.5)}
.gp-choice.universal .gp-choice-name{color:#fff}
.gp-choice .gp-choice-hint{color:rgba(255,255,255,.66);font-size:13px;max-width:250px;line-height:1.5}

/* ============================================================================
   8. ROOM HEADER (universal / event) — mini icon + title + ME chip
   ========================================================================= */
.gp-room-head{
  display:flex;align-items:center;gap:14px;
  padding:18px 16px;margin-bottom:4px;
  background:linear-gradient(180deg,#000000,#070707);
  border:1px solid var(--line-strong);border-radius:var(--shell-r);
}
.gp-room-mark{
  flex:none;width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;font-size:26px;color:#000;
  background:linear-gradient(135deg,var(--pink),var(--violet));
  box-shadow:0 0 22px rgba(255,46,196,.45);
}
.gp-room-mark img{width:36px;height:36px;object-fit:contain;display:block}
.gp-room-head.blue .gp-room-mark{background:linear-gradient(135deg,var(--bridge),var(--blue));box-shadow:0 0 22px rgba(0,229,255,.4)}
.gp-room-txt{flex:1;min-width:0}
.gp-room-eyebrow{font-size:10.5px;letter-spacing:.42em;color:var(--pink);text-transform:uppercase;font-weight:800}
.gp-room-head.blue .gp-room-eyebrow{color:var(--blue)}
.gp-room-title{font-family:'Archivo';font-weight:900;font-size:clamp(17px,4.5vw,24px);letter-spacing:.01em;color:#fff;margin-top:2px;text-transform:uppercase}
.gp-room-sub{font-size:12.5px;color:rgba(255,255,255,.66);margin-top:2px}

/* ============================================================================
   9. RESPONSIVE — don't simply shrink desktop screens.
   ========================================================================= */
.gp-setup-grid2,.gp-setup-grid3{grid-template-columns:1fr 1fr}
@media(max-width:640px){
  .gp-setup-grid2,.gp-setup-grid3{grid-template-columns:1fr}
  .gp-choice-grid{grid-template-columns:1fr}
  .gp-room-head{padding:14px}
  .gp-review-row{flex-direction:column;gap:2px}
  .gp-review-row .k{width:auto}
  .gp-step-head{flex-wrap:wrap}
  .gp-setup-nav .spacer{display:none}
  .gp-setup-nav{justify-content:stretch}
  .gp-setup-nav .gp-btn{flex:1}
}
@media(max-width:420px){
  .gp-sec-badge{width:30px;height:30px;font-size:13px}
  .gp-upload-actions{flex-direction:column;align-items:stretch}
}

/* ============================================================================
   PART 2 — RESTRAINED VIBRANCY LAYER  (TUNED BACK)
   ----------------------------------------------------------------------------
   The palette migration fixed the COLOURS but left the site looking flat, because
   every accent was rendered at 0.20-0.35 alpha over pure black. A first pass
   pushed these primitives to near-neon, which re-tinted the Main Home page away
   from the design that was APPROVED. This layer is the civilised mid-point: the
   accents are lit (no longer dull) but nothing here changes the Home palette,
   the Home background, or the approved Home composition.

     • cards keep a coloured rim (subtle, not a bloom)
     • the CTA keeps its approved gradient with a moderate glow
     • headings keep a light text glow (halved)
     • focus / selected states are clearly lit
     • the brand rule stays the approved multi-stop sweep

   Everything here uses ONLY the approved palette — BLACK · WHITE · BLUE
   (#7ce9ff) · ELECTRIC BLUE (#00e5ff) · PINK (#ff8fd8) · ELECTRIC PINK
   (#ff2ec4) · PURPLE (#a855ff). No navy, no new hues. Applies identically on
   desktop and mobile (no media query re-declares these tokens).
   ========================================================================= */

/* ---- 1. CARD DEPTH: a lit rim instead of a flat grey stroke ---- */
.flow-card, .gp-card, .byp-card, .gp-universal-card, .gp-choice{
  box-shadow:var(--shadow-card);
}
.flow-card:hover, .gp-card:hover, .gp-universal-card:hover{
  box-shadow:var(--shadow-lift);
}

/* ---- 2. PRIMARY ACTIONS: approved sweep + a moderate glow (WHITE text) ---- */
.cbtn.primary, .gp-btn.primary, .btn-primary, .gp-btn-brand{
  background:linear-gradient(135deg,var(--pink) 0%,var(--bridge) 52%,var(--blue) 100%);
  border-color:transparent;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 0 18px rgba(255,46,196,.34),inset 0 1px 0 rgba(255,255,255,.34);
}
.cbtn.primary:hover, .gp-btn.primary:hover, .btn-primary:hover, .gp-btn-brand:hover{
  box-shadow:0 0 24px rgba(255,46,196,.46),inset 0 1px 0 rgba(255,255,255,.42);
  transform:translateY(-1px);
}

/* ---- 3. HEADINGS: a light glow so the accent reads as light, not ink ---- */
.gp-sec-title, .gp-h1, .h1, .page-title{
  color:#fff;
  text-shadow:0 0 12px rgba(255,255,255,.16);
}
.gp-sec-badge, .gp-step-num, .gp-room-mark, .gp-mini-mark{
  box-shadow:0 0 12px rgba(255,46,196,.34);
}

/* ---- 4. SELECTED / FOCUS: clearly lit ---- */
:is(.gp-rtab.sel, .gp-chip.sel, .gp-tab.sel, .byp-pay-offer.sel){
  box-shadow:var(--ring-pink);
}
:is(input,select,textarea):focus-visible{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 1px rgba(0,229,255,.55),0 0 16px rgba(0,229,255,.24);
}

/* ---- 5. THE BRAND RULE: the approved multi-stop sweep ---- */
.gp-sec-rule, .flow-card::after, .main-card.pink::before, .main-card.blue::before{
  background:linear-gradient(90deg,var(--softpink),var(--pink) 20%,var(--bridge) 50%,var(--blue) 80%,var(--softblue));
}
.gp-sec-rule{
  box-shadow:0 0 10px rgba(255,46,196,.42),0 0 20px rgba(0,229,255,.18);
} 

/* ============================================================================
   10. GLOBAL MINI ICON — small site / compact member branding points
   ========================================================================= */
.gp-miniicon{
  display:inline-flex;align-items:center;gap:8px;color:#fff;
  font-family:'Archivo';font-weight:900;font-size:13px;letter-spacing:.04em;
}
.gp-miniicon .gp-mini-mark{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--violet));box-shadow:0 0 12px rgba(255,46,196,.4)}
.gp-miniicon .gp-mini-mark img{width:22px;height:22px;object-fit:contain}


/* SITEWIDE NON-PROFILE IMAGE CARD CONTRACT */
/* Any editorial/category/service/event card that carries a non-profile image should
   use .byp-visual-card.has-image + .byp-card-media. That media becomes the card
   background, covers the full card, remains full color, and receives only a neutral
   readability fade. Portrait/profile/member photos intentionally DO NOT use these
   classes, so this rule never changes profile-image behavior. */
.byp-visual-card{position:relative;overflow:hidden;isolation:isolate}
.byp-visual-card.has-image>.byp-card-media{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0;overflow:hidden
}
.byp-visual-card.has-image>.byp-card-media>img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:none
}
.byp-visual-card.has-image::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 8%,rgba(0,0,0,.17) 45%,rgba(0,0,0,.82) 100%)
}
.byp-visual-card.has-image>:not(.byp-card-media){position:relative;z-index:2}