#gc-member-experience {
  --gc-bg: #0b0b0d;
  --gc-surface: #18181b;
  --gc-surface-raised: #25262a;
  --gc-border: #3f4147;
  --gc-text: #f8fafc;
  --gc-muted: #cbd5e1;
  --gc-primary: #ff6b0b;
  --gc-primary-hover: #e85a00;
  --gc-focus: #fbbf24;
  box-sizing: border-box;
  width: min(100% - 2rem, 760px);
  margin: 2rem auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--gc-border);
  border-radius: 20px;
  background: var(--gc-bg);
  color: var(--gc-text);
  font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 18px 50px rgb(0 0 0 / 45%);
}

#gc-member-experience *, #gc-member-experience *::before, #gc-member-experience *::after { box-sizing: border-box; }
#gc-member-experience [hidden] { display: none !important; }
#gc-member-experience h2, #gc-member-experience h3, #gc-member-experience legend,
#gc-member-experience label, #gc-member-experience p { color: var(--gc-text) !important; }
#gc-member-experience h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.2; }
#gc-member-experience h3 { margin: 1.5rem 0 .75rem; font-size: 1.3rem; line-height: 1.3; }
#gc-member-experience p { margin: .65rem 0; }
#gc-member-experience p { color: var(--gc-muted) !important; }
#gc-member-experience section, #gc-member-experience form { max-width: 100%; }

#gc-member-experience #gc-member-session-controls, #gc-member-experience #gc-member-journey,
#gc-member-experience #gc-member-consent, #gc-member-experience #gc-member-safety,
#gc-member-experience #gc-member-today {
  margin-top: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--gc-border);
  border-radius: 16px;
  background: var(--gc-surface);
}

#gc-member-experience label { display: block; margin: .75rem 0 .3rem; font-weight: 700; }
#gc-member-experience input[type="email"], #gc-member-experience input[type="password"] {
  width: 100%; min-height: 48px; padding: .7rem .8rem; border: 2px solid #718096;
  border-radius: 10px; background: #111216; color: #f8fafc; font: inherit;
}
#gc-member-experience input::placeholder { color: #94a3b8; opacity: 1; }

#gc-member-experience button {
  min-height: 48px; margin: .4rem .5rem .4rem 0; padding: .7rem 1.05rem;
  border: 2px solid transparent; border-radius: 8px; background: var(--gc-primary);
  color: #111827 !important; font: 800 1rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
#gc-member-experience button:hover { background: var(--gc-primary-hover); }
#gc-member-experience button:disabled { opacity: .58; cursor: wait; }
#gc-member-experience button:focus-visible, #gc-member-experience input:focus-visible {
  outline: 4px solid var(--gc-focus); outline-offset: 3px;
}

#gc-member-safety-form > fieldset { margin: 1rem 0; padding: 0; border: 0; }
#gc-member-safety-form > fieldset > legend { margin-bottom: 1rem; font-size: 1.15rem; font-weight: 800; }
#gc-member-safety-form > fieldset > fieldset {
  margin: 0 0 1rem; padding: 1rem; border: 2px solid var(--gc-border);
  border-radius: 12px; background: var(--gc-surface-raised);
}
#gc-member-safety-form > fieldset > fieldset > legend {
  width: 100%; padding: 0 0 .6rem; font-weight: 750; line-height: 1.4;
}
#gc-member-safety-form > fieldset > fieldset label {
  display: inline-flex; align-items: center; min-width: 88px; min-height: 48px;
  margin: .25rem .5rem .25rem 0; padding: .45rem .7rem; border: 2px solid #718096;
  border-radius: 9px; background: #111216; cursor: pointer;
}
#gc-member-safety-form input[type="radio"] {
  width: 22px; height: 22px; margin: 0 .55rem 0 0; accent-color: var(--gc-primary);
}
#gc-member-safety-form > fieldset > fieldset:has(input:checked) { border-color: var(--gc-primary); }

#gc-member-safety-questions > fieldset {
  position: relative; max-width: 44rem; margin: 1rem 0 1.5rem 2.75rem;
  padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid #3f4147;
  border-radius: 18px 18px 18px 5px; background: #25262a; color: #fff;
}
#gc-member-safety-questions > fieldset::before {
  content: "?"; position: absolute; left: -2.75rem; top: 0; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%; background: #7c2d12; color: #fff; font-weight: 900;
}
#gc-member-safety-questions > fieldset > legend {
  width: 100%; padding: 0 0 .8rem; color: #fff !important; font-size: 1.15rem; font-weight: 800; line-height: 1.55;
}
#gc-member-safety-questions > fieldset label {
  display: inline-flex; align-items: center; min-width: 96px; min-height: 48px;
  margin: .35rem .5rem .25rem 0; padding: .55rem .85rem; border: 2px solid #9a3412;
  border-radius: 12px; background: #c2410c; color: #fff !important; cursor: pointer;
}
#gc-member-safety-questions > fieldset label:has(input:checked) { background: #7c2d12; border-color: #fff; }
#gc-member-safety-questions select {
  width: min(100%, 22rem); min-height: 48px; padding: .65rem .75rem; border: 2px solid #718096;
  border-radius: 8px; background: #fff; color: #111827; font: inherit;
}
#gc-member-safety-questions select:focus-visible { outline: 4px solid var(--gc-focus); outline-offset: 3px; }
#gc-member-safety-progress { max-width: 44rem; padding: .8rem 1rem; border: 1px solid var(--gc-border); border-radius: 12px; background: #111216; font-weight: 750; }
#gc-member-safety-navigation { display: flex; flex-wrap: wrap; gap: .5rem; }

#gc-member-enrollment-status, #gc-member-session-status, #gc-member-journey-status,
#gc-member-safety-result, #gc-member-today-result { min-height: 1.6em; font-weight: 650; }
#gc-member-safety-result:not(:empty) {
  padding: 1rem; border-left: 5px solid #f97316; background: #2a1712;
}

@media (max-width: 520px) {
  #gc-member-experience { width: calc(100% - 1rem); margin: .5rem auto; padding: 1rem; border-radius: 12px; }
  #gc-member-experience button { width: 100%; margin-right: 0; }
  #gc-member-safety-form > fieldset > fieldset label { width: calc(50% - .35rem); min-width: 0; margin-right: .35rem; }
  #gc-member-safety-questions > fieldset label { width: calc(50% - .35rem); min-width: 0; margin-right: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  #gc-member-experience * { scroll-behavior: auto !important; transition: none !important; }
}
