:root {
  color-scheme: light dark;
  --page: #f3f4f7;
  --page-glow: #f8e7e3;
  --surface: #ffffff;
  --surface-raised: #f6f6f8;
  --surface-input: #fff;
  --border: #d8dbe2;
  --text: #20232b;
  --muted: #687080;
  --accent: #9a6b00;
  --accent-soft: #fff2c7;
  --danger: #a83232;
  --shadow: 0 12px 30px rgba(25, 28, 38, .09);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #08090c;
    --page-glow: #261314;
    --surface: #14161b;
    --surface-raised: #1b1e24;
    --surface-input: #101216;
    --border: #2b2e36;
    --text: #f4f4f5;
    --muted: #a3a8b3;
    --accent: #ffd66b;
    --accent-soft: #332a13;
    --danger: #ff9292;
    --shadow: 0 12px 30px rgba(0, 0, 0, .28);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #08090c;
  --page-glow: #261314;
  --surface: #14161b;
  --surface-raised: #1b1e24;
  --surface-input: #101216;
  --border: #2b2e36;
  --text: #f4f4f5;
  --muted: #a3a8b3;
  --accent: #ffd66b;
  --accent-soft: #332a13;
  --danger: #ff9292;
  --shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

:root[data-theme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at top, var(--page-glow), var(--page) 44rem) !important;
  color: var(--text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.55;
}
body, .container, .main-container { color: var(--text); }
h1, h2, h3, h4 { color: var(--text); line-height: 1.2; }
p { color: var(--text); }
small, .muted, .info-label { color: var(--muted) !important; }
a { color: var(--accent) !important; transition: color .16s ease; }
a:hover { filter: brightness(1.12); }

/* Harmonize older inline-styled pages with the stats-page surfaces. */
.card, .panel, .metric, .login-form, .signup-form, .review-box, .movie-box,
.movie-highlight, .user-card, .result-card {
  color: var(--text) !important;
  background: linear-gradient(145deg, var(--surface-raised), var(--surface)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow);
}
.card, .panel { padding: clamp(18px, 3vw, 26px); }
input, textarea, select {
  color: var(--text) !important;
  background: var(--surface-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  accent-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
label { color: var(--muted) !important; }
button, .btn, .button, .logout-btn, .login-btn, .signup-btn, .login-link-btn {
  color: var(--text) !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
button:hover, .btn:hover, .button:hover, .logout-btn:hover, .login-btn:hover,
.signup-btn:hover, .login-link-btn:hover { border-color: var(--accent) !important; transform: translateY(-1px); }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}
select option { color: var(--text); background: var(--surface); }

/* Inline legacy text colors are mapped to the active palette. */
[style*="color:#fff"], [style*="color: #fff"], [style*="color:white"],
[style*="color: white"], [style*="color:#ccc"], [style*="color: #ccc"],
[style*="color:#888"], [style*="color: #888"] { color: var(--text) !important; }
[style*="color:red"], [style*="color:red"] { color: var(--danger) !important; }
.number, .fav, .metric-value, .movie-rating, .info-content, .movie-title { color: var(--accent) !important; }
.error { color: var(--danger) !important; }

.header { padding: 22px 16px 10px !important; }
.logo { max-width: min(400px, 84vw) !important; height: auto; }
.container { width: min(1100px, 94%) !important; margin-left: auto !important; margin-right: auto !important; }
.reviews-grid, .movies-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important; gap: 16px !important; }
.review-box, .movie-box { min-width: 0; }
.main-container { max-width: 1400px; margin: auto; }
.content { min-width: 0; padding-left: 16px !important; }
.profile-section { margin-bottom: 28px !important; }
.movie-header { padding: clamp(18px, 3vw, 28px); background: linear-gradient(145deg, var(--surface-raised), var(--surface)); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.movie-poster img { max-width: 100%; }
table { color: var(--text); }
th { color: var(--muted); }
td, th { border-color: var(--border) !important; }
.movie-highlight { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 9px; padding: 14px !important; }
.movie-highlights { display: grid; gap: 8px; }

.theme-toggle {
  position: fixed;
  z-index: 1000;
  top: 14px;
  left: 14px;
  padding: 9px 12px;
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 12px;
}

@media (max-width: 760px) {
  .main-container { display: block !important; padding: 12px !important; }
  .sidebar { display: none !important; }
  .content { padding: 8px !important; }
  .movie-header { flex-direction: column; gap: 22px !important; }
  .movie-poster img { width: min(300px, 100%) !important; }
  .logout-btn { top: 10px !important; right: 10px !important; padding: 8px 11px !important; }
  .theme-toggle { top: 10px; left: 10px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}