/* =====================================================
   SAATDURUM — THEMES & COLOR SYSTEM
   Dark, Light, Pink, Aero, Purple, Mono Themes
===================================================== */

/* ===== TEMA SEÇİCİ (THEME PICKER) ===== */
.theme-wrapper {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

.theme-trigger {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-p);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
}

.theme-trigger:hover {
  border-color: var(--accent);
  transform: rotate(15deg);
}

.theme-menu {
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 5px;
  animation: fadeIn 0.2s ease;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.theme-menu.show {
  display: flex;
}

.theme-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-s);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s;
  text-align: left;
  white-space: nowrap;
  touch-action: manipulation;
}

.theme-btn:hover {
  background: var(--bg-card);
  color: var(--text-p);
  border-color: var(--border);
}

.theme-btn.active {
  background: var(--bg-card);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.theme-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* =====================================================
   ROOT PALETTES & COLOR VARIABLES
===================================================== */
:root {
  --bg-deep: #08080a;
  --bg-mid: #0f0f13;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-borderless: rgba(255, 255, 255, 0.04);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(255, 255, 255, 0.25);
  --card-border: rgba(255, 255, 255, 0.08);

  --text-p: #ffffff;
  --text-s: rgba(255, 255, 255, 0.6);
  --text-m: rgba(255, 255, 255, 0.35);
  --text-clock: #ffffff;

  --accent: #0bd6a8;
  --accent-rgb: 11, 214, 168;
  --accent-glow: rgba(11, 214, 168, 0.35);
  --accent-dim: rgba(11, 214, 168, 0.12);

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --card-radius: 16px;
  --card-area-scale: 115;

  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-clock: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --clock-scale: 1;

  --timer-glow-rgb: 34, 197, 94;
  --timer-glow-color: #22c55e;
}

/* ── THEME: DARK (Default) ── */
body.theme-dark,
body.dark-theme,
[data-theme="dark"] {
  --bg-deep: #08080a;
  --bg-mid: #0f0f13;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hv: rgba(255, 255, 255, 0.08);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --border-hv: rgba(255, 255, 255, 0.18);
  --card-border: rgba(255, 255, 255, 0.08);
  --text-p: #ffffff;
  --text-s: rgba(255, 255, 255, 0.6);
  --text-m: rgba(255, 255, 255, 0.35);
  --text-clock: #ffffff;
  --accent: #94a3b8;
  --accent-rgb: 148, 163, 184;
  --accent-glow: rgba(148, 163, 184, 0.3);
  --accent-dim: rgba(148, 163, 184, 0.12);
  --accent-text: #ffffff;

  --timer-glow-rgb: 34, 197, 94;
  --timer-glow-color: #22c55e;

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --border-focus: rgba(255, 255, 255, 0.25);
  --plan-card-bg: rgba(255, 255, 255, 0.04);
  --plan-card-border: rgba(255, 255, 255, 0.08);
  --plan-text-main: #ffffff;
  --plan-text-sub: rgba(255, 255, 255, 0.6);
  --plan-accent: #94a3b8;
  --plan-accent-glow: rgba(148, 163, 184, 0.3);
}

/* ── THEME: LIGHT ── */
body.theme-light,
body.light-theme,
[data-theme="light"] {
  --bg-deep: #f8fafc;
  --bg-mid: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hv: rgba(255, 255, 255, 0.98);
  --bg-glass: rgba(255, 255, 255, 0.85);
  --border: rgba(15, 23, 42, 0.1);
  --border-hv: rgba(15, 23, 42, 0.2);
  --border-focus: rgba(37, 99, 235, 0.4);
  --card-border: rgba(15, 23, 42, 0.1);
  --text-p: #0f172a;
  --text-s: #475569;
  --text-m: #94a3b8;
  --text-clock: #0f172a;
  --accent: #2563eb;
  --accent-rgb: 37, 99, 235;
  --accent-glow: rgba(37, 99, 235, 0.25);
  --accent-dim: rgba(37, 99, 235, 0.1);
  --accent-text: #ffffff;
  --timer-glow-rgb: 34, 197, 94;
  --timer-glow-color: #16a34a;
  --shadow: 0 12px 36px rgba(15, 23, 42, 0.08);

  --plan-card-bg: rgba(255, 255, 255, 0.88);
  --plan-card-border: rgba(15, 23, 42, 0.1);
  --plan-text-main: #0f172a;
  --plan-text-sub: #475569;
  --plan-accent: #2563eb;
  --plan-accent-glow: rgba(37, 99, 235, 0.25);
}

/* ── THEME: PINK ── */
body.theme-pink,
body.pink-theme,
[data-theme="pink"] {
  --bg-deep: #ffd6e0;
  --bg-mid: #ffeaee;
  --bg-card: rgba(255, 255, 255, 0.82);
  --bg-card-hv: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.78);
  --border: rgba(244, 63, 94, 0.22);
  --border-hv: rgba(244, 63, 94, 0.38);
  --border-focus: rgba(244, 63, 94, 0.45);
  --card-border: rgba(244, 63, 94, 0.22);
  --text-p: #4c2f35;
  --text-s: #8a636c;
  --text-m: #b8979f;
  --text-clock: #4c2f35;
  --accent: #f43f5e;
  --accent-rgb: 244, 63, 94;
  --accent-glow: rgba(244, 63, 94, 0.3);
  --accent-dim: rgba(244, 63, 94, 0.12);
  --accent-text: #ffffff;
  --timer-glow-rgb: 244, 63, 94;
  --timer-glow-color: #f43f5e;
  --shadow: 0 12px 36px rgba(244, 63, 94, 0.12);

  --plan-card-bg: rgba(255, 255, 255, 0.82);
  --plan-card-border: rgba(244, 63, 94, 0.22);
  --plan-text-main: #4c2f35;
  --plan-text-sub: #8a636c;
  --plan-accent: #f43f5e;
  --plan-accent-glow: rgba(244, 63, 94, 0.3);
}

/* ── AÇIK / LITE BEYAZ / PEMBE TEMA: "Soru Barajı/Baremi/Rozet" beyaz-üstüne-beyaz düzeltmesi ──
   Rozet, barem, hedef, puan ve baraj elemanlarının açık temalarda okunabilir
   kontrastta görünmesini garanti eden genel güvenlik kuralı. */
body.theme-pink [class*="barem" i],
body.theme-pink [class*="baraj" i],
body.theme-pink [class*="score" i],
body.theme-pink [class*="rubric" i],
body.theme-pink [class*="quiz" i],
body.theme-pink [class*="target" i],
body.theme-pink [class*="hedef" i],
body.pink-theme [class*="barem" i],
body.pink-theme [class*="baraj" i],
body.pink-theme [class*="score" i],
body.pink-theme [class*="rubric" i],
body.pink-theme [class*="quiz" i],
body.pink-theme [class*="target" i],
body.pink-theme [class*="hedef" i],
[data-theme="pink"] [class*="barem" i],
[data-theme="pink"] [class*="baraj" i],
[data-theme="pink"] [class*="score" i],
[data-theme="pink"] [class*="rubric" i],
[data-theme="pink"] [class*="quiz" i],
[data-theme="pink"] [class*="target" i],
[data-theme="pink"] [class*="hedef" i] {
  color: var(--plan-text-main, #4c2f35) !important;
}

body.theme-light [class*="barem" i],
body.theme-light [class*="baraj" i],
body.theme-light [class*="score" i],
body.theme-light [class*="rubric" i],
body.theme-light [class*="quiz" i],
body.theme-light [class*="target" i],
body.theme-light [class*="hedef" i],
body.light-theme [class*="barem" i],
body.light-theme [class*="baraj" i],
body.light-theme [class*="score" i],
body.light-theme [class*="rubric" i],
body.light-theme [class*="quiz" i],
body.light-theme [class*="target" i],
body.light-theme [class*="hedef" i],
[data-theme="light"] [class*="barem" i],
[data-theme="light"] [class*="baraj" i],
[data-theme="light"] [class*="score" i],
[data-theme="light"] [class*="rubric" i],
[data-theme="light"] [class*="quiz" i],
[data-theme="light"] [class*="target" i],
[data-theme="light"] [class*="hedef" i],
body.theme-litewhite [class*="barem" i],
body.theme-litewhite [class*="baraj" i],
body.theme-litewhite [class*="score" i],
body.theme-litewhite [class*="rubric" i],
body.theme-litewhite [class*="quiz" i],
body.theme-litewhite [class*="target" i],
body.theme-litewhite [class*="hedef" i],
body.litewhite-theme [class*="barem" i],
body.litewhite-theme [class*="baraj" i],
body.litewhite-theme [class*="score" i],
body.litewhite-theme [class*="rubric" i],
body.litewhite-theme [class*="quiz" i],
body.litewhite-theme [class*="target" i],
body.litewhite-theme [class*="hedef" i],
[data-theme="litewhite"] [class*="barem" i],
[data-theme="litewhite"] [class*="baraj" i],
[data-theme="litewhite"] [class*="score" i],
[data-theme="litewhite"] [class*="rubric" i],
[data-theme="litewhite"] [class*="quiz" i],
[data-theme="litewhite"] [class*="target" i],
[data-theme="litewhite"] [class*="hedef" i] {
  color: var(--plan-text-main, #0f172a) !important;
}

/* Eğer rozet kendi arka planını beyaz/şeffaf bırakıyorsa, okunabilir bir
   zemin sağla (yalnızca arka plan tanımsız/şeffafsa devreye girer). */
body.theme-pink [class*="barem" i]:not([style*="background"]),
body.theme-pink [class*="baraj" i]:not([style*="background"]),
body.pink-theme [class*="barem" i]:not([style*="background"]),
body.pink-theme [class*="baraj" i]:not([style*="background"]),
[data-theme="pink"] [class*="barem" i]:not([style*="background"]),
[data-theme="pink"] [class*="baraj" i]:not([style*="background"]) {
  background-color: var(--plan-accent-glow, rgba(244, 63, 94, 0.15));
}

body.theme-light [class*="barem" i]:not([style*="background"]),
body.theme-light [class*="baraj" i]:not([style*="background"]),
body.light-theme [class*="barem" i]:not([style*="background"]),
body.light-theme [class*="baraj" i]:not([style*="background"]),
[data-theme="light"] [class*="barem" i]:not([style*="background"]),
[data-theme="light"] [class*="baraj" i]:not([style*="background"]),
body.theme-litewhite [class*="barem" i]:not([style*="background"]),
body.theme-litewhite [class*="baraj" i]:not([style*="background"]),
body.litewhite-theme [class*="barem" i]:not([style*="background"]),
body.litewhite-theme [class*="baraj" i]:not([style*="background"]),
[data-theme="litewhite"] [class*="barem" i]:not([style*="background"]),
[data-theme="litewhite"] [class*="baraj" i]:not([style*="background"]) {
  background-color: rgba(15, 23, 42, 0.08);
}

/* ── THEME: AERO (CYAN / GLASS) ── */
body.theme-aero,
body.aero-theme,
[data-theme="aero"] {
  --bg-deep: #020914;
  --bg-mid: #051429;
  --bg-card: rgba(4, 20, 48, 0.75);
  --bg-card-hv: rgba(0, 168, 255, 0.15);
  --bg-glass: rgba(4, 20, 48, 0.72);
  --border: rgba(0, 168, 255, 0.22);
  --border-hv: rgba(0, 168, 255, 0.45);
  --card-border: rgba(0, 168, 255, 0.22);
  --text-p: #ffffff;
  --text-s: #93c5fd;
  --text-m: #60a5fa;
  --text-clock: #ffffff;
  --accent: #00a8ff;
  --accent-rgb: 0, 168, 255;
  --accent-glow: rgba(0, 168, 255, 0.35);
  --accent-dim: rgba(0, 168, 255, 0.15);
  --accent-text: #ffffff;
  --timer-glow-rgb: 0, 168, 255;
  --timer-glow-color: #00a8ff;

  --danger: #ef4444;
  --warn: #f59e0b;
  --bar-idle: #10b981;
  --bar-running: #00a8ff;
  --bar-paused: #f59e0b;

  --shadow: 0 12px 36px rgba(0, 10, 30, 0.6);
  --border-focus: rgba(0, 168, 255, 0.55);

  --plan-card-bg: rgba(4, 20, 48, 0.72);
  --plan-card-border: rgba(0, 168, 255, 0.22);
  --plan-text-main: #ffffff;
  --plan-text-sub: #93c5fd;
  --plan-accent: #00a8ff;
  --plan-accent-glow: rgba(0, 168, 255, 0.35);

  --auth-bg: #020914;
  --auth-card: rgba(4, 20, 48, 0.85);
  --auth-card-inner: rgba(0, 168, 255, 0.1);
  --auth-border: rgba(0, 168, 255, 0.25);
  --auth-border-hv: rgba(0, 168, 255, 0.45);
  --auth-text-p: #ffffff;
  --auth-text-s: #93c5fd;
  --auth-text-m: #60a5fa;

  --grp-bg: #020914;
  --grp-card: rgba(4, 20, 48, 0.82);
  --grp-card-inner: rgba(0, 168, 255, 0.12);
  --grp-border: rgba(0, 168, 255, 0.22);
  --grp-border-hv: rgba(0, 168, 255, 0.45);
  --grp-text-p: #ffffff;
  --grp-text-s: #93c5fd;
  --grp-accent: #00a8ff;
  --grp-accent-glow: rgba(0, 168, 255, 0.35);

  --st-bg: #020914;
  --st-card: rgba(4, 20, 48, 0.82);
  --st-card-inner: rgba(0, 168, 255, 0.1);
  --st-border: rgba(0, 168, 255, 0.22);
  --st-border-hv: rgba(0, 168, 255, 0.45);
  --st-text-p: #ffffff;
  --st-text-s: #93c5fd;
  --st-text-m: #60a5fa;
}

/* ── THEME: PURPLE (FUTURISTIC NEON) ── */
body.theme-purple,
body.purple-theme,
[data-theme="purple"] {
  --bg-deep: #07030d;
  --bg-mid: #110724;
  --bg-card: rgba(139, 92, 246, 0.06);
  --bg-card-hv: rgba(139, 92, 246, 0.12);
  --bg-glass: rgba(139, 92, 246, 0.06);
  --border: rgba(139, 92, 246, 0.18);
  --border-hv: rgba(139, 92, 246, 0.32);
  --card-border: rgba(139, 92, 246, 0.18);
  --text-p: #ffffff;
  --text-s: rgba(255, 255, 255, 0.65);
  --text-m: rgba(255, 255, 255, 0.4);
  --text-clock: #ffffff;
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-glow: rgba(139, 92, 246, 0.35);
  --accent-dim: rgba(139, 92, 246, 0.15);
  --accent-text: #ffffff;
  --timer-glow-rgb: 139, 92, 246;
  --timer-glow-color: #8b5cf6;

  --shadow: 0 8px 32px rgba(10, 0, 20, 0.55);
  --border-focus: rgba(139, 92, 246, 0.4);
  --plan-card-bg: rgba(139, 92, 246, 0.06);
  --plan-card-border: rgba(139, 92, 246, 0.2);
  --plan-text-main: #ffffff;
  --plan-text-sub: rgba(255, 255, 255, 0.65);
  --plan-accent: #8b5cf6;
  --plan-accent-glow: rgba(139, 92, 246, 0.3);
}

/* ── THEME: MONO (Minimalist Monochrome) ── */
body.theme-mono,
body.mono-theme,
[data-theme="mono"] {
  --bg-deep: #000000;
  --bg-mid: #0a0a0a;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hv: rgba(255, 255, 255, 0.08);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.12);
  --border-hv: rgba(255, 255, 255, 0.25);
  --card-border: rgba(255, 255, 255, 0.12);
  --text-p: #ffffff;
  --text-s: rgba(255, 255, 255, 0.7);
  --text-m: rgba(255, 255, 255, 0.4);
  --accent: #ffffff;
  --accent-rgb: 255, 255, 255;
  --accent-glow: rgba(255, 255, 255, 0.3);
  --accent-dim: rgba(255, 255, 255, 0.1);
  --accent-text: #000000;
  --text-clock: #ffffff;
  --timer-glow-rgb: 255, 255, 255;
  --timer-glow-color: #ffffff;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  --border-focus: rgba(255, 255, 255, 0.4);
  --plan-card-bg: rgba(255, 255, 255, 0.03);
  --plan-card-border: rgba(255, 255, 255, 0.12);
  --plan-text-main: #ffffff;
  --plan-text-sub: rgba(255, 255, 255, 0.7);
  --plan-accent: #ffffff;
  --plan-accent-glow: rgba(255, 255, 255, 0.25);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --card-radius: 8px;
}

/* ── THEME: LITE (Ultra Performanslı / Sade Koyu Tema) ──
   Amaç: Sıfır görsel efekt yükü — gölge yok, blur yok, gradient yok,
   animasyon/transition yok. Eski cihaz ve mobilde maksimum FPS. */
body.theme-lite,
body.lite-theme,
[data-theme="lite"] {
  --bg-deep: #121212;
  --bg-mid: #181818;
  --bg-card: #1e1e1e;
  --bg-card-hv: #242424;
  --bg-glass: #1e1e1e;
  --border: #2a2a2a;
  --border-hv: #3a3a3a;
  --border-focus: #3b82f6;
  --card-border: #2a2a2a;

  --text-p: #e0e0e0;
  --text-s: #a0a0a0;
  --text-m: #707070;
  --text-clock: #e0e0e0;

  /* --accent, --accent-rgb, --accent-glow, --accent-dim, --accent-text BİLEREK
     burada SABİT tanımlanmıyor. Bu değerler Theme Studio'da seçilen vurgu rengine
     göre app.js tarafından <html> kökünde dinamik olarak set ediliyor
     (bkz. applyStudioState -> root.style.setProperty('--accent', ...)).
     Eğer burada body/[data-theme] seviyesinde sabit bir --accent tanımlarsak,
     CSS cascade kuralları gereği bu sabit değer, <html> üzerindeki dinamik
     değerin önüne geçer ve kullanıcı gri/yeşil vb. seçse bile arayüzün çoğu
     yeri mavi (#3b82f6) kalır. Bu yüzden fallback'i :root'a bırakıyoruz. */
  --accent-rgb: 59, 130, 246;
  --accent-dim: rgba(59, 130, 246, 0.12);
  --timer-glow-rgb: 59, 130, 246;
  --timer-glow-color: var(--accent, #3b82f6);

  --plan-card-bg: #1e1e1e;
  --plan-card-border: #2a2a2a;
  --plan-text-main: #e0e0e0;
  --plan-text-sub: #a0a0a0;
  --plan-accent: var(--accent, #3b82f6);
  --plan-accent-glow: var(--accent-glow, rgba(59, 130, 246, 0.25));

  --shadow: none;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --card-radius: 10px;
}

/* ── LITE Select/Dropdown Styling (solid, no blur, no gradient) ── */
body.theme-lite select,
body.theme-lite .plan-select,
body.theme-lite .plan-select-filter,
body.theme-lite .reminder-select,
body.theme-lite .studio-select,
body.theme-lite .settings-select,
body.lite-theme select,
body.lite-theme .plan-select,
body.lite-theme .plan-select-filter,
body.lite-theme .reminder-select,
body.lite-theme .studio-select,
body.lite-theme .settings-select,
[data-theme="lite"] select,
[data-theme="lite"] .plan-select,
[data-theme="lite"] .plan-select-filter,
[data-theme="lite"] .reminder-select,
[data-theme="lite"] .studio-select,
[data-theme="lite"] .settings-select {
  color-scheme: dark;
  background-color: #1e1e1e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #e0e0e0;
  border-color: #2a2a2a;
}

body.theme-lite select:hover,
body.theme-lite .plan-select:hover,
body.theme-lite .plan-select-filter:hover,
body.theme-lite .reminder-select:hover,
body.theme-lite .studio-select:hover,
body.theme-lite .settings-select:hover,
body.lite-theme select:hover,
body.lite-theme .plan-select:hover,
body.lite-theme .plan-select-filter:hover,
body.lite-theme .reminder-select:hover,
body.lite-theme .studio-select:hover,
body.lite-theme .settings-select:hover,
[data-theme="lite"] select:hover,
[data-theme="lite"] .plan-select:hover,
[data-theme="lite"] .plan-select-filter:hover,
[data-theme="lite"] .reminder-select:hover,
[data-theme="lite"] .studio-select:hover,
[data-theme="lite"] .settings-select:hover {
  border-color: #3a3a3a;
  background-color: #242424;
}

body.theme-lite select:focus,
body.theme-lite .plan-select:focus,
body.theme-lite .plan-select-filter:focus,
body.theme-lite .reminder-select:focus,
body.theme-lite .studio-select:focus,
body.theme-lite .settings-select:focus,
body.lite-theme select:focus,
body.lite-theme .plan-select:focus,
body.lite-theme .plan-select-filter:focus,
body.lite-theme .reminder-select:focus,
body.lite-theme .studio-select:focus,
body.lite-theme .settings-select:focus,
[data-theme="lite"] select:focus,
[data-theme="lite"] .plan-select:focus,
[data-theme="lite"] .plan-select-filter:focus,
[data-theme="lite"] .reminder-select:focus,
[data-theme="lite"] .studio-select:focus,
[data-theme="lite"] .settings-select:focus {
  border-color: var(--accent, #3b82f6);
  background-color: #242424;
}

body.theme-lite select option,
body.theme-lite select optgroup,
body.theme-lite .plan-select option,
body.theme-lite .plan-select optgroup,
body.theme-lite .plan-select-filter option,
body.theme-lite .plan-select-filter optgroup,
body.theme-lite .reminder-select option,
body.theme-lite .reminder-select optgroup,
body.theme-lite .studio-select option,
body.theme-lite .studio-select optgroup,
body.theme-lite .settings-select option,
body.theme-lite .settings-select optgroup,
body.lite-theme select option,
body.lite-theme select optgroup,
body.lite-theme .plan-select option,
body.lite-theme .plan-select optgroup,
body.lite-theme .plan-select-filter option,
body.lite-theme .plan-select-filter optgroup,
body.lite-theme .reminder-select option,
body.lite-theme .reminder-select optgroup,
body.lite-theme .studio-select option,
body.lite-theme .studio-select optgroup,
body.lite-theme .settings-select option,
body.lite-theme .settings-select optgroup,
[data-theme="lite"] select option,
[data-theme="lite"] select optgroup,
[data-theme="lite"] .plan-select option,
[data-theme="lite"] .plan-select optgroup,
[data-theme="lite"] .plan-select-filter option,
[data-theme="lite"] .plan-select-filter optgroup,
[data-theme="lite"] .reminder-select option,
[data-theme="lite"] .reminder-select optgroup,
[data-theme="lite"] .studio-select option,
[data-theme="lite"] .studio-select optgroup,
[data-theme="lite"] .settings-select option,
[data-theme="lite"] .settings-select optgroup {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* =====================================================
   LITE TEMA — KESİN PERFORMANS SIFIRLAMA (Zero Load)
   GPU/CPU yoran TÜM görsel efektleri kapatır:
   gölge, blur/cam efekti, animasyon/transition, glow.
===================================================== */
[data-theme="lite"] *,
[data-theme="lite"] *::before,
[data-theme="lite"] *::after,
body.theme-lite *,
body.theme-lite *::before,
body.theme-lite *::after,
body.lite-theme *,
body.lite-theme *::before,
body.lite-theme *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transition: none !important;
  /* ÖNEMLİ: "animation: none !important" KULLANMA.
     Birçok öğe girişte "opacity:0; animation: fadeIn .4s forwards;" gibi
     bir kalıpla görünür hale geliyor. Animasyonu tamamen kapatmak, öğeyi
     animasyonun BAŞLANGIÇ durumunda (opacity:0 → görünmez) kilitli bırakır.
     Bunun yerine animasyonu "anında bitecek" hale getirip forwards durumuna
     (opacity:1) ulaşmasını sağlıyoruz — performans kazancı aynı, görünürlük
     bozulmuyor. */
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
}

/* Ambient/parlama arka plan katmanları (blur + animasyon kullanır) —
   Lite temada tamamen kaldırılır, DOM'da render edilmez. */
[data-theme="lite"] .ambient-glow-layer,
[data-theme="lite"] .ambient-orb,
body.theme-lite .ambient-glow-layer,
body.theme-lite .ambient-orb,
body.lite-theme .ambient-glow-layer,
body.lite-theme .ambient-orb {
  display: none !important;
}

/* Gradient kullanan öğeler Lite temada düz (solid) renge döner */
[data-theme="lite"] [style*="linear-gradient"],
[data-theme="lite"] [style*="radial-gradient"],
body.theme-lite [style*="linear-gradient"],
body.theme-lite [style*="radial-gradient"],
body.lite-theme [style*="linear-gradient"],
body.lite-theme [style*="radial-gradient"] {
  background: var(--accent, #3b82f6) !important;
  background-image: none !important;
}

/* ── THEME: LITE BEYAZ (Ultra Performanslı / Sade Açık Tema) ──
   Lite tema ile birebir aynı mantık, sadece açık (beyaz) renk şemasıyla.
   Gölge yok, blur yok, gradient yok, animasyon/transition yok. */
body.theme-litewhite,
body.litewhite-theme,
[data-theme="litewhite"] {
  --bg-deep: #f4f4f4;
  --bg-mid: #eeeeee;
  --bg-card: #ffffff;
  --bg-card-hv: #ececec;
  --bg-glass: #ffffff;
  --border: #e0e0e0;
  --border-hv: #cccccc;
  --border-focus: #3b82f6;
  --card-border: #e0e0e0;

  --text-p: #1a1a1a;
  --text-s: #555555;
  --text-m: #6e6e6e;
  --text-clock: #1a1a1a;

  --danger: #dc2626;
  --warn: #d97706;
  --accent2: var(--accent, #3b82f6);
  --accent-text: #ffffff;
  --timer-glow-rgb: 59, 130, 246;
  --timer-glow-color: var(--accent, #3b82f6);

  --bar-idle: var(--accent, #3b82f6);
  --bar-running: var(--accent, #3b82f6);
  --bar-paused: #d97706;

  --plan-card-bg: #ffffff;
  --plan-card-border: #e0e0e0;
  --plan-text-main: #1a1a1a;
  --plan-text-sub: #555555;
  --plan-accent: var(--accent, #3b82f6);
  --plan-accent-glow: var(--accent-glow, rgba(59, 130, 246, 0.25));

  --auth-bg: #f4f4f4;
  --auth-card: #ffffff;
  --auth-card-inner: #f1f5f9;
  --auth-border: #e0e0e0;
  --auth-border-hv: #cccccc;
  --auth-text-p: #1a1a1a;
  --auth-text-s: #555555;
  --auth-text-m: #777777;

  --grp-bg: #f4f4f4;
  --grp-card: #ffffff;
  --grp-card-inner: #f1f5f9;
  --grp-border: #e0e0e0;
  --grp-border-hv: #cccccc;
  --grp-text-p: #1a1a1a;
  --grp-text-s: #555555;
  --grp-accent: var(--accent, #3b82f6);
  --grp-accent-glow: rgba(59, 130, 246, 0.25);

  --st-bg: #f4f4f4;
  --st-card: #ffffff;
  --st-card-inner: #f1f5f9;
  --st-border: #e0e0e0;
  --st-border-hv: #cccccc;
  --st-text-p: #1a1a1a;
  --st-text-s: #555555;
  --st-text-m: #777777;

  /* --accent BİLEREK burada SABİT tanımlanmıyor — Lite temadaki ile aynı sebep:
     app.js seçilen vurgu rengini <html> kökünde dinamik olarak set ediyor;
     burada sabit bir değer tanımlarsak kullanıcının seçtiği renk yerine
     hep bu sabit renk görünür. Fallback :root'a bırakılıyor. */
  --accent-rgb: 59, 130, 246;
  --accent-dim: rgba(59, 130, 246, 0.1);

  --shadow: none;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --card-radius: 10px;
}

/* ── LITE BEYAZ Select/Dropdown Styling (solid, no blur, no gradient) ── */
body.theme-litewhite select,
body.theme-litewhite .plan-select,
body.theme-litewhite .plan-select-filter,
body.theme-litewhite .reminder-select,
body.theme-litewhite .studio-select,
body.theme-litewhite .settings-select,
body.litewhite-theme select,
body.litewhite-theme .plan-select,
body.litewhite-theme .plan-select-filter,
body.litewhite-theme .reminder-select,
body.litewhite-theme .studio-select,
body.litewhite-theme .settings-select,
[data-theme="litewhite"] select,
[data-theme="litewhite"] .plan-select,
[data-theme="litewhite"] .plan-select-filter,
[data-theme="litewhite"] .reminder-select,
[data-theme="litewhite"] .studio-select,
[data-theme="litewhite"] .settings-select {
  color-scheme: light;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #1a1a1a;
  border-color: #e0e0e0;
}

body.theme-litewhite select:hover,
body.theme-litewhite .plan-select:hover,
body.theme-litewhite .plan-select-filter:hover,
body.theme-litewhite .reminder-select:hover,
body.theme-litewhite .studio-select:hover,
body.theme-litewhite .settings-select:hover,
body.litewhite-theme select:hover,
body.litewhite-theme .plan-select:hover,
body.litewhite-theme .plan-select-filter:hover,
body.litewhite-theme .reminder-select:hover,
body.litewhite-theme .studio-select:hover,
body.litewhite-theme .settings-select:hover,
[data-theme="litewhite"] select:hover,
[data-theme="litewhite"] .plan-select:hover,
[data-theme="litewhite"] .plan-select-filter:hover,
[data-theme="litewhite"] .reminder-select:hover,
[data-theme="litewhite"] .studio-select:hover,
[data-theme="litewhite"] .settings-select:hover {
  border-color: #cccccc;
  background-color: #ececec;
}

body.theme-litewhite select:focus,
body.theme-litewhite .plan-select:focus,
body.theme-litewhite .plan-select-filter:focus,
body.theme-litewhite .reminder-select:focus,
body.theme-litewhite .studio-select:focus,
body.theme-litewhite .settings-select:focus,
body.litewhite-theme select:focus,
body.litewhite-theme .plan-select:focus,
body.litewhite-theme .plan-select-filter:focus,
body.litewhite-theme .reminder-select:focus,
body.litewhite-theme .studio-select:focus,
body.litewhite-theme .settings-select:focus,
[data-theme="litewhite"] select:focus,
[data-theme="litewhite"] .plan-select:focus,
[data-theme="litewhite"] .plan-select-filter:focus,
[data-theme="litewhite"] .reminder-select:focus,
[data-theme="litewhite"] .studio-select:focus,
[data-theme="litewhite"] .settings-select:focus {
  border-color: var(--accent, #3b82f6);
  background-color: #ffffff;
}

body.theme-litewhite select option,
body.theme-litewhite select optgroup,
body.theme-litewhite .plan-select option,
body.theme-litewhite .plan-select optgroup,
body.theme-litewhite .plan-select-filter option,
body.theme-litewhite .plan-select-filter optgroup,
body.theme-litewhite .reminder-select option,
body.theme-litewhite .reminder-select optgroup,
body.theme-litewhite .studio-select option,
body.theme-litewhite .studio-select optgroup,
body.theme-litewhite .settings-select option,
body.theme-litewhite .settings-select optgroup,
body.litewhite-theme select option,
body.litewhite-theme select optgroup,
body.litewhite-theme .plan-select option,
body.litewhite-theme .plan-select optgroup,
body.litewhite-theme .plan-select-filter option,
body.litewhite-theme .plan-select-filter optgroup,
body.litewhite-theme .reminder-select option,
body.litewhite-theme .reminder-select optgroup,
body.litewhite-theme .studio-select option,
body.litewhite-theme .studio-select optgroup,
body.litewhite-theme .settings-select option,
body.litewhite-theme .settings-select optgroup,
[data-theme="litewhite"] select option,
[data-theme="litewhite"] select optgroup,
[data-theme="litewhite"] .plan-select option,
[data-theme="litewhite"] .plan-select optgroup,
[data-theme="litewhite"] .plan-select-filter option,
[data-theme="litewhite"] .plan-select-filter optgroup,
[data-theme="litewhite"] .reminder-select option,
[data-theme="litewhite"] .reminder-select optgroup,
[data-theme="litewhite"] .studio-select option,
[data-theme="litewhite"] .studio-select optgroup,
[data-theme="litewhite"] .settings-select option,
[data-theme="litewhite"] .settings-select optgroup {
  background-color: #ffffff;
  color: #1a1a1a;
}

/* =====================================================
   LITE BEYAZ TEMA — KESİN PERFORMANS SIFIRLAMA (Zero Load)
===================================================== */
[data-theme="litewhite"] *,
[data-theme="litewhite"] *::before,
[data-theme="litewhite"] *::after,
body.theme-litewhite *,
body.theme-litewhite *::before,
body.theme-litewhite *::after,
body.litewhite-theme *,
body.litewhite-theme *::before,
body.litewhite-theme *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transition: none !important;
  /* Bkz. Lite tema bloğundaki açıklama: "animation: none" yerine animasyonu
     anında bitiren bu yöntem kullanılıyor, aksi halde "opacity:0" ile başlayıp
     "forwards" ile görünür hale gelen öğeler kalıcı olarak görünmez kalıyordu
     — ekran görüntüsündeki "her şey soluk/okunmuyor" sorununun asıl nedeni buydu. */
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
}

/* Ambient/parlama arka plan katmanları — Lite Beyaz temada da tamamen kaldırılır */
[data-theme="litewhite"] .ambient-glow-layer,
[data-theme="litewhite"] .ambient-orb,
body.theme-litewhite .ambient-glow-layer,
body.theme-litewhite .ambient-orb,
body.litewhite-theme .ambient-glow-layer,
body.litewhite-theme .ambient-orb {
  display: none !important;
}

/* Gradient kullanan öğeler Lite Beyaz temada düz (solid) renge döner */
[data-theme="litewhite"] [style*="linear-gradient"],
[data-theme="litewhite"] [style*="radial-gradient"],
body.theme-litewhite [style*="linear-gradient"],
body.theme-litewhite [style*="radial-gradient"],
body.litewhite-theme [style*="linear-gradient"],
body.litewhite-theme [style*="radial-gradient"] {
  background: var(--accent, #3b82f6) !important;
  background-image: none !important;
}

/* =====================================================
   UNIVERSAL SELECT & DROPDOWN STYLING (ALL THEMES)
   Eliminates white-on-white text bug across browsers & OS
===================================================== */

select,
.plan-select,
.plan-select-filter,
.reminder-select,
.studio-select,
.settings-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-color: var(--bg-card, rgba(255, 255, 255, 0.06));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
  padding-right: 36px !important;
  color: var(--text-p, #f1f5f9);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md, 10px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

select:hover,
.plan-select:hover,
.plan-select-filter:hover,
.reminder-select:hover,
.studio-select:hover,
.settings-select:hover {
  border-color: var(--border-hv, rgba(255, 255, 255, 0.24));
  background-color: var(--bg-card-hv, rgba(255, 255, 255, 0.09));
}

select:focus,
.plan-select:focus,
.plan-select-filter:focus,
.reminder-select:focus,
.studio-select:focus,
.settings-select:focus {
  border-color: var(--accent, #f97316);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(249, 115, 22, 0.22));
  background-color: var(--bg-card-hv, rgba(255, 255, 255, 0.1));
}

/* Base Option & Optgroup Styling (Dark / Default) */
select option,
select optgroup,
.plan-select option,
.plan-select optgroup,
.plan-select-filter option,
.plan-select-filter optgroup,
.reminder-select option,
.reminder-select optgroup,
.studio-select option,
.studio-select optgroup,
.settings-select option,
.settings-select optgroup {
  background-color: #161622;
  color: #f8fafc;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 14px;
}

/* ── Light Theme Select Styling ── */
body.theme-light select,
body.theme-light .plan-select,
body.theme-light .plan-select-filter,
body.theme-light .reminder-select,
body.theme-light .studio-select,
body.theme-light .settings-select,
body.light-theme select,
body.light-theme .plan-select,
body.light-theme .plan-select-filter,
body.light-theme .reminder-select,
body.light-theme .studio-select,
body.light-theme .settings-select,
[data-theme="light"] select,
[data-theme="light"] .plan-select,
[data-theme="light"] .plan-select-filter,
[data-theme="light"] .reminder-select,
[data-theme="light"] .studio-select,
[data-theme="light"] .settings-select {
  color-scheme: light;
  background-color: rgba(255, 255, 255, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
}

body.theme-light select:hover,
body.theme-light .plan-select:hover,
body.theme-light .plan-select-filter:hover,
body.theme-light .reminder-select:hover,
body.theme-light .studio-select:hover,
body.theme-light .settings-select:hover,
body.light-theme select:hover,
body.light-theme .plan-select:hover,
body.light-theme .plan-select-filter:hover,
body.light-theme .reminder-select:hover,
body.light-theme .studio-select:hover,
body.light-theme .settings-select:hover,
[data-theme="light"] select:hover,
[data-theme="light"] .plan-select:hover,
[data-theme="light"] .plan-select-filter:hover,
[data-theme="light"] .reminder-select:hover,
[data-theme="light"] .studio-select:hover,
[data-theme="light"] .settings-select:hover {
  border-color: rgba(15, 23, 42, 0.28);
  background-color: rgba(255, 255, 255, 0.95);
}

body.theme-light select:focus,
body.theme-light .plan-select:focus,
body.theme-light .plan-select-filter:focus,
body.theme-light .reminder-select:focus,
body.theme-light .studio-select:focus,
body.theme-light .settings-select:focus,
body.light-theme select:focus,
body.light-theme .plan-select:focus,
body.light-theme .plan-select-filter:focus,
body.light-theme .reminder-select:focus,
body.light-theme .studio-select:focus,
body.light-theme .settings-select:focus,
[data-theme="light"] select:focus,
[data-theme="light"] .plan-select:focus,
[data-theme="light"] .plan-select-filter:focus,
[data-theme="light"] .reminder-select:focus,
[data-theme="light"] .studio-select:focus,
[data-theme="light"] .settings-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  background-color: #ffffff;
}

body.theme-light select option,
body.theme-light select optgroup,
body.theme-light .plan-select option,
body.theme-light .plan-select optgroup,
body.theme-light .plan-select-filter option,
body.theme-light .plan-select-filter optgroup,
body.theme-light .reminder-select option,
body.theme-light .reminder-select optgroup,
body.theme-light .studio-select option,
body.theme-light .studio-select optgroup,
body.theme-light .settings-select option,
body.theme-light .settings-select optgroup,
body.light-theme select option,
body.light-theme select optgroup,
body.light-theme .plan-select option,
body.light-theme .plan-select optgroup,
body.light-theme .plan-select-filter option,
body.light-theme .plan-select-filter optgroup,
body.light-theme .reminder-select option,
body.light-theme .reminder-select optgroup,
body.light-theme .studio-select option,
body.light-theme .studio-select optgroup,
body.light-theme .settings-select option,
body.light-theme .settings-select optgroup,
[data-theme="light"] select option,
[data-theme="light"] select optgroup,
[data-theme="light"] .plan-select option,
[data-theme="light"] .plan-select optgroup,
[data-theme="light"] .plan-select-filter option,
[data-theme="light"] .plan-select-filter optgroup,
[data-theme="light"] .reminder-select option,
[data-theme="light"] .reminder-select optgroup,
[data-theme="light"] .studio-select option,
[data-theme="light"] .studio-select optgroup,
[data-theme="light"] .settings-select option,
[data-theme="light"] .settings-select optgroup {
  background-color: #ffffff;
  color: #0f172a;
}

/* ── Pink Theme Select Styling ── */
body.theme-pink select,
body.theme-pink .plan-select,
body.theme-pink .plan-select-filter,
body.theme-pink .reminder-select,
body.theme-pink .studio-select,
body.theme-pink .settings-select,
body.pink-theme select,
body.pink-theme .plan-select,
body.pink-theme .plan-select-filter,
body.pink-theme .reminder-select,
body.pink-theme .studio-select,
body.pink-theme .settings-select,
[data-theme="pink"] select,
[data-theme="pink"] .plan-select,
[data-theme="pink"] .plan-select-filter,
[data-theme="pink"] .reminder-select,
[data-theme="pink"] .studio-select,
[data-theme="pink"] .settings-select {
  color-scheme: light;
  background-color: rgba(255, 255, 255, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f43f5e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #4c2f35;
  border-color: rgba(244, 63, 94, 0.25);
}

body.theme-pink select:hover,
body.theme-pink .plan-select:hover,
body.theme-pink .plan-select-filter:hover,
body.theme-pink .reminder-select:hover,
body.theme-pink .studio-select:hover,
body.theme-pink .settings-select:hover,
body.pink-theme select:hover,
body.pink-theme .plan-select:hover,
body.pink-theme .plan-select-filter:hover,
body.pink-theme .reminder-select:hover,
body.pink-theme .studio-select:hover,
body.pink-theme .settings-select:hover,
[data-theme="pink"] select:hover,
[data-theme="pink"] .plan-select:hover,
[data-theme="pink"] .plan-select-filter:hover,
[data-theme="pink"] .reminder-select:hover,
[data-theme="pink"] .studio-select:hover,
[data-theme="pink"] .settings-select:hover {
  border-color: rgba(244, 63, 94, 0.45);
  background-color: rgba(255, 255, 255, 0.95);
}

body.theme-pink select:focus,
body.theme-pink .plan-select:focus,
body.theme-pink .plan-select-filter:focus,
body.theme-pink .reminder-select:focus,
body.theme-pink .studio-select:focus,
body.theme-pink .settings-select:focus,
body.pink-theme select:focus,
body.pink-theme .plan-select:focus,
body.pink-theme .plan-select-filter:focus,
body.pink-theme .reminder-select:focus,
body.pink-theme .studio-select:focus,
body.pink-theme .settings-select:focus,
[data-theme="pink"] select:focus,
[data-theme="pink"] .plan-select:focus,
[data-theme="pink"] .plan-select-filter:focus,
[data-theme="pink"] .reminder-select:focus,
[data-theme="pink"] .studio-select:focus,
[data-theme="pink"] .settings-select:focus {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25);
  background-color: #ffffff;
}

body.theme-pink select option,
body.theme-pink select optgroup,
body.theme-pink .plan-select option,
body.theme-pink .plan-select optgroup,
body.theme-pink .plan-select-filter option,
body.theme-pink .plan-select-filter optgroup,
body.theme-pink .reminder-select option,
body.theme-pink .reminder-select optgroup,
body.theme-pink .studio-select option,
body.theme-pink .studio-select optgroup,
body.theme-pink .settings-select option,
body.theme-pink .settings-select optgroup,
body.pink-theme select option,
body.pink-theme select optgroup,
body.pink-theme .plan-select option,
body.pink-theme .plan-select optgroup,
body.pink-theme .plan-select-filter option,
body.pink-theme .plan-select-filter optgroup,
body.pink-theme .reminder-select option,
body.pink-theme .reminder-select optgroup,
body.pink-theme .studio-select option,
body.pink-theme .studio-select optgroup,
body.pink-theme .settings-select option,
body.pink-theme .settings-select optgroup,
[data-theme="pink"] select option,
[data-theme="pink"] select optgroup,
[data-theme="pink"] .plan-select option,
[data-theme="pink"] .plan-select optgroup,
[data-theme="pink"] .plan-select-filter option,
[data-theme="pink"] .plan-select-filter optgroup,
[data-theme="pink"] .reminder-select option,
[data-theme="pink"] .reminder-select optgroup,
[data-theme="pink"] .studio-select option,
[data-theme="pink"] .studio-select optgroup,
[data-theme="pink"] .settings-select option,
[data-theme="pink"] .settings-select optgroup {
  background-color: #ffffff;
  color: #4c2f35;
}

/* ── Aero Theme Select Styling ── */
body.theme-aero select,
body.theme-aero .plan-select,
body.theme-aero .plan-select-filter,
body.theme-aero .reminder-select,
body.theme-aero .studio-select,
body.theme-aero .settings-select,
body.aero-theme select,
body.aero-theme .plan-select,
body.aero-theme .plan-select-filter,
body.aero-theme .reminder-select,
body.aero-theme .studio-select,
body.aero-theme .settings-select {
  color-scheme: dark;
  background-color: rgba(0, 168, 255, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300a8ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #e0f2fe;
  border-color: rgba(0, 168, 255, 0.22);
}

body.theme-aero select:focus,
body.theme-aero .plan-select:focus,
body.theme-aero .plan-select-filter:focus,
body.theme-aero .reminder-select:focus,
body.theme-aero .studio-select:focus,
body.theme-aero .settings-select:focus,
body.aero-theme select:focus,
body.aero-theme .plan-select:focus,
body.aero-theme .plan-select-filter:focus,
body.aero-theme .reminder-select:focus,
body.aero-theme .studio-select:focus,
body.aero-theme .settings-select:focus {
  border-color: #00a8ff;
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.25);
}

body.theme-aero select option,
body.theme-aero select optgroup,
body.theme-aero .plan-select option,
body.theme-aero .plan-select optgroup,
body.theme-aero .plan-select-filter option,
body.theme-aero .plan-select-filter optgroup,
body.theme-aero .reminder-select option,
body.theme-aero .reminder-select optgroup,
body.theme-aero .studio-select option,
body.theme-aero .studio-select optgroup,
body.theme-aero .settings-select option,
body.theme-aero .settings-select optgroup,
body.aero-theme select option,
body.aero-theme select optgroup,
body.aero-theme .plan-select option,
body.aero-theme .plan-select optgroup,
body.aero-theme .plan-select-filter option,
body.aero-theme .plan-select-filter optgroup,
body.aero-theme .reminder-select option,
body.aero-theme .reminder-select optgroup,
body.aero-theme .studio-select option,
body.aero-theme .studio-select optgroup,
body.aero-theme .settings-select option,
body.aero-theme .settings-select optgroup {
  background-color: #0c1829;
  color: #e0f2fe;
}

/* ── Purple Theme Select Styling ── */
body.theme-purple select,
body.theme-purple .plan-select,
body.theme-purple .plan-select-filter,
body.theme-purple .reminder-select,
body.theme-purple .studio-select,
body.theme-purple .settings-select,
body.purple-theme select,
body.purple-theme .plan-select,
body.purple-theme .plan-select-filter,
body.purple-theme .reminder-select,
body.purple-theme .studio-select,
body.purple-theme .settings-select {
  color-scheme: dark;
  background-color: rgba(139, 92, 246, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #f3e8ff;
  border-color: rgba(139, 92, 246, 0.25);
}

body.theme-purple select:focus,
body.theme-purple .plan-select:focus,
body.theme-purple .plan-select-filter:focus,
body.theme-purple .reminder-select:focus,
body.theme-purple .studio-select:focus,
body.theme-purple .settings-select:focus,
body.purple-theme select:focus,
body.purple-theme .plan-select:focus,
body.purple-theme .plan-select-filter:focus,
body.purple-theme .reminder-select:focus,
body.purple-theme .studio-select:focus,
body.purple-theme .settings-select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

body.theme-purple select option,
body.theme-purple select optgroup,
body.theme-purple .plan-select option,
body.theme-purple .plan-select optgroup,
body.theme-purple .plan-select-filter option,
body.theme-purple .plan-select-filter optgroup,
body.theme-purple .reminder-select option,
body.theme-purple .reminder-select optgroup,
body.theme-purple .studio-select option,
body.theme-purple .studio-select optgroup,
body.theme-purple .settings-select option,
body.theme-purple .settings-select optgroup,
body.purple-theme select option,
body.purple-theme select optgroup,
body.purple-theme .plan-select option,
body.purple-theme .plan-select optgroup,
body.purple-theme .plan-select-filter option,
body.purple-theme .plan-select-filter optgroup,
body.purple-theme .reminder-select option,
body.purple-theme .reminder-select optgroup,
body.purple-theme .studio-select option,
body.purple-theme .studio-select optgroup,
body.purple-theme .settings-select option,
body.purple-theme .settings-select optgroup {
  background-color: #160d29;
  color: #f3e8ff;
}

/* ── Mono Theme Select Styling ── */
body.theme-mono select,
body.theme-mono .plan-select,
body.theme-mono .plan-select-filter,
body.theme-mono .reminder-select,
body.theme-mono .studio-select,
body.theme-mono .settings-select,
body.mono-theme select,
body.mono-theme .plan-select,
body.mono-theme .plan-select-filter,
body.mono-theme .reminder-select,
body.mono-theme .studio-select,
body.mono-theme .settings-select {
  color-scheme: dark;
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
}

body.theme-mono select option,
body.theme-mono select optgroup,
body.theme-mono .plan-select option,
body.theme-mono .plan-select optgroup,
body.theme-mono .plan-select-filter option,
body.theme-mono .plan-select-filter optgroup,
body.theme-mono .reminder-select option,
body.theme-mono .reminder-select optgroup,
body.theme-mono .studio-select option,
body.theme-mono .studio-select optgroup,
body.theme-mono .settings-select option,
body.theme-mono .settings-select optgroup,
body.mono-theme select option,
body.mono-theme select optgroup,
body.mono-theme .plan-select option,
body.mono-theme .plan-select optgroup,
body.mono-theme .plan-select-filter option,
body.mono-theme .plan-select-filter optgroup,
body.mono-theme .reminder-select option,
body.mono-theme .reminder-select optgroup,
body.mono-theme .studio-select option,
body.mono-theme .studio-select optgroup,
body.mono-theme .settings-select option,
body.mono-theme .settings-select optgroup {
  background-color: #000000;
  color: #ffffff;
}

/* =====================================================
   SAATDURUM — ÇEVRİMİÇİ ÜST BAR TEMA ENTEGRASYONU (ALL THEMES)
===================================================== */

/* ── Light Theme ── */
body.theme-light .online-top-tabs-nav,
body.light-theme .online-top-tabs-nav,
[data-theme="light"] .online-top-tabs-nav,
body.theme-light .grp-room-tabs,
body.light-theme .grp-room-tabs,
[data-theme="light"] .grp-room-tabs {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body.theme-light .online-top-tab,
body.light-theme .online-top-tab,
[data-theme="light"] .online-top-tab,
body.theme-light .grp-room-tab-btn,
body.light-theme .grp-room-tab-btn,
[data-theme="light"] .grp-room-tab-btn {
  color: #475569;
}
body.theme-light .online-top-tab:hover:not(.active),
body.light-theme .online-top-tab:hover:not(.active),
[data-theme="light"] .online-top-tab:hover:not(.active),
body.theme-light .grp-room-tab-btn:hover:not(.active),
body.light-theme .grp-room-tab-btn:hover:not(.active),
[data-theme="light"] .grp-room-tab-btn:hover:not(.active) {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.08);
}
body.theme-light .online-top-tab.active,
body.light-theme .online-top-tab.active,
[data-theme="light"] .online-top-tab.active,
body.theme-light .grp-room-tab-btn.active,
body.light-theme .grp-room-tab-btn.active,
[data-theme="light"] .grp-room-tab-btn.active {
  background: var(--accent, #2563eb);
  color: #ffffff;
  box-shadow: 0 4px 16px var(--accent-glow, rgba(37, 99, 235, 0.35)), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ── Litewhite Theme ── */
body.theme-litewhite .online-top-tabs-nav,
body.litewhite-theme .online-top-tabs-nav,
[data-theme="litewhite"] .online-top-tabs-nav,
body.theme-litewhite .grp-room-tabs,
body.litewhite-theme .grp-room-tabs,
[data-theme="litewhite"] .grp-room-tabs {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
body.theme-litewhite .online-top-tab,
body.litewhite-theme .online-top-tab,
[data-theme="litewhite"] .online-top-tab,
body.theme-litewhite .grp-room-tab-btn,
body.litewhite-theme .grp-room-tab-btn,
[data-theme="litewhite"] .grp-room-tab-btn {
  color: #555555;
}
body.theme-litewhite .online-top-tab:hover:not(.active),
body.litewhite-theme .online-top-tab:hover:not(.active),
[data-theme="litewhite"] .online-top-tab:hover:not(.active),
body.theme-litewhite .grp-room-tab-btn:hover:not(.active),
body.litewhite-theme .grp-room-tab-btn:hover:not(.active),
[data-theme="litewhite"] .grp-room-tab-btn:hover:not(.active) {
  background: #f1f5f9;
  color: #1a1a1a;
  border-color: #e2e8f0;
}
body.theme-litewhite .online-top-tab.active,
body.litewhite-theme .online-top-tab.active,
[data-theme="litewhite"] .online-top-tab.active,
body.theme-litewhite .grp-room-tab-btn.active,
body.litewhite-theme .grp-room-tab-btn.active,
[data-theme="litewhite"] .grp-room-tab-btn.active {
  background: var(--accent, #3b82f6);
  color: #ffffff;
  box-shadow: none;
}

/* ── Lite (Dark) Theme ── */
body.theme-lite .online-top-tabs-nav,
body.lite-theme .online-top-tabs-nav,
[data-theme="lite"] .online-top-tabs-nav,
body.theme-lite .grp-room-tabs,
body.lite-theme .grp-room-tabs,
[data-theme="lite"] .grp-room-tabs {
  background: #181818;
  border: 1px solid #2a2a2a;
  box-shadow: none;
}
body.theme-lite .online-top-tab,
body.lite-theme .online-top-tab,
[data-theme="lite"] .online-top-tab,
body.theme-lite .grp-room-tab-btn,
body.lite-theme .grp-room-tab-btn,
[data-theme="lite"] .grp-room-tab-btn {
  color: #a0a0a0;
}
body.theme-lite .online-top-tab:hover:not(.active),
body.lite-theme .online-top-tab:hover:not(.active),
[data-theme="lite"] .online-top-tab:hover:not(.active),
body.theme-lite .grp-room-tab-btn:hover:not(.active),
body.lite-theme .grp-room-tab-btn:hover:not(.active),
[data-theme="lite"] .grp-room-tab-btn:hover:not(.active) {
  background: #242424;
  color: #e0e0e0;
  border-color: #333333;
}
body.theme-lite .online-top-tab.active,
body.lite-theme .online-top-tab.active,
[data-theme="lite"] .online-top-tab.active,
body.theme-lite .grp-room-tab-btn.active,
body.lite-theme .grp-room-tab-btn.active,
[data-theme="lite"] .grp-room-tab-btn.active {
  background: var(--accent, #3b82f6);
  color: #ffffff;
  box-shadow: none;
}

/* ── Pink Theme ── */
body.theme-pink .online-top-tabs-nav,
body.pink-theme .online-top-tabs-nav,
[data-theme="pink"] .online-top-tabs-nav,
body.theme-pink .grp-room-tabs,
body.pink-theme .grp-room-tabs,
[data-theme="pink"] .grp-room-tabs {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(244, 63, 94, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(244, 63, 94, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body.theme-pink .online-top-tab,
body.pink-theme .online-top-tab,
[data-theme="pink"] .online-top-tab,
body.theme-pink .grp-room-tab-btn,
body.pink-theme .grp-room-tab-btn,
[data-theme="pink"] .grp-room-tab-btn {
  color: #8a636c;
}
body.theme-pink .online-top-tab:hover:not(.active),
body.pink-theme .online-top-tab:hover:not(.active),
[data-theme="pink"] .online-top-tab:hover:not(.active),
body.theme-pink .grp-room-tab-btn:hover:not(.active),
body.pink-theme .grp-room-tab-btn:hover:not(.active),
[data-theme="pink"] .grp-room-tab-btn:hover:not(.active) {
  background: rgba(244, 63, 94, 0.08);
  color: #4c2f35;
  border-color: rgba(244, 63, 94, 0.15);
}
body.theme-pink .online-top-tab.active,
body.pink-theme .online-top-tab.active,
[data-theme="pink"] .online-top-tab.active,
body.theme-pink .grp-room-tab-btn.active,
body.pink-theme .grp-room-tab-btn.active,
[data-theme="pink"] .grp-room-tab-btn.active {
  background: var(--accent, #f43f5e);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ── Aero Theme ── */
body.theme-aero .online-top-tabs-nav,
body.aero-theme .online-top-tabs-nav,
[data-theme="aero"] .online-top-tabs-nav,
body.theme-aero .grp-room-tabs,
body.aero-theme .grp-room-tabs,
[data-theme="aero"] .grp-room-tabs {
  background: rgba(4, 20, 48, 0.72);
  border: 1px solid rgba(0, 168, 255, 0.25);
  border-top: 1px solid rgba(0, 168, 255, 0.45);
  box-shadow: 0 12px 32px rgba(0, 10, 30, 0.6), inset 0 1px 0 rgba(0, 168, 255, 0.2);
}
body.theme-aero .online-top-tab,
body.aero-theme .online-top-tab,
[data-theme="aero"] .online-top-tab,
body.theme-aero .grp-room-tab-btn,
body.aero-theme .grp-room-tab-btn,
[data-theme="aero"] .grp-room-tab-btn {
  color: #93c5fd;
}
body.theme-aero .online-top-tab:hover:not(.active),
body.aero-theme .online-top-tab:hover:not(.active),
[data-theme="aero"] .online-top-tab:hover:not(.active),
body.theme-aero .grp-room-tab-btn:hover:not(.active),
body.aero-theme .grp-room-tab-btn:hover:not(.active),
[data-theme="aero"] .grp-room-tab-btn:hover:not(.active) {
  background: rgba(0, 168, 255, 0.12);
  color: #ffffff;
  border-color: rgba(0, 168, 255, 0.2);
}
body.theme-aero .online-top-tab.active,
body.aero-theme .online-top-tab.active,
[data-theme="aero"] .online-top-tab.active,
body.theme-aero .grp-room-tab-btn.active,
body.aero-theme .grp-room-tab-btn.active,
[data-theme="aero"] .grp-room-tab-btn.active {
  background: #00a8ff;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(0, 168, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ── Purple Theme ── */
body.theme-purple .online-top-tabs-nav,
body.purple-theme .online-top-tabs-nav,
[data-theme="purple"] .online-top-tabs-nav,
body.theme-purple .grp-room-tabs,
body.purple-theme .grp-room-tabs,
[data-theme="purple"] .grp-room-tabs {
  background: rgba(17, 7, 36, 0.7);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-top: 1px solid rgba(139, 92, 246, 0.45);
  box-shadow: 0 12px 32px rgba(10, 0, 20, 0.55), inset 0 1px 0 rgba(139, 92, 246, 0.2);
}
body.theme-purple .online-top-tab,
body.purple-theme .online-top-tab,
[data-theme="purple"] .online-top-tab,
body.theme-purple .grp-room-tab-btn,
body.purple-theme .grp-room-tab-btn,
[data-theme="purple"] .grp-room-tab-btn {
  color: rgba(255, 255, 255, 0.65);
}
body.theme-purple .online-top-tab:hover:not(.active),
body.purple-theme .online-top-tab:hover:not(.active),
[data-theme="purple"] .online-top-tab:hover:not(.active),
body.theme-purple .grp-room-tab-btn:hover:not(.active),
body.purple-theme .grp-room-tab-btn:hover:not(.active),
[data-theme="purple"] .grp-room-tab-btn:hover:not(.active) {
  background: rgba(139, 92, 246, 0.15);
  color: #ffffff;
  border-color: rgba(139, 92, 246, 0.2);
}
body.theme-purple .online-top-tab.active,
body.purple-theme .online-top-tab.active,
[data-theme="purple"] .online-top-tab.active,
body.theme-purple .grp-room-tab-btn.active,
body.purple-theme .grp-room-tab-btn.active,
[data-theme="purple"] .grp-room-tab-btn.active {
  background: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ── Mono Theme ── */
body.theme-mono .online-top-tabs-nav,
body.mono-theme .online-top-tabs-nav,
[data-theme="mono"] .online-top-tabs-nav,
body.theme-mono .grp-room-tabs,
body.mono-theme .grp-room-tabs,
[data-theme="mono"] .grp-room-tabs {
  background: rgba(15, 15, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  border-radius: 8px;
}
body.theme-mono .online-top-tab,
body.mono-theme .online-top-tab,
[data-theme="mono"] .online-top-tab,
body.theme-mono .grp-room-tab-btn,
body.mono-theme .grp-room-tab-btn,
[data-theme="mono"] .grp-room-tab-btn {
  color: rgba(255, 255, 255, 0.65);
  border-radius: 6px;
}
body.theme-mono .online-top-tab:hover:not(.active),
body.mono-theme .online-top-tab:hover:not(.active),
[data-theme="mono"] .online-top-tab:hover:not(.active),
body.theme-mono .grp-room-tab-btn:hover:not(.active),
body.mono-theme .grp-room-tab-btn:hover:not(.active),
[data-theme="mono"] .grp-room-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}
body.theme-mono .online-top-tab.active,
body.mono-theme .online-top-tab.active,
[data-theme="mono"] .online-top-tab.active,
body.theme-mono .grp-room-tab-btn.active,
body.mono-theme .grp-room-tab-btn.active,
[data-theme="mono"] .grp-room-tab-btn.active {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}