:root {
    --bg: #070709;
    --surface: #0e0e12;
    --surface2: #16161c;
    --border: #1e1e28;
    --border2: #2a2a38;
    --text: #f0f0f8;
    --muted: #5a5a72;
    --accent: #0047ab;
    --accent2: #4ecca3;
    --danger: #ff4757;
    --green: #2ed573;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Inter', sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-x: hidden;
  }
  .wrap {
    position: relative;
    width: 100%; max-width: 360px;
    z-index: 1;
  }

  .logo-block {
    text-align: center;
    margin-bottom: 36px;
  }
  .logo-icon {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--accent), #003b91);
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 14px;
    box-shadow: 0 8px 32px rgba(0,71,171,0.3);
  }
  .logo-title {
    font-family: var(--mono);
    font-size: 18px; font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text);
  }
  .logo-sub {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .form-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px 20px;
    margin-bottom: 16px;
  }
  .account-choice-list { display:grid; gap:10px; margin-top:18px; }
  .account-choice-list .submit-btn { min-height:48px; padding:12px 14px; font-size:14px; }
  .account-choice-note { margin-top:16px; color:var(--muted); font-size:12px; line-height:1.5; text-align:center; }
  .form-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
  }
  .form-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--text);
    font-size: 15px;
    font-family: var(--sans);
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 18px;
  }
  .form-input:focus { border-color: var(--accent); }
  .form-input::placeholder { color: var(--muted); }

  .error-box {
    background: rgba(255,71,87,0.1);
    border: 1px solid rgba(255,71,87,0.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--danger);
    margin-bottom: 16px;
    display: none;
    font-family: var(--mono);
  }

  .submit-btn {
    width: 100%;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 16px;
    font-family: var(--sans);
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.02em;
  }
  .submit-btn:active { transform: scale(0.97); }
  .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .forgot-link {
    display: block;
    text-align: center;
    color: var(--accent);
    font-size: 13px;
    margin-top: 12px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--sans);
    opacity: 1;
    transition: opacity 0.2s;
  }
  .forgot-link:active { text-decoration: underline; }

  .logout-btn {
    display: block;
    text-align: center;
    color: var(--danger);
    font-size: 12px;
    margin-top: 16px;
    cursor: pointer;
    font-family: var(--mono);
    letter-spacing: 0.05em;
    opacity: 1;
  }
  .logout-btn:active { text-decoration: underline; }

  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .modal-overlay.visible {
    opacity: 1;
    pointer-events: all;
  }
  .modal-sheet {
    background: #16161c;
    border: 1px solid #2a2a38;
    border-radius: 24px 24px 20px 20px;
    padding: 28px 24px 24px;
    width: 100%; max-width: 380px;
    transform: translateY(40px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .modal-overlay.visible .modal-sheet {
    transform: translateY(0);
  }
  .modal-handle {
    width: 40px; height: 4px;
    background: #2a2a38;
    border-radius: 2px;
    margin: -12px auto 20px;
  }
  .modal-icon {
    font-size: 40px;
    text-align: center;
    margin-bottom: 12px;
  }
  .modal-title {
    font-size: 18px; font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
  }
  .modal-desc {
    font-size: 13px;
    color: #5a5a72;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .modal-btn {
    display: block; width: 100%;
    padding: 15px;
    border: none; border-radius: 14px;
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    margin-bottom: 10px;
    font-family: var(--sans);
  }
  .modal-btn:active { transform: scale(0.97); }
  .modal-btn-primary {
    background: var(--accent);
    color: white;
  }
  .modal-btn-secondary {
    background: #1e1e28;
    color: #f0f0f8;
    border: 1px solid #2a2a38;
  }
  .support-tag {
    display: inline-block;
    background: rgba(74,158,255,0.12);
    border: 1px solid rgba(74,158,255,0.25);
    border-radius: 8px;
    padding: 3px 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    display: block;
    text-align: center;
  }

/* ═══ THEME (light + circular reveal) ═══ */
html[data-theme="light"] {
  --bg: #f4f5f9;
  --s1: #ffffff;
  --s2: #f0f1f6;
  --s3: #e6e8ef;
  --surface: #ffffff;
  --surface2: #f0f1f6;
  --surface3: #e6e8ef;
  --border: #d8dae3;
  --border2: #c5c8d4;
  --text: #1a1a2e;
  --muted: #6b6b84;
  --muted2: #8a8aa0;
  --accent: #2db88a;
  --accent-dim: rgba(45,184,138,0.12);
  --accent-glow: rgba(45,184,138,0.28);
  --gold: #c4920c;
  --danger: #e63e5c;
  --blue: #3d7aef;
  --blue-dim: rgba(61,122,239,0.1);
  --accent2: #2db88a;
  --green: #1fad5a;
  --warn: #e09a00;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"]
  html[data-theme="light"] .header {
  background: rgba(244,245,249,0.94) !important;
  border-bottom-color: var(--border);
}
html[data-theme="light"] .menu-btn .bars span { background: var(--text); }
html[data-theme="light"] .form-input,
html[data-theme="light"] .filter-select,
html[data-theme="light"] .chat-modal-input {
  color: var(--text);
  background: var(--surface2);
}
html[data-theme="light"] .form-input::placeholder { color: var(--muted); }
html[data-theme="light"] .lesson-card,
html[data-theme="light"] .practice-card,
html[data-theme="light"] .record-card,
html[data-theme="light"] .user-block,
html[data-theme="light"] .form-block,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .action-btn,
html[data-theme="light"] .scan-zone,
html[data-theme="light"] .pair-card,
html[data-theme="light"] .att-item,
html[data-theme="light"] .group-sched-card,
html[data-theme="light"] .today-header,
html[data-theme="light"] .status-bar {
  background: var(--s1, var(--surface));
  border-color: var(--border);
}
html[data-theme="light"] .modal,
html[data-theme="light"] .side-menu,
html[data-theme="light"] .chat-modal,
html[data-theme="light"] .schedule-modal-sheet,
html[data-theme="light"] .modal-sheet {
  background: var(--s1, var(--surface)) !important;
  border-color: var(--border2);
  color: var(--text);
}
html[data-theme="light"] .toast {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border2);
}
html[data-theme="light"] .time-chip,
html[data-theme="light"] .streak-badge {
  background: var(--surface2);
  border-color: var(--border2);
  color: var(--muted);
}
html[data-theme="light"] .empty-state { color: var(--muted); }

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }
html.theme-switching { pointer-events: none; }
html[data-theme="light"]