:root{
  --bg:#FBFBFD; --bg-card:#FFFFFF; --text:#111; --text-sec:#6B6B6B;
  --sep:#E5E5EA; --fill:#F2F2F7; --tint:#0A84FF; --success:#34C759;
  --radius:12px; --radius-lg:16px; --shadow:0 1px 2px rgba(0,0,0,.06);
  --space:16px; --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,system-ui,sans-serif;
  
  /* Переменные для кнопок и компонентов (светлая тема) */
  --primary: #0A84FF;
  --primary-dark: #0056CC;
  --primary-light: #5AC8FA;
  --success: #34C759;
  --success-light: #D4F5D4;
  --warning: #FF9500;
  --warning-bg: #FFF3E0;
  --danger: #FF3B30;
  --danger-light: #FFE5E5;
  --white: #FFFFFF;
  --gray-50: #F9F9F9;
  --gray-100: #F2F2F7;
  --gray-200: #E5E5EA;
  --gray-300: #D1D1D6;
  --gray-400: #C7C7CC;
  --gray-500: #AEAEB2;
  --gray-600: #8E8E93;
  --gray-700: #636366;
  --gray-800: #48484A;
  --gray-900: #1C1C1E;
  
  /* Переменные для расписания (светлая тема по умолчанию) */
  --bg-primary: #FBFBFD;
  --bg-secondary: #FFFFFF;
  --bg-accent: rgba(255, 107, 107, 0.1);
  --border-primary: #E5E5EA;
  --primary-color: #0A84FF;
  --primary-dark: #0056CC;
  --success-color: #34C759;
  --warning-color: #FF9500;
  --accent-primary: #AF52DE;
  --accent-secondary: #FF8E8E;
}

/* Светлая тема */
.light-theme, html.light-theme {
  --bg:#FBFBFD; 
  --bg-card:#FFFFFF; 
  --text:#111; 
  --text-sec:#6B6B6B;
  --sep:#E5E5EA; 
  --fill:#F2F2F7; 
  --tint:#0A84FF; 
  --success:#34C759;
  --shadow:0 1px 2px rgba(0,0,0,.06);
}

/* Тёмная тема */
.dark-theme, html.dark-theme {
  --bg:#000; 
  --bg-card:#1C1C1E; 
  --text:#fff; 
  --text-sec:#AEAEB2; 
  --sep:#2C2C2E; 
  --fill:#1C1C1E; 
  --success:#34C759;
  --shadow:0 1px 2px rgba(255,255,255,.1);
  
  /* Переменные для кнопок и компонентов (темная тема) */
  --primary: #0A84FF;
  --primary-dark: #0056CC;
  --primary-light: #5AC8FA;
  --success: #34C759;
  --success-light: #1A4A1A;
  --warning: #FF9500;
  --warning-bg: #2D1B00;
  --danger: #FF3B30;
  --danger-light: #4A1A1A;
  --white: #FFFFFF;
  --gray-50: #F9F9F9;
  --gray-100: #F2F2F7;
  --gray-200: #E5E5EA;
  --gray-300: #D1D1D6;
  --gray-400: #C7C7CC;
  --gray-500: #AEAEB2;
  --gray-600: #8E8E93;
  --gray-700: #636366;
  --gray-800: #48484A;
  --gray-900: #1C1C1E;
  
  /* Переменные для расписания в темной теме */
  --bg-primary: #000000;
  --bg-secondary: #1C1C1E;
  --bg-accent: rgba(255, 107, 107, 0.2);
  --border-primary: #2C2C2E;
  --primary-color: #0A84FF;
  --primary-dark: #0056CC;
  --success-color: #34C759;
  --warning-color: #FF9500;
  --accent-primary: #AF52DE;
  --accent-secondary: #FF8E8E;
}

@media (prefers-color-scheme: dark){
 :root{ 
   --bg:#000; 
   --bg-card:#1C1C1E; 
   --text:#fff; 
   --text-sec:#AEAEB2; 
   --sep:#2C2C2E; 
   --fill:#1C1C1E;
   
   /* Переменные для кнопок и компонентов (системная темная тема) */
   --primary: #0A84FF;
   --primary-dark: #0056CC;
   --primary-light: #5AC8FA;
   --success: #34C759;
   --warning: #FF9500;
   --warning-bg: #2D1B00;
   --danger: #FF3B30;
   --white: #FFFFFF;
   --gray-50: #F9F9F9;
   --gray-100: #F2F2F7;
   --gray-200: #E5E5EA;
   --gray-300: #D1D1D6;
   --gray-400: #C7C7CC;
   --gray-500: #AEAEB2;
   --gray-600: #8E8E93;
   --gray-700: #636366;
   --gray-800: #48484A;
   --gray-900: #1C1C1E;
   
   /* Переменные для расписания в темной теме */
   --bg-primary: #000000;
   --bg-secondary: #1C1C1E;
   --bg-accent: rgba(255, 107, 107, 0.2);
   --border-primary: #2C2C2E;
   --primary-color: #0A84FF;
   --primary-dark: #0056CC;
   --success-color: #34C759;
   --warning-color: #FF9500;
   --accent-primary: #AF52DE;
   --accent-secondary: #FF8E8E;
 }
}

body{background:var(--bg);color:var(--text);font-family:var(--font);transition:background-color 0.3s ease, color 0.3s ease}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-card);border-bottom:1px solid var(--sep);position:sticky;top:0;z-index:2;transition:background-color 0.3s ease, border-color 0.3s ease}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand-logo{width:32px;height:32px;object-fit:contain;transition:all 0.3s ease}
.brand-logo:hover{transform:scale(1.1)}
.nav a{margin-right:12px;text-decoration:none;color:var(--text-sec);transition:color 0.3s ease}
.nav a.active,.nav a:hover{color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:16px}
.ui-muted{color:var(--text-sec)}

/* Дополнительные элементы для правильного отображения тем */
.ui-btn {
  background: var(--bg-card);
  color: var(--text);
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ui-btn:hover {
  background: var(--fill);
  border-color: transparent;
}

.ui-btn.active {
  background: var(--tint);
  color: white;
  border-color: transparent;
}

.ui-card, .card {
  background: var(--bg-card);
  border: 1px solid var(--sep);
  color: var(--text);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.ui-input, .ui-select, .ui-textarea, input, select, textarea {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--sep);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ui-input:focus, .ui-select:focus, .ui-textarea:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--tint);
  outline: none;
}

table {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--sep);
}

th, td {
  border: 1px solid var(--sep);
  color: var(--text);
}

th {
  background: var(--fill);
}

/* iOS статус-бар для разных тем */
@supports (-webkit-touch-callout: none) {
  .dark-theme {
    /* Темная тема - черный статус-бар */
    --status-bar-bg: #000000;
  }
  
  .light-theme {
    /* Светлая тема - белый статус-бар */
    --status-bar-bg: #ffffff;
  }
}

/* Системная тема - в зависимости от системной */
@media (prefers-color-scheme: dark) {
  :root {
    --status-bar-bg: #000000;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --status-bar-bg: #ffffff;
  }
}



/* Переключатели темы и языка */
#btn-theme-light, #btn-theme-dark, #btn-theme-auto,
#btn-lang-ru, #btn-lang-en {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--sep);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#btn-theme-light:hover, #btn-theme-dark:hover, #btn-theme-auto:hover,
#btn-lang-ru:hover, #btn-lang-en:hover {
  background: var(--fill);
  border-color: var(--tint);
}

#btn-theme-light.active, #btn-theme-dark.active, #btn-theme-auto.active,
#btn-lang-ru.active, #btn-lang-en.active {
  background: var(--tint);
  color: white;
  border-color: var(--tint);
}