.fan-setup { position:fixed; inset:0; margin:auto; box-sizing:border-box; width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--border); border-radius:20px; background:var(--surface); color:var(--text); font-family:var(--font-body); }
.fan-setup::backdrop { background:var(--overlay-bg, rgba(0,0,0,.5)); }
.fan-setup-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.fan-setup h2 { margin:0; font-size:21px; line-height:1.3; }
.fan-setup h3 { margin:24px 0 14px; font-size:16px; }
.fan-setup p { font-size:13px; line-height:1.6; color:var(--text-3); }
.fan-setup-intro { margin:14px 0 24px; }
.fan-setup-field { display:flex; flex-direction:column; gap:8px; margin:0 0 20px; font-size:13px; font-weight:600; }
.fan-setup-field input, .fan-setup-field select { box-sizing:border-box; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font:inherit; font-size:16px; font-weight:400; }
.fan-setup-field small { color:var(--text-3); font-size:12px; font-weight:400; line-height:1.5; }
.fan-setup-field :is(input,select):focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.fan-session-pill { line-height:normal; }
.fan-session-pill:disabled { opacity:.45; cursor:default; }
.fan-setup .rh-exp-cancel { padding:8px 18px; }
.fan-setup .rh-exp-cancel:focus-visible { outline:2px solid var(--coral); outline-offset:2px; }
.fan-setup #fanSetupTitle:focus { outline:none; }
.fan-setup-status { min-height:22px; }
.fan-page-heading.cx-head { justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin:0 0 20px; padding:0 0 20px; }
.fan-page-title { flex:1 1 360px; min-width:0; }
.fan-page-title .cx-title { margin:0; line-height:1.3; }
.fan-page-title .fan-directory-intro { margin:4px 0 0; color:var(--text-2); font-size:13px; line-height:1.6; }
.fan-page-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; max-width:100%; }
.fan-page-heading:has(~ .fan-command[hidden]) .fan-directory-actions,
.fan-page-heading:has(~ .fan-command .fan-session-directory[hidden]) .fan-directory-actions { display:none; }
.fan-page-heading:has(~ .fan-command[hidden]) .fan-back-actions,
.fan-page-heading:has(~ .fan-command .fan-fans[hidden]) .fan-back-actions,
.fan-back-actions:empty { display:none; }
.fan-page-actions:has(.fan-back-actions:not(:empty)) { margin-left:auto; }
#marketingGamesEmpty { margin:8px 0 0; max-width:100%; padding:6px 10px; border-radius:8px; background:color-mix(in srgb, var(--amber) 12%, var(--surface)); color:color-mix(in srgb, var(--amber) 75%, var(--text)); font-size:12px; line-height:1.5; }
.fan-setup-actions:empty { display:none; }
.fan-setup-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; max-width:100%; margin-left:auto; }
.fan-setup-actions .wf-pill { white-space:nowrap; }
@media(max-width:600px) { .fan-setup { padding:20px; } .vault-header-actions { flex-wrap:wrap; } .fan-page-actions { justify-content:flex-start; }.fan-page-actions .fan-setup-actions { margin-left:0; }.fan-page-actions .wf-pill { min-height:44px; } }
.fan-overview { margin-top:0; }
#marketingGamesEmpty:empty { display:none; }
.fan-overview[hidden], .fan-command[hidden] { display:none; }
.fan-overview-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:16px; }
.fan-kicker { color:var(--green); font-size:10px; font-weight:700; letter-spacing:1.5px; }
.fan-overview-heading h2 { font-size:clamp(22px,2.2vw,28px); line-height:1.2; max-width:540px; margin-top:6px; }
.fan-overview-heading p { color:var(--text-3); max-width:300px; font-size:14px; line-height:1.6; }
.fan-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.fan-preview-grid figure { margin:0; min-width:0; padding:8px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.fan-preview-grid img { display:block; width:100%; height:auto; border-radius:12px; }
.fan-preview-grid figcaption { display:flex; flex-direction:column; gap:6px; padding:18px 12px; }
.fan-preview-grid figcaption strong { font-size:16px; }
.fan-preview-grid figcaption span, .fan-example-note { font-size:12px; line-height:1.5; color:var(--text-3); }
.fan-example-note { margin:12px 0 20px; }
#marketingGames { min-width:0; padding-top:32px; }
.fan-command { margin-top:0; }
.fan-command > p, .fan-audience p, .fan-game-popularity p { color:var(--text-3); font-size:13px; line-height:1.6; }
.fan-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.fan-metrics article, .fan-audience, .fan-game-popularity { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; }
.fan-metrics h3, .fan-audience h3, .fan-game-popularity h3 { font-size:14px; margin:0 0 14px; }
.fan-metrics strong { font-family:var(--font-mono); font-size:28px; }
.fan-metrics strong.fan-unrecorded { font-family:var(--font-body); font-size:18px; }
.fan-metrics p { margin-top:12px; color:var(--text-3); font-size:12px; }
.fan-game-popularity { margin-bottom:24px; }
.fan-game-popularity ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; list-style:none; padding:0; margin:20px 0 0; }
.fan-game-popularity li { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.fan-game-popularity li span { color:var(--text-3); font-family:var(--font-mono); font-size:12px; }
.fan-table-scroll { overflow:auto; margin-top:20px; }
.fan-table-scroll:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.fan-audience table { width:100%; min-width:1100px; border-collapse:collapse; text-align:left; font-size:13px; }
.fan-audience th, .fan-audience td { padding:14px 12px; border-bottom:1px solid var(--border); }
.fan-audience td { color:var(--text-3); }
.fan-radio-activity { min-width:180px; }
.fan-radio-activity small { display:block; margin-top:6px; font-size:11px; line-height:1.5; }
.fan-chat-moderation { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; }
.fan-chat-moderation[hidden] { display:none; }
.fan-chat-moderation h3 { margin:0 0 8px; font-size:14px; }
.fan-chat-moderation>p { margin:0; color:var(--text-2); font-size:12px; line-height:1.6; }
.fan-chat-moderation ol { list-style:none; margin:20px 0; padding:0; max-height:480px; overflow-y:auto; overscroll-behavior:contain; }
.fan-chat-moderation ol:empty { display:none; }
.fan-chat-moderation ol:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.fan-chat-moderation li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px 0; }
.fan-chat-moderation li + li { border-top:1px solid var(--border); }
.fan-chat-message-content { min-width:0; }
.fan-chat-message-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; font-size:13px; }
.fan-chat-message-heading strong,.fan-chat-moderation li p { overflow-wrap:anywhere; }
.fan-chat-message-heading span,.fan-chat-message-state { color:var(--text-2); font-size:11px; }
.fan-chat-message-heading span { font-family:var(--font-mono); }
.fan-chat-message-state { display:inline-block; margin-top:8px; padding:4px 8px; border:1px solid var(--border); border-radius:6px; line-height:1.4; }
.fan-chat-message-state.is-hidden { color:var(--text); background:color-mix(in srgb,var(--coral) 10%,transparent); border-color:color-mix(in srgb,var(--coral) 35%,var(--border)); }
.fan-chat-moderation li p { margin:8px 0 0; white-space:pre-wrap; font-size:13px; line-height:1.6; }
.fan-chat-message-actions,[data-fan-chat-actions] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.fan-chat-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:16px; border-top:1px solid var(--border); }
.fan-chat-footer p { margin:0; color:var(--text-2); font-size:12px; line-height:1.6; }
@media(max-width:700px) { .fan-chat-moderation li { grid-template-columns:minmax(0,1fr); gap:12px; }.fan-chat-moderation .wf-pill { min-height:44px; } }
@media(max-width:900px) { .fan-overview-heading { flex-direction:column; align-items:flex-start; gap:16px; }.fan-overview-heading p{max-width:100%}.fan-preview-grid{gap:12px}.fan-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px) { .fan-preview-grid{grid-template-columns:1fr}.fan-preview-grid figure{max-width:400px;margin:0 auto}.fan-metrics{grid-template-columns:1fr}.fan-audience,.fan-game-popularity,.fan-chat-moderation{padding:16px} }
.fan-demo-options { max-height:220px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--border); border-radius:12px; padding:6px; background:var(--surface); }
.fan-demo-options[hidden] { display:none; }
.fan-demo-option { padding:12px; min-height:44px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:400; line-height:1.4; overflow-wrap:anywhere; }
.fan-demo-option:hover, .fan-demo-option.is-active { background:var(--green-dim); color:var(--green); }
.fan-demo-option[aria-selected="true"] { color:var(--green); background:var(--green-dim); font-weight:700; }
.fan-setup .fan-demo-empty { padding:12px; margin:0; }

.fan-setup-heading { justify-content:flex-start; align-items:center; gap:12px; }
.fan-setup-dismiss { flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--text-3); font:24px/1 var(--font-body); cursor:pointer; }
.fan-setup-dismiss:hover { color:var(--text); background:var(--green-dim); }
.fan-setup-dismiss:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.fan-setup-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.fan-publication { margin-bottom:24px; padding:20px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.fan-publication h3 { font-size:16px; margin:0 0 12px; }
.fan-publication p { font-size:13px; color:var(--text-3); line-height:1.6; margin:12px 0; }
.fan-publication input { box-sizing:border-box; display:block; width:100%; margin:12px 0; padding:12px; font:13px var(--font-body); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.fan-publication button + button { margin-left:8px; }
.fan-session-directory[hidden], .fan-session-detail[hidden], .fan-session-draft[hidden], .fan-metrics[hidden], .fan-game-popularity[hidden], .fan-audience[hidden], .fan-setup-actions[hidden] { display:none; }
.fan-session-draft > p { color:var(--text-3); font-size:13px; line-height:1.6; }
.fan-session-groups { display:grid; grid-template-columns:1fr; gap:20px; }
/* One session runs at a time, so Current sits above Past at full width; wide cards read as a single row. */
@media(min-width:1001px) {
  .fan-session-grid > .fan-session-card { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"heading summary" "date summary"; column-gap:32px; align-items:center; }
  .fan-session-grid .fan-session-card-heading { grid-area:heading; justify-content:flex-start; }
  .fan-session-grid .fan-session-card-heading h4 { flex:0 1 auto; }
  .fan-session-grid .fan-session-date { grid-area:date; margin-top:4px; }
  .fan-session-grid .fan-session-summary { grid-area:summary; margin-top:0; align-items:center; gap:28px; }
}
.fan-session-group { min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.fan-session-group-heading { padding:22px; border-bottom:1px solid var(--border); }
.fan-session-group-heading h3 { margin:0 0 6px; font-size:18px; line-height:1.4; }
.fan-session-group-heading p { margin:0; color:var(--text-2); font-size:13px; line-height:1.6; }
.fan-session-grid { max-height:380px; max-height:min(380px,55dvh); overflow-y:auto; overscroll-behavior-y:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--border-med) transparent; }
.fan-session-grid:empty { display:none; }
.fan-session-grid:focus-visible { outline:2px solid var(--green); outline-offset:-3px; }
.fan-session-card { min-width:0; padding:20px 22px; }
.fan-session-card + .fan-session-card { border-top:1px solid var(--border); }
.fan-session-group-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.fan-session-group-footer:has(> :not(:empty)) { padding:14px 22px; border-top:1px solid var(--border); }
.fan-session-grid:empty + .fan-session-group-footer { border-top:0; }
.fan-session-group-footer > :empty { display:none; }
.fan-session-group-footer .fan-history-status { margin:0; min-height:0; color:var(--text-2); font-size:12px; line-height:1.5; }
.fan-session-summary { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:18px; }
.fan-session-progress-label { display:block; margin-bottom:4px; color:var(--text-2); font-size:12px; }
.fan-session-summary .wf-pill { flex:none; }
.fan-session-draft { min-width:0; padding:22px; margin-bottom:20px; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.fan-session-draft { margin-top:24px; }
.fan-session-card-heading { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.fan-session-card-heading :is(h3,h4) { margin:0; font-size:16px; line-height:1.5; flex:1; min-width:160px; overflow-wrap:anywhere; }
.fan-session-status { display:inline-flex; align-items:center; padding:6px 12px; border:1px solid var(--border); border-radius:999px; color:var(--text-2); font:12px/1.4 var(--font-body); white-space:nowrap; }
.fan-session-status:is(.is-live,.is-revoked) { gap:6px; color:var(--text); font-weight:600; }
.fan-session-status:is(.is-live,.is-revoked)::before { content:""; width:6px; height:6px; flex:none; border-radius:50%; }
.fan-session-status.is-live { border-color:color-mix(in srgb,var(--green) 45%,var(--border)); background:var(--green-dim); }
.fan-session-status.is-live::before { background:var(--green); }
.fan-session-status.is-revoked { border-color:color-mix(in srgb,var(--coral) 45%,var(--border)); background:color-mix(in srgb,var(--coral) 10%,transparent); }
.fan-session-status.is-revoked::before { background:var(--coral); }
.fan-session-date { margin:8px 0 0; color:var(--text-2); font:12px/1.6 var(--font-body); overflow-wrap:anywhere; }
.fan-session-points { display:block; color:var(--text); font:600 18px/1.5 var(--font-mono); overflow-wrap:anywhere; }
.fan-session-detail .fan-publication h2 { margin:24px 0 16px; font-size:clamp(22px,3vw,28px); line-height:1.3; overflow-wrap:anywhere; }
.fan-page-title h2:focus, .fan-session-detail h2:focus { outline:none; }
.fan-session-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.fan-history-actions { display:flex; flex-wrap:wrap; gap:8px; }
.fan-history-actions button + button { margin-left:0; }
.fan-history-status { min-height:21px; }
@media(max-width:600px) { .fan-session-card,.fan-session-draft,.fan-session-group-heading { padding:18px; }.fan-session-group-footer:has(> :not(:empty)) { padding:14px 18px; }.fan-session-summary .wf-pill { min-height:44px; } }
.fan-publish-summary { overflow-wrap:anywhere; }
.fan-publish-summary h3 { margin:20px 0 16px; }
.fan-publish-rows { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:10px 20px; margin:0; font-size:13px; line-height:1.5; }
.fan-publish-rows dt { padding-top:2px; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-3); }
.fan-publish-rows dd { margin:0; color:var(--text); }
.fan-publish-rows dd + dd { grid-column:2; }
.fan-publish-goal { font-family:var(--font-mono); font-weight:600; }
.fan-publish-details { margin:18px 0 0; }
.fan-publish-details summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--green); }
.fan-publish-details p { margin:8px 0 0; color:var(--text-2); }
.fan-publish-note { margin:18px 0 0; font-size:12px; }

.fan-activity-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.fan-activity-status { color:var(--text-3); font-size:13px; margin:12px 0; }
.fan-audience td { overflow-wrap:anywhere; }

.fan-release-fields[hidden]{display:none}.fan-release-preview{font-family:var(--font-mono);font-size:12px!important}

.fan-fans { font:400 13px/1.6 var(--font-body); }
.fan-history-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:0 0 4px; }
.fan-history-heading h2 { flex:1; min-width:0; margin:0; font:700 22px/1.3 var(--font-body); letter-spacing:-.4px; overflow-wrap:anywhere; }
.fan-history-heading h2:focus { outline:none; }
.fan-fans > .fan-history-actions { margin:20px 0; }
.fan-fans .fan-history-actions { align-items:center; }
.fan-fans .fan-history-actions form { margin:0; }
.fan-history-filter { display:flex; align-items:center; gap:10px; }
.fan-history-filter-label { color:var(--text-2); font-size:13px; font-weight:600; }
.fan-year-trigger { min-height:36px; padding:8px 18px; line-height:normal; list-style:none; }
.fan-year-trigger::-webkit-details-marker { display:none; }
.fan-year-chevron { width:7px; height:7px; margin:-3px 2px 0 6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.fan-year-picker[open] .fan-year-chevron { margin-top:3px; transform:rotate(225deg); }
.fan-year-menu { left:0; right:auto; min-width:160px; max-height:260px; overflow-y:auto; overscroll-behavior:contain; }
.fan-year-picker[open] .fan-year-menu { display:block; }
.fan-year-menu .at-artist-menu-item { min-height:36px; }
.fan-year-menu .at-artist-menu-item.active { background:var(--green-dim); }
.fan-year-menu .at-artist-menu-item:focus-visible { outline:2px solid var(--green); outline-offset:-2px; background:var(--green-dim); }
.fan-history-search { flex:0 1 340px; max-width:100%; }
.fan-history-search input { flex:1; min-width:0; width:220px; min-height:36px; padding:8px 14px; font:400 13px/1.4 var(--font-body); background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:999px; }
.fan-history-search input:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.fan-history-toolbar .wf-pill { min-height:36px; }
.fan-fans .fan-metrics{margin:20px 0}.fan-fans td{overflow-wrap:anywhere}.fan-fans td:not(:first-child):not(:nth-child(2)){font-family:var(--font-mono)}
.fan-history-games{margin-top:24px}.fan-history-games p{display:inline-block;margin:8px 22px 0 0}.fan-fans .fan-table-scroll .fan-session-pill{text-align:left}

.fan-fans>p{max-width:820px;overflow-wrap:anywhere;color:var(--text-2);font-size:13px;line-height:1.6}.fan-fans .fan-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.fan-fans table{width:100%;min-width:760px;border-collapse:collapse;text-align:left;font-size:13px}.fan-fans th,.fan-fans td{padding:14px 12px;border-bottom:1px solid var(--border)}
@media(max-width:900px){.fan-fans .fan-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.fan-fans .fan-metrics{grid-template-columns:1fr}.fan-fans .wf-pill,.fan-year-trigger,.fan-year-menu .at-artist-menu-item,.fan-history-search input{min-height:44px}.fan-history-search input{font-size:16px}}