/* Theme-aware surfaces for the viewer app and administration.
   Loaded last so light/dark tokens win over hardcoded dark-only colors. */

body.bt-app { background: var(--app-bg); color: var(--bt-text); }
body.ad { background: radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--bt-primary) 16%, transparent), transparent 60%), var(--ad-bg); color: var(--bt-text); }
.app-top { background: linear-gradient(180deg, var(--bt-header-bg), transparent); }
.app-top.is-solid { background: var(--bt-header-bg); box-shadow: 0 1px 0 var(--app-line); }
.bt-brand, .ad-brand { color: var(--bt-heading); }
.app-nav a { color: var(--bt-muted); }
.app-nav a:hover, .app-nav a.is-active { color: var(--bt-heading); background: var(--bt-surface-2); }
.app-icon-btn { color: var(--bt-text); }
.app-icon-btn:hover { background: var(--bt-surface-2); border-color: var(--app-line); }
.app-lang, .app-select, .app-input, .app-field input:not([type=checkbox]):not([type=radio]), .app-field select, .app-field textarea {
  background: var(--bt-surface-2); color: var(--bt-text); border-color: var(--app-line);
}
.app-lang option, .app-select option { background: var(--bt-surface); color: var(--bt-text); }
.app-search-field { background: var(--bt-surface); color: var(--bt-text); }
.app-menu-panel, .app-search-results, .app-flash div, .app-resume, .app-panel, .app-side, .app-side-nav, .app-episode {
  background: var(--app-glass-strong); border-color: var(--app-line); color: var(--bt-text);
}
.app-menu-panel a:hover, .app-menu-panel button:hover, .app-search-item:hover, .app-search-item.is-focus,
.app-side a:hover, .app-side a.is-current, .app-side-nav a:hover, .app-side-nav button:hover {
  background: var(--bt-surface-2); color: var(--bt-heading);
}
.app-side-nav a.is-active { color: var(--bt-heading); background: color-mix(in srgb, var(--bt-primary) 14%, transparent); }
.app-side-nav a:hover, .app-side-nav button:hover { color: var(--bt-heading); }
.app-stat { background: var(--bt-surface-2); border-color: var(--app-line); color: var(--bt-text); }
.app-status.is-approved { color: var(--bt-success); background: color-mix(in srgb, var(--bt-success) 12%, transparent); }
.app-status.is-pending, .app-status.is-email_unverified { color: var(--bt-warning); background: color-mix(in srgb, var(--bt-warning) 13%, transparent); }
.app-status.is-rejected, .app-status.is-suspended, .app-status.is-expired, .app-status.is-deactivated { color: var(--bt-danger); background: color-mix(in srgb, var(--bt-danger) 12%, transparent); }
.app-banner p { color: var(--bt-text); }
.app-card-title, .app-row-head a:hover, .app-tabbar a.is-active, .app-facts dt { color: var(--bt-heading); }
.app-hero h1, .app-hero p, .app-hero .app-meta, .app-detail h1, .app-detail p.lead { color: #F8FAFC; }
.app-hero-media::after { background:
  linear-gradient(0deg, var(--app-bg) 2%, rgba(20,20,22,.48) 38%, rgba(20,20,22,.08) 70%),
  linear-gradient(90deg, rgba(20,20,22,.82) 0%, rgba(20,20,22,.28) 55%, transparent 80%); }
.app-pill { color: var(--bt-muted); background: var(--bt-surface); }
.app-pill:hover { color: var(--bt-heading); border-color: var(--bt-primary); }
.app-stat, .app-list-item, .app-pack { background: var(--bt-surface-2); border-color: var(--app-line); }
.app-banner p, .app-check { color: var(--bt-text); }
.app-steps li.is-current { color: var(--bt-heading); }
.app-auth-visual { background: radial-gradient(70% 60% at 30% 30%, color-mix(in srgb, var(--bt-primary) 42%, transparent), transparent 70%), var(--bt-bg); color: #F8FAFC; }
.app-auth-visual h1, .app-auth-visual p { color: #F8FAFC; }
.app-auth-visual::before { background-image: url('../../images/brand/hero-cinema.jpg'); opacity: .28; mix-blend-mode: normal; }
.app-footer { border-color: var(--app-line); }
.app-tabbar { background: var(--bt-header-bg); border-color: var(--app-line); }
.app-tabbar a { color: var(--bt-muted); }
.app-pagination a, .app-pagination span { color: var(--bt-muted); }
.app-card-badge { background: color-mix(in srgb, var(--bt-bg) 80%, transparent); color: var(--bt-text); }

.ad-side { background: var(--bt-surface); border-color: var(--ad-line); }
.ad-nav a { color: var(--bt-muted); }
.ad-nav a:hover { color: var(--bt-heading); background: var(--bt-surface-2); }
.ad-nav a.is-active { color: var(--bt-heading); background: color-mix(in srgb, var(--bt-primary) 16%, transparent); }
.ad-nav h6, .ad-side-foot, .ad-foot, .ad-crumbs, .ad-crumbs a, .ad-chart-axis, .ad-field small, .ad-help { color: var(--bt-muted); }
.ad-top { background: var(--bt-header-bg); border-color: var(--ad-line); }
.ad-search input, .ad-field input:not([type=checkbox]):not([type=radio]):not([type=color]), .ad-field select, .ad-field textarea, .ad-input, .ad-select {
  background: var(--bt-surface-2); color: var(--bt-text); border-color: var(--ad-line);
}
.ad-select option, .ad-field select option { background: var(--bt-surface); color: var(--bt-text); }
.ad-search-results, .ad-drop-panel, dialog.ad-dialog, .ad-card, .ad-kpi { background: var(--ad-panel-solid); border-color: var(--ad-line); color: var(--bt-text); }
.ad-search-results a, .ad-drop-panel a, .ad-drop-panel button { color: var(--bt-text); }
.ad-search-results a:hover, .ad-drop-panel a:hover, .ad-drop-panel button:hover, .ad-icon:hover { background: var(--bt-surface-2); color: var(--bt-heading); }
.ad-icon { color: var(--bt-text); }
.ad-btn { background: var(--bt-surface-2); color: var(--bt-text); border-color: var(--ad-line); }
.ad-btn:hover { background: var(--bt-surface); color: var(--bt-heading); }
.ad-btn-primary { background: var(--ad-grad); color: #fff; border-color: transparent; }
.ad-table th { color: var(--bt-muted); background: var(--bt-surface-2); }
.ad-table tbody tr:hover { background: var(--bt-surface-2); }
.ad-field label, .ad-label { color: var(--bt-heading); }
.ad-crumbs a:hover, .ad-tab:hover { color: var(--bt-heading); }
a { color: var(--bt-primary); }
.ad-preview { background: var(--bt-surface-2); }
.ad-meta div, .ad-code, .ad-picker-results label { background: var(--bt-surface-2); border-color: var(--ad-line); color: var(--bt-text); }
.ad-theme-toggle, .app-theme-toggle { border-color: var(--bt-border); }

[data-theme="light"] .app-hero-empty {
  background: radial-gradient(60% 80% at 75% 30%, rgba(124,58,237,.18), transparent 70%), var(--bt-bg);
}
[data-theme="light"] .app-hero-media::after { background:
  linear-gradient(0deg, var(--app-bg) 2%, rgba(245,247,252,.42) 42%, rgba(245,247,252,.08) 72%),
  linear-gradient(90deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.18) 58%, transparent 82%); }
[data-theme="light"] .app-rail-btn {
  background: linear-gradient(90deg, rgba(245,247,252,.92), transparent); color: var(--bt-heading);
}
[data-theme="light"] .app-rail-btn.is-next { background: linear-gradient(-90deg, rgba(245,247,252,.92), transparent); }
[data-theme="light"] .app-skeleton { background: linear-gradient(90deg, #E8EDF7 0%, #F8FAFC 50%, #E8EDF7 100%); background-size: 200% 100%; }
[data-theme="light"] .ad-chart-bar.is-zero { background: #E2E8F0; }
[data-theme="light"] .ad-flash .is-ok { color: #047857; }
[data-theme="light"] .ad-flash .is-error { color: #B91C1C; }
[data-theme="light"] .app-page-head h1,
[data-theme="light"] .app-card-title,
[data-theme="light"] .app-row-head h2 { color: var(--bt-heading); }
[data-theme="light"] .app-pill:hover { color: var(--bt-heading); border-color: color-mix(in srgb, var(--bt-primary) 40%, var(--bt-border)); }
[data-theme="light"] .app-select,
[data-theme="light"] .app-input { background: #fff; color: var(--bt-text); border-color: var(--bt-border); }
[data-theme="light"] .app-select option { background: #fff; color: var(--bt-text); }
[data-theme="light"] .app-empty { background: #fff; }
[data-theme="light"] .app-card-badge { background: rgba(255,255,255,.86); color: var(--bt-heading); }
[data-theme="light"] .app-card-art::after { background: linear-gradient(0deg, rgba(15,23,42,.35), transparent 48%); }
[data-theme="light"] .app-pagination a,
[data-theme="light"] .app-pagination span { background: #fff; color: var(--bt-text); }
[data-theme="light"] .app-facts dt { color: var(--bt-heading); }
[data-theme="light"] .app-episode:hover { background: #fff; }
[data-theme="light"] .ad-btn:hover { color: var(--bt-heading); background: #fff; }
[data-theme="light"] .bt-mood img,
[data-theme="light"] .bt-hero-media img,
[data-theme="light"] .app-hero-media img,
[data-theme="light"] .app-auth-visual::before {
  filter: brightness(1.28) saturate(.78) contrast(.9);
}
[data-theme="light"] .app-icon-btn,
[data-theme="light"] .bt-theme-toggle,
[data-theme="light"] .app-theme-toggle {
  background: #fff; color: var(--bt-heading); border-color: var(--bt-border);
}
[data-theme="light"] .app-icon-btn .fa,
[data-theme="light"] .bt-theme-toggle .fa { color: var(--bt-heading); }
[data-theme="light"] .bt-trend-icon { background: #fff; color: #111; box-shadow: 0 8px 20px -12px rgba(15,23,42,.35); }
[data-theme="dark"] .ad-side, [data-theme="dark"] .ad-top { background: color-mix(in srgb, var(--bt-surface) 92%, transparent); }
[data-theme="light"] .ad-side, [data-theme="light"] .ad-top { background: rgba(255,255,255,.9); }
[data-theme="light"] .ad-brand, [data-theme="light"] .ad-nav a.is-active { color: var(--bt-heading); }

.app-catalog-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  margin: 1.25rem var(--app-gutter) 0; padding: 1rem 1.15rem; border-radius: 16px;
  background: var(--app-glass-strong); border: 1px solid var(--app-line);
}
.app-catalog-kicker { margin: 0 0 .2rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; color: var(--bt-primary); }
.app-catalog-bar p { margin: 0; color: var(--bt-muted); }
.app-catalog-search { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.app-catalog-search .app-input { min-width: min(260px, 100%); }
.app-catalog-filters { justify-content: flex-end; }
.app-cat-select { min-width: min(280px, 100%); max-width: 360px; }
@media (max-width: 700px) {
  .app-catalog-bar { align-items: stretch; }
  .app-catalog-search, .app-catalog-search .app-input, .app-catalog-search .app-btn { width: 100%; }
}