/* ============================================================
   THEME ARCHITECTURE — YKS KOÇLUK PLATFORMU
   DARK MODE = ESKİ KOYU PROFESYONEL TASARIM (#050B18, #0F1A2B)
   LIGHT MODE = YENİ TEMİZ PROFESYONEL AÇIK TASARIM (#F5F7FA, #FFFFFF)
   ============================================================ */

/* ------------------------------------------------------------
   1. DARK THEME TOKENS (KOYU TEMA - MASTER ESKİ KARAKTER)
   ------------------------------------------------------------ */
:root, [data-theme="dark"] {
  --bg-primary: #050B18;
  --bg-secondary: #08111F;
  --bg-app: #050B18;
  --bg-sidebar: #08111F;
  --bg-header: #08111F;
  --bg-card: #0F1A2B;
  --bg-elevated: #111D30;
  --bg-card-secondary: #111D30;
  --bg-card-hover: #15243B;
  --bg-card-selected: rgba(59, 130, 246, 0.2);
  --bg-input: #0A1220;

  --border: #24324A;
  --border-main: #24324A;
  --border-subtle: #1E2D42;
  --border-strong: #26364F;

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-disabled: #475569;

  --primary: #60A5FA;
  --primary-hover: #93C5FD;
  --primary-light-bg: rgba(96, 165, 250, 0.15);
  --primary-border: rgba(96, 165, 250, 0.3);

  --accent: #818CF8;
  --accent-soft: rgba(129, 140, 248, 0.15);

  --color-blue: #3B82F6;
  --color-blue-hover: #2563EB;
  --color-blue-subtle: rgba(59, 130, 246, 0.15);
  --color-cyan: #38BDF8;

  --success: #34D399;
  --success-soft: rgba(52, 211, 153, 0.15);
  --success-border: rgba(52, 211, 153, 0.3);
  
  --warning: #FB923C;
  --warning-soft: rgba(251, 146, 60, 0.15);
  --warning-border: rgba(251, 146, 60, 0.3);
  
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.15);
  --danger-border: rgba(248, 113, 113, 0.3);

  --info: #60A5FA;
  --info-soft: rgba(96, 165, 250, 0.15);
  --info-border: rgba(96, 165, 250, 0.3);

  --ai: #A78BFA;
  --ai-soft: rgba(167, 139, 250, 0.15);
  --ai-border: rgba(167, 139, 250, 0.3);
}

/* ------------------------------------------------------------
   2. LIGHT THEME TOKENS (AÇIK TEMA - MASTER CLEAN SaaS)
   ------------------------------------------------------------ */
[data-theme="light"] {
  --bg-primary: #F6F4FA;
  --bg-secondary: #FFFFFF;
  --bg-app: #F6F4FA;
  --bg-sidebar: #FFFFFF;
  --bg-header: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-card-secondary: #F8F6FB;
  --bg-card-hover: #F1EDF7;
  --bg-card-selected: #EFEAF8;
  --bg-input: #FFFFFF;

  --border: #E4DFEE;
  --border-main: #E4DFEE;
  --border-subtle: #ECE8F3;
  --border-strong: #D3CBE2;

  --text-primary: #1E1433;
  --text-secondary: #615A70;
  --text-muted: #8E879C;
  --text-disabled: #CBD5E1;

  --primary: #4C2A85;
  --primary-hover: #3A1F68;
  --primary-light-bg: #EFEAF8;
  --primary-border: #D3CBE2;

  --accent: #4C2A85;
  --accent-soft: #EFEAF8;

  --color-blue: #4C2A85;
  --color-blue-hover: #3A1F68;
  --color-blue-subtle: #EFEAF8;
  --color-cyan: #0284C7;

  --success: #059669;
  --success-soft: #F0FDF4;
  --success-border: #BBF7D0;

  --warning: #EA580C;
  --warning-soft: #FFFBEB;
  --warning-border: #FDE68A;

  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --danger-border: #FECACA;

  --info: #2563EB;
  --info-soft: #EFF6FF;
  --info-border: #BFDBFE;

  --ai: #7C3AED;
  --ai-soft: #F5F3FF;
  --ai-border: #DDD6FE;
}

/* ------------------------------------------------------------
   3. GLOBAL BASE STYLES & TRANSITIONS
   ------------------------------------------------------------ */
body {
  background-color: var(--bg-app) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Container surfaces */
.glass-card, .app-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.glass-card-hover:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

/* ------------------------------------------------------------
   4. BUTTON SYSTEM
   ------------------------------------------------------------ */
.btn-primary {
  background-color: var(--primary) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--primary) !important;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn-secondary {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-secondary:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--border-strong) !important;
}

.btn-success {
  background-color: var(--success) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--success) !important;
  border-radius: 8px;
  font-weight: 600;
}

.btn-danger {
  background-color: var(--danger) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--danger) !important;
  border-radius: 8px;
  font-weight: 600;
}

.btn-warning {
  background-color: var(--warning) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--warning) !important;
  border-radius: 8px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   5. BADGE & STATUS INDICATORS
   ------------------------------------------------------------ */
.badge-success {
  background-color: var(--success-soft) !important;
  color: var(--success) !important;
  border: 1px solid var(--success-border) !important;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 9999px;
}

.badge-warning {
  background-color: var(--warning-soft) !important;
  color: var(--warning) !important;
  border: 1px solid var(--warning-border) !important;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 9999px;
}

.badge-danger {
  background-color: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger-border) !important;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 9999px;
}

.badge-info {
  background-color: var(--info-soft) !important;
  color: var(--info) !important;
  border: 1px solid var(--info-border) !important;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 9999px;
}

.badge-ai {
  background-color: var(--ai-soft) !important;
  color: var(--ai) !important;
  border: 1px solid var(--ai-border) !important;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 9999px;
}

/* ------------------------------------------------------------
   6. INPUTS & FORM CONTROLS
   ------------------------------------------------------------ */
input, select, textarea {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

/* ------------------------------------------------------------
   7. SIDEBAR & HEADER NAV UNIFIED STYLING
   ------------------------------------------------------------ */
#mainSidebar, header {
  background-color: var(--bg-sidebar) !important;
  border-color: var(--border) !important;
}

#mainSidebar h2,
#mainSidebar #userNameLabel {
  color: var(--text-primary) !important;
}

#mainSidebar #userEmailLabel {
  color: var(--text-muted) !important;
}

.nav-item {
  color: var(--text-secondary) !important;
  border-radius: 10px;
  transition: all 0.15s ease;
}

.nav-item i {
  color: var(--text-secondary) !important;
}

.nav-item:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--text-primary) !important;
}

.nav-item.active {
  background: var(--primary-light-bg) !important;
  color: var(--primary) !important;
  border-left: 3.5px solid var(--primary) !important;
  font-weight: 700;
}

.nav-item.active i, .nav-item.active span {
  color: var(--primary) !important;
}

/* ------------------------------------------------------------
   8. TABLES & TABS
   ------------------------------------------------------------ */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  background-color: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

tbody tr {
  background-color: var(--bg-card) !important;
  transition: background-color 0.15s ease;
}

tbody tr:hover {
  background-color: var(--bg-card-hover) !important;
}

tbody td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

/* ------------------------------------------------------------
   9. STRICT DARK MODE OVERRIDES (NO WHITE SURFACES IN DARK MODE!)
   ------------------------------------------------------------ */
[data-theme="dark"], :root {
  color-scheme: dark;
}

/* Prevent any hardcoded white background classes from rendering white in dark mode */
:root:not([data-theme="light"]) .bg-white,
[data-theme="dark"] .bg-white,
:root:not([data-theme="light"]) .bg-slate-50,
[data-theme="dark"] .bg-slate-50,
:root:not([data-theme="light"]) .bg-slate-100,
[data-theme="dark"] .bg-slate-100,
:root:not([data-theme="light"]) .bg-gray-50,
[data-theme="dark"] .bg-gray-50 {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

:root:not([data-theme="light"]) .text-slate-900,
[data-theme="dark"] .text-slate-900,
:root:not([data-theme="light"]) .text-slate-800,
[data-theme="dark"] .text-slate-800,
:root:not([data-theme="light"]) .text-black,
[data-theme="dark"] .text-black {
  color: var(--text-primary) !important;
}

:root:not([data-theme="light"]) .text-slate-600,
[data-theme="dark"] .text-slate-600,
:root:not([data-theme="light"]) .text-slate-500,
[data-theme="dark"] .text-slate-500 {
  color: var(--text-secondary) !important;
}

:root:not([data-theme="light"]) .border-slate-200,
[data-theme="dark"] .border-slate-200,
:root:not([data-theme="light"]) .border-slate-300,
[data-theme="dark"] .border-slate-300 {
  border-color: var(--border) !important;
}

/* ------------------------------------------------------------
   10. LIGHT THEME SPECIFIC OVERRIDES
   ------------------------------------------------------------ */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-success,
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-warning,
[data-theme="light"] button.bg-blue-600,
[data-theme="light"] button.bg-indigo-600,
[data-theme="light"] button.bg-emerald-600,
[data-theme="light"] button.bg-purple-600,
[data-theme="light"] button.bg-rose-600 {
  color: #FFFFFF !important;
}

[data-theme="light"] .text-slate-200,
[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-\[\#A8B3C7\] {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .text-slate-500 {
  color: var(--text-muted) !important;
}

[data-theme="light"] .bg-\[\#080D1A\],
[data-theme="light"] .bg-\[\#0B1324\],
[data-theme="light"] .bg-\[\#0B1220\],
[data-theme="light"] .bg-\[\#111A2C\],
[data-theme="light"] .bg-slate-900,
[data-theme="light"] .bg-slate-950 {
  background-color: var(--bg-card-secondary) !important;
  border-color: var(--border) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-app);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

/* ------------------------------------------------------------
   ÖĞRENCİ "BUGÜN" PANELİ (sd-*) — iki temaya da token'larla uyar
   ------------------------------------------------------------ */
.sd { display: flex; flex-direction: column; gap: 20px; color: var(--text-primary); }
.sd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sd-date { font-size: 14px; color: var(--text-secondary); }
.sd-title { margin: 2px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.sd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); background: var(--primary-light-bg); border: 1px solid var(--primary-border); padding: 7px 12px; border-radius: 999px; }
.sd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1100px) { .sd-grid { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); } }
.sd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sd-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; }
.sd-card h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.sd-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.sd-muted { color: var(--text-secondary); font-size: 14px; }

.sd-progress { background: #141824; color: #fff; border: 0; }
[data-theme="dark"] .sd-progress, :root:not([data-theme="light"]) .sd-progress { background: linear-gradient(0deg, var(--bg-elevated), var(--bg-elevated)); border: 1px solid var(--border-strong); }
.sd-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sd-progress-top .sd-big { font-size: 22px; font-weight: 800; }
.sd-progress .sd-sub { color: #C9CDD8; font-size: 14px; }
.sd-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; margin: 12px 0; }
.sd-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .3s ease; }

.sd-next h3 { margin: 6px 0 4px; font-size: 19px; font-weight: 700; }
.sd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); transition: background .15s ease; }
.sd-btn:hover { background: var(--bg-card-hover); }
.sd-btn-primary { background: var(--color-blue); border-color: var(--color-blue); color: #fff; }
.sd-btn-primary:hover { background: var(--color-blue-hover); }
.sd-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }

.sd-list { display: flex; flex-direction: column; gap: 8px; }
.sd-task { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); cursor: pointer; }
.sd-task:hover { background: var(--bg-card-hover); }
.sd-task input[type=checkbox] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--color-blue); cursor: pointer; }
.sd-task-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sd-task-title { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.sd-task.is-done .sd-task-title { text-decoration: line-through; color: var(--text-secondary); }
.sd-task-meta { font-size: 13px; color: var(--text-secondary); }

.sd-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.sd-row:first-of-type { border-top: 0; padding-top: 0; }
.sd-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-due { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.sd-due-late { color: var(--danger); background: var(--danger-soft); }
.sd-due-soon { color: var(--warning); background: var(--warning-soft); }
.sd-due-ok { color: var(--text-secondary); background: var(--bg-card-secondary); }

.sd-coach { display: flex; align-items: center; gap: 12px; }
.sd-avatar { width: 44px; height: 44px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--color-blue); }
.sd-empty { text-align: center; padding: 24px 12px; border: 1px dashed var(--border-strong); border-radius: 14px; color: var(--text-secondary); font-size: 14px; }
.sd-empty strong { display: block; color: var(--text-primary); font-size: 15px; margin-bottom: 4px; }
.sd-net { font-size: 18px; font-weight: 800; }
.sd-link { color: var(--primary); font-weight: 600; font-size: 14px; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-link:hover { text-decoration: underline; }
.sd { color-scheme: dark; }
[data-theme="light"] .sd { color-scheme: light; }
.sd-task input[type=checkbox] { background-color: transparent; }
@media (max-width: 640px) {
  .sd-title { font-size: 24px; }
  .sd-card { padding: 16px; }
  .sd-row { flex-wrap: wrap; row-gap: 8px; }
  .sd-row-body { flex-basis: 100%; }
  .sd-row .sd-btn { margin-left: auto; }
}

/* ------------------------------------------------------------
   KOÇ "BUGÜN" PANELİ (kt-*) — sd-* parçalarını da kullanır
   ------------------------------------------------------------ */
.kt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kt-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kt-kpi span { font-size: 13px; color: var(--text-secondary); }
.kt-kpi strong { font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.kt-kpi strong small { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.kt-kpi .is-warn { color: var(--warning); }
.kt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.kt-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kt-avatar { width: 44px; height: 44px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.kt-urgent .kt-avatar { background: var(--warning-soft); color: var(--warning); }
.kt-check .kt-avatar { background: var(--primary-light-bg); color: var(--primary); }
.kt-who { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.kt-who b { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.kt-who span { font-size: 13px; color: var(--text-secondary); }
.kt-badge { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.kt-urgent .kt-badge { color: var(--warning); background: var(--warning-soft); border: 1px solid var(--warning-border); }
.kt-check .kt-badge { color: var(--primary); background: var(--primary-light-bg); border: 1px solid var(--primary-border); }
.kt-signals { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-primary); }
.kt-signals li { display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.kt-signals i { font-style: normal; font-weight: 700; width: 12px; flex: none; text-align: center; }
.kt-tone-down i { color: var(--danger); }
.kt-tone-warn i { color: var(--warning); }
.kt-tone-info i { color: var(--primary); }
.kt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-more { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; }
.kt-more summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text-primary); min-height: 28px; display: flex; align-items: center; }
.kt-more[open] summary { margin-bottom: 12px; }
.kt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-pill { font-size: 14px; padding: 8px 12px; border-radius: 999px; background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); cursor: pointer; }
.kt-agenda { display: flex; gap: 12px; align-items: baseline; font-size: 14px; padding: 6px 0; }
.kt-agenda b { min-width: 34px; font-size: 18px; color: var(--text-primary); }
.kt-msg { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; color: inherit; }
.kt-msg:first-of-type { border-top: 0; padding-top: 0; }
.kt-msg b { font-size: 14px; color: var(--text-primary); }
.kt-msg span { font-size: 14px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-requests { border-color: var(--warning-border); }

/* ------------------------------------------------------------
   GENEL GÖRÜNÜM YENİLEMESİ — tüm sayfalar
   ------------------------------------------------------------ */
.nav-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 14px 12px 4px; }
.nav-section-label:first-child { padding-top: 4px; }
.nav-item { min-height: 40px; }
/* lucide swaps <i> for <svg>: one calm icon colour instead of a rainbow */
.nav-item svg { color: var(--text-secondary) !important; }
.nav-item:hover svg { color: var(--text-primary) !important; }
.nav-item.active svg { color: var(--primary) !important; }
.nav-item.active { border-left-width: 3px !important; }

#pageTitle { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary) !important; }

.glass-card, .app-card { border-radius: 16px; }
.glass-card h3, .app-card h3 { letter-spacing: -0.005em; }

/* quieter section headers that were written in all caps */
.glass-card h3.uppercase, .glass-card h3 .uppercase { letter-spacing: 0.04em; }

/* focus that is visible on both themes */
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ------------------------------------------------------------
   HAFTALIK PROGRAM — GÜN LİSTESİ GÖRÜNÜMÜ (wd-*)
   ------------------------------------------------------------ */
.wd-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wd-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wd-select { min-height: 44px; min-width: 200px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 14px; }
.wd-weeknav { display: inline-flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.wd-weeknav button { min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--text-primary); font-size: 14px; font-weight: 600; cursor: pointer; }
.wd-weeknav button + button { border-left: 1px solid var(--border); }
.wd-weeknav button:hover { background: var(--bg-card-hover); }
.wd-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; font-size: 14px; color: var(--text-secondary); }
.wd-summary strong { font-size: 18px; color: var(--text-primary); margin-right: 4px; }
.wd-summary .sd-bar { flex: 1 1 200px; margin: 0; background: var(--bg-card-secondary); }
.wd-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.wd-backlog { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; }
.wd-backlog-items { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-backlog-items .wd-back-item { flex: 0 1 260px; min-width: 0; }
.wd-scroll { flex: 1 1 100%; min-width: 0; overflow-x: auto; padding-bottom: 4px; }
.wd-days { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 10px; min-width: 1030px; }
.wd-day { background: var(--bg-card-secondary); border: 1px solid var(--border); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 420px; }
.wd-day.is-today { border-color: var(--primary); background: var(--primary-light-bg); }
.wd-day.is-drop { outline: 2px dashed var(--primary); }
.wd-day-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 4px; }
.wd-day-head b { font-size: 14px; color: var(--text-primary); }
.wd-day-head span { font-size: 12px; color: var(--text-secondary); }
.wd-task { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.wd-task[draggable="true"] { cursor: grab; }
.wd-task-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.wd-task-title { font-size: 14px; font-weight: 500; color: var(--text-primary); overflow-wrap: anywhere; }
.wd-task.is-done .wd-task-title { text-decoration: line-through; color: var(--text-secondary); }
.wd-task.is-draft { border-style: dashed; }
.wd-task-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 22px; }
.wd-task-time { flex: 1; min-width: 0; flex-wrap: wrap; gap: 0 4px; }
.wd-task-time > span { white-space: nowrap; }
.wd-task-subject { font-weight: 600; color: var(--text-primary); }
.wd-task-subject > span:last-child { line-height: 1.3; }
.wd-task-actions { display: flex; gap: 0; flex-shrink: 0; margin: -4px -6px -4px 0; }
.wd-icon-btn { width: 24px; height: 24px; border-radius: 8px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wd-icon-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.wd-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin-top: 2px; }
.wd-check input { width: 18px; height: 18px; accent-color: var(--color-blue); margin: 0; }
.wd-add { margin-top: auto; min-height: 40px; border-radius: 10px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.wd-add:hover { color: var(--primary); border-color: var(--primary); }
.wd-back-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--bg-card); cursor: grab; }
.wd-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--primary); }
.wd-form { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.wd-form label { display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.wd-form input, .wd-form select { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 14px; }
.wd-form .wd-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ------------------------------------------------------------
   DENEME ANALİZİ — tek sayfa (dn-*)
   ------------------------------------------------------------ */
.dn-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dn-picker select { min-height: 44px; max-width: 100%; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 14px; }
.dn-delta-up { color: var(--success); font-weight: 600; font-size: 13px; }
.dn-delta-down { color: var(--danger); font-weight: 600; font-size: 13px; }
.dn-jump { position: sticky; top: 0; z-index: 5; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); }
.dn-jump button { font-size: 13px; font-weight: 600; color: var(--text-secondary); background: none; border: 0; min-height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer; }
.dn-jump button:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.dn-section { scroll-margin-top: 72px; }
.dn-section > h2 { margin: 8px 0 12px; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.dn-note { display: flex; gap: 12px; align-items: flex-start; background: var(--ai-soft); border: 1px solid var(--ai-border); border-radius: 16px; padding: 14px 16px; font-size: 14px; color: var(--text-primary); line-height: 1.55; }
.dn-note b { display: block; font-size: 13px; color: var(--ai); margin-bottom: 2px; }
.dn-warn { background: var(--warning-soft); border: 1px solid var(--warning-border); color: var(--text-primary); border-radius: 14px; padding: 12px 14px; font-size: 14px; }

/* ------------------------------------------------------------
   ÖĞRENCİLERİM — tablo (st-*)
   ------------------------------------------------------------ */
.st-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; }
.st-chip.is-on { background: var(--primary-light-bg); border-color: var(--primary-border); color: var(--primary); }
.st-search { flex: 1 1 220px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 14px; }
.st-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 880px; }
.st-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: transparent !important; }
.st-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); }
.st-table tr:last-child td { border-bottom: 0; }
.st-table tbody tr:hover td { background: var(--bg-card-hover); }
.st-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-name .kt-avatar { width: 36px; height: 36px; font-size: 13px; }
.st-name b { display: block; font-weight: 600; }
.st-name span { display: block; font-size: 12px; color: var(--text-secondary); }
.st-ok .kt-avatar { background: var(--success-soft); color: var(--success); }
.st-ok .kt-badge { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); }
.st-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-muted { color: var(--text-secondary); }
.st-reason { font-size: 12px; color: var(--text-secondary); max-width: 260px; }
.st-actions { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 760px) {
  .st-table { min-width: 0; }
  .st-table thead { display: none; }
  .st-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px; border-bottom: 1px solid var(--border); }
  .st-table td { padding: 0; border: 0; }
  .st-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-secondary); font-size: 12px; }
  .st-table td.st-c-name { grid-column: 1 / 2; }
  .st-table td.st-c-status { grid-column: 2 / 3; text-align: right; }
  .st-table td.st-c-actions { grid-column: 1 / -1; }
  .st-actions { justify-content: flex-start; flex-wrap: wrap; }
  .st-reason { max-width: none; }
}

.st-table .st-name .kt-avatar { display: flex !important; align-items: center !important; justify-content: center !important; flex: none; }
.st-table .st-name b { font-size: 15px !important; color: var(--text-primary); }
.st-table .st-name span span, .st-table .st-name > span > span { font-size: 12px !important; }
.st-table td { font-size: 14px !important; }
@media (max-width: 760px) { .st-table td { border: 0 !important; } .st-table tr { border-bottom: 1px solid var(--border) !important; } }

/* ------------------------------------------------------------
   AÇIK TEMA TAMAMLAMA KATMANI
   Eski ekranlarda koyu renkler doğrudan Tailwind sınıflarıyla yazılmış
   (opaklıklı varyantlar, degradeler, #1xxxxx tonları). Açık temada bunları
   token'lara çevirir. Koyu temaya dokunmaz.
   ------------------------------------------------------------ */

/* 1. Dark gradient panels -> plain card (gradient buttons/links and gradient text keep theirs) */
[data-theme="light"] [class*="bg-gradient-to-"]:not(button):not(a):not(.absolute):not(.fixed):not([class*="bg-clip-text"]):not([class*="from-indigo-6"]):not([class*="from-violet-6"]):not([class*="from-blue-6"]):not([class*="from-emerald-6"]):not([class*="from-rose-6"]):not([class*="from-[#4F8CFF]"]) {
  background-image: none !important;
  background-color: var(--bg-card) !important;
}

/* 2. Dark neutral surfaces, incl. opacity variants (bg-slate-900/60, bg-[#172238]...) */
[data-theme="light"] [class^="bg-slate-950"], [data-theme="light"] [class*=" bg-slate-950"],
[data-theme="light"] [class^="bg-slate-900"], [data-theme="light"] [class*=" bg-slate-900"],
[data-theme="light"] [class^="bg-slate-800"], [data-theme="light"] [class*=" bg-slate-800"],
[data-theme="light"] [class^="bg-gray-900"], [data-theme="light"] [class*=" bg-gray-900"],
[data-theme="light"] [class^="bg-gray-800"], [data-theme="light"] [class*=" bg-gray-800"],
[data-theme="light"] [class^="bg-[#080D1A]"],
[data-theme="light"] [class*=" bg-[#080D1A]"],
[data-theme="light"] [class^="bg-[#0B1220]"],
[data-theme="light"] [class*=" bg-[#0B1220]"],
[data-theme="light"] [class^="bg-[#0B1324]"],
[data-theme="light"] [class*=" bg-[#0B1324]"],
[data-theme="light"] [class^="bg-[#0E1526]"],
[data-theme="light"] [class*=" bg-[#0E1526]"],
[data-theme="light"] [class^="bg-[#111A2C]"],
[data-theme="light"] [class*=" bg-[#111A2C]"],
[data-theme="light"] [class^="bg-[#121B30]"],
[data-theme="light"] [class*=" bg-[#121B30]"],
[data-theme="light"] [class^="bg-[#141824]"],
[data-theme="light"] [class*=" bg-[#141824]"],
[data-theme="light"] [class^="bg-[#141E33]"],
[data-theme="light"] [class*=" bg-[#141E33]"],
[data-theme="light"] [class^="bg-[#172238]"],
[data-theme="light"] [class*=" bg-[#172238]"],
[data-theme="light"] [class^="bg-[#1A1828]"],
[data-theme="light"] [class*=" bg-[#1A1828]"],
[data-theme="light"] [class^="bg-[#1C1828]"],
[data-theme="light"] [class*=" bg-[#1C1828]"],
[data-theme="light"] [class^="bg-[#1E293B]"],
[data-theme="light"] [class*=" bg-[#1E293B]"] {
  background-color: var(--bg-card-secondary) !important;
}
[data-theme="light"] [class^="bg-slate-900"]:hover, [data-theme="light"] [class*=" bg-slate-900"]:hover,
[data-theme="light"] [class^="bg-slate-800"]:hover, [data-theme="light"] [class*=" bg-slate-800"]:hover,
[data-theme="light"] [class^="bg-[#080D1A]"]:hover,
[data-theme="light"] [class*=" bg-[#080D1A]"]:hover,
[data-theme="light"] [class^="bg-[#0B1220]"]:hover,
[data-theme="light"] [class*=" bg-[#0B1220]"]:hover,
[data-theme="light"] [class^="bg-[#0B1324]"]:hover,
[data-theme="light"] [class*=" bg-[#0B1324]"]:hover,
[data-theme="light"] [class^="bg-[#0E1526]"]:hover,
[data-theme="light"] [class*=" bg-[#0E1526]"]:hover,
[data-theme="light"] [class^="bg-[#111A2C]"]:hover,
[data-theme="light"] [class*=" bg-[#111A2C]"]:hover,
[data-theme="light"] [class^="bg-[#121B30]"]:hover,
[data-theme="light"] [class*=" bg-[#121B30]"]:hover,
[data-theme="light"] [class^="bg-[#141824]"]:hover,
[data-theme="light"] [class*=" bg-[#141824]"]:hover,
[data-theme="light"] [class^="bg-[#141E33]"]:hover,
[data-theme="light"] [class*=" bg-[#141E33]"]:hover,
[data-theme="light"] [class^="bg-[#172238]"]:hover,
[data-theme="light"] [class*=" bg-[#172238]"]:hover,
[data-theme="light"] [class^="bg-[#1A1828]"]:hover,
[data-theme="light"] [class*=" bg-[#1A1828]"]:hover,
[data-theme="light"] [class^="bg-[#1C1828]"]:hover,
[data-theme="light"] [class*=" bg-[#1C1828]"]:hover,
[data-theme="light"] [class^="bg-[#1E293B]"]:hover,
[data-theme="light"] [class*=" bg-[#1E293B]"]:hover { background-color: var(--bg-card-hover) !important; }

/* 3. Dark tinted surfaces -> soft tints */
[data-theme="light"] [class^="bg-indigo-950"], [data-theme="light"] [class*=" bg-indigo-950"], [data-theme="light"] [class^="bg-indigo-900"], [data-theme="light"] [class*=" bg-indigo-900"],
[data-theme="light"] [class^="bg-blue-950"], [data-theme="light"] [class*=" bg-blue-950"], [data-theme="light"] [class^="bg-blue-900"], [data-theme="light"] [class*=" bg-blue-900"],
[data-theme="light"] [class^="bg-sky-950"], [data-theme="light"] [class*=" bg-sky-950"], [data-theme="light"] [class^="bg-cyan-950"], [data-theme="light"] [class*=" bg-cyan-950"] { background-color: var(--primary-light-bg) !important; }
[data-theme="light"] [class^="bg-violet-950"], [data-theme="light"] [class*=" bg-violet-950"], [data-theme="light"] [class^="bg-purple-950"], [data-theme="light"] [class*=" bg-purple-950"],
[data-theme="light"] [class^="bg-violet-900"], [data-theme="light"] [class*=" bg-violet-900"], [data-theme="light"] [class^="bg-purple-900"], [data-theme="light"] [class*=" bg-purple-900"] { background-color: var(--ai-soft) !important; }
[data-theme="light"] [class^="bg-emerald-950"], [data-theme="light"] [class*=" bg-emerald-950"], [data-theme="light"] [class^="bg-emerald-900"], [data-theme="light"] [class*=" bg-emerald-900"],
[data-theme="light"] [class^="bg-green-950"], [data-theme="light"] [class*=" bg-green-950"], [data-theme="light"] [class^="bg-teal-950"], [data-theme="light"] [class*=" bg-teal-950"] { background-color: var(--success-soft) !important; }
[data-theme="light"] [class^="bg-rose-950"], [data-theme="light"] [class*=" bg-rose-950"], [data-theme="light"] [class^="bg-rose-900"], [data-theme="light"] [class*=" bg-rose-900"],
[data-theme="light"] [class^="bg-red-950"], [data-theme="light"] [class*=" bg-red-950"], [data-theme="light"] [class^="bg-red-900"], [data-theme="light"] [class*=" bg-red-900"] { background-color: var(--danger-soft) !important; }
[data-theme="light"] [class^="bg-amber-950"], [data-theme="light"] [class*=" bg-amber-950"], [data-theme="light"] [class^="bg-amber-900"], [data-theme="light"] [class*=" bg-amber-900"],
[data-theme="light"] [class^="bg-orange-950"], [data-theme="light"] [class*=" bg-orange-950"], [data-theme="light"] [class^="bg-yellow-950"], [data-theme="light"] [class*=" bg-yellow-950"] { background-color: var(--warning-soft) !important; }

/* 4. Dark borders */
[data-theme="light"] [class^="border-slate-7"], [data-theme="light"] [class*=" border-slate-7"], [data-theme="light"] [class^="border-slate-8"], [data-theme="light"] [class*=" border-slate-8"], [data-theme="light"] [class^="border-slate-9"], [data-theme="light"] [class*=" border-slate-9"],
[data-theme="light"] [class^="border-[#24314A]"], [data-theme="light"] [class*=" border-[#24314A]"], [data-theme="light"] [class^="border-[#2A3954]"], [data-theme="light"] [class*=" border-[#2A3954]"], [data-theme="light"] [class^="border-[#1E293B]"], [data-theme="light"] [class*=" border-[#1E293B]"], [data-theme="light"] [class^="border-[#172238]"], [data-theme="light"] [class*=" border-[#172238]"], [data-theme="light"] [class^="border-[#26364F]"], [data-theme="light"] [class*=" border-[#26364F]"], [data-theme="light"] [class^="border-[#1E2D42]"], [data-theme="light"] [class*=" border-[#1E2D42]"] { border-color: var(--border) !important; }
[data-theme="light"] [class^="border-indigo-7"], [data-theme="light"] [class*=" border-indigo-7"], [data-theme="light"] [class^="border-indigo-8"], [data-theme="light"] [class*=" border-indigo-8"], [data-theme="light"] [class^="border-indigo-9"], [data-theme="light"] [class*=" border-indigo-9"],
[data-theme="light"] [class^="border-blue-8"], [data-theme="light"] [class*=" border-blue-8"], [data-theme="light"] [class^="border-blue-9"], [data-theme="light"] [class*=" border-blue-9"] { border-color: var(--primary-border) !important; }
[data-theme="light"] [class^="border-emerald-8"], [data-theme="light"] [class*=" border-emerald-8"], [data-theme="light"] [class^="border-emerald-9"], [data-theme="light"] [class*=" border-emerald-9"] { border-color: var(--success-border) !important; }
[data-theme="light"] [class^="border-rose-8"], [data-theme="light"] [class*=" border-rose-8"], [data-theme="light"] [class^="border-rose-9"], [data-theme="light"] [class*=" border-rose-9"] { border-color: var(--danger-border) !important; }
[data-theme="light"] [class^="border-amber-8"], [data-theme="light"] [class*=" border-amber-8"], [data-theme="light"] [class^="border-amber-9"], [data-theme="light"] [class*=" border-amber-9"] { border-color: var(--warning-border) !important; }
[data-theme="light"] [class^="border-violet-8"], [data-theme="light"] [class*=" border-violet-8"], [data-theme="light"] [class^="border-purple-8"], [data-theme="light"] [class*=" border-purple-8"], [data-theme="light"] [class^="border-[#6F63D9]"], [data-theme="light"] [class*=" border-[#6F63D9]"] { border-color: var(--ai-border) !important; }

/* 5. Pale text meant for dark backgrounds -> readable on light */
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .text-indigo-200, [data-theme="light"] .text-indigo-300, [data-theme="light"] .text-indigo-400,
[data-theme="light"] .text-blue-300, [data-theme="light"] .text-blue-400, [data-theme="light"] .text-sky-300, [data-theme="light"] .text-sky-400,
[data-theme="light"] .text-cyan-300, [data-theme="light"] .text-cyan-400,
[data-theme="light"] .text-\[\#4F8CFF\], [data-theme="light"] .text-\[\#38BDF8\] { color: var(--primary) !important; }
[data-theme="light"] .text-emerald-300, [data-theme="light"] .text-emerald-400, [data-theme="light"] .text-green-400, [data-theme="light"] .text-\[\#22C55E\] { color: var(--success) !important; }
[data-theme="light"] .text-rose-300, [data-theme="light"] .text-rose-400, [data-theme="light"] .text-red-400 { color: var(--danger) !important; }
[data-theme="light"] .text-amber-300, [data-theme="light"] .text-amber-400, [data-theme="light"] .text-yellow-400, [data-theme="light"] .text-orange-400, [data-theme="light"] .text-\[\#F59E0B\] { color: var(--warning) !important; }
[data-theme="light"] .text-violet-300, [data-theme="light"] .text-violet-400, [data-theme="light"] .text-purple-300, [data-theme="light"] .text-purple-400,
[data-theme="light"] .text-\[\#AFA7FF\], [data-theme="light"] .text-\[\#7C6AE6\] { color: var(--ai) !important; }
[data-theme="light"] .text-\[\#F3F6FC\] { color: var(--text-primary) !important; }

/* ...but white stays white on solid coloured fills (buttons, badges, avatars, chat bubbles) */
[data-theme="light"] [class^="bg-indigo-5"].text-white,
[data-theme="light"] [class^="bg-indigo-5"] .text-white,
[data-theme="light"] [class*=" bg-indigo-5"].text-white,
[data-theme="light"] [class*=" bg-indigo-5"] .text-white,
[data-theme="light"] [class^="bg-indigo-6"].text-white,
[data-theme="light"] [class^="bg-indigo-6"] .text-white,
[data-theme="light"] [class*=" bg-indigo-6"].text-white,
[data-theme="light"] [class*=" bg-indigo-6"] .text-white,
[data-theme="light"] [class^="bg-indigo-7"].text-white,
[data-theme="light"] [class^="bg-indigo-7"] .text-white,
[data-theme="light"] [class*=" bg-indigo-7"].text-white,
[data-theme="light"] [class*=" bg-indigo-7"] .text-white,
[data-theme="light"] [class^="bg-blue-5"].text-white,
[data-theme="light"] [class^="bg-blue-5"] .text-white,
[data-theme="light"] [class*=" bg-blue-5"].text-white,
[data-theme="light"] [class*=" bg-blue-5"] .text-white,
[data-theme="light"] [class^="bg-blue-6"].text-white,
[data-theme="light"] [class^="bg-blue-6"] .text-white,
[data-theme="light"] [class*=" bg-blue-6"].text-white,
[data-theme="light"] [class*=" bg-blue-6"] .text-white,
[data-theme="light"] [class^="bg-violet-6"].text-white,
[data-theme="light"] [class^="bg-violet-6"] .text-white,
[data-theme="light"] [class*=" bg-violet-6"].text-white,
[data-theme="light"] [class*=" bg-violet-6"] .text-white,
[data-theme="light"] [class^="bg-purple-6"].text-white,
[data-theme="light"] [class^="bg-purple-6"] .text-white,
[data-theme="light"] [class*=" bg-purple-6"].text-white,
[data-theme="light"] [class*=" bg-purple-6"] .text-white,
[data-theme="light"] [class^="bg-emerald-5"].text-white,
[data-theme="light"] [class^="bg-emerald-5"] .text-white,
[data-theme="light"] [class*=" bg-emerald-5"].text-white,
[data-theme="light"] [class*=" bg-emerald-5"] .text-white,
[data-theme="light"] [class^="bg-emerald-6"].text-white,
[data-theme="light"] [class^="bg-emerald-6"] .text-white,
[data-theme="light"] [class*=" bg-emerald-6"].text-white,
[data-theme="light"] [class*=" bg-emerald-6"] .text-white,
[data-theme="light"] [class^="bg-green-6"].text-white,
[data-theme="light"] [class^="bg-green-6"] .text-white,
[data-theme="light"] [class*=" bg-green-6"].text-white,
[data-theme="light"] [class*=" bg-green-6"] .text-white,
[data-theme="light"] [class^="bg-rose-5"].text-white,
[data-theme="light"] [class^="bg-rose-5"] .text-white,
[data-theme="light"] [class*=" bg-rose-5"].text-white,
[data-theme="light"] [class*=" bg-rose-5"] .text-white,
[data-theme="light"] [class^="bg-rose-6"].text-white,
[data-theme="light"] [class^="bg-rose-6"] .text-white,
[data-theme="light"] [class*=" bg-rose-6"].text-white,
[data-theme="light"] [class*=" bg-rose-6"] .text-white,
[data-theme="light"] [class^="bg-red-6"].text-white,
[data-theme="light"] [class^="bg-red-6"] .text-white,
[data-theme="light"] [class*=" bg-red-6"].text-white,
[data-theme="light"] [class*=" bg-red-6"] .text-white,
[data-theme="light"] [class^="bg-amber-5"].text-white,
[data-theme="light"] [class^="bg-amber-5"] .text-white,
[data-theme="light"] [class*=" bg-amber-5"].text-white,
[data-theme="light"] [class*=" bg-amber-5"] .text-white,
[data-theme="light"] [class^="bg-amber-6"].text-white,
[data-theme="light"] [class^="bg-amber-6"] .text-white,
[data-theme="light"] [class*=" bg-amber-6"].text-white,
[data-theme="light"] [class*=" bg-amber-6"] .text-white,
[data-theme="light"] [class^="bg-orange-5"].text-white,
[data-theme="light"] [class^="bg-orange-5"] .text-white,
[data-theme="light"] [class*=" bg-orange-5"].text-white,
[data-theme="light"] [class*=" bg-orange-5"] .text-white,
[data-theme="light"] [class^="bg-orange-6"].text-white,
[data-theme="light"] [class^="bg-orange-6"] .text-white,
[data-theme="light"] [class*=" bg-orange-6"].text-white,
[data-theme="light"] [class*=" bg-orange-6"] .text-white,
[data-theme="light"] [class^="bg-[#4F8CFF]"].text-white,
[data-theme="light"] [class^="bg-[#4F8CFF]"] .text-white,
[data-theme="light"] [class*=" bg-[#4F8CFF]"].text-white,
[data-theme="light"] [class*=" bg-[#4F8CFF]"] .text-white,
[data-theme="light"] button[class*="bg-gradient-to-"].text-white,
[data-theme="light"] button[class*="bg-gradient-to-"] .text-white,
[data-theme="light"] a[class*="bg-gradient-to-"].text-white,
[data-theme="light"] a[class*="bg-gradient-to-"] .text-white,
[data-theme="light"] [class^="bg-[#2563EB]"].text-white,
[data-theme="light"] [class^="bg-[#2563EB]"] .text-white,
[data-theme="light"] [class*=" bg-[#2563EB]"].text-white,
[data-theme="light"] [class*=" bg-[#2563EB]"] .text-white,
[data-theme="light"] [class^="bg-[#1D4ED8]"].text-white,
[data-theme="light"] [class^="bg-[#1D4ED8]"] .text-white,
[data-theme="light"] [class*=" bg-[#1D4ED8]"].text-white,
[data-theme="light"] [class*=" bg-[#1D4ED8]"] .text-white,
[data-theme="light"] [class^="bg-[#059669]"].text-white,
[data-theme="light"] [class^="bg-[#059669]"] .text-white,
[data-theme="light"] [class*=" bg-[#059669]"].text-white,
[data-theme="light"] [class*=" bg-[#059669]"] .text-white,
[data-theme="light"] [class^="bg-[#047857]"].text-white,
[data-theme="light"] [class^="bg-[#047857]"] .text-white,
[data-theme="light"] [class*=" bg-[#047857]"].text-white,
[data-theme="light"] [class*=" bg-[#047857]"] .text-white,
[data-theme="light"] [class^="bg-[#6F63D9]"].text-white,
[data-theme="light"] [class^="bg-[#6F63D9]"] .text-white,
[data-theme="light"] [class*=" bg-[#6F63D9]"].text-white,
[data-theme="light"] [class*=" bg-[#6F63D9]"] .text-white,
[data-theme="light"] .btn-primary .text-white,
[data-theme="light"] .btn-primary-purple,
[data-theme="light"] .btn-primary-purple .text-white,
[data-theme="light"] .sd-btn-primary,
[data-theme="light"] .sd-avatar { color: #FFFFFF !important; }
[data-theme="light"] .btn-primary-purple svg, [data-theme="light"] button[class*="bg-indigo-6"] svg, [data-theme="light"] button[class*="bg-emerald-6"] svg { color: #FFFFFF !important; }

/* gradient-filled headings: show as solid text on light */
[data-theme="light"] [class*="bg-clip-text"] { background-image: none !important; -webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important; }
/* the menu keeps its own calm style */
[data-theme="light"] .nav-item { background-color: transparent !important; }
[data-theme="light"] .nav-item:hover { background-color: var(--bg-card-hover) !important; }
[data-theme="light"] .nav-item.active { background-color: var(--primary-light-bg) !important; }
[data-theme="light"] .nav-item svg[class] { color: var(--text-secondary) !important; }
[data-theme="light"] .nav-item.active svg[class] { color: var(--primary) !important; }

/* ------------------------------------------------------------
   ÖDEVLER — gruplu satırlar (as-*)
   ------------------------------------------------------------ */
.as-group { display: flex; flex-direction: column; gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 4px 18px; }
.as-group-head { display: flex; align-items: center; gap: 8px; padding: 14px 0 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.as-count { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-card-secondary); color: var(--text-secondary); }
.as-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.as-main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.as-title { font-size: 15px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.as-meta { font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.as-note { font-size: 13px; color: var(--text-primary); background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: 10px; padding: 6px 10px; margin-top: 4px; }
.as-progress { flex: 0 0 140px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.as-progress .sd-bar { margin: 0; height: 6px; background: var(--bg-card-secondary); }
.as-side { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.as-sched { font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-light-bg); border: 1px solid var(--primary-border); padding: 3px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.as-done .as-title { color: var(--text-secondary); text-decoration: line-through; }
@media (max-width: 640px) { .as-progress { flex: 1 1 100%; } .as-side { margin-left: 0; flex-wrap: wrap; } }
/* bright gradient fills (chat bubbles, hero buttons) keep white text and pale accents */
[data-theme="light"] [class*="from-indigo-5"].text-white, [data-theme="light"] [class*="from-indigo-5"] .text-white,
[data-theme="light"] [class*="from-indigo-6"].text-white, [data-theme="light"] [class*="from-indigo-6"] .text-white,
[data-theme="light"] [class*="from-indigo-7"].text-white, [data-theme="light"] [class*="from-indigo-7"] .text-white,
[data-theme="light"] [class*="from-violet-6"].text-white, [data-theme="light"] [class*="from-violet-6"] .text-white,
[data-theme="light"] [class*="from-blue-6"].text-white, [data-theme="light"] [class*="from-blue-6"] .text-white,
[data-theme="light"] [class*="from-emerald-6"].text-white, [data-theme="light"] [class*="from-emerald-6"] .text-white,
[data-theme="light"] [class*="from-rose-6"].text-white, [data-theme="light"] [class*="from-rose-6"] .text-white,
[data-theme="light"] [class*="from-[#4F8CFF]"].text-white, [data-theme="light"] [class*="from-[#4F8CFF]"] .text-white { color: #FFFFFF !important; }
[data-theme="light"] [class*="from-indigo-6"] .text-indigo-200, [data-theme="light"] [class*="from-indigo-6"] .text-indigo-300 { color: #E0E7FF !important; }

/* decorative overlays (absolute/fixed gradients, glows) stay out of the way on light */
[data-theme="light"] .absolute[class*="bg-gradient-to-"]:not(button):not(a),
[data-theme="light"] .absolute[class*="blur-"] { background-image: none !important; background-color: transparent !important; }


/* ============================================================
   V2 BRAND LAYER (Oct 2026): deep purple + yellow + green, shared by coach and student.
   Remaps the legacy blue/indigo brand classes to the purple brand in the light theme.
   ============================================================ */
body { font-family: 'Figtree', system-ui, sans-serif; }
[data-theme="light"] body { background: #F6F4FA !important; color: #1E1433; }
[data-theme="light"] .bg-\[\#4F8CFF\], [data-theme="light"] .bg-indigo-600, [data-theme="light"] .bg-indigo-500,
[data-theme="light"] .hover\:bg-\[\#4F8CFF\]:hover, [data-theme="light"] .bg-blue-600, [data-theme="light"] .bg-violet-600,
[data-theme="light"] .btn-primary-purple { background-color: #4C2A85 !important; color: #FFFFFF !important; border-color: #4C2A85 !important; }
[data-theme="light"] .hover\:bg-\[\#3b72df\]:hover, [data-theme="light"] .hover\:bg-indigo-500:hover, [data-theme="light"] .hover\:bg-\[\#3B78F0\]:hover,
[data-theme="light"] .hover\:bg-indigo-700:hover, [data-theme="light"] .hover\:bg-blue-700:hover { background-color: #3A1F68 !important; }
[data-theme="light"] .text-\[\#4F8CFF\], [data-theme="light"] .text-\[\#38BDF8\], [data-theme="light"] .text-\[\#7C6AE6\], [data-theme="light"] .text-\[\#2563EB\],
[data-theme="light"] .text-indigo-200, [data-theme="light"] .text-indigo-300, [data-theme="light"] .text-indigo-400, [data-theme="light"] .text-indigo-600,
[data-theme="light"] .text-violet-300, [data-theme="light"] .text-purple-300, [data-theme="light"] .text-purple-400 { color: #4C2A85 !important; }
[data-theme="light"] .border-\[\#4F8CFF\], [data-theme="light"] .border-\[\#7C6AE6\], [data-theme="light"] .border-indigo-500,
[data-theme="light"] .border-indigo-700, [data-theme="light"] .border-indigo-800 { border-color: #CDBFE6 !important; }
[data-theme="light"] .bg-indigo-950, [data-theme="light"] .bg-indigo-900, [data-theme="light"] .bg-violet-950 { background-color: #EFEAF8 !important; }
[data-theme="light"] #mainSidebar { background: #F6F4FA !important; border-color: #E4DFEE !important; }
[data-theme="light"] #mainSidebar .nav-item.active, [data-theme="light"] #mainSidebar .nav-item[aria-current="page"] {
  background: #FFFFFF !important; color: #1E1433 !important; box-shadow: 0 1px 2px rgba(30,20,51,.06); }
[data-theme="light"] main > header { background: rgba(246,244,250,.9) !important; border-color: #E4DFEE !important; }
.font-display { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; }

/* ============================================================
   V2 SCREENS (Oct 2026). og- = öğrenci (playful), kc- = koç (calm).
   Palette: purple #4C2A85 / deep #3B1F6B, yellow #FFC93C, green #1F9D6B.
   ============================================================ */
:root {
  --v2-purple: #4C2A85; --v2-purple-deep: #3B1F6B; --v2-purple-dark: #24124A; --v2-purple-soft: #EFEAF8;
  --v2-yellow: #FFC93C; --v2-yellow-soft: #FFF4CC; --v2-green: #1F9D6B; --v2-green-soft: #E3F5EA;
  --v2-ink: #1E1433; --v2-muted: #615A70; --v2-faint: #8E879C; --v2-line: #E4DFEE; --v2-ground: #F6F4FA;
  --v2-warn: #B45309;
}
.v2 { color: var(--v2-ink); font-family: 'Figtree', system-ui, sans-serif; }
.v2 h1, .v2 h2, .v2 h3 { margin: 0; }
.v2 button { font-family: inherit; }
.v2-btn { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--v2-line); background: #fff; color: var(--v2-ink); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.v2-btn:hover { background: var(--v2-purple-soft); }
.v2-btn-primary { background: var(--v2-purple); border-color: var(--v2-purple); color: #fff; }
.v2-btn-primary:hover { background: #3A1F68; }
.v2-btn-yellow { background: var(--v2-yellow); border-color: var(--v2-yellow); color: #2A1B00; }
.v2-btn-yellow:hover { background: #F2B91F; }
.v2-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.v2-link { background: none; border: 0; padding: 0; color: var(--v2-purple); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v2 :focus-visible { outline: 3px solid var(--v2-yellow); outline-offset: 2px; }
.v2-muted { color: var(--v2-muted); }
.v2-empty { padding: 24px; border: 1px dashed var(--v2-line); border-radius: 16px; color: var(--v2-muted); background: #fff; }
.v2-empty strong { display: block; color: var(--v2-ink); margin-bottom: 4px; }

/* ---------- Öğrenci ---------- */
.og { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }
.og-display { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.og-top { display: flex; align-items: center; gap: 12px; }
.og-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.og-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; }
.og-level { flex: 1; min-width: 0; font-size: 14px; color: var(--v2-muted); line-height: 1.35; }
.og-level strong { color: var(--v2-ink); }
.og-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; }
.og-hero { position: relative; overflow: hidden; border-radius: 24px; background: var(--v2-purple-deep); color: #fff; padding: 22px; }
.og-hero::before, .og-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.og-hero::before { width: 170px; height: 170px; right: -50px; top: -50px; background: #4A2A85; }
.og-hero::after { width: 96px; height: 96px; right: -13px; top: -13px; background: #5B3699; }
.og-hero > * { position: relative; z-index: 1; }
.og-hero-label { font-size: 14px; color: #D9CCF2; }
.og-hero h1 { margin-top: 6px; font-size: 30px; line-height: 1.08; max-width: 80%; }
.og-hero-meta { margin-top: 10px; font-size: 14px; color: #D9CCF2; }
.og-hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.og-xp { font-weight: 800; color: #FFE7A3; }
.og-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.og-section-head h2 { font-size: 20px; }
.og-section-head span { font-size: 13px; color: var(--v2-muted); }
.og-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.og-task { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; min-height: 56px; }
.og-task:hover { box-shadow: 0 0 0 2px var(--v2-purple-soft); }
.og-check { width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--v2-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; }
.og-task.is-done { opacity: .75; }
.og-task.is-done .og-check { background: var(--v2-green); border-color: var(--v2-green); }
.og-task.is-done .og-task-title { text-decoration: line-through; color: var(--v2-faint); }
.og-task-body { flex: 1; min-width: 0; }
.og-task-title { display: block; font-size: 15px; font-weight: 600; }
.og-task-meta { display: block; font-size: 13px; color: var(--v2-muted); margin-top: 2px; }
.og-task-xp { font-size: 13px; font-weight: 800; color: var(--v2-muted); white-space: nowrap; }
.og-task.is-done .og-task-xp { color: var(--v2-green); }
.og-subject { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.og-tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.og-tag-late { background: #FDECE3; color: var(--v2-warn); }
.og-tag-wait { background: var(--v2-yellow-soft); color: #6B4E00; }
.og-tag-fix { background: #FDECE3; color: var(--v2-warn); }
.og-tag-ok { background: var(--v2-green-soft); color: #157552; }
.og-chest { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--v2-yellow-soft); font-size: 14px; line-height: 1.4; }
.og-chest.is-open { background: var(--v2-green-soft); }
.og-card { padding: 16px; border-radius: 20px; background: #fff; }
.og-coach { display: flex; align-items: center; gap: 12px; }
.og-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--v2-purple); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
/* Haftam */
.og-path { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.og-path::before { content: ''; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 0; border-left: 6px dotted #D3CBE2; transform: translateX(-3px); }
.og-day { position: relative; display: flex; align-items: center; gap: 12px; width: 62%; }
.og-day:nth-child(odd) { align-self: flex-start; }
.og-day:nth-child(even) { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.og-bubble { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; background: #fff; border: 3px solid #D3CBE2; color: var(--v2-muted); cursor: pointer; }
.og-bubble.is-done { background: var(--v2-green); border-color: var(--v2-green); color: #fff; box-shadow: 0 5px 0 #157552; }
.og-bubble.is-today { background: var(--v2-yellow); border-color: var(--v2-yellow); color: #2A1B00; box-shadow: 0 5px 0 #D69E00; width: 66px; height: 66px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; }
.og-bubble.is-off { background: #F1EEF6; border-style: dashed; color: var(--v2-faint); }
.og-day-label { padding: 6px 10px; border-radius: 12px; background: #fff; font-size: 13px; color: var(--v2-muted); }
.og-day-label strong { color: var(--v2-ink); }
.og-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 13px; }
.og-bar-row { display: flex; align-items: center; gap: 10px; }
.og-bar-row > span:first-child { width: 86px; }
.og-bar { flex: 1; height: 10px; border-radius: 5px; background: #EFEAF6; overflow: hidden; }
.og-bar > span { display: block; height: 10px; border-radius: 5px; }
/* Netlerim */
.og-mountain { border-radius: 24px; background: var(--v2-green-soft); overflow: hidden; }
.og-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.og-badge { padding: 12px 8px; border-radius: 18px; background: #fff; text-align: center; font-size: 12px; }
.og-badge strong { display: block; font-size: 13px; margin-top: 6px; }
.og-badge.is-locked { background: #F1EEF6; color: var(--v2-faint); }
/* Ödev teslimi */
.og-sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(30, 20, 51, .55); display: flex; align-items: flex-end; justify-content: center; }
.og-sheet { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: var(--v2-ground); border-radius: 26px 26px 0 0; padding: 22px 20px 26px; }
@media (min-width: 640px) { .og-sheet-backdrop { align-items: center; } .og-sheet { border-radius: 26px; } }
.og-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.og-photo { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #fff; }
.og-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-photo button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(30,20,51,.7); color: #fff; font-weight: 800; cursor: pointer; }
.og-photo-add { aspect-ratio: 3 / 4; border-radius: 12px; border: 2px dashed #D3CBE2; background: #fff; color: var(--v2-purple); font-size: 28px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.og-done { text-align: center; color: #fff; background: var(--v2-purple-deep); border-radius: 26px; padding: 34px 20px 24px; }
.og-done-xp { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 14px; padding: 10px 16px; border-radius: 16px; background: var(--v2-purple-dark); }
.og-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid #D3CBE2; font: inherit; background: #fff; color: var(--v2-ink); }

/* ---------- Koç ---------- */
.kc { display: flex; gap: 40px; flex-wrap: wrap; max-width: 1180px; }
.kc-main { flex: 3 1 480px; min-width: 0; }
.kc-aside { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.kc h1 { font-size: 30px; font-weight: 700; }
.kc-lead { margin: 6px 0 26px; font-size: 15px; color: var(--v2-muted); }
.kc-todo { list-style: none; margin: 0; padding: 0; }
.kc-todo > li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--v2-line); }
.kc-todo > li:last-child { border-bottom: 1px solid var(--v2-line); }
.kc-todo input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--v2-green); flex-shrink: 0; }
.kc-todo-body { flex: 1; min-width: 0; }
.kc-todo-title { font-size: 16px; font-weight: 600; }
.kc-todo-text { font-size: 14px; color: var(--v2-muted); margin-top: 3px; line-height: 1.5; }
.kc-todo-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.kc-todo li.is-checked .kc-todo-title { text-decoration: line-through; color: var(--v2-faint); }
.kc-todo li.is-checked .kc-todo-text, .kc-todo li.is-checked .kc-todo-actions, .kc-todo li.is-checked .kc-reviews { display: none; }
.kc-prio { align-self: flex-start; font-size: 12px; font-weight: 700; color: #3D2A00; background: var(--v2-yellow); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.kc-aside h2 { font-size: 14px; font-weight: 600; color: var(--v2-muted); margin-bottom: 10px; }
.kc-stats { font-size: 15px; line-height: 1.8; }
.kc-reviews { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.kc-review { background: #fff; border: 1px solid var(--v2-line); border-radius: 14px; padding: 14px; }
.kc-review-photos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kc-review-photos img { width: 92px; height: 122px; object-fit: cover; border-radius: 10px; background: var(--v2-ground); cursor: zoom-in; }
.kc-review-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.kc-table-wrap { overflow-x: auto; background: #fff; border-radius: 14px; border: 1px solid var(--v2-line); }
.kc-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 15px; }
.kc-table th { text-align: left; color: var(--v2-muted); font-size: 13px; font-weight: 600; padding: 14px 12px; }
.kc-table th:first-child, .kc-table td:first-child { padding-left: 18px; }
.kc-table td { padding: 14px 12px; border-top: 1px solid #F0ECF6; vertical-align: top; }
.kc-table tr.is-click { cursor: pointer; }
.kc-table tr.is-click:hover td { background: #FAF8FC; }
.kc-up { color: var(--v2-green); font-size: 13px; }
.kc-down { color: var(--v2-warn); font-size: 13px; }
.kc-warn { color: var(--v2-warn); }
.kc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; }
.kc-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #D3CBE2; background: #fff; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--v2-ink); }
.kc-chip.is-on { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
.v2-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 80; background: var(--v2-ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(30,20,51,.25); }
@media (prefers-reduced-motion: no-preference) { .v2-pop { animation: v2pop .35s ease-out; } @keyframes v2pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } } }

#mobileBottomNav { background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-top: 1px solid var(--v2-line); border-radius: 20px 20px 0 0; }
.v2-bnav { flex: 1; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--v2-muted); background: none; border: 0; }
.v2-bnav.is-on { color: var(--v2-purple); font-weight: 800; }
/* light-theme layer forces heading colours; keep text on purple surfaces white */
.og-hero h1, .og-hero .og-display, [data-theme="light"] .og-hero h1, .og-done h2, [data-theme="light"] .og-done h2 { color: #FFFFFF !important; }
[data-theme="light"] .og-hero, [data-theme="light"] .og-done { color: #FFFFFF; }
.kc-todo input[type=checkbox] { appearance: auto !important; -webkit-appearance: checkbox !important; background-color: #fff !important; border-color: #8E879C !important; }
.kc-table th { text-transform: none !important; letter-spacing: 0 !important; }
/* Login: keep the button label white in every theme */
#loginSubmitBtn, #loginSubmitBtn span { color: #FFFFFF !important; }
/* Native controls (checkboxes, date pickers, scrollbars) follow the active theme */
html[data-theme="light"], [data-theme="light"] body { color-scheme: light; }
.kc-todo input[type=checkbox] { color-scheme: light; width: 22px; height: 22px; }
/* Small phones: keep the hero title readable */
@media (max-width: 380px) { .og-hero .og-display { font-size: 26px !important; } }

/* Unread messages on the phone bottom bar */
.v2-bnav { position: relative; }
.v2-bnav-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E11D48; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.v2-bnav-badge.hidden { display: none; }
.v2-card { background: #FFFFFF; border: 1px solid var(--v2-line, #E4DFEE); border-radius: 16px; color: #1E1433; }
[data-theme="dark"] .v2-card { background: #161B2E; border-color: #2A3148; color: #F3F6FC; }
.kc-table-wrap { position: relative; }  /* keeps screen-reader-only labels inside the scrolling table */