/* Shared primitives; app styles own page layout. */
html { font-size: var(--fs-md); }
body { font-size: var(--fs-md); font-weight: 500; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
small, kbd { font-size: var(--fs-xs); }
[hidden], [data-icon-sprite] { display: none !important; }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; pointer-events: none; }
.icon.sm { width: 16px; height: 16px; }
:focus-visible { outline: 0; box-shadow: var(--focus); }
.player-shell :focus-visible { box-shadow: none; outline: 2px solid #fff; outline-offset: 2px; }
.btn, .primary-button, .secondary-button, .soft-button, .text-button {
  min-height: 44px; align-items: center; justify-content: center;
  gap: var(--s2); padding: 0 var(--s4); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.btn { display: inline-flex; }
.brand { min-width: 44px; min-height: 44px; }
.nav-link { min-width: 44px; }
.btn:hover, .secondary-button:hover, .soft-button:hover { background: var(--hover); }
.btn.primary, .primary-button, :root[data-theme="light"] .primary-button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.btn.primary:hover, .primary-button:hover { background: var(--accent-hover); }
.btn.ghost, .text-button { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.danger, .danger-button { color: var(--danger); }
button:disabled { cursor: default; opacity: .6; }
.chip { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2); font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; }
.chip.on { background: var(--accent-tint); color: var(--text); border-color: var(--accent); }
.chip b { color: var(--text-3); font-weight: 650; }
.chip.on b { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.segmented button { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font-size: var(--fs-sm); }
.segmented [aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); }
.popover, .sheet, .confirm-dialog { padding: var(--s4); color: var(--text); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.popover { position: fixed; margin: 0; top: 64px; right: 24px; left: auto; width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 88px); overflow: auto; }
.popover::backdrop { background: transparent; }
.sheet { position: fixed; margin: auto 0 0; width: 100%; max-width: none; max-height: 88dvh; border-radius: 20px 20px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); overflow: auto; }
.sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 16px; border-radius: var(--r-pill); background: var(--line-strong); }
.sheet::backdrop, .confirm-dialog::backdrop { background: rgba(10, 8, 12, .64); }
.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.dialog-head h2 { margin: 0; font-size: var(--fs-xl); }
.dialog-body { overflow: auto; }
.dialog-actions { justify-content: flex-end; margin-top: var(--s4); }
.dialog-action { position: sticky; bottom: 0; padding-top: var(--s3); background: var(--raised); }
.confirm-dialog { max-width: min(480px, calc(100vw - 24px)); }
.icon-button, .icon-action { min-width: 44px; min-height: 44px; }
.badge, .thumb-badges .pill, .badges b { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--scrim); color: #fff; border-radius: 5px; }
.thumb, .scene-media { border-radius: var(--r-md); }
.player-shell, .scene-panel, .login-card, .login-panel { border-radius: var(--r-lg); }
.toast { position: fixed; z-index: 120; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--s3); width: max-content; max-width: calc(100vw - 24px); padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--raised); color: var(--text); box-shadow: var(--shadow-2); font-size: var(--fs-sm); }
.empty-state, .empty { color: var(--text-2); }
.empty-state h2, .empty h2 { color: var(--text); font-size: var(--fs-xl); }
.skeleton { min-height: 140px; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: linear-gradient(100deg, var(--surface) 20%, var(--raised) 45%, var(--surface) 70%); background-size: 200% 100%; animation: shimmer 1.4s var(--ease) infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.player-button .icon, .player-center-play .icon { width: 24px; height: 24px; }
.player-button .icon-active, .player-center-play .icon-active { display: none; }
.is-playing .player-play .icon-default, .is-playing .player-center-play .icon-default, .is-muted .player-mute .icon-default { display: none; }
.is-playing .player-play .icon-active, .is-playing .player-center-play .icon-active, .is-muted .player-mute .icon-active { display: block; }
.player-button.player-fullscreen .icon-active { display: none; }
.player-shell:fullscreen .player-fullscreen .icon-default, .player-shell:-webkit-full-screen .player-fullscreen .icon-default { display: none; }
.player-shell:fullscreen .player-fullscreen .icon-active, .player-shell:-webkit-full-screen .player-fullscreen .icon-active { display: block; }
@media (hover: none) { .chip { min-height: 44px; } }
@media (max-width: 760px) { .toast { bottom: calc(88px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.card-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--scrim); color: #fff; opacity: 0; transform: translate(-50%, -50%); transition: opacity 150ms var(--ease); }
.scene-card:hover .card-play, .scene-card:focus-within .card-play { opacity: 1; }
.selection-check, .selection-minus { display: none; }
.select-all input:checked + span .selection-check, .select-box input:checked + span .selection-check { display: block; color: var(--accent-ink); }
.select-all input:indeterminate + span .selection-minus { display: block; color: var(--accent); }

/* Account menus and phone navigation share one interaction vocabulary. */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); white-space: nowrap; }
.chrome-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chrome-search { height: 44px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--raised); color: var(--text-3); }
.chrome-search input { width: 100%; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.chrome-search input::placeholder { color: var(--text-3); }
.chrome-search:focus-within { box-shadow: var(--focus); }
.chrome-search kbd { padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 4px; }
.account-trigger { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; flex: none; }
.account-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--raised); font-size: 13px; font-weight: 750; }
.account-menu .dialog-head, .more-menu .dialog-head { margin-bottom: 12px; }
.account-setting { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; min-height: 56px; font-size: 13px; color: var(--text-2); }
.theme-choices { display: flex; gap: 2px; border-radius: var(--r-pill); background: var(--surface); }
.theme-choices button { min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font-size: 12px; }
.theme-choices [aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); }
.account-autoplay { position: relative; grid-template-columns: 20px 1fr 36px; cursor: pointer; }
.account-autoplay input { position: absolute; right: 0; width: 44px; height: 44px; opacity: 0; cursor: pointer; }
.switch-track { width: 36px; height: 22px; border-radius: 20px; background: var(--hover); border: 1px solid var(--line-strong); pointer-events: none; }
.switch-track::after { content: ""; display: block; width: 16px; height: 16px; margin: 2px; border-radius: 50%; background: var(--text-3); transition: transform 160ms var(--ease); }
.account-autoplay input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.account-autoplay input:checked + .switch-track::after { transform: translateX(14px); background: var(--accent-ink); }
.account-autoplay input:focus-visible + .switch-track { box-shadow: var(--focus); }
.account-link { min-height: 48px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 4px; border: 0; background: transparent; color: var(--text-2); font-size: 13px; text-align: left; cursor: pointer; }
.account-link span { flex: 1; }
.account-link:hover { color: var(--text); }
.account-signout { width: 100%; margin-top: 20px; }
.shortcuts-dialog dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; font-size: 13px; }
.shortcuts-dialog dt { color: var(--text); font-weight: 700; }
.shortcuts-dialog dd { margin: 0; color: var(--text-2); }
.mobile-nav { display: none; }
.phone-search, .phone-page-title { display: none; }
.skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) {
 .mobile-nav { position: fixed; z-index: 60; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(44px + max(32px, env(safe-area-inset-bottom))); padding: 0 max(12px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(16px); }
 .mobile-tab, .mobile-nav .nav-item { min-width: 44px; min-height: 44px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 0; border: 0; border-radius: 0; color: var(--text-3); background: transparent; font-size: 12px; font-weight: 650; text-align: center; }
 .mobile-tab[aria-current], .mobile-nav .nav-item.active { color: var(--accent); }
 .account-menu.sheet { top: auto; right: 0; left: 0; width: 100%; max-height: 88dvh; border-radius: 20px 20px 0 0; }
 .account-menu.sheet .account-signout { margin-top: 32px; }
 .chrome-search input { font-size: 16px; }
 .chrome-search kbd { display: none; }
 .skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

summary { min-height: 44px; padding-block: 12px; cursor: pointer; }

.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); }
@media (max-width: 760px) { .phone-page-title { display: block; } }

.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }