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

/* ─── Dark Mode ──────────────────────────────────────── */
:root {
  --bg:        #081426;
  --surface:   #0f2038;
  --surface2:  #15304f;
  --accent:    #60a5fa;
  --accent2:   #60a5fa;
  --text:      #ffffff;
  --text-muted:#8fa8c7;
  --success:   #34d399;
  --error:     #f87171;
  --border:    #24415f;
  --radius:    16px;
--shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

/* ─── Light Mode ─────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #f5f9ff;
  --surface:   #ffffff;
  --surface2:  #e8f1ff;
  --accent:    #2563eb;
  --accent2:   #2563eb;
  --text:      #102a43;
  --text-muted:#6b7280;
  --success:   #059669;
  --error:     #dc2626;
  --border:    #cfe0f5;
  
}

/* ─── Base ───────────────────────────────────────────── */
html, body {
  height: 100%;
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

#app {
  height: 100%;
}

/* ─── Screens ────────────────────────────────────────── */
.screen {
  display: none;
  height: 100%;
}

.screen.active {
  display: block;
}

/* ─── Main App Shell ─────────────────────────────────── */
#screen-main {
  display: none;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#screen-main.active {
  display: flex;
}

/* ─── Tab Contents ───────────────────────────────────── */
.tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px;
  animation: fadeIn 0.2s ease;
  -webkit-overflow-scrolling: touch;
}

.tab-content.active-tab {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─── Connection Badge ───────────────────────────────── */
#connection-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: transform 0.3s ease, background 0.3s;
}

#connection-badge.online {
  background: var(--success);
  color: #fff;
  transform: translateY(0);
}

#connection-badge.offline {
  background: #f59e0b;
  color: #fff;
  transform: translateY(0);
}

#connection-badge.hidden {
  transform: translateY(-100%);
}

/* ─── Top Bar ────────────────────────────────────────── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-name {
    color: #60a5fa;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.top-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.screen-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  text-align: center;
}

/* ─── Icon Buttons ───────────────────────────────────── */
.icon-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  padding: 8px 14px;
  min-height: 40px;
  min-width: 40px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  border-color: var(--accent);
}

.icon-btn:active {
  transform: scale(0.95);
}

/* ─── Stats Bar ──────────────────────────────────────── */
#stats-bar {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.stat-item {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 10px;
  transition: background 0.2s;
  position: relative;
}

.stat-item:hover {
  background: rgba(167, 139, 250, 0.08);
}

.stat-item .stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.stat-item .stat-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ─── Tooltip ────────────────────────────────────────── */
#tooltip-container {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  max-width: 220px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

#tooltip-container.visible {
  opacity: 1;
}

/* ─── Bottom Navigation ──────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px 24px;
  min-height: 48px;
  min-width: 64px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  color: var(--text-muted);
}

.nav-btn.active .nav-icon {
  color: var(--accent);
  transform: translateY(-2px);
}

.nav-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-btn.active .nav-label {
  color: var(--accent);
}

.nav-btn:active {
  transform: scale(0.95);
}
/* ─── Keyboard Focus Visibility ──────────────────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons already have their own borders — tighten the outline so it doesn't clash */
button:focus-visible,
.option-btn:focus-visible {
  outline-offset: 3px;
}

/* ─── Auth Screen ────────────────────────────────────── */
.auth-box {
  max-width: 420px;
  margin: 0 auto;
  padding: 48px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-logo {
  text-align: center;
  margin-bottom: 40px;
}

.auth-logo-icon {
  font-size: 56px;
  margin-bottom: 12px;
}

.app-logo {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.app-tagline {
  color: var(--text-muted);
  font-size: 14px;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text);
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.auth-switch {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-switch span {
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}

.auth-error {
  color: var(--error);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 10px;
  display: none;
}

/* ─── Buttons ────────────────────────────────────────── */
button {
  cursor: pointer;
  border: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius);
  min-height: 44px;
  transition: all 0.2s;
  font-family: inherit;
}

button:active {
  transform: scale(0.97);
}

.btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  margin-top: 8px;
  box-shadow: 0 4px 16px rgba(37,99,235,0.30);
}

.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(37,99,235,0.40);
  transform: translateY(-1px);
}

.btn-secondary {
  padding: 12px 20px;
  background: var(--surface2);
  color: var(--text);
  border: 1.5px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--accent);
}

.btn-success {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #059669, #0284c7);
  color: #fff;
  margin-top: 8px;
}

.btn-danger {
  padding: 12px 20px;
  background: rgba(248,113,113,0.1);
  color: var(--error);
  border: 1.5px solid rgba(248,113,113,0.3);
  border-radius: var(--radius);
}

/* ─── Subject Cards ──────────────────────────────────── */
.subject-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px;
}

.subject-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}

.subject-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(167,139,250,0.2);
}

.subject-card:active {
  transform: scale(0.97);
}

.subject-icon {
  font-size: 38px;
  margin-bottom: 10px;
  display: block;
}

.subject-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.subject-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── Level List ────────────────────────────────���────── */
.level-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.level-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}

.level-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.level-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.level-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.level-progress {
  background: var(--border);
  border-radius: 99px;
  height: 4px;
  overflow: hidden;
}

.level-progress-fill {
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* ─── Lesson List ────────────────────────────────────── */
.lessons-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lesson-item {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}

.lesson-item:hover {
  border-color: var(--accent);
  transform: translateX(4px);
}

.lesson-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.lesson-number.completed {
  background: rgba(52,211,153,0.15);
  border-color: var(--success);
  color: var(--success);
}

.lesson-info h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.lesson-info p {
  font-size: 13px;
  color: var(--text-muted);
}

/* ─── Lesson Content ─────────────────────────────────── */
.lesson-body {
  padding: 24px 20px;
}

.lesson-body h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.lesson-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin: 24px 0 10px;
}

.lesson-body p {
  color: var(--text);
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.7;
}

.code-block {
  background: #07111f;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #d9e8ff;
  margin: 16px 0;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.7;
}

.lesson-nav {
  display: flex;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--border);
}

/* ─── Exercise / Quiz ────────────────────────────────── */
.exercise-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 20px;
  box-shadow: var(--shadow);
}

.exercise-box h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.exercise-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-btn {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  min-height: 44px;
  transition: all 0.2s;
  font-family: inherit;
}

.option-btn:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateX(3px);
}

.option-btn.correct {
  border-color: var(--success);
  background: rgba(52,211,153,0.1);
  color: var(--success);
}

.option-btn.wrong {
  border-color: var(--error);
  background: rgba(248,113,113,0.1);
  color: var(--error);
}

/* ─── Exam ───────────────────────────────────────────── */
.exam-container {
  padding: 24px 20px;
}

.exam-progress {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.exam-question {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.5;
}

.exam-result {
  text-align: center;
  padding: 48px 20px;
}

.exam-score {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Badges ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 99px;
  font-weight: 600;
}

.badge-beginner {
  background: rgba(52,211,153,0.12);
  color: var(--success);
  border: 1px solid rgba(52,211,153,0.3);
}

.badge-intermediate {
  background: rgba(167,139,250,0.12);
  color: var(--accent);
  border: 1px solid rgba(167,139,250,0.3);
}

.badge-advanced {
  background: rgba(96,165,250,0.12);
  color: var(--accent2);
  border: 1px solid rgba(96,165,250,0.3);
}

/* ─── Section Label ──────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 20px 20px 8px;
}

/* ─── Progress Bar ───────────────────────────────────── */
.progress-bar-wrap {
  background: var(--border);
  border-radius: 99px;
  height: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ─── Finish Card ────────────────────────────────────── */
.finish-card {
  text-align: center;
  padding: 48px 20px;
}

.finish-stats {
  display: flex;
  justify-content: space-around;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 24px 0;
  box-shadow: var(--shadow);
}

.stat-number {
  font-size: 32px;
  font-weight: 800;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ─── Empty State ────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.empty-state-desc {
  font-size: 13px;
  line-height: 1.5;
}

/* ─── Toast / Notification ───────────────────────────── */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  max-width: 320px;
  text-align: center;
  animation: fadeIn 0.2s ease;
}

/* ─── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── Safe Area Support (notched phones) ─────────────── */
@supports (padding: max(0px)) {
  .bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    height: auto;
    min-height: 64px;
  }

  .tab-content {
    padding-bottom: max(80px, calc(64px + env(safe-area-inset-bottom)));
  }
}

/* ─── Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #app-split-transition {
    display: none;
  }
}
/* ─── Password  ─────────────────────────────────── */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper .form-input {
  width: 100%;
  padding-right: 80px;
}

.password-wrapper button {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
}
.practice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}

.practice-card {
  height: 150px;
  border-radius: 24px;
  background: var(--surface);
  border: 2px solid var(--border);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.practice-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.practice-card h3 {
  margin: 0;
  font-size: 18px;
}

.practice-card p {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════
   AirCode UI refresh — abstract blue / soft card system
   Inspired by the supplied reference UI
   ═══════════════════════════════════════════════════════ */
:root {
  --radius: 22px;
  --shadow: 0 12px 32px rgba(63, 91, 170, .12);
}
[data-theme="light"] {
  --bg: #f7f8ff;
  --surface: #ffffff;
  --surface2: #eef2ff;
  --accent: #2563eb;
  --accent2: #60a5fa;
  --text: #102a43;
  --text-muted: #7087a3;
  --success: #0f9d76;
  --error: #d9535f;
  --border: #cfe0f5;
}

html, body { background: var(--bg); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Soft page atmosphere */
#screen-main, #screen-login { background:
  radial-gradient(circle at 15% 5%, rgba(107,145,232,.12), transparent 26%),
  radial-gradient(circle at 90% 18%, rgba(150,180,245,.10), transparent 24%),
  var(--bg); }

/* Headers */
.top-bar {
  padding: 20px 28px 16px;
  border-bottom: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
}
.app-name { font-size: 25px; font-weight: 800; letter-spacing: -.7px; color: #2563eb; }
.top-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 3px; }
.screen-title { font-size: 21px; font-weight: 800; letter-spacing: -.35px; }
.icon-btn {
  width: 48px; min-width: 48px; height: 48px; min-height: 48px;
  padding: 0; border-radius: 16px; background: #e8f1ff;
  border: 1px solid #cfe0f5; color: #102a43;
  box-shadow: none;
}
.icon-btn:hover { border-color: #a9c8ed; background:#dcecff; }

/* Home stats */
#stats-bar {
  margin: 0 0 10px; padding: 17px 28px;
  background: rgba(229,234,255,.75); border: 0;
}
#stats-bar > div { padding: 4px 8px; }
#stats-bar [id^="stat-"] { font-size: 20px !important; color: #2563eb !important; }
#stats-bar div div:last-child { font-size: 11px !important; letter-spacing: .01em; }

/* Main learning cards */
#subject-list { padding: 10px 22px 28px; }
#subject-list > div { gap: 14px !important; }
.subject-card, #subject-list .subject-card {
  border: 1px solid var(--border); border-radius: 24px; background: var(--surface);
  padding: 20px 18px; min-height: 92px; display:flex; align-items:center;
  text-align:left; box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.subject-card::after {
  content:""; position:absolute; width:105px; height:105px; border-radius:50%;
  right:-35px; top:-38px; background:linear-gradient(135deg, rgba(125,159,235,.16), rgba(255,255,255,0));
}
.subject-card:hover { transform: translateY(-2px); border-color:#b5cdec; box-shadow:0 16px 38px rgba(37,99,235,.14); }
.subject-icon { width:58px; height:58px; margin:0 16px 0 0; border-radius:17px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:30px; }
.subject-name { font-size:19px; margin-bottom:2px; }
.subject-count { font-size:13px; }

/* Lists / levels */
.level-list { padding: 16px 22px 30px; gap: 14px; }
.level-card { border:1px solid var(--border); border-radius:24px; padding:24px; background:var(--surface); box-shadow:var(--shadow); }
.level-card:hover { border-color:#b5cdec; transform:translateY(-2px); }
.level-name { font-size:22px; }
.level-meta { font-size:14px; }
.level-progress { height:6px; background:#e5edf7; }
.level-progress-fill { height:6px; background:linear-gradient(90deg,#3b82f6,#60a5fa); }
.lessons-container { padding: 14px 22px 30px; gap:12px; }
.lesson-item { border:1px solid var(--border); border-radius:20px; padding:16px; background:var(--surface); box-shadow:var(--shadow); }
.lesson-number { width:42px; height:42px; border-radius:14px; background:#e8f1ff; border:0; color:#2563eb; }
.lesson-info h4 { font-size:16px; }
.lesson-info p { font-size:13px; }

/* Lesson / quiz */
.lesson-body { padding:24px 22px; }
.lesson-body h2 { font-size:25px; }
.lesson-body h3 { color:#2563eb; }
.code-block { background:#10162b; border:0; border-radius:18px; padding:18px; box-shadow:0 10px 24px rgba(12,20,45,.12); }
.exercise-box { border:1px solid var(--border); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }
.exercise-box h3 { color:#2563eb; }
.option-btn { background:#e8f1ff; border:1px solid #cfe0f5; border-radius:15px; padding:15px 16px; }
.option-btn:hover:not(:disabled) { border-color:#8bb5e8; transform:translateY(-1px); }

/* Practice */
#practice-content { padding: 10px 22px 30px; }
.practice-grid { grid-template-columns:1fr; gap:14px; padding:0; }
.practice-card {
  height:auto; min-height:105px; border-radius:24px; background:var(--surface);
  border:1px solid var(--border); padding:20px; display:grid; grid-template-columns:58px 1fr; grid-template-rows:auto auto;
  column-gap:15px; box-shadow:var(--shadow); align-items:center;
}
.practice-icon { grid-row:1 / 3; width:58px; height:58px; border-radius:17px; display:flex; align-items:center; justify-content:center; margin:0; background:#e8f1ff; }
.practice-card h3 { font-size:19px; }
.practice-card p { margin-top:1px; font-size:13px; }

/* Profile */
#profile-content { padding: 10px 22px 30px; }
#profile-content > * { max-width: 720px; margin-left:auto; margin-right:auto; }
#profile-content [style*="border-radius"] { border-radius:24px !important; }

/* Editor */
#editor-content { padding: 0 0 30px; }
#editor-content .editor-shell, #editor-content > div { border-radius:0; }

/* Bottom nav */
.bottom-nav {
  height:76px; background:rgba(255,255,255,.94); border-top:1px solid #d7e4f2;
  box-shadow:0 -8px 24px rgba(37,99,235,.07); backdrop-filter:blur(16px);
}
.nav-btn { padding:9px 18px; }
.nav-icon { color:#788196; }
.nav-btn.active .nav-icon { color:#2563eb; transform:none; }
.nav-label { font-size:11px; text-transform:uppercase; color:#7087a3; }
.nav-btn.active .nav-label { color:#2563eb; }

/* Authentication — reference-inspired stacked hero + form */
#screen-login { overflow:auto; }
.auth-box {
  max-width: 760px; min-height:100vh; padding:32px 22px 40px;
  display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  gap:0; align-items:center;
}
.auth-logo {
  min-height:570px; margin:0; padding:52px 30px 30px; border-radius:30px 0 0 30px;
  color:#fff; display:flex; flex-direction:column; justify-content:flex-end; text-align:left; overflow:hidden;
  position:relative; isolation:isolate;
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.62) 0 7%, transparent 7.5%),
    radial-gradient(circle at 26% 72%, rgba(255,255,255,.62) 0 4%, transparent 4.7%),
    radial-gradient(circle at 8% 15%, rgba(12,35,94,.82) 0 10%, transparent 10.6%),
    linear-gradient(145deg,#718bd8 0%,#3f62bd 55%,#273e86 100%);
  box-shadow:0 18px 44px rgba(37,99,235,.18);
}
.auth-logo::before, .auth-logo::after { content:""; position:absolute; z-index:-1; border-radius:45%; filter:blur(.2px); }
.auth-logo::before { width:280px; height:500px; left:-110px; top:20px; background:rgba(255,255,255,.10); transform:rotate(22deg); }
.auth-logo::after { width:230px; height:420px; right:-90px; top:-80px; background:rgba(196,217,255,.22); transform:rotate(-28deg); }
.auth-logo-icon { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; background:rgba(255,255,255,.14); margin-bottom:auto; }
.app-logo { color:#fff; -webkit-text-fill-color:#fff; background:none; font-size:29px; margin:0 0 8px; }
.app-tagline { color:rgba(255,255,255,.86); font-size:13px; max-width:220px; }
#auth-form {
  background:var(--surface); min-height:570px; border-radius:0 30px 30px 0; padding:42px 34px;
  box-shadow:0 18px 44px rgba(37,99,235,.10); display:flex; flex-direction:column; justify-content:center;
}
.auth-title { font-size:25px; color:#2563eb; margin-bottom:24px; }
.form-group { margin-bottom:15px; }
.form-group label { text-transform:none; letter-spacing:0; font-size:11px; color:#7087a3; margin-bottom:6px; }
.form-input { background:#fff; border:1px solid #d5e2ef; border-radius:12px; padding:13px 14px; color:#102a43; box-shadow:0 2px 8px rgba(30,52,100,.03); }
.form-input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(93,121,218,.12); }
.btn-primary { border-radius:12px; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 8px 18px rgba(65,105,212,.22); }
.auth-switch { font-size:13px; }
.auth-switch span { color:#2563eb; }
.password-wrapper button { color:#2563eb; font-size:12px; }

@media (max-width: 680px) {
  .auth-box { max-width:430px; display:block; padding:22px 18px 32px; }
  .auth-logo { min-height:410px; border-radius:28px 28px 0 0; padding:30px 25px 26px; }
  #auth-form { min-height:auto; border-radius:0 0 28px 28px; padding:30px 24px 28px; }
  .top-bar { padding-left:20px; padding-right:20px; }
  #subject-list, #practice-content, #profile-content { padding-left:16px; padding-right:16px; }
  .bottom-nav { min-height:70px; }
}

@media (min-width: 900px) {
  #screen-main { max-width: 980px; margin: 0 auto; box-shadow: 0 0 60px rgba(37,99,235,.08); }
  .bottom-nav { max-width:980px; left:50%; right:auto; width:100%; transform:translateX(-50%); }
}

[data-theme="dark"] .bottom-nav { background:rgba(24,18,46,.96); border-color:#26435f; }
[data-theme="dark"] .auth-logo { box-shadow:none; }
[data-theme="dark"] #auth-form { background:#10243c; }
[data-theme="dark"] .form-input { background:#142d49; color:#fff; border-color:#294865; }
[data-theme="dark"] .icon-btn { background:#193552; color:#fff; border-color:#294865; }

/* ═══════════════════════════════════════════════════════
   AirCode — Reference Graphic System v2
   Blue abstract layered-glass visual language throughout
   ═══════════════════════════════════════════════════════ */
:root {
  --air-blue-900: #102b68;
  --air-blue-800: #1d3f91;
  --air-blue-700: #3159bd;
  --air-blue-500: #5f7fd3;
  --air-blue-300: #a9c2f2;
  --air-blue-100: #e9f0ff;
  --air-ink: #10254a;
  --air-shadow: 0 16px 38px rgba(35, 70, 145, .13);
}

/* Keep the entire app in the reference's blue family. */
html, body, #app { background: var(--bg); }

#screen-main, #screen-login, .screen {
  position: relative;
  overflow-x: hidden;
}

#screen-main::before,
#screen-login::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: 430px;
  height: 430px;
  right: -150px;
  top: 70px;
  border-radius: 42% 58% 64% 36%;
  background:
    radial-gradient(circle at 42% 32%, rgba(255,255,255,.92) 0 7%, transparent 7.7%),
    radial-gradient(circle at 72% 72%, rgba(109,143,222,.28) 0 15%, transparent 15.7%),
    linear-gradient(145deg, rgba(117,151,224,.30), rgba(49,89,189,.06));
  transform: rotate(-16deg);
  pointer-events: none;
}

#screen-main::after,
#screen-login::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 330px;
  height: 520px;
  left: -170px;
  bottom: 70px;
  border-radius: 48% 52% 38% 62%;
  background: linear-gradient(145deg, rgba(51,87,177,.14), rgba(255,255,255,0));
  transform: rotate(25deg);
  pointer-events: none;
}

.top-bar {
  background: rgba(247,250,255,.82);
  border-bottom: 1px solid rgba(183,202,235,.35);
  box-shadow: 0 8px 25px rgba(41,72,140,.05);
}

.app-name, .screen-title { color: var(--air-ink); }

.icon-btn {
  background: linear-gradient(145deg, #edf3ff, #dbe7fb);
  border-color: #c9d8f2;
  color: var(--air-ink);
  box-shadow: 0 8px 18px rgba(39,76,151,.08);
}
.icon-btn:hover { background: linear-gradient(145deg,#e3edff,#d1e0fa); }

#stats-bar {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.85) 0 5%, transparent 5.8%),
    radial-gradient(circle at 9% 80%, rgba(58,91,174,.13) 0 12%, transparent 12.7%),
    linear-gradient(135deg, #eaf1ff 0%, #dbe7fb 52%, #eef4ff 100%);
  border: 1px solid #cbdaf2;
  box-shadow: var(--air-shadow);
}

#stats-bar::after {
  content:"";
  position:absolute;
  width:180px;height:180px;
  right:-80px;bottom:-115px;
  border-radius:50%;
  background:rgba(75,111,202,.12);
}

#stats-bar [id^="stat-"] { color: var(--air-blue-800) !important; }

.subject-card, .level-card, .lesson-item, .exercise-box, .practice-card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--air-shadow);
}

.subject-card::before,
.level-card::before,
.lesson-item::before,
.exercise-box::before,
.practice-card::before {
  content:"";
  position:absolute;
  width:135px;
  height:190px;
  right:-58px;
  top:-82px;
  border-radius:46% 54% 55% 45%;
  background: linear-gradient(145deg, rgba(100,137,215,.17), rgba(255,255,255,0));
  transform: rotate(-18deg);
  pointer-events:none;
}

.subject-card::after {
  width:72px;height:72px;
  right:12px;top:16px;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0 10%, rgba(103,139,218,.14) 11% 100%);
}

.subject-card:hover, .level-card:hover, .lesson-item:hover, .practice-card:hover {
  border-color: #9eb9e8;
  box-shadow: 0 20px 44px rgba(37,83,166,.17);
}

.lesson-number, .practice-icon {
  background: linear-gradient(145deg, #eaf1ff, #d8e5fb);
  color: var(--air-blue-800);
  border: 1px solid #c7d8f2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.level-progress {
  background: #e1eaf8;
}
.level-progress-fill {
  background: linear-gradient(90deg, #3159bd, #7191df, #b1c8f4);
}

.lesson-body h3, .exercise-box h3, .auth-title { color: var(--air-blue-800); }

.option-btn {
  background: linear-gradient(145deg,#edf3ff,#e1ebfc);
  border-color:#c8d8f2;
}

.code-block {
  background: linear-gradient(145deg,#0a1730,#101f3e);
  border: 1px solid #213d70;
}

.practice-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,249,255,.98));
}

.bottom-nav {
  background: rgba(248,251,255,.94);
  border-top-color:#cbdaf0;
}
.nav-btn.active .nav-icon, .nav-btn.active .nav-label { color: var(--air-blue-800); }

/* Make the abstract reference treatment appear on content panels too. */
#profile-content > *, #editor-content .editor-shell {
  position: relative;
  overflow: hidden;
}
#profile-content > *::before,
#editor-content .editor-shell::before {
  content:"";
  position:absolute;
  width:180px;height:260px;
  right:-85px;top:-120px;
  border-radius:48%;
  background:linear-gradient(145deg, rgba(92,128,210,.14), rgba(255,255,255,0));
  transform:rotate(-22deg);
  pointer-events:none;
}

/* Authentication keeps the supplied composition but uses the graphic system. */
.auth-logo {
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.78) 0 7%, transparent 7.7%),
    radial-gradient(circle at 24% 73%, rgba(255,255,255,.58) 0 4%, transparent 4.8%),
    radial-gradient(circle at 10% 15%, rgba(10,31,82,.88) 0 10%, transparent 10.7%),
    radial-gradient(circle at 70% 54%, rgba(177,205,255,.38) 0 11%, transparent 11.7%),
    linear-gradient(145deg,#829be1 0%,#4c6bc5 48%,#233a7f 100%);
}
.auth-logo::before {
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}
.auth-logo::after {
  background: linear-gradient(160deg, rgba(211,226,255,.34), rgba(93,125,208,.04));
}

#auth-form {
  border: 1px solid #d6e2f4;
}
.form-input {
  background:#fff;
  border-color:#d2dfef;
}
.btn-primary {
  background: linear-gradient(135deg,#3d66c8,#244eae);
  box-shadow:0 10px 22px rgba(42,81,169,.23);
}
.auth-switch span, .password-wrapper button { color:#3159bd; }

/* Dark mode: navy/indigo-blue only — no purple cast. */
[data-theme="dark"] {
  --bg: #061326;
  --surface: #0b1d37;
  --surface2: #102b4d;
  --accent: #7da5ef;
  --accent2: #4d79d0;
  --text: #f5f8ff;
  --text-muted: #9db1d0;
  --border: #23446e;
  --air-ink: #f5f8ff;
  --air-shadow: 0 18px 42px rgba(0,0,0,.25);
}

[data-theme="dark"] #screen-main,
[data-theme="dark"] #screen-login {
  background:
    radial-gradient(circle at 82% 10%, rgba(63,99,177,.17), transparent 26%),
    radial-gradient(circle at 12% 75%, rgba(31,68,132,.16), transparent 25%),
    #061326;
}

[data-theme="dark"] .top-bar {
  background: rgba(6,19,38,.84);
  border-bottom-color:rgba(83,119,181,.22);
}
[data-theme="dark"] .icon-btn {
  background:linear-gradient(145deg,#112b4b,#0b203c);
  border-color:#294d79;
  color:#eef5ff;
}
[data-theme="dark"] #stats-bar {
  background:
    radial-gradient(circle at 84% 18%, rgba(145,180,244,.22) 0 5%, transparent 5.8%),
    radial-gradient(circle at 8% 80%, rgba(43,81,153,.34) 0 13%, transparent 13.8%),
    linear-gradient(145deg,#0e2749,#12345e);
  border-color:#2a4d7b;
}
[data-theme="dark"] #stats-bar [id^="stat-"] { color:#a9c5f6 !important; }
[data-theme="dark"] .subject-card,
[data-theme="dark"] .level-card,
[data-theme="dark"] .lesson-item,
[data-theme="dark"] .exercise-box,
[data-theme="dark"] .practice-card {
  background:linear-gradient(145deg,#0b1d37,#0e2747);
  border-color:#24476f;
}
[data-theme="dark"] .subject-card::before,
[data-theme="dark"] .level-card::before,
[data-theme="dark"] .lesson-item::before,
[data-theme="dark"] .exercise-box::before,
[data-theme="dark"] .practice-card::before {
  background:linear-gradient(145deg,rgba(99,139,218,.18),rgba(8,23,43,0));
}
[data-theme="dark"] .lesson-number,
[data-theme="dark"] .practice-icon,
[data-theme="dark"] .option-btn {
  background:linear-gradient(145deg,#122e50,#0d2442);
  border-color:#2a4d78;
  color:#eaf2ff;
}
[data-theme="dark"] .level-progress { background:#173250; }
[data-theme="dark"] .bottom-nav {
  background:rgba(6,19,38,.96);
  border-color:#23446d;
  box-shadow:0 -10px 30px rgba(0,0,0,.22);
}
[data-theme="dark"] .nav-icon, [data-theme="dark"] .nav-label { color:#8fa8ce; }
[data-theme="dark"] .nav-btn.active .nav-icon,
[data-theme="dark"] .nav-btn.active .nav-label { color:#8fb4f5; }
[data-theme="dark"] #auth-form {
  background:linear-gradient(145deg,#0b1d37,#0e2848);
  border-color:#284b76;
}
[data-theme="dark"] .form-input {
  background:#102b4a;
  color:#f5f8ff;
  border-color:#2a4d78;
}
[data-theme="dark"] .auth-title { color:#9dbcf3; }
[data-theme="dark"] .auth-switch span,
[data-theme="dark"] .password-wrapper button { color:#9dbcf3; }
[data-theme="dark"] .btn-primary {
  background:linear-gradient(135deg,#3e68c7,#244eae);
}
[data-theme="dark"] .code-block {
  background:linear-gradient(145deg,#050f20,#0b1b34);
  border-color:#1e3d68;
}

/* ═══════════════════════════════════════════════════════
   AirCode — Universal Responsive Layout
   Phone → tablet → laptop → large desktop
   ═══════════════════════════════════════════════════════ */

html { width: 100%; min-width: 0; }
body { width: 100%; min-width: 0; overflow-x: hidden; }
button, input, textarea, select { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }

/* Give the desktop app room to breathe without stretching content forever. */
#screen-main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.tab-content {
  width: 100%;
  min-width: 0;
}

/* Center long-form content on wide displays. */
#subject-list,
.level-list,
.lessons-container,
.lesson-body,
#practice-content,
#profile-content,
#exam-content,
#editor-content {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

#subject-list,
#practice-content,
#profile-content { padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
.level-list,
.lessons-container,
.lesson-body,
#exam-content { padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }

.top-bar {
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

/* Wide-screen cards can use columns instead of leaving a giant empty side area. */
@media (min-width: 760px) {
  #subject-list > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lessons-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  #screen-main { box-shadow: 0 0 80px rgba(37,99,235,.08); }
  #subject-list > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px !important; }
  .practice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .practice-card { min-height: 180px; display:flex; text-align:center; align-items:center; }
  .practice-icon { margin: 0 0 10px; }
  .level-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lessons-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Laptop/desktop editor: use the available width while keeping controls usable. */
#editor-content > div,
#editor-content .editor-shell {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
#editor-content textarea,
#editor-content pre,
#editor-content iframe { max-width: 100%; }

/* Tablet: retain the roomy design without desktop-only spacing. */
@media (min-width: 681px) and (max-width: 1099px) {
  .auth-box { max-width: 900px; padding-left: 24px; padding-right: 24px; }
  .auth-logo, #auth-form { min-height: 560px; }
  .bottom-nav { max-width: 100%; }
}

/* Phones: single-column, no accidental horizontal overflow. */
@media (max-width: 680px) {
  #screen-main { max-width: none; }
  .tab-content { padding-bottom: max(82px, calc(70px + env(safe-area-inset-bottom))); }
  .top-bar { min-height: 72px; padding-top: 14px; padding-bottom: 12px; }
  .app-name { font-size: clamp(21px, 6vw, 25px); }
  .top-subtitle { font-size: 13px; }
  .screen-title { font-size: clamp(17px, 5vw, 21px); padding: 0 8px; }
  .icon-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 14px; }

  #stats-bar { gap: 4px; padding: 12px 10px; margin-bottom: 6px; }
  #stats-bar > div { padding: 4px 2px; }
  #stats-bar [id^="stat-"] { font-size: 17px !important; }
  #stats-bar div div:last-child { font-size: 9px !important; }

  #subject-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px !important; }
  .subject-card { min-width: 0; }
  .subject-name, .subject-count, .lesson-info h4, .lesson-info p { overflow-wrap: anywhere; }

  .level-list, .lessons-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .level-card { padding: 20px; }
  .lesson-body { padding-top: 20px; padding-bottom: 24px; }
  .lesson-body h2 { font-size: clamp(21px, 6vw, 25px); }
  .code-block { padding: 14px; overflow-x: auto; max-width: 100%; }
  .code-block pre { white-space: pre; min-width: max-content; }
  .option-btn { width: 100%; min-height: 48px; text-align: left; }

  #practice-content { padding-top: 8px; }
  .practice-grid { grid-template-columns: minmax(0, 1fr); }
  .practice-card { min-width: 0; }

  #profile-content > * { width: 100%; max-width: 100%; }

  .bottom-nav { left: 0; right: 0; width: 100%; transform: none; height: auto; min-height: 68px; }
  .nav-btn { min-width: 0; flex: 1; padding: 8px 6px; }
  .nav-icon svg { width: 21px; height: 21px; }
  .nav-label { font-size: 10px; }

  #sync-toast { max-width: calc(100vw - 32px); text-align: center; white-space: normal; }

  /* Auth becomes a comfortable phone-sized vertical flow. */
  .auth-box { width: min(100%, 430px); max-width: 100%; min-height: auto; }
  .auth-logo { min-height: 360px; }
  #auth-form { padding: 28px 20px 26px; }
  .auth-title { font-size: 23px; }
  .form-input { min-height: 46px; }
}

/* Very small phones (e.g. 320–360px). */
@media (max-width: 380px) {
  .top-bar { padding-left: 12px; padding-right: 12px; }
  .screen-title { font-size: 16px; }
  .icon-btn { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  #subject-list, #practice-content, #profile-content,
  .level-list, .lessons-container, .lesson-body, #exam-content { padding-left: 12px; padding-right: 12px; }
  .subject-card { padding: 16px 14px; }
  .subject-icon { width: 50px; height: 50px; margin-right: 12px; font-size: 26px; }
  .practice-card { padding: 16px; }
  .practice-icon { width: 50px; height: 50px; }
  .auth-box { padding-left: 10px; padding-right: 10px; }
  .auth-logo { min-height: 330px; padding: 24px 20px; }
  #auth-form { padding: 24px 16px; }
}

/* Landscape phones: avoid a giant auth hero and preserve vertical access. */
@media (max-width: 900px) and (orientation: landscape) {
  .auth-box { max-width: 760px; }
  .auth-logo { min-height: 300px; }
  #auth-form { min-height: 300px; }
}

/* Dark mode remains blue, including responsive surfaces. */
@media (max-width: 680px) {
  [data-theme="dark"] .top-bar { background: rgba(6,19,38,.94); }
  [data-theme="dark"] .bottom-nav { background: rgba(6,19,38,.98); }
}