/* FanClub web presentation (vanilla CSS). Requires the FanClub Design System v0.2 token stylesheets
   (tokens/fonts.css, colors.css, typography.css, spacing.css, shape.css, motion.css, cinematic.css, base.css).
   Dark is the default; set data-theme="light" | "system" on an ancestor for the customer's appearance choice.
   Functional layer only, except .fc-hero (cinematic, dark in every appearance). */
.fc-root { container-type: inline-size; color: var(--fc-text); background: var(--fc-background); font-family: var(--fc-font-sans); font-size: calc(16px * var(--fc-text-scale, 1)); line-height: 1.5; }
/* Production aliases: shared application tokens own appearance; no imported review globals or fixture palette. */
.fc-root { --fc-text:var(--fg);--fc-background:var(--bg);--fc-surface:var(--sur);--fc-raised:var(--sur2);--fc-border:var(--line);--fc-muted:var(--dim);--fc-link:var(--pT);--fc-focus:var(--ring);--fc-action:var(--pFill);--fc-actionPressed:var(--pPressed);--fc-danger:var(--danger,#F08080);--fc-warning:var(--zT);--fc-success:var(--success,#79D5AD);--fc-font-sans:var(--font-sans);--fc-font-mono:var(--font-mono); }
.fc-root *, .fc-root *::before, .fc-root *::after { box-sizing: border-box; }
.fc-root a { color: var(--fc-link); text-underline-offset: 3px; }
.fc-root :focus-visible { outline: 3px solid var(--fc-focus); outline-offset: 4px; }
.fc-column { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 24px; }
.fc-screen { min-height:0; height:100%; display:flex; flex-direction:column; overflow:hidden; }
.fc-onboarding-v5 { width:100%;height:100%;min-height:0; }
.fc-screen > :first-child { flex:none; }
.fc-main { min-height:0;overflow:auto;overscroll-behavior:contain; }
.fc-main > * { flex-shrink:0; }
.fc-footer { flex:none;max-height:55%;overflow:auto;overscroll-behavior:contain; }
.fc-footer .fc-actions { position:static; }
/* Only the explicit full-page customer entry owns this viewport. Product chrome and modal backgrounds are untouched. */
body:has(#app[data-page-layout="onboarding"]) { overflow:hidden; }
#app[data-page-layout="onboarding"] { position:fixed;top:var(--fc-page-top,0px);left:0;right:0;height:var(--fc-page-height,100dvh);min-height:0;overflow:hidden; }
#app[data-page-layout="onboarding"] #shell { flex:none; }
#app[data-page-layout="onboarding"] #footer { display:none; }
#app[data-page-layout="onboarding"] #main { flex:1;min-height:0;max-width:none;padding:0;display:flex;flex-direction:column;overflow:hidden; }
#app[data-page-layout="onboarding"] #main > .fc-root,
#app[data-page-layout="onboarding"] #main > .public-intro-page,
#app[data-page-layout="onboarding"] .public-intro-page > .fc-root { width:100%;height:100%;min-height:0;flex:1; }
#app[data-page-layout="onboarding"] .fc-header { width:100%;max-width:560px;margin-inline:auto;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:8px; }
.auth-dialog:has(.fc-root) { padding:0; overflow:hidden; }
.auth-dialog:has(.fc-root) .auth-close { position:absolute; right:14px; top:12px; }
.auth-dialog:has(.fc-root) [data-auth-content],.auth-dialog .fc-root { height:100%; }
.auth-dialog .fc-screen { min-height:0; height:100%; }
.auth-dialog .fc-header { padding-top:48px; padding-bottom:8px; flex:none; }
.auth-dialog .fc-main { min-height:0; overflow:auto; overscroll-behavior:contain; }
.auth-dialog .fc-column { padding-inline:24px; }
.auth-dialog .fc-verify { margin:auto 0; }
.fc-legal a { display:inline; padding:0; min-height:0; }
.fc-legal button { min-height:0;line-height:inherit;position:relative; }
.fc-legal button::before { content:'';position:absolute;inset:-15px -2px; }
html[data-motion="reduced"] .fc-main,html[data-motion="reduced"] .fc-anim { animation:none !important;transition:none !important; }
.fc-onboarding-v5 [data-fc-screen="invite"] .fc-main { gap:20px; }
.fc-onboarding-v5 [data-fc-screen="invite"] .fc-hero { min-height:0; }
.fc-onboarding-v5 [data-fc-screen="invite"] .fc-hero > * { min-width:0; }
.fc-onboarding-v5 .fc-invite-hero { display:grid;align-content:center;justify-items:center;gap:18px;min-height:0;padding-block:22px;text-align:center;background:radial-gradient(ellipse at 50% 50%,rgba(157,0,255,.12),transparent 78%),var(--fc-background);color:var(--fc-text);border-bottom:0; }
.fc-invite-logo { width:min(220px,100%);height:auto;display:block;object-fit:contain; }
.fc-onboarding-v5 #fc-invite-hint:empty { display:none; }
.fc-welcome-main { justify-content:center;gap:24px;padding-block:24px; }
.fc-welcome-art { position:relative;width:100%;height:clamp(190px,28vh,280px);flex:none; }
.fc-welcome-card { position:absolute;left:50%;top:50%;width:clamp(84px,34%,160px);height:90%;border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#4A1A68,#170F27);box-shadow:0 12px 24px rgba(11,11,16,.2); }
.fc-welcome-card--0 { transform:translate(-115%,-50%) rotate(-12deg);z-index:1; }
.fc-welcome-card--1 { transform:translate(-50%,-48%) rotate(2deg);z-index:3;background:linear-gradient(145deg,#652088,#27113F); }
.fc-welcome-card--2 { transform:translate(15%,-50%) rotate(12deg);z-index:2;background:linear-gradient(145deg,#2B3B7D,#170F27); }
.fc-welcome-card > img { width:100%;height:100%;object-fit:cover; }
.fc-welcome-card > .fc-welcome-symbol { object-fit:contain;padding:18px; }
.fc-enroll-main { gap:22px; }
.fc-form-grid { display:grid; gap:22px; }
.fc-hero { --fc-muted:#A39FB8; }
[data-theme="light"] .fc-root { --fc-danger:#B4233C;--fc-success:#08734C; }
.fc-role-ticket { display:grid;grid-template-columns:minmax(0,1fr) 54px;min-height:128px;border-radius:14px;background:linear-gradient(135deg,#1D1329,#0F0B17);color:#F4F2FA;padding:20px;gap:12px;border:1px solid #633785; }
.fc-role-ticket[data-role="brand"] { background:#F5C430;color:#14101F;border-color:#F5C430; }
.fc-role-ticket[data-role="venue"] { background:linear-gradient(135deg,#193265,#10182C);border-color:#4A659C; }
.fc-ticket-code { font:600 20px var(--font-mono);overflow-wrap:anywhere; }
.fc-role-stub { border-left:1px dashed currentColor;writing-mode:vertical-rl;text-align:center;font:500 11px var(--font-mono);letter-spacing:.1em; }
.fc-tag-options { display:flex;flex-wrap:wrap;gap:8px;padding-top:14px; }
.fc-tag-options .fc-btn { border-radius:999px; }
.fc-tag-select { display:grid;gap:8px;padding-top:14px; }
.fc-consent { display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:12px;padding:12px 0;font-size:calc(14px * var(--fc-text-scale, 1));line-height:1.45;cursor:pointer; }
.fc-consent input { width:22px;height:22px;margin:1px 0 0;accent-color:var(--fc-action); }
.fc-consent a { color:var(--fc-link);text-underline-offset:3px; }
.fc-onboarding-v5 [data-fc-screen="photo"] .fc-enroll-main { gap:16px; }
.fc-onboarding-v5 [data-fc-screen="photo"] .fc-photo-content { display:grid;justify-items:center;gap:12px; }
.fc-onboarding-v5 [data-fc-screen="photo"] :is(.fc-photo-placeholder,.fc-photo-saved,.fc-photo-content canvas) { width:200px;height:200px;border-radius:50%;background:var(--sur2);border:1px solid var(--line);object-fit:cover; }
.fc-onboarding-v5 [data-fc-screen="photo"] .fc-photo-placeholder { display:grid;place-items:center;font-size:32px;color:var(--dim); }
.fc-onboarding-v5 [data-fc-screen="photo"] .fc-photo-content input[type="file"] { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.fc-onboarding-v5 [data-fc-screen="photo"] #fc-photo-preview { touch-action:none;cursor:grab;outline:none; }
.fc-onboarding-v5 [data-fc-screen="photo"] #fc-photo-preview:focus-visible { outline:3px solid var(--fc-focus);outline-offset:4px; }
.fc-onboarding-v5 [data-fc-screen="photo"] #fc-photo-preview:active { cursor:grabbing; }
.fc-onboarding-v5 [data-fc-screen="photo"] .fc-photo-adjustments { display:grid;gap:8px;width:100%; }
.fc-onboarding-v5 [data-fc-screen="photo"] .fc-photo-zoom { min-height:44px;width:100%;min-width:0; }
.fc-onboarding-v5 [data-fc-screen="photo"] .fc-photo-secondary-actions { display:flex;flex-wrap:wrap;gap:0 20px; }
.auth-dialog .auth-close:disabled { opacity:.3;cursor:not-allowed; }
.fc-venue-stack { display:grid;gap:14px; }
.fc-venue-result { min-height:62px;overflow-wrap:anywhere; }
.fc-venue-map-region { height:220px;min-height:220px;display:grid;align-items:center;background:var(--sur2);border:1px solid var(--line);border-radius:16px;padding:12px; }
.fc-venue-map { width:100%;height:196px; }
.fc-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px 0 14px; }
.fc-header .fc-btn { white-space: nowrap; }
.fc-header__logo { width: 84px; height: auto; display: block; flex: none; }
.fc-main { flex: 1; display: flex; flex-direction: column; padding-bottom: 12px; }
.fc-screen[data-step-enter="true"] .fc-main { animation: fc-step-in 260ms cubic-bezier(.2,0,0,1) both; }
.fc-actions { position: sticky; bottom: 0; display: grid; gap: 8px; padding: 10px 0 max(8px, env(safe-area-inset-bottom)); background: var(--fc-background); }
@keyframes fc-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc-main, .fc-anim { animation: none !important; transition: none !important; } }
.fc-eyebrow { margin: 0; font: 500 11px/1.5 var(--fc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fc-muted); }
.fc-heading { display: grid; gap: 12px; }
.fc-heading--center { text-align: center; justify-items: center; }
.fc-title { margin: 0; font-size: calc(32px * var(--fc-text-scale, 1)); line-height: 1.1; letter-spacing: -.025em; font-weight: 750; overflow-wrap: anywhere; outline: none; }
.fc-desc { margin: 0; color: var(--fc-muted); line-height: 1.55; }
.fc-field { display: grid; gap: 8px; min-width: 0; }
.fc-field__label { font-weight: 650; font-size: calc(14px * var(--fc-text-scale, 1)); }
.fc-input, .fc-select { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid var(--fc-border); border-radius: var(--fc-radius-control, 10px); background: var(--fc-raised); color: var(--fc-text); font: inherit; }
.fc-input[aria-invalid="true"] { border: 2px solid var(--fc-danger); }
.fc-input--code { font-family: var(--fc-font-mono); font-size: calc(24px * var(--fc-text-scale, 1)); letter-spacing: .18em; }
.fc-hint { margin: 0; min-height: 1em; font-size: calc(13px * var(--fc-text-scale, 1)); color: var(--fc-muted); }
.fc-hint[role="alert"] { color: var(--fc-danger); }
.fc-btn { min-height: 52px; min-width: 44px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--fc-radius-control, 10px); font: 700 calc(15px * var(--fc-text-scale, 1))/1.35 var(--fc-font-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 120ms; }
.fc-btn--primary { background: var(--fc-action); color: #FFFFFF; }
.fc-btn--primary:active { background: var(--fc-actionPressed); }
.fc-btn--secondary { background: transparent; color: var(--fc-text); border-color: var(--fc-border); }
.fc-btn--text { background: none; color: var(--fc-link); font-weight: 550; padding-inline: 0; min-height: 44px; justify-content: flex-start; text-align: left; }
.fc-btn--block { width: 100%; }
.fc-btn:disabled { opacity: .45; cursor: not-allowed; }
.fc-btn[aria-busy="true"] { opacity: .8; }
.fc-spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fc-spin .8s linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
.fc-status { display: flex; gap: 8px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--fc-border); border-bottom: 1px solid var(--fc-border); font-size: calc(13px * var(--fc-text-scale, 1)); }
.fc-status--error { color: var(--fc-danger); } .fc-status--warning { color: var(--fc-warning); } .fc-status--success { color: var(--fc-success); }
.fc-legal { margin: 0; text-align: center; color: var(--fc-muted); font-size: calc(10px * var(--fc-text-scale, 1)); line-height: 1.5;letter-spacing:-.01em; }
.fc-legal button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--fc-link); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fc-onboarding-v5 .fc-legal button { min-height:0;line-height:inherit; }
.fc-onboarding-v5 .fc-legal { padding-block:14px; }
.fc-legal[data-fc-legal] { max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin; }
.fc-legal-line { display:inline-block;white-space:nowrap;vertical-align:top; }
.fc-legal[data-legal-overflow="true"] { text-align:left; }
.fc-sms-disclosure { font-size:calc(12px * var(--fc-text-scale,1));letter-spacing:normal; }
.fc-handle-editor { border-block:1px solid var(--fc-border);padding-block:4px; }
.fc-handle-preview { min-height:44px;display:flex;align-items:center;gap:12px;justify-content:space-between;cursor:pointer;color:var(--fc-link);font-weight:650;list-style:none; }
.fc-handle-preview::-webkit-details-marker { display:none; }
.fc-handle-label { min-width:0;overflow-wrap:anywhere; }
.fc-handle-preview > .fc-hint { flex:none; }
.fc-handle-editor[open] .fc-field { padding-block:12px; }
.fc-identity-option { display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--fc-muted); }
.fc-identity-option input { width:22px;height:22px;accent-color:var(--fc-action);margin:0; }
.fc-policy-links { display:flex;gap:16px;flex-wrap:wrap;justify-content:center; }
.fc-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:600px){ .fc-form-grid { grid-template-columns:minmax(0,1fr); } }
.fc-wheel { width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:12px 16px 16px;margin:auto;border:1px solid var(--fc-border);border-radius:16px;background:var(--fc-surface);color:var(--fc-text);font:inherit; }
.fc-wheel::backdrop { background:rgba(11,11,16,.66); }
.fc-wheel__bar { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.fc-wheel__bar h2 { margin:0;font-size:17px; }
.fc-wheel__viewport { position:relative;isolation:isolate; }
.fc-wheel__viewport::after { content:'';position:absolute;inset:calc(50% - var(--fc-wheel-row-half,24px)) 0 auto;height:var(--fc-wheel-row-height,48px);z-index:-1;border-block:1px solid var(--fc-border);background:var(--fc-raised);border-radius:10px;pointer-events:none; }
.fc-wheel__list { position:relative;height:240px;max-height:calc(100dvh - 160px);overflow:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;padding-block:var(--fc-wheel-pad-start,96px) var(--fc-wheel-pad-end,96px);scrollbar-width:none; }
.fc-wheel__list::-webkit-scrollbar { display:none; }
.fc-wheel__option { min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 12px;scroll-snap-align:center;border-radius:10px;cursor:pointer; }
.fc-wheel__option.is-selected { font-weight:700;color:var(--fc-link); }
@media(max-width:520px) { .fc-wheel { margin:auto 12px max(12px,env(safe-area-inset-bottom)); } }
/* A zoomed/narrow modal has less available space than the page. Let the hero
   retain its intrinsic text height, then use ONE reachable scrolling surface;
   never shrink artwork under its copy or clip a second footer scroll pane. */
@container (max-width:320px) {
  .fc-onboarding-v5 [data-fc-screen="invite"] { display:block;overflow-y:auto;overscroll-behavior:contain; }
  .fc-onboarding-v5 [data-fc-screen="invite"] .fc-main { overflow:visible;flex:none;gap:14px; }
  .fc-onboarding-v5 [data-fc-screen="invite"] .fc-hero { min-height:0 !important;flex:none; }
  .fc-onboarding-v5 [data-fc-screen="invite"] .fc-footer { max-height:none;overflow:visible; }
  .fc-onboarding-v5 [data-fc-screen="invite"] .fc-actions { position:static; }
}
@media(max-height:720px) { .fc-onboarding-v5 [data-fc-screen="invite"] .fc-main { gap:14px; } }
.fc-verify { margin: auto 0; padding: 8px 0 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; }
.fc-verify__row { width: 100%; max-width: 380px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: start; }
/* Align the arrow to the actual input row, not an assumed one-line label height. */
.fc-verify__row > .fc-field { display: contents; }
.fc-verify__row .fc-field__label { grid-column: 1 / -1; grid-row: 1; }
.fc-verify__row .fc-input { grid-column: 1; grid-row: 2; }
.fc-verify__row .fc-hint { grid-column: 1 / -1; grid-row: 3; }
.fc-verify__go { grid-column: 2; grid-row: 2; align-self: center; width: 44px; height: 44px; min-height: 44px; padding: 0; margin-top: 0; border-radius: var(--fc-radius-control, 10px); font-size: 20px; }
.fc-verify__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.fc-or { width: 100%; max-width: 380px; display: flex; align-items: center; gap: 12px; color: var(--fc-muted); font: 500 11px/1.5 var(--fc-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.fc-or::before, .fc-or::after { content: ""; flex: 1; height: 1px; background: var(--fc-border); }
.fc-choice { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--fc-border); cursor: pointer; }
.fc-choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--fc-action); }
.fc-choice__title { font-weight: 700; font-size: calc(17px * var(--fc-text-scale, 1)); }
.fc-choice__meta { color: var(--fc-muted); font-size: calc(14px * var(--fc-text-scale, 1)); }
.fc-choice__time { font-family: var(--fc-font-mono); color: var(--fc-muted); font-size: calc(13px * var(--fc-text-scale, 1)); }
.fc-list-end { border-top: 1px solid var(--fc-border); }
.fc-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--fc-border); }
.fc-row > span:first-child { color: var(--fc-muted); }
.fc-hero { position: relative; margin: 0 -24px; padding: 22px 24px; display: flex; align-items: center; gap: 14px; color: #F4F2FA; background: linear-gradient(140deg, var(--fc-art-start, #28143A), var(--fc-art-end, #150D20)); border-bottom: 1px solid var(--fc-art-border, #633785); }
.fc-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fc-raised); border: 1px solid var(--fc-border); font-weight: 750; color: var(--fc-text); }
.fc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 3px; border-radius: var(--fc-radius-control, 10px); background: var(--fc-raised); }
.fc-seg button { min-height: 44px; border: 0; border-radius: 7px; background: transparent; color: var(--fc-text); font: 600 calc(14px * var(--fc-text-scale, 1)) var(--fc-font-sans); cursor: pointer; }
.fc-seg button[aria-pressed="true"] { background: var(--fc-surface); box-shadow: 0 1px 4px #0002; }
/* Admin: separate browser composition, never inside a phone. 172px sidebar ≥1200px, Menu drawer below. */
.fc-admin { min-height: 100dvh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.fc-admin__bar { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--fc-border); }
.fc-admin__bar img { width: 100px; height: auto; }
.fc-admin__title { color: var(--fc-muted); font-weight: 600; margin-right: auto; }
.fc-admin__nav { display: none; padding: 16px 12px; border-right: 1px solid var(--fc-border); }
.fc-admin__nav[data-open="true"] { display: grid; align-content: start; gap: 4px; position: fixed; inset: 57px auto 0 0; width: 260px; background: var(--fc-surface); z-index: 5; }
.fc-admin__nav button { min-height: 44px; text-align: left; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--fc-text); font: inherit; cursor: pointer; }
.fc-admin__nav button[aria-current="page"] { background: var(--fc-raised); font-weight: 700; }
.fc-admin__main { min-width: 0; padding: 24px 20px 40px; display: grid; gap: 22px; align-content: start; }
.fc-admin__menu { display: inline-flex; }
/* Container query: the mount element (.fc-root) decides, so embedded previews and real pages agree. */
@container (min-width: 1200px) { .fc-admin { grid-template-columns: 172px minmax(0, 1fr); } .fc-admin__bar { grid-column: 1 / -1; } .fc-admin__nav { display: grid; align-content: start; gap: 4px; position: static; width: auto; background: none; } .fc-admin__menu { display: none; } }
.fc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-tabs button { min-height: 44px; padding: 0 14px; border: 1px solid var(--fc-border); border-radius: 999px; background: none; color: var(--fc-text); font: 600 14px var(--fc-font-sans); cursor: pointer; }
.fc-tabs button[aria-selected="true"] { background: var(--fc-raised); border-color: var(--fc-action); }
.fc-table-wrap { overflow-x: auto; border-top: 1px solid var(--fc-border); }
.fc-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.fc-table th { text-align: left; font: 500 11px/1.5 var(--fc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fc-muted); padding: 10px 8px; border-bottom: 1px solid var(--fc-border); }
.fc-table td { padding: 12px 8px; border-bottom: 1px solid var(--fc-border); }
.fc-table tr[data-selectable] { cursor: pointer; }
.fc-switch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--fc-border); }
.fc-switch input { width: 44px; height: 26px; accent-color: var(--fc-action); }
.fc-missing { color: var(--fc-muted); font-style: normal; }