/* Live Rim interaction and composition rules shared by every browser surface. */
:root { color-scheme: dark; }
html { scrollbar-color: var(--theme-primary) var(--theme-page-bg); }
body { color: var(--theme-text); font-size: 16px; }
.auth-mode-tabs { width:100%; padding:4px; border:1px solid var(--theme-tube-unlit); border-radius:14px; background:var(--theme-page-bg); }
.auth-mode-tabs .beatori-tab { min-height:54px; font-size:20px; border-radius:10px; border-color:transparent; }
.auth-mode-tabs .beatori-tab.active { border-color:var(--theme-primary-bright); border-width:2px; }
@media (max-width:639px) { .auth-mode-tabs .beatori-tab { font-size:16px; } }
button, input, select, textarea { touch-action: manipulation; }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--theme-primary-bright);
  outline-offset: 3px;
}
::selection { color: var(--theme-text); background: color-mix(in srgb, var(--theme-primary) 48%, transparent); }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, label, .beatori-alert, .beatori-empty-state) { overflow-wrap: anywhere; }
:where(.beatori-card, .beatori-panel, .beatori-stat-card, .beatori-page-header, .page-content, .admin-content) { min-width: 0; }

/* Live Rim buttons. Semantic HTML and Razor components share one
   implementation; the presentation picks the tier:
   hero = arcade (dome + slanted label, Enter play actions only),
   filled = primary (lit gradient rim on stage black),
   outlined / btn-secondary = secondary (dim single-color rim),
   text / ghost = quiet (no rim). Tones (danger, success, warning) recolor
   the rim, never the interior. */
:root :is(.beatori-button, .btn, .neon-button, .ghost-button) {
  --button-tone: var(--theme-primary-bright);
  --button-rim: var(--button-outline, color-mix(in srgb, var(--button-tone) 58%, transparent));
  --button-glow: none;
  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--theme-control-height); min-width: 96px; max-width: 100%; padding: 8px 20px;
  border: var(--button-outline-width, 1.5px) solid var(--button-rim); border-radius: var(--theme-radius-pill);
  background: var(--button-fill, var(--theme-page-bg));
  box-shadow: var(--button-shadow, var(--button-glow)); color: var(--button-text, var(--theme-text));
  font: 600 16px/1.25 var(--font-body); letter-spacing: .01em;
  text-decoration: none; text-transform: none; text-align: center;
  cursor: var(--button-cursor, var(--beatori-cursor-pointer, pointer));
  transition: border-color var(--theme-transition), box-shadow var(--theme-transition), color var(--theme-transition), background var(--theme-transition);
}
/* Primary: the lit gradient rim with its bloom outside, interior stage black. */
:root :is(.beatori-button-primary.beatori-button-filled, .btn-primary, .neon-button) {
  border-color: transparent;
  background: linear-gradient(var(--button-fill, var(--theme-page-bg)), var(--button-fill, var(--theme-page-bg))) padding-box, var(--theme-gradient-rim) border-box;
  border-width: var(--button-outline-width, 2px);
  --button-glow: var(--theme-glow);
  font-weight: 700;
}
:root :is(.beatori-button-danger, .btn-danger) { --button-tone: var(--theme-red); }
:root :is(.beatori-button-success, .btn-success) { --button-tone: var(--theme-lime); }
:root :is(.beatori-button-warning, .btn-warning) { --button-tone: var(--theme-gold); }
:root :is(.beatori-button-danger, .btn-danger, .beatori-button-success, .btn-success, .beatori-button-warning, .btn-warning) { color: var(--button-text, var(--button-tone)); }
/* Quiet: text and icon only; the tone shows on hover. */
:root :is(.beatori-button-text, .beatori-button-ghost, .ghost-button) {
  --button-rim: transparent; min-width: 0; padding-inline: 12px; background: transparent;
}
:root :is(.beatori-button-text, .beatori-button-ghost, .ghost-button):hover { color: var(--button-hover-text, var(--theme-primary-bright)); }
:root .beatori-button-lg { min-height: var(--theme-button-height); padding-inline: 24px; font-size: 18px; }
:root .beatori-button-sm { min-height: 40px; padding-inline: 14px; font-size: 14px; }
/* Arcade: the domed hardware button. The label is the slanted display face. */
:root .beatori-button-hero {
  min-height: 64px; min-width: 240px; padding: 8px 28px 8px 76px; gap: 14px;
  border: 2px solid transparent;
  background: linear-gradient(var(--theme-page-bg), var(--theme-page-bg)) padding-box, var(--theme-gradient-rim) border-box;
  --button-glow: var(--theme-glow-strong);
  font: 900 24px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
}
:root .beatori-button-hero::before {
  content: ''; position: absolute; left: 6px; top: 50%; width: 52px; height: 52px; transform: translateY(-50%);
  border-radius: 50%; background: var(--theme-gradient-dome);
  box-shadow: 0 0 0 2px var(--theme-primary-bright), var(--theme-glow-strong);
}
:root .beatori-button-hero .beatori-button-label { display: inline-block; transform: skewX(-11deg); }
:root .beatori-button-hero .beatori-button-icon { display: none; }
:root :is(.beatori-button, .btn).is-selected { --button-rim: var(--button-selected-outline, var(--button-tone)); --button-glow: 0 0 10px color-mix(in srgb, var(--button-tone) 45%, transparent); }
:root :is(.beatori-button, .btn, .neon-button):not(.beatori-button-text):not(.beatori-button-ghost):hover {
  --button-rim: var(--button-hover-outline, var(--button-tone));
  --button-glow: var(--button-hover-shadow, 0 0 12px color-mix(in srgb, var(--button-tone) 50%, transparent));
  color: var(--button-hover-text, var(--button-text, var(--theme-text)));
}
:root :is(.beatori-button-primary.beatori-button-filled, .btn-primary, .neon-button, .beatori-button-hero):hover { --button-glow: var(--theme-glow-strong); }
:root :is(.beatori-button, .btn, .neon-button, .ghost-button):active { transform: translateY(1px); }
:root :is(button, a)[aria-disabled=true], :root button:disabled { opacity: .45; cursor: var(--beatori-cursor-not-allowed, not-allowed); transform: none; box-shadow: none; }
:root .beatori-button.is-disabled { --button-glow: none; pointer-events: none; }
:root .beatori-button:focus-visible { outline: 2px solid var(--theme-cyan); outline-offset: 3px; }
.beatori-button > :is(.beatori-button-label, .beatori-button-icon) { position: relative; min-width: 0; overflow-wrap: anywhere; }
.beatori-button-icon { flex-shrink: 0; display: inline-flex; }
.beatori-button-spinner { flex: 0 0 16px; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: beatori-spin 800ms linear infinite; }
.beatori-button-stripe, .beatori-button-underline { position: absolute; pointer-events: none; }
.beatori-button-stripe { background: var(--button-stripe, var(--button-accent, var(--theme-primary))); }
.beatori-button[data-stripe=leading] .beatori-button-stripe { inset-block: 0; left: 0; width: min(100%, var(--button-stripe-width, 3px)); }
.beatori-button[data-stripe=trailing] .beatori-button-stripe { inset-block: 0; right: 0; width: min(100%, var(--button-stripe-width, 3px)); }
.beatori-button[data-stripe=top] .beatori-button-stripe { inset-inline: 0; top: 0; height: min(100%, var(--button-stripe-width, 3px)); }
.beatori-button[data-stripe=bottom] .beatori-button-stripe { inset-inline: 0; bottom: 0; height: min(100%, var(--button-stripe-width, 3px)); }
.beatori-button-underline { left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--button-underline); }
@keyframes beatori-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .beatori-button-spinner { animation: none !important; } }
:root[data-reduced-motion=true] .beatori-button-spinner { animation: none !important; }

/* Keycaps: a small mechanical key beside the action it triggers. */
.beatori-keycap, kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary-bright) 70%, transparent); border-radius: 6px;
  background: var(--theme-page-bg); color: var(--theme-text); font: 700 13px/1 var(--font-body);
}

/* Lock-on brackets: the one selection marker of lists and collections. */
.lock-on { position: relative; }
.lock-on::before, .lock-on::after {
  content: ''; position: absolute; inset: -4px; pointer-events: none; border-radius: 10px;
  --bracket: 18px;
  background:
    linear-gradient(var(--theme-primary-bright), var(--theme-primary-bright)) top left / var(--bracket) 2px,
    linear-gradient(var(--theme-primary-bright), var(--theme-primary-bright)) top left / 2px var(--bracket),
    linear-gradient(var(--theme-cyan), var(--theme-cyan)) top right / var(--bracket) 2px,
    linear-gradient(var(--theme-cyan), var(--theme-cyan)) top right / 2px var(--bracket),
    linear-gradient(var(--theme-primary-bright), var(--theme-primary-bright)) bottom left / var(--bracket) 2px,
    linear-gradient(var(--theme-primary-bright), var(--theme-primary-bright)) bottom left / 2px var(--bracket),
    linear-gradient(var(--theme-cyan), var(--theme-cyan)) bottom right / var(--bracket) 2px,
    linear-gradient(var(--theme-cyan), var(--theme-cyan)) bottom right / 2px var(--bracket);
  background-repeat: no-repeat; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--theme-primary-bright) 60%, transparent));
}
.lock-on::after { display: none; }
:where(.lock-on-hover):not(:hover)::before { opacity: 0; }

/* The hitline and dock: one bright line with its traveling spark over the
   page's action row. */
.hitline { position: relative; height: 2px; margin: 24px 0; background: var(--theme-gradient-rim); box-shadow: var(--theme-glow); }
.hitline::after { content: ''; position: absolute; right: 14%; top: 50%; width: 18px; height: 18px; transform: translate(50%, -50%) rotate(45deg);
  background: radial-gradient(circle, #fff 0 18%, transparent 60%); filter: drop-shadow(0 0 8px var(--theme-primary-bright)); }

/* Persistent labels, comfortable targets, and safe intrinsic sizes. */
:root :where(.form-control, .field input, .field select, .input-group input, .input-group select):not(:where(.beatori-input)) {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  border-radius: var(--theme-radius-pill);
  border: 1.5px solid var(--theme-tube-unlit);
  color: var(--theme-text);
  background-color: var(--theme-page-bg);
  font-size: 16px;
  padding-inline: 18px;
}
:root textarea.form-control:not(.beatori-input) { border-radius: var(--theme-radius-frame); }
:root :is(input, textarea)::placeholder { color: var(--theme-text-dim); opacity: 1; }
:root .form-control:not(.beatori-input):focus { border-color: var(--theme-primary-bright); box-shadow: var(--theme-glow); outline: none; }
:root :is(.beatori-checkbox, .beatori-switch) { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: var(--beatori-cursor-pointer, pointer); }
:root input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--theme-primary-bright); }
:root :is(.beatori-panel, .beatori-card, .beatori-stat-card) { border-color: var(--theme-tube-unlit); border-radius: var(--theme-radius-frame); background: var(--theme-surface); }

/* Theme selection is a shared widget in the public footer and admin shell. */
.beatori-theme-picker { position: relative; color: var(--theme-text); font-size: 14px; }
.beatori-theme-picker > .beatori-theme-trigger { display: flex; align-items: center; gap: 10px; width:100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--theme-tube-unlit); border-radius: 8px; background:transparent; color:inherit; font:inherit; list-style: none; cursor: var(--beatori-cursor-pointer, pointer); }
.beatori-theme-trigger:disabled { opacity:.45; cursor: var(--beatori-cursor-arrow, default); }
.beatori-theme-picker > summary::-webkit-details-marker { display: none; }
.beatori-theme-options { display: grid; position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; width: 280px; max-width: calc(100vw - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; padding: 8px; z-index: 90; border: 1px solid var(--theme-tube-dim); border-radius: 12px; background: var(--theme-surface); box-shadow: var(--theme-glow); }
.beatori-sidebar .beatori-theme-options { inset-inline-start: 0; inset-inline-end: auto; }
.beatori-theme-options button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--theme-text); text-align: left; }
.beatori-theme-options button[aria-pressed="true"] { border-color: var(--theme-tube-dim); background: var(--theme-surface-raised); }
.beatori-theme-options small { margin-left: auto; color: var(--theme-text-muted); }
.beatori-motion-setting { margin-top:8px; padding:12px 8px 4px; border-top:1px solid var(--theme-tube-unlit); }
.beatori-motion-setting .beatori-switch { font-size:16px; }
.beatori-motion-setting p { margin:8px 0 0; color:var(--theme-text-muted); font-size:14px; line-height:1.4; }
.beatori-theme-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--theme-primary); }
.beatori-theme-swatch.purple { background: #9131ff; }
.beatori-theme-swatch.blue { background: #266dff; }
.beatori-theme-swatch.pink { background: #e72ba8; }

.beatori-slider-field, .beatori-progress-field { display: grid; gap: 8px; min-width: 0; }
.beatori-slider-label { display: flex; justify-content: space-between; gap: 16px; }
.beatori-slider-label output { color: var(--theme-cyan); font-family: var(--font-display); }
.beatori-slider { width: 100%; height: 44px; margin: 0; cursor: var(--beatori-cursor-pointer, pointer); }
.beatori-switch { position: relative; }
.beatori-switch > input[type="checkbox"] { position: absolute; width: 44px; height: 44px; opacity: 0; margin: 0; cursor: var(--beatori-cursor-pointer, pointer); }
.beatori-switch-track { position: relative; width: 52px; height: 32px; flex-shrink: 0; margin: 6px 4px; border: 2px solid color-mix(in srgb, var(--theme-primary) 34%, transparent); border-radius: 99px; background: rgb(from var(--theme-surface-raised) r g b / .94); pointer-events: none; }
.beatori-switch-track::after { position: absolute; display: block; content: ""; width: 16px; height: 16px; left: 2px; top: 6px; border-radius: 50%; background: white; transition: left 150ms ease-out, width 150ms ease-out, height 150ms ease-out, top 150ms ease-out; }
.beatori-switch > input:checked + .beatori-switch-track { background: color-mix(in srgb, var(--theme-primary) 28%, var(--theme-surface)); border-color: transparent; }
.beatori-switch > input:checked + .beatori-switch-track::after { width: 24px; height: 24px; left: 22px; top: 2px; }
.beatori-switch:active > input:not(:disabled) + .beatori-switch-track::after { width: 28px; height: 28px; top: 0; }
.beatori-switch:active > input:checked:not(:disabled) + .beatori-switch-track::after { left: 18px; }
.beatori-switch > input:focus-visible + .beatori-switch-track { outline: 2px solid var(--theme-primary); outline-offset: 3px; }
.beatori-switch:has(input:disabled) { color: rgb(from var(--theme-text-muted) r g b / .52); cursor: var(--beatori-cursor-not-allowed, not-allowed); }
.beatori-switch > input:disabled + .beatori-switch-track { background: rgb(from var(--theme-surface-raised) r g b / .42); border-color: transparent; }
.beatori-switch > input:disabled + .beatori-switch-track::after { background: rgb(from var(--theme-text-muted) r g b / .52); }
.beatori-switch-track::before { content: ""; position: absolute; width: 24px; height: 24px; left: -2px; top: 2px; border-radius: 50%; background: transparent; }
.beatori-switch > input:checked + .beatori-switch-track::before { width: 32px; height: 32px; left: 18px; top: -2px; }
.beatori-switch:hover > input:not(:disabled) + .beatori-switch-track::before { background: color-mix(in srgb, var(--theme-primary) 8%, transparent); }
.beatori-switch > input:focus-visible:not(:disabled) + .beatori-switch-track::before { background: color-mix(in srgb, var(--theme-primary) 12%, transparent); }
.beatori-switch:active > input:not(:disabled) + .beatori-switch-track::before { width: 36px; height: 36px; left: -2px; top: -4px; background: color-mix(in srgb, var(--theme-primary) 12%, transparent); }
.beatori-switch:active > input:checked:not(:disabled) + .beatori-switch-track::before { left: 14px; }
.beatori-icon-button {
  --icon-action-idle: var(--icon-action-fill, transparent);
  --icon-action-hover: var(--icon-action-hover-fill, var(--icon-action-idle));
  --icon-action-active: var(--icon-action-active-fill, var(--icon-action-idle));
  --icon-action-active-hover: var(--icon-action-active-hover-fill, var(--icon-action-active));
  --icon-action-pressed: var(--icon-action-pressed-fill, var(--icon-action-hover));
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-sizing: border-box; width: var(--icon-action-size,44px); height: var(--icon-action-size,44px); padding: 0;
  border: 0; border-radius: 8px; color: var(--icon-action-color,var(--theme-primary)); background: var(--icon-action-idle);
  font: 400 var(--icon-action-icon-size,22px)/1 var(--font-display); cursor: var(--beatori-cursor-pointer, pointer);
}
.beatori-icon-button[data-state-layer=true] {
  --icon-action-hover: var(--icon-action-hover-fill,color-mix(in srgb,var(--theme-primary) 10%,var(--theme-surface)));
  --icon-action-active: var(--icon-action-active-fill,color-mix(in srgb,var(--theme-primary) 28%,var(--theme-surface)));
  --icon-action-active-hover: var(--icon-action-active-hover-fill,color-mix(in srgb,white 8%,var(--icon-action-active)));
  --icon-action-pressed: var(--icon-action-pressed-fill,color-mix(in srgb,#000 16%,color-mix(in srgb,var(--theme-primary) 18%,var(--theme-surface))));
}
.beatori-icon-button:hover { color: var(--icon-action-hover-color,var(--icon-action-color,var(--theme-primary))); background: var(--icon-action-hover); }
.beatori-icon-button.is-selected { color: var(--icon-action-active-color,var(--theme-text)); background: var(--icon-action-active); box-shadow: none; }
.beatori-icon-button.is-selected:hover { background: var(--icon-action-active-hover); }
.beatori-icon-button:active { background: var(--icon-action-pressed); }
:root .beatori-icon-button:disabled { opacity: 1; color: rgb(from var(--icon-action-color,var(--theme-primary)) r g b / .48); background: rgb(from var(--icon-action-idle) r g b / .4); cursor: var(--beatori-cursor-arrow, default); }
.beatori-icon-button:focus-visible { outline-offset: -4px; box-shadow:none; }
/* The same 8px track, 35% waiting segment and 1200ms sweep as the native widget. */
.beatori-progress-field { position:relative; --progress-color:var(--theme-primary); --progress-end:var(--theme-primary-bright); }
.beatori-progress-label { color:var(--theme-text); font:400 14px/1.4 var(--font-body); }
.beatori-progress-field[data-tone="neutral"] { --progress-color:var(--theme-text-muted); --progress-end:var(--progress-color); }
.beatori-progress-field[data-tone="secondary"] { --progress-color:var(--theme-primary-bright); --progress-end:var(--progress-color); }
.beatori-progress-field[data-tone="tertiary"], .beatori-progress-field[data-tone="warning"] { --progress-color:var(--theme-gold); --progress-end:var(--progress-color); }
.beatori-progress-field[data-tone="success"] { --progress-color:var(--theme-lime); --progress-end:var(--progress-color); }
.beatori-progress-field[data-tone="danger"] { --progress-color:var(--theme-red); --progress-end:var(--progress-color); }
.beatori-progress-accessible { position:absolute; width:1px; height:1px; margin:-1px; padding:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; border:0; }
.beatori-progress { display:block; width:100%; height:var(--progress-height,var(--theme-progress-height)); border-radius:var(--progress-radius,var(--theme-progress-radius)); background:var(--progress-track,var(--theme-surface-raised)); }
.beatori-progress-fill { position:relative; display:block; width:calc(var(--progress-fraction) * 100%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--progress-color),var(--progress-end)); }
.beatori-progress-spark { position:absolute; right:0; top:0; height:100%; width:min(100%,var(--theme-progress-spark-width)); border-radius:inherit; background:rgba(255,255,255,.78); box-shadow:0 0 4px var(--theme-primary); }
.beatori-progress-field[data-indeterminate="true"] .beatori-progress-fill { width:calc(var(--theme-progress-segment-ratio) * 100%); animation:beatori-progress-sweep var(--theme-progress-sweep) linear infinite alternate; }
@keyframes beatori-progress-sweep { from { left:0; } to { left:calc((1 - var(--theme-progress-segment-ratio)) * 100%); } }
[data-reduced-motion="true"] .beatori-progress-field[data-indeterminate="true"] .beatori-progress-fill,
.beatori-progress-field[data-indeterminate="true"][data-reduced-motion="true"] .beatori-progress-fill { animation:none; left:calc((1 - var(--theme-progress-segment-ratio)) * 50%); }
@media (prefers-reduced-motion:reduce) { .beatori-progress-field[data-indeterminate="true"] .beatori-progress-fill { animation:none; left:calc((1 - var(--theme-progress-segment-ratio)) * 50%); } }
.beatori-collapsible { min-width: 0; }
.beatori-collapsible > summary { display: flex; align-items: center; min-height: 44px; height: var(--disclosure-header-height,auto); padding: var(--disclosure-header-padding,12px); list-style: none; cursor: var(--beatori-cursor-pointer, pointer); border-radius:12px; background:var(--disclosure-header-fill,var(--theme-surface)); border:var(--disclosure-header-outline-width,1px) solid var(--disclosure-header-outline,var(--theme-tube-unlit)); }
.beatori-collapsible > summary::-webkit-details-marker { display: none; }
.beatori-collapsible > summary:focus-visible { outline:2px solid var(--theme-primary-bright); outline-offset:-2px; box-shadow:none; }
.beatori-collapsible-toggle { display:flex; flex:0 0 var(--disclosure-toggle-slot,30px); padding-inline-start:var(--disclosure-toggle-inset,0); color:var(--disclosure-toggle-color,var(--theme-primary)); }
.beatori-collapsible-heading { min-width:0; flex:1; }
.beatori-collapsible-heading > strong { font: 600 18px/1.3 var(--font-display); }
.beatori-collapsible-heading > small { display: block; margin-top: 4px; color: var(--theme-text-muted); font-size: 14px; }
.beatori-collapsible[open] > summary .beatori-icon { transform: rotate(90deg); }
.beatori-collapsible-content { margin-top:var(--disclosure-gap,0); margin-inline-start:var(--disclosure-indent,0); padding:var(--disclosure-body-padding,8px); border-radius:12px; background:var(--disclosure-body-fill,var(--theme-page-bg)); border:var(--disclosure-body-outline-width,1px) solid var(--disclosure-body-outline,var(--theme-tube-unlit)); }
.beatori-collapsible[data-has-children="false"] > summary { cursor: var(--beatori-cursor-arrow, default); }
.beatori-collapsible[data-has-children="false"] .beatori-collapsible-toggle { visibility:hidden; }
@supports (interpolate-size:allow-keywords) {
  .beatori-collapsible::details-content { block-size:0; overflow:clip; interpolate-size:allow-keywords; }
  .beatori-collapsible[open]::details-content { block-size:auto; }
  .beatori-collapsible[data-animate="true"][open]::details-content { transition:block-size 180ms cubic-bezier(.22,.61,.36,1); }
  :root[data-reduced-motion="true"] .beatori-collapsible::details-content { transition:none; }
  @media (prefers-reduced-motion:reduce) { .beatori-collapsible::details-content { transition:none; } }
}
.beatori-loading { display:inline-flex; align-items:center; gap:12px; color:var(--theme-text-muted); }
.beatori-loading.is-labeled { min-height:44px; }
.beatori-loading-ring { flex:none; width:var(--loading-size,24px); height:var(--loading-size,24px); border:2px solid var(--loading-color,var(--theme-primary-bright)); border-right-color:transparent; border-radius:50%; animation:beatori-spin 800ms linear infinite; }
.beatori-loading[data-reduced-motion="true"] .beatori-loading-ring { animation:none; }

/* Operations uses the same dark stage and readable hierarchy as the game hub. */
:root .beatori-admin-body { font-family: var(--font-body); font-size: 16px; color: var(--theme-text-muted); background: var(--theme-page-bg); }
:root .beatori-admin-shell { background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--theme-primary) 9%, transparent), transparent 55%), var(--theme-page-bg); }
:root .beatori-admin-main { padding: 32px; }
:root .admin-topbar { min-width: 0; align-items: center; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--theme-tube-unlit); }
:root .admin-topbar h1 { font: 700 clamp(28px, 3vw, 40px)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--theme-text); }
:root .admin-topbar p { max-width: 70ch; margin-top: 8px; font-size: 16px; line-height: 1.5; }
:root .beatori-sidebar { background: var(--theme-surface-raised); border-color: var(--theme-tube-unlit); }
.beatori-sidebar-panel { display: flex; flex: 1; min-height: 0; flex-direction: column; }
:root .beatori-sidebar-section { font-size: 12px; letter-spacing: .08em; color: var(--theme-text-muted); }
:root .beatori-sidebar-nav a { min-height: 52px; border-radius: var(--theme-radius-pill); }
.beatori-navigation-toggle { display: none; }
:root .beatori-sidebar-footer { display: grid; gap: 16px; }

@media (max-width: 1023px) {
  :root .beatori-admin-main { margin-left: 0; padding: 24px; }
  :root .beatori-sidebar { position: sticky; top: 0; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--theme-tube-unlit); backdrop-filter: blur(var(--theme-space-3)); }
  :root .beatori-sidebar-header { height: 64px; justify-content: space-between; padding-inline: 24px; }
  .beatori-navigation-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--theme-tube-unlit); border-radius: 8px; background: var(--theme-surface); color: var(--theme-text); font-size: 24px; }
  [data-ui-navigation="ready"] .beatori-sidebar:not([data-open]) .beatori-sidebar-panel { display: none; }
  .beatori-sidebar-panel { max-height: calc(100dvh - 64px); overflow-y: auto; }
  :root .beatori-sidebar-nav { overflow-y: visible; }
  :root .beatori-sidebar-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  :root .beatori-sidebar-section { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .catalog-card-title { min-height: 0; }
  :root .beatori-admin-main { padding: 20px 16px; }
  :root .beatori-sidebar-header { padding-inline: 16px; }
  :root .admin-topbar { display: grid; gap: 16px; }
  :root .admin-topbar-action { justify-self: start; }
  :root .beatori-page-header { flex-wrap: wrap; }
  :root .beatori-modal { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  :root .beatori-sidebar-nav a { font-size: 14px; width: calc(100% - 16px); height: auto; margin-inline: 8px; padding: 8px; gap: 8px; }
  .beatori-theme-options { min-width: min(240px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  :root :is(.beatori-button, .btn, .neon-button, .ghost-button):hover { transform: none; }
}
@media (max-width: 359px) {
  :root .beatori-sidebar-nav ul { grid-template-columns: minmax(0, 1fr); }
}
:root[data-reduced-motion="true"], :root[data-reduced-motion="true"] *, :root[data-reduced-motion="true"] *::before, :root[data-reduced-motion="true"] *::after {
  scroll-behavior:auto !important; animation:none !important; transition:none !important;
}
:root[data-reduced-motion="true"] :is(.beatori-button, .btn, .neon-button, .ghost-button):hover,
:root[data-reduced-motion="true"] .beatori-main-menu-card:active { transform:none; }
/* The same natural-row grid algorithm is implemented by BeatoriResponsiveGrid in Zig. */
.beatori-responsive-grid {
  display: grid;
  gap: var(--grid-gap, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min, 260px), (100% - (var(--grid-max, 4) - 1) * var(--grid-gap, 24px)) / var(--grid-max, 4))), 1fr));
  align-items: var(--grid-align, start);
}
.beatori-responsive-grid > * { min-width: 0; }

/* Administration records retain their labels and actions on a narrow pane. */
.admin-filter-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; margin-bottom: 24px; }
.admin-filter-search > label { grid-column: 1 / -1; font-size: 14px; }
.admin-filter-search > input { min-width: 0; }
.admin-filter-actions { display:flex; gap:8px; }
.admin-artist-art { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: var(--theme-primary-bright); background: var(--theme-surface-raised); font-size: 24px; }
.admin-artist-art > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) {
  .admin-filter-search:has(.admin-filter-actions a) { grid-template-columns:minmax(0,1fr); }
  .admin-filter-search:has(.admin-filter-actions a) .admin-filter-actions > .btn { flex:1; }
}
@media (max-width: 767px) {
  .beatori-admin-body .admin-table-container { max-width: 100%; overflow: hidden; }
  .beatori-admin-body .admin-table { display: block; width: 100%; min-width: 0; }
  .beatori-admin-body .admin-table thead { display:block; position:static; width:auto; height:auto; overflow:visible; clip-path:none; padding:8px; }
  .beatori-admin-body .admin-table thead tr { display: grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:auto; height:auto; gap:8px; }
  .beatori-admin-body .admin-table th { width:auto; padding:0; min-width:0; white-space:normal; }
  .beatori-admin-body .admin-table .admin-sort-button { font-size:14px; letter-spacing:0.02em; text-align:left; }
  .beatori-admin-body .admin-table .admin-sort-button span { overflow-wrap:anywhere; }
  .beatori-admin-body .admin-table .admin-sort-button i { flex-shrink:0; }
  .beatori-admin-body .admin-table .admin-sort-button,
  .beatori-admin-body .admin-table .admin-column-filter { min-height: 44px; }
  .beatori-admin-body .admin-table tbody { display:grid; gap:var(--table-row-gap,8px); padding:0; }
  .beatori-admin-body .admin-table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:var(--table-padding,16px); border:1px solid var(--theme-tube-unlit); border-radius:8px; background:var(--theme-surface); }
  .beatori-admin-body .admin-table tbody tr[hidden] { display: none; }
  .beatori-admin-body .admin-table td { display:grid; align-content:start; gap:4px; min-width:0; padding:0; border:0; border-radius:0; background:transparent; white-space:normal; text-align:left; overflow-wrap:anywhere; }
  .beatori-admin-body .admin-table td::before { content: attr(data-column-label); color: var(--theme-text-muted); font-size: 12px; font-weight: 600; }
  .beatori-admin-body .admin-table td:first-child,
  .beatori-admin-body .admin-table td:last-child { grid-column: 1 / -1; text-align: left; }
  .beatori-admin-body .admin-table td:first-child::before { display: none; }
  .beatori-admin-body .admin-table td > div { max-width: 100%; white-space: normal; }
  .beatori-admin-body .admin-table td .btn { font-size: 14px; }
  .beatori-admin-body .admin-table-container[hidden] { display: none; }
}
@media (max-width:479px) {
  .beatori-admin-body .admin-table thead tr { grid-template-columns:minmax(0,1fr); }
}

/* Catalog cards keep identity readable even when artwork has no image. */
.catalog-card-title { font-size: 20px; line-height: 1.25; }
.catalog-card-subtitle { font-size: 14px; }
.catalog-card-stats { font-size: 14px; }
.catalog-card-stats > a { min-width: 44px; min-height: 44px; }
.catalog-card-widget.compact-on-phone .catalog-widget-fallback { font: 700 32px/1 var(--font-display); }
@media (max-width: 639px) {
  .catalog-card-widget.compact-on-phone { grid-template-columns: 80px minmax(0,1fr); grid-template-rows: auto; align-items: stretch; }
  .catalog-card-widget.compact-on-phone .catalog-card-media { min-height: 112px; }
  .catalog-card-widget.compact-on-phone .catalog-card-content { padding: 12px; gap: 6px; }
  .catalog-card-widget.compact-on-phone .catalog-card-title { font-size: 18px; }
  .catalog-card-widget.compact-on-phone .catalog-card-subtitle { font-size: 14px; }
  .catalog-card-widget.compact-on-phone .catalog-widget-chips { font-size: 12px; }
  .song-search-hero { min-height: 0; gap: 12px; padding-bottom: 0; }
  .song-search-copy { padding: 20px 20px 0; gap: 8px; }
  .song-search-copy h1 { font: 700 32px/1.05 var(--font-display); letter-spacing: -.025em; }
  .song-search-copy > p { font-size: 14px; line-height: 1.4; }
  .song-search-main { padding: 0 20px 20px; gap: 12px; }
  .song-hero-equalizer { display: none; }
  .popular-searches { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .popular-searches > * { flex: 0 0 auto; white-space: nowrap; }
  .hero-search-form { min-height: 52px; }
  .catalog-option-row.keymode-options { display: flex; overflow-x: auto; flex-wrap: nowrap; }
  .catalog-option-row.keymode-options > label { flex: 0 0 52px; min-height: 44px; }
  .catalog-option-row.keymode-options > label > span { padding-inline: 8px; white-space: nowrap; }
  .news-section-heading nav { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
  .news-section-heading nav > a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
}
@media (max-width: 767px) {
  .admin-table tbody tr > td:nth-child(2):nth-last-child(2) { grid-column: 1 / -1; }
  .admin-table thead th:last-child:not(:has(button)) { display: none; }
}

/* Shared sidebar rows: browser links adapt the same owner-controlled native action. */
.beatori-sidebar-choices { display:flex; flex-direction:column; gap:8px; max-width:100%; }
.beatori-nav-item {
  box-sizing:border-box; position:relative; display:flex; align-items:center; gap:12px;
  width:100%; min-width:0; min-height:52px; padding:12px 16px; border:1px solid transparent;
  border-radius:var(--theme-radius-pill); background:transparent; color:var(--theme-text-muted);
  font-family:var(--font-body); font-size:16px; line-height:24px; font-weight:400;
  text-align:start; text-decoration:none; cursor: var(--beatori-cursor-pointer, pointer);
}
.beatori-nav-item > span { min-width:0; overflow-wrap:anywhere; }
.beatori-nav-item > .li { flex:none; width:20px; font-size:20px; line-height:24px; text-align:center; }
.beatori-nav-item:hover { background:color-mix(in srgb,var(--theme-primary) 8%,transparent); color:var(--theme-text); }
.beatori-nav-item.is-selected { background:color-mix(in srgb,var(--theme-primary) 14%,transparent); border-color:color-mix(in srgb,var(--theme-primary) 45%,transparent); color:var(--theme-text); font-weight:700; }
.beatori-nav-item.is-selected:hover { background:color-mix(in srgb,var(--theme-primary) 20%,transparent); }
.beatori-nav-item:focus-visible { outline:2px solid var(--theme-primary); outline-offset:-2px; box-shadow:none; }
.beatori-nav-item:disabled { opacity:.52; cursor: var(--beatori-cursor-arrow, default); pointer-events:none; }

/* Missing artwork shares the native illustrated cover, including legacy
   static slots that cannot host the MediaArtwork component. */
.image-placeholder {
  position: relative; display: grid; place-items: center; min-height: 120px; overflow: hidden;
  border: 1.5px solid var(--theme-tube-unlit); border-radius: var(--theme-radius-frame);
  background: url('/_content/Beatori.Server.UI/images/song-fallback.webp') center / cover no-repeat,
    linear-gradient(to bottom right, #17142b, #221b3c 55%, #12222e);
}

/* Type roles: the display face is for titles and big numbers; labels,
   navigation and controls use the body face. */
:root :where(label, legend, .beatori-form-field-label, .beatori-collapsible-title, .beatori-public-links a) { font-family: var(--font-body); }
:root .catalog-row .catalog-cover-placeholder { min-height: 0; }

/* Keymode chips and catalog source badges: neon pills shared by catalog pages. */
.keymode-chip{display:inline-flex;align-items:center;padding:3px 10px;border:1.5px solid var(--keymode,var(--theme-cyan));border-radius:999px;color:var(--theme-text);font:700 13px/1.1 var(--font-body)}
.source-badge{display:inline-flex;padding:4px 12px;border:1.5px solid var(--theme-cyan);border-radius:999px;color:var(--theme-cyan);font:700 12px/1.2 var(--font-body);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.source-badge[data-source="Official"]{border-color:#FFD46A;color:#FFD46A}
.source-badge[data-source="Permission"]{border-color:#63E6F2;color:#63E6F2}
.source-badge[data-source="UserUploaded"]{border-color:#BF97FF;color:#BF97FF}

/* Shared information-section accents, including embedded and admin hosts. */
[data-info-tone=cyan] { --info-accent:var(--theme-cyan); }
[data-info-tone=pink] { --info-accent:var(--theme-pink); }
[data-info-tone=gold] { --info-accent:var(--theme-gold); }
[data-info-tone=lime] { --info-accent:var(--theme-lime); }
[data-info-tone=purple] { --info-accent:var(--theme-primary-bright); }

/* Source identity retains its hue before and after a filter is selected. */
.catalog-source-official { --catalog-source-color:#FFD46A; }
.catalog-source-verified { --catalog-source-color:#63E6F2; }
.catalog-source-uploaded { --catalog-source-color:#BF97FF; }
.catalog-source-fields .beatori-checkbox { --theme-primary:var(--catalog-source-color); color:var(--catalog-source-color); }
.catalog-source-fields .beatori-checkbox input:checked + .beatori-checkbox-mark::after { border-color:#120F26; }