/* =====================================================
   eLearning Pack - Главни стилове
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ── LIGHT THEME (default) ── */
:root {
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;

  --accent: #06b6d4;
  --accent-light: #67e8f9;
  --accent-dark: #0891b2;

  --success: #22c55e;
  --success-light: #bbf7d0;
  --error: #ef4444;
  --error-light: #fecaca;
  --warning: #f59e0b;
  --warning-light: #fde68a;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-light: #94a3b8;

  --bg-primary: #f0f9ff;
  --bg-card: #ffffff;
  --bg-card2: #f8fafc;
  --border: #bae6fd;
  --border-light: #e0f2fe;

  --shadow-sm: 0 1px 3px rgba(14,165,233,0.08);
  --shadow: 0 4px 16px rgba(14,165,233,0.12);
  --shadow-lg: 0 8px 32px rgba(14,165,233,0.18);
  --shadow-xl: 0 16px 48px rgba(14,165,233,0.22);

  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-main: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --navbar-bg: rgba(255,255,255,0.88);
  --input-bg: #ffffff;
  --modal-bg: #ffffff;
  --table-head-bg: #f0f9ff;
  --progress-bg: #e0f2fe;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --sky-50: #0a1929;
  --sky-100: #0d2137;
  --sky-200: #103354;
  --sky-300: #38bdf8;
  --sky-400: #38bdf8;
  --sky-500: #38bdf8;
  --sky-600: #7dd3fc;
  --sky-700: #bae6fd;
  --sky-800: #e0f2fe;
  --sky-900: #f0f9ff;

  --accent: #22d3ee;
  --accent-light: #67e8f9;
  --accent-dark: #06b6d4;

  --success: #4ade80;
  --success-light: #14532d;
  --error: #f87171;
  --error-light: #450a0a;
  --warning: #fbbf24;
  --warning-light: #451a03;

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-light: #64748b;

  --bg-primary: #0f172a;
  --bg-card: #1e293b;
  --bg-card2: #162032;
  --border: #1e3a5f;
  --border-light: #1e2d45;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.7);

  --navbar-bg: rgba(15,23,42,0.95);
  --input-bg: #1e293b;
  --modal-bg: #1e293b;
  --table-head-bg: #162032;
  --progress-bg: #1e293b;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-main);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  transition: transform .18s, border-color .18s, background .18s, color .18s, box-shadow .18s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--sky-400); color: var(--sky-700); background: var(--sky-50); transform: translateY(-1px) scale(1.04); box-shadow: var(--shadow-md); }
.theme-toggle .tt-icon { font-size: 1.05rem; line-height: 1; transition: transform .3s; }
.theme-toggle .tt-label { display: none; }
[data-theme="dark"] .theme-toggle { color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .theme-toggle:hover { background: var(--sky-100); }
[data-theme="dark"] .theme-toggle .tt-icon { transform: rotate(20deg); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, canvas, svg, iframe {
  max-width: 100%;
}

.card, .modal, .container, .container-sm,
.navbar, .navbar-links, .tabs,
.lrow, .list-row, .lesson-row, .tests-list-row,
.form-group, .form-input, .form-select {
  min-width: 0;
}

/* Animated gradient background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(125,211,252,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(103,232,249,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(224,242,254,0.5) 0%, transparent 70%),
    var(--bg-primary);
  z-index: -1;
  pointer-events: none;
}

/* === NAVIGATION === */
.navbar {
  background: var(--navbar-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--sky-700);
  letter-spacing: 0;
  min-width: 0;
}

.navbar-brand .logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--sky-200);
  background: #fff;
  box-shadow: 0 2px 10px rgba(14,165,233,0.18);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, border-color .25s;
}

.navbar-brand .logo-icon .logo-mask {
  width: 86%;
  height: 86%;
  display: block;
  background: var(--brand-logo-color, #1746d1);
  -webkit-mask-image: var(--brand-logo-mask);
  mask-image: var(--brand-logo-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.navbar-brand:hover .logo-icon {
  transform: rotate(360deg) scale(1.06);
  border-color: var(--sky-400);
  box-shadow: 0 8px 18px rgba(14,165,233,0.3);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.brand-title {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--sky-700);
}

.brand-subtitle {
  font-size: .74rem;
  font-weight: 700;
  color: var(--accent-dark);
  opacity: .95;
  transition: transform .22s ease, color .22s ease, text-shadow .22s ease;
  transform-origin: left center;
  white-space: nowrap;
}

.brand-subtitle:hover {
  transform: scale(1.06);
  color: var(--sky-600);
  text-shadow: 0 0 12px rgba(56,189,248,.35);
}
.brand-sci-fi-enabled .navbar-brand:hover .logo-icon { animation: sciFiPulse 1.4s ease-in-out infinite; }
.brand-sci-fi-enabled .brand-subtitle:hover { animation: sciFiTextPulse 1.5s ease-in-out infinite; }

@keyframes sciFiPulse {
  0%,100% { filter: drop-shadow(0 0 0 rgba(34,211,238,0)); }
  50% { filter: drop-shadow(0 0 8px rgba(34,211,238,.35)); }
}

@keyframes sciFiTextPulse {
  0%,100% { opacity: .96; text-shadow: 0 0 0 rgba(34,211,238,0); }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(34,211,238,.28); }
}

.navbar-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: var(--text-secondary);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.nav-link:hover {
  background: var(--sky-100);
  color: var(--sky-700);
}

.nav-link.active {
  background: var(--sky-100);
  color: var(--sky-700);
}

/* === HERO / PAGE HEADER === */
.page-hero {
  text-align: center;
  padding: 4rem 2rem 3rem;
  position: relative;
}

.page-hero .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sky-100);
  color: var(--sky-700);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  border: 1px solid var(--sky-200);
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--sky-900);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.page-hero h1 .highlight {
  background: linear-gradient(135deg, var(--sky-500), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
}

/* === CARDS === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--sky-300);
}

.card-glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(186,230,253,0.6);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--sky-500), var(--accent));
  color: white;
  box-shadow: 0 2px 12px rgba(14,165,233,0.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--sky-600), var(--accent-dark));
  box-shadow: 0 4px 20px rgba(14,165,233,0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--sky-100);
  color: var(--sky-700);
  border: 1px solid var(--sky-200);
}
.btn-secondary:hover {
  background: var(--sky-200);
  border-color: var(--sky-300);
}

.btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.btn-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.btn-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 2px 12px rgba(34,197,94,0.3);
}
.btn-success:hover {
  box-shadow: 0 4px 20px rgba(34,197,94,0.4);
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-lg { padding: 0.85rem 2rem; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; border-radius: 8px; }

/* === FORM === */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.form-input, .form-select {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--input-bg);
  transition: all 0.2s;
  outline: none;
}

.form-input:focus, .form-select:focus {
  border-color: var(--sky-400);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}

.form-input.error, .form-select.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}

.form-error {
  font-size: 0.8rem;
  color: var(--error);
  margin-top: 0.3rem;
  display: none;
}

.form-error.show { display: block; }

/* === PROGRESS BAR === */
.progress-container {
  background: var(--navbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 64px;
  z-index: 90;
  box-shadow: var(--shadow-sm);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.progress-bar-wrap {
  background: var(--progress-bg);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sky-400), var(--accent));
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* === TABLE === */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th {
  background: var(--table-head-bg);
  color: var(--sky-700);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  color: var(--text-primary);
}

tr:hover td { background: var(--sky-50); }
tr:last-child td { border-bottom: none; }

/* === BADGE === */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.25rem;
}

.badge-blue { background: var(--sky-100); color: var(--sky-700); }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-gray { background: #f1f5f9; color: var(--text-muted); }

/* === MODAL === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.4);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--modal-bg);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95) translateY(16px);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

/* === ALERTS === */
.alert {
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.alert-info { background: var(--sky-100); color: var(--sky-800); border: 1px solid var(--sky-200); }
.alert-success { background: #dcfce7; color: #14532d; border: 1px solid #bbf7d0; }
.alert-error { background: #fee2e2; color: #7f1d1d; border: 1px solid #fecaca; }
.alert-warning { background: #fef9c3; color: #713f12; border: 1px solid #fde68a; }

/* === GRID === */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* === CONTAINER === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-sm { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }

/* === TEST CARD === */
.test-card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  opacity: 1 !important;   /* never allow GSAP to leave cards invisible */
}

.test-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14,165,233,0.04), rgba(6,182,212,0.04));
  opacity: 0;
  transition: opacity 0.3s;
}

.test-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--sky-300); }

.test-card .subject {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sky-800);
  margin-bottom: 0.5rem;
}

.test-card .creator {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.test-card .meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* === QUESTION STYLES === */
.question-block {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.2s;
}

.question-block:hover { box-shadow: var(--shadow); }

.question-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.options-list { display: flex; flex-direction: column; gap: 0.6rem; }

.option-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  background: white;
  user-select: none;
}

.option-label:hover {
  background: var(--sky-50);
  border-color: var(--sky-300);
}

.option-label input[type="radio"] {
  accent-color: var(--sky-500);
  width: 16px; height: 16px;
  flex-shrink: 0;
}

.option-label.correct {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #14532d;
}

.option-label.wrong {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #7f1d1d;
}

/* === STICKY HEADER IN TEST === */
.test-sticky-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.student-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.student-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sky-800);
}

.student-subject {
  font-size: 0.85rem;
  color: var(--sky-600);
  font-weight: 500;
}

.timer-display {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--sky-700);
  background: var(--sky-100);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--sky-200);
}

.timer-display.warning { color: #d97706; background: #fef9c3; border-color: #fde68a; }
.timer-display.danger { color: #dc2626; background: #fee2e2; border-color: #fecaca; animation: pulse 1s infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* === RESULTS === */
.results-section {
  background: linear-gradient(135deg, var(--sky-50), white);
  border: 2px solid var(--sky-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  margin-top: 2rem;
  text-align: center;
}

.score-display {
  font-size: 3rem;
  font-weight: 800;
  color: var(--sky-700);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.grade-display {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* === ANIMATIONS === */
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.animate-in { animation: fadeIn 0.5s cubic-bezier(0.4,0,0.2,1) both; }
.animate-slide { animation: slideDown 0.4s cubic-bezier(0.4,0,0.2,1) both; }

/* === FOOTER === */
footer {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border-light);
  margin-top: 4rem;
}

footer a { color: var(--sky-600); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .navbar { padding: 0 1rem; }
  .page-hero { padding: 2.5rem 1rem 2rem; }
  .container, .container-sm { padding: 0 1rem; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .student-info-bar { gap: 0.5rem; }
}

@media (max-width: 640px) {
  .navbar {
    padding: 0 .65rem;
    gap: .45rem;
    width: 100%;
    max-width: 100vw;
  }
  .navbar-brand {
    gap: .45rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  .navbar-brand span {
    display: block;
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-title {
    font-size: .96rem;
  }
  .brand-subtitle {
    font-size: .66rem;
  }
  .navbar-links {
    flex: 0 1 auto;
    justify-content: flex-end;
    gap: .35rem;
    overflow: hidden;
  }
  .navbar-links .nav-link {
    display: none;
  }
  .navbar-links .btn {
    max-width: 34vw;
    padding-left: .65rem;
    padding-right: .65rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .theme-toggle {
    width: 38px;
    height: 38px;
  }
  .container, .container-sm {
    width: 100%;
    padding-left: .85rem;
    padding-right: .85rem;
  }
  .page-hero {
    padding-left: .85rem;
    padding-right: .85rem;
  }
  .card, .modal {
    max-width: 100%;
    padding: 1rem;
    border-radius: 16px;
  }
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  .lrow, .list-row, .lesson-row, .tests-list-row {
    align-items: flex-start;
    padding-left: .85rem;
    padding-right: .85rem;
  }
  .lrow > *, .list-row > *, .lesson-row > *, .tests-list-row > * {
    min-width: 0;
    max-width: 100%;
  }
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .table-wrap {
    width: 100%;
    max-width: 100%;
  }
  th, td {
    padding-left: .65rem;
    padding-right: .65rem;
  }
  .modal-overlay {
    padding: .75rem;
  }
  .progress-container {
    padding-left: .85rem;
    padding-right: .85rem;
  }
}

/* === SECTION === */
.section { padding: 2rem 0; }

/* Loading spinner */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--sky-100);
  border-top-color: var(--sky-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 1.5rem 0;
}

/* Icon circle */
.icon-circle {
  width: 48px; height: 48px;
  background: var(--sky-100);
  color: var(--sky-600);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--sky-100);
  border-radius: 10px;
  padding: 0.25rem;
  margin-bottom: 1.5rem;
}

.tab-btn {
  flex: 1;
  padding: 0.6rem 1rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.tab-btn.active {
  background: white;
  color: var(--sky-700);
  box-shadow: var(--shadow-sm);
}

/* Prevent text selection during test */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   Applied when <html data-theme="dark">
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] body {
  color: var(--text-primary);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(14,100,200,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(6,182,212,0.1) 0%, transparent 60%),
    var(--bg-primary);
}
/* Navbar */
[data-theme="dark"] .brand-title { color: var(--sky-400); }
[data-theme="dark"] .brand-subtitle { color: #67e8f9; }
[data-theme="dark"] .navbar-brand .logo-icon { background: var(--bg-card2); border-color: var(--border); }
[data-theme="dark"] .nav-link { color: var(--text-muted); }
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active { background: var(--sky-100); color: var(--sky-500); }
/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .tcard,
[data-theme="dark"] .lcard,
[data-theme="dark"] .scard,
[data-theme="dark"] .test-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .lesson-card {
  background: var(--bg-card) !important;
  border-color: var(--border);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .tcard:hover,
[data-theme="dark"] .lcard:hover,
[data-theme="dark"] .scard:hover,
[data-theme="dark"] .test-card:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .lesson-card:hover { border-color: var(--sky-400); }
/* Inputs */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="dark"] .form-input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus { border-color: var(--sky-400); box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
/* Buttons */
[data-theme="dark"] .btn-secondary {
  background: var(--bg-card2);
  color: var(--text-secondary);
  border-color: var(--border);
}
[data-theme="dark"] .btn-secondary:hover { background: var(--sky-100); border-color: var(--sky-400); }
[data-theme="dark"] .btn-danger { background: #450a0a; color: #f87171; border-color: #7f1d1d; }
[data-theme="dark"] .btn-danger:hover { background: #7f1d1d; }
/* Table */
[data-theme="dark"] table { border-color: var(--border); }
[data-theme="dark"] th { color: var(--sky-400); }
[data-theme="dark"] td { color: var(--text-primary); border-color: var(--border-light); }
[data-theme="dark"] tr:hover td { background: var(--sky-100); }
[data-theme="dark"] tr:last-child td { border-bottom: none; }
/* Tabs */
[data-theme="dark"] .tabs { background: var(--bg-card2); }
[data-theme="dark"] .tab-btn { color: var(--text-muted); }
[data-theme="dark"] .tab-btn.active { background: var(--bg-card); color: var(--sky-400); box-shadow: var(--shadow-sm); }
/* Chips */
[data-theme="dark"] .chip,
[data-theme="dark"] .grade-chip {
  background: var(--bg-card2);
  color: var(--text-secondary);
  border-color: var(--border);
}
[data-theme="dark"] .chip:hover,
[data-theme="dark"] .grade-chip:hover { border-color: var(--sky-400); color: var(--sky-400); }
[data-theme="dark"] .chip.active,
[data-theme="dark"] .grade-chip.active { background: var(--sky-500); color: #0f172a; border-color: var(--sky-500); }
/* Badges */
[data-theme="dark"] .badge-gray   { background: #1e293b; color: var(--text-muted); }
[data-theme="dark"] .badge-blue   { background: #0c2340; color: #7dd3fc; border-color: #1e4d7b; }
[data-theme="dark"] .badge-green  { background: #052e16; color: #4ade80; border-color: #14532d; }
[data-theme="dark"] .badge-yellow { background: #2d1a00; color: #fbbf24; border-color: #451a03; }
[data-theme="dark"] .badge-red    { background: #2d0000; color: #f87171; border-color: #450a0a; }
/* Alerts */
[data-theme="dark"] .alert-info    { background: #0c2340; color: #7dd3fc; border-color: #1e4d7b; }
[data-theme="dark"] .alert-success { background: #052e16; color: #4ade80; border-color: #14532d; }
[data-theme="dark"] .alert-error   { background: #2d0000; color: #f87171; border-color: #7f1d1d; }
[data-theme="dark"] .alert-warning { background: #2d1a00; color: #fbbf24; border-color: #451a03; }
/* List rows */
[data-theme="dark"] .lrow,
[data-theme="dark"] .slrow,
[data-theme="dark"] .list-row,
[data-theme="dark"] .lesson-row,
[data-theme="dark"] .tests-list-row { background: var(--bg-card); border-color: var(--border-light); }
[data-theme="dark"] .lrow:hover,
[data-theme="dark"] .slrow:hover,
[data-theme="dark"] .list-row:hover,
[data-theme="dark"] .lesson-row:hover,
[data-theme="dark"] .tests-list-row:hover { background: var(--sky-100); }
/* Modal */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.65); }
[data-theme="dark"] .modal h3,
[data-theme="dark"] .modal p { color: var(--text-primary); }
/* Question editor */
[data-theme="dark"] .qblock { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .qblock textarea { background: var(--input-bg); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .vblock { background: var(--bg-card2); border-color: var(--border-light); }
[data-theme="dark"] .oinp { background: var(--input-bg); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .qnum { background: var(--sky-100); color: var(--sky-400); }
/* Option labels in test page */
[data-theme="dark"] .option-label { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .option-label:hover { background: var(--sky-50); border-color: var(--sky-400); }
/* Test sticky header */
[data-theme="dark"] .test-sticky-header { background: rgba(15,23,42,0.97); }
/* Progress */
[data-theme="dark"] .timer-display { background: var(--bg-card2); color: var(--sky-400); border-color: var(--border); }
/* Page hero */
[data-theme="dark"] .page-hero h1,
[data-theme="dark"] .dash-title { color: var(--text-primary); }
[data-theme="dark"] .hero-tag { background: var(--bg-card2); border-color: var(--border); color: var(--sky-400); }
/* View switch */
[data-theme="dark"] .view-switch,
[data-theme="dark"] .view-switch { background: var(--bg-card2); }
[data-theme="dark"] .vbtn { color: var(--text-muted); }
[data-theme="dark"] .vbtn.active { background: var(--bg-card); color: var(--sky-400); }
/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-card2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--sky-400); }
/* Role badges in admin */
[data-theme="dark"] .role-admin   { background: #2e1065; color: #c4b5fd; border-color: #4c1d95; }
[data-theme="dark"] .role-teacher { background: #052e16; color: #86efac; border-color: #14532d; }
/* User avatar */
[data-theme="dark"] .uavatar.admin   { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .uavatar.teacher { background: #052e16; color: #86efac; }
/* Teacher banner */
[data-theme="dark"] .tbanner { background: linear-gradient(135deg, #052e16, #0f2810); border-color: #14532d; }
[data-theme="dark"] .tbanner div { color: #86efac !important; }
/* Spinner */
[data-theme="dark"] .spinner { border-color: var(--border); border-top-color: var(--sky-400); }
/* Footer */
[data-theme="dark"] footer { border-color: var(--border-light); color: var(--text-muted); }
[data-theme="dark"] footer a { color: var(--sky-400); }
/* Divider */
[data-theme="dark"] .divider { border-color: var(--border-light); }
/* home.css feature cards */
[data-theme="dark"] .feature-card h3 { color: var(--sky-400); }
[data-theme="dark"] .feature-card p  { color: var(--text-muted); }
/* Results section in test */
[data-theme="dark"] .results-section { background: var(--bg-card2); border-color: var(--border); }

/* ═══════════════════════════════════════════════════════════
   PASSWORD STRENGTH WIDGET
═══════════════════════════════════════════════════════════ */
.pw-req {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin-top: .4rem;
  padding: .5rem .65rem;
  background: var(--bg-card2);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.pwr {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .2s;
  white-space: nowrap;
}
.pwr.ok  { color: #16a34a; }
.pwr.ok::first-letter  { /* checkmark color handled in JS */ }
.pw-match-ok  { font-size: .78rem; font-weight: 600; color: #16a34a; margin-top: .3rem; }
.pw-match-err { font-size: .78rem; font-weight: 600; color: #dc2626; margin-top: .3rem; }
/* Strength bar label */
.pw-strength-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  margin-top: .2rem;
}
/* Eye button inside password input */
.pw-eye {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  padding: .1rem;
  line-height: 1;
  transition: color .15s;
}
.pw-eye:hover { color: var(--sky-500); }
/* Dark mode */
[data-theme="dark"] .pw-req { background: var(--bg-card2); border-color: var(--border); }