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

  /* ── LOGIN SCREEN ── */
  #login-screen { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:#0A0A0F; transition:opacity 0.4s; }
  body.light #login-screen { background:#F0F2F8; }
  #login-screen.hide { opacity:0; pointer-events:none; }
  #login-card { background:#141420; border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:40px 36px; width:400px; max-width:92vw; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
  body.light #login-card { background:#ffffff; border-color:rgba(0,0,0,0.1); }
  #login-logo { font-size:28px; font-weight:900; letter-spacing:-1px; margin-bottom:4px; }
  #login-tagline { font-size:12px; color:rgba(255,255,255,0.35); margin-bottom:28px; }
  body.light #login-tagline { color:rgba(0,0,0,0.4); }
  #login-hero { font-size:42px; margin-bottom:16px; }
  #login-title { font-size:22px; font-weight:900; color:#fff; margin-bottom:8px; }
  body.light #login-title { color:#0D0D1A; }
  #login-sub { font-size:13px; color:rgba(255,255,255,0.45); line-height:1.7; margin-bottom:28px; }
  body.light #login-sub { color:rgba(0,0,0,0.5); }
  #google-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:12px; background:#fff; border:1.5px solid rgba(0,0,0,0.12); border-radius:12px; padding:13px 20px; font-size:15px; font-weight:700; color:#1f1f1f; cursor:pointer; transition:all 0.2s; margin-bottom:12px; }
  #google-btn:hover { background:#f5f5f5; box-shadow:0 4px 20px rgba(0,0,0,0.15); transform:translateY(-1px); }
  #google-btn img { width:20px; height:20px; }
  #login-divider { display:flex; align-items:center; gap:10px; margin:16px 0; }
  #login-divider::before, #login-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.08); }
  body.light #login-divider::before, body.light #login-divider::after { background:rgba(0,0,0,0.1); }
  #login-divider span { font-size:11px; color:rgba(255,255,255,0.25); }
  body.light #login-divider span { color:rgba(0,0,0,0.3); }
  /* email inputs now direct children of login-card */
  #login-email-input, #login-pass-input { display:block; width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:11px 14px; font-size:14px; color:#fff; outline:none; margin-bottom:10px; }
  body.light #login-email-input, body.light #login-pass-input { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.15); color:#0D0D1A; }
  #login-email-input::placeholder, #login-pass-input::placeholder { color:rgba(255,255,255,0.3); }
  body.light #login-email-input::placeholder, body.light #login-pass-input::placeholder { color:rgba(0,0,0,0.3); }
  #email-submit-btn { width:100%; padding:12px; border:none; border-radius:10px; font-size:14px; font-weight:800; cursor:pointer; background:linear-gradient(135deg,#8B5CF6,#EC4899); color:#fff; margin-bottom:8px; transition:all 0.2s; }
  #email-submit-btn:hover { opacity:0.9; transform:translateY(-1px); }
  #toggle-email-btn { background:none; border:none; color:rgba(255,255,255,0.35); font-size:12px; cursor:pointer; padding:4px; }
  body.light #toggle-email-btn { color:rgba(0,0,0,0.4); }
  #toggle-email-btn:hover { color:rgba(255,255,255,0.7); }
  body.light #toggle-email-btn:hover { color:rgba(0,0,0,0.8); }
  #login-error { color:#EF4444; font-size:12px; margin-bottom:10px; display:none; }
  #login-loading { display:none; font-size:13px; color:rgba(255,255,255,0.4); margin-top:8px; }
  body.light #login-loading { color:rgba(0,0,0,0.4); }
  #login-switch { margin-top:16px; font-size:12px; color:rgba(255,255,255,0.3); text-align:center; }
  body.light #login-switch { color:rgba(0,0,0,0.4); }
  #mode-toggle-btn { background:none; border:none; color:rgba(255,255,255,0.6); font-size:12px; cursor:pointer; text-decoration:underline; padding:0; margin-left:4px; }
  body.light #mode-toggle-btn { color:rgba(0,0,0,0.6); }
  #login-footer { font-size:10px; color:rgba(255,255,255,0.2); margin-top:20px; line-height:1.6; }
  body.light #login-footer { color:rgba(0,0,0,0.3); }
  #user-pill { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-top:10px; }
  #user-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  #user-avatar-placeholder { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#000; flex-shrink:0; }
  #user-name { font-size:11px; font-weight:700; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #user-email-display { font-size:9px; color:var(--text4); }
  #signout-btn { background:none; border:none; font-size:10px; color:var(--text3); cursor:pointer; padding:2px 4px; flex-shrink:0; }
  #signout-btn:hover { color:#EF4444; }
  #sync-dot { width:6px; height:6px; border-radius:50%; background:#22C55E; display:inline-block; margin-left:4px; transition:background 0.3s; }
  #sync-dot.syncing { background:#F59E0B; animation:pulse-sync 1s infinite; }
  @keyframes pop-in {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
  }
  @keyframes pulse-sync { 0%,100%{opacity:1} 50%{opacity:0.4} }

  /* ── DARK THEME (default) ── */
  :root {
    --bg:           #0A0A0F;
    --bg2:          #111118;
    --surface:      rgba(255,255,255,0.04);
    --surface2:     rgba(255,255,255,0.07);
    --border:       rgba(255,255,255,0.07);
    --border2:      rgba(255,255,255,0.12);
    --text:         #ffffff;
    --text2:        rgba(255,255,255,0.75);
    --text3:        rgba(255,255,255,0.4);
    --text4:        rgba(255,255,255,0.2);
    --text5:        rgba(255,255,255,0.3);
    --input-bg:     rgba(255,255,255,0.07);
    --input-text:   #ffffff;
    --input-ph:     rgba(255,255,255,0.3);
    --modal-bg:     #141420;
    --scrollbar:    rgba(255,255,255,0.15);
    --hover:        rgba(255,255,255,0.06);
    --task-done-bg: rgba(255,255,255,0.06);
    --task-bg:      rgba(255,255,255,0.04);
    --task-box-bg:  rgba(0,0,0,0.3);
    --task-box-text:rgba(255,255,255,0.85);
    --nav-btn-bg:   rgba(255,255,255,0.07);
    --nav-btn-col:  rgba(255,255,255,0.7);
    --divider:      rgba(255,255,255,0.06);
    --stat-bg:      rgba(255,255,255,0.04);
    --cancel-col:   rgba(255,255,255,0.4);
    --theme-icon:   "☀️";
  }

  /* ── LIGHT THEME ── */
  body.light {
    --bg:           #F0F2F8;
    --bg2:          #E8EAF2;
    --surface:      rgba(255,255,255,0.8);
    --surface2:     rgba(255,255,255,0.95);
    --border:       rgba(0,0,0,0.08);
    --border2:      rgba(0,0,0,0.14);
    --text:         #0D0D1A;
    --text2:        rgba(0,0,0,0.75);
    --text3:        rgba(0,0,0,0.5);
    --text4:        rgba(0,0,0,0.3);
    --text5:        rgba(0,0,0,0.35);
    --input-bg:     rgba(0,0,0,0.06);
    --input-text:   #0D0D1A;
    --input-ph:     rgba(0,0,0,0.3);
    --modal-bg:     #ffffff;
    --scrollbar:    rgba(0,0,0,0.15);
    --hover:        rgba(0,0,0,0.05);
    --task-done-bg: rgba(0,0,0,0.04);
    --task-bg:      rgba(255,255,255,0.9);
    --task-box-bg:  rgba(0,0,0,0.04);
    --task-box-text:rgba(0,0,0,0.8);
    --nav-btn-bg:   rgba(0,0,0,0.07);
    --nav-btn-col:  rgba(0,0,0,0.6);
    --divider:      rgba(0,0,0,0.07);
    --stat-bg:      rgba(255,255,255,0.7);
    --cancel-col:   rgba(0,0,0,0.4);
    --theme-icon:   "🌙";
  }

  body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; height: 100vh; overflow: hidden; display: flex; transition: background 0.3s, color 0.3s; }
  ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 99px; }
  #sidebar { width: 270px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100vh; background: var(--bg); transition: background 0.3s; }
  #sidebar-header { padding: 18px 16px 14px; border-bottom: 1px solid var(--border); }
  .logo { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; }
  .logo-sub { font-size: 10px; color: var(--text4); margin-top: 2px; }
  #xp-box { margin-top: 14px; background: var(--surface); border-radius: 10px; padding: 11px; border: 1px solid var(--border); }
  .xp-top { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 11px; font-weight: 700; }
  .progress-bar-wrap { background: var(--surface2); border-radius: 99px; height: 6px; overflow: hidden; }
  .progress-bar-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }
  .xp-bot { display: flex; justify-content: space-between; margin-top: 3px; font-size: 9px; color: var(--text4); }
  #stats-row { display: flex; gap: 6px; margin-top: 9px; }
  .stat-box { flex: 1; background: var(--stat-bg); border: 1px solid var(--border); border-radius: 7px; padding: 7px 5px; text-align: center; }
  .stat-num { font-size: 16px; font-weight: 800; }
  .stat-label { font-size: 9px; color: var(--text3); margin-top: 1px; }
  #module-list { flex: 1; overflow-y: auto; padding: 10px 8px; }
  .module-btn { width: 100%; background: var(--task-bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 13px; cursor: pointer; margin-bottom: 7px; transition: all 0.2s; text-align: left; color: var(--text); }
  .module-btn:hover { background: var(--hover); }
  .module-btn.active { transform: translateX(3px); }
  .mod-row { display: flex; align-items: center; gap: 9px; }
  .mod-emoji { font-size: 18px; }
  .mod-info { flex: 1; min-width: 0; }
  .mod-title { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; color: var(--text); }
  .mod-meta { font-size: 9px; color: var(--text3); }
  .sidebar-foot { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text4); text-align: center; }
  #main { flex: 1; overflow-y: auto; padding: 26px 28px; background: var(--bg); transition: background 0.3s; }
  #module-header { border-radius: 18px; padding: 22px 24px; margin-bottom: 20px; }
  .mh-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .mh-left { display: flex; align-items: center; gap: 12px; }
  .mh-emoji { font-size: 34px; }
  .mh-title { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 6px; }
  .badge-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .badge { border-radius: 99px; padding: 2px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
  .mh-concept { margin-top: 12px; font-size: 15px; color: var(--text2); font-style: italic; line-height: 1.5; }
  .mh-right { text-align: right; }
  .mh-count { font-size: 26px; font-weight: 900; }
  .mh-count-label { font-size: 10px; color: var(--text3); margin-bottom: 7px; }
  .section-label { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
  #theory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 9px; margin-bottom: 20px; }
  .theory-card { background: var(--task-bg); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; }
  .theory-num { font-weight: 900; font-size: 13px; flex-shrink: 0; margin-top: 1px; }
  .theory-text { font-size: 15px; color: var(--text2); line-height: 1.6; }
  #tools-row { display: flex;  gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
  .tool-pill { background: var(--surface); border: 1px solid var(--border2); border-radius: 99px; padding: 5px 13px; font-size: 12px; color: var(--text2); font-weight: 600; }
  .task-card { border-radius: 14px; margin-bottom: 10px; overflow: hidden; transition: all 0.25s; border: 1px solid var(--border); background: var(--task-bg); }
  .task-card.done { background: var(--task-done-bg); }
  .task-header { padding: 14px 18px; cursor: pointer; display: flex; align-items: center; gap: 11px; }
  .task-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--text3); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; font-size: 13px; font-weight: 900; color: #000; }
  .task-title-row { flex: 1; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .task-title { font-weight: 700; font-size: 14px; color: var(--text); }
  .fun-badge { background: rgba(245,158,11,0.15); color: #F59E0B; border: 1px solid rgba(245,158,11,0.3); border-radius: 99px; padding: 1px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
  .new-badge { background: rgba(236,72,153,0.15); color: #EC4899; border: 1px solid rgba(236,72,153,0.3); border-radius: 99px; padding: 1px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
  .task-arrow { color: var(--text3); font-size: 16px; transition: transform 0.2s; }
  .task-body { padding: 0 18px 18px; border-top: 1px solid var(--divider); display: none; }
  .task-body.open { display: block; }
  .task-section { margin-top: 13px; }
  .task-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; }
  .task-box { border-radius: 9px; padding: 12px 14px; font-size: 13px; line-height: 1.7; white-space: pre-line; background: var(--task-box-bg); color: var(--task-box-text); }
  .task-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; flex-wrap: wrap; gap: 8px; }
  .rw-badge { border-radius: 99px; padding: 3px 10px; font-size: 10px; font-weight: 700; }
  .complete-btn { border: none; border-radius: 8px; padding: 7px 18px; font-weight: 800; font-size: 12px; cursor: pointer; transition: all 0.2s; }
  #nav-row { display: flex; justify-content: space-between; margin-top: 24px; gap: 10px; }
  .nav-btn { border-radius: 9px; padding: 9px 18px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.2s; border: 1px solid var(--border); background: var(--nav-btn-bg); color: var(--nav-btn-col); }
  .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .nav-btn.primary { border: none; color: #000; }
  #right-panel { width: 220px; flex-shrink: 0; border-left: 1px solid var(--border); padding: 18px 14px; overflow-y: auto; height: 100vh; background: var(--bg); transition: background 0.3s; }
  .rp-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
  .level-item { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
  .level-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex-shrink: 0; border: 2px solid; }
  .level-name { font-size: 11px; font-weight: 700; color: var(--text2); }
  .level-xp { font-size: 9px; color: var(--text4); }
  .divider { height: 1px; background: var(--divider); margin: 16px 0; }
  .tool-item { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; padding: 5px 7px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); font-size: 11px; }
  .tool-name { color: var(--text2); font-weight: 600; }
  .tool-url { font-size: 9px; color: var(--text4); }
  #overall-box { border-radius: 10px; padding: 12px; margin-top: 4px; }
  .overall-label { font-size: 11px; font-weight: 700; margin-bottom: 7px; }
  .overall-text { font-size: 10px; color: var(--text3); text-align: center; margin-top: 5px; }
  #toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-80px); border-radius: 99px; padding: 11px 26px; font-weight: 800; font-size: 20px; z-index: 9999; transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); pointer-events: none; white-space: nowrap; }
  #toast.show { transform: translateX(-50%) translateY(0); }
  .section-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
  .section-divider span { font-size: 10px; font-weight: 700; color: var(--text4); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
  .section-divider::before, .section-divider::after { content:''; flex:1; height:1px; background: var(--divider); }
  #reset-btn { width:100%; margin-top:10px; background:transparent; border:1px solid var(--border); border-radius:8px; padding:7px; font-size:11px; color:var(--text3); cursor:pointer; transition:all 0.2s; }
  #reset-btn:hover { background: var(--hover); }
  #unlock-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:10000; align-items:center; justify-content:center; }
  #unlock-box { background: var(--modal-bg); border:1px solid var(--border2); border-radius:20px; padding:36px 32px; width:380px; max-width:90vw; text-align:center; }
  #unlock-box h2 { font-size:22px; font-weight:900; color: var(--text); margin-bottom:8px; }
  #unlock-box p { font-size:14px; color: var(--text3); margin-bottom:24px; line-height:1.6; }
  #unlock-input { width:100%; background: var(--input-bg); border:1px solid var(--border2); border-radius:10px; padding:12px 16px; font-size:16px; color: var(--input-text); text-align:center; letter-spacing:3px; font-weight:700; outline:none; margin-bottom:8px; }
  #unlock-input::placeholder { letter-spacing:0; font-weight:400; color: var(--input-ph); }
  #unlock-error { color:#EF4444; font-size:12px; margin-bottom:12px; display:none; }
  #unlock-submit { width:100%; padding:12px; border:none; border-radius:10px; font-size:15px; font-weight:800; cursor:pointer; margin-bottom:10px; color:#000; }
  #unlock-cancel { background:none; border:none; color: var(--cancel-col); font-size:13px; cursor:pointer; padding:6px; }

  /* Theme toggle button */
  #theme-toggle { background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 4px 10px; font-size: 15px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 5px; color: var(--text); }
  #theme-toggle:hover { background: var(--hover); }
  #theme-toggle .toggle-label { font-size: 10px; font-weight: 700; color: var(--text3); }

  /* Light mode task box overrides */
  body.light .task-box { border: 1px solid var(--border); }

  /* ── TUTORIAL OVERLAY ── */
  #tutorial-overlay { display:none; position:fixed; inset:0; z-index:20000; pointer-events:none; }
  #tutorial-overlay.active { display:block; }
  #tut-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.7); pointer-events:all; }
  #tut-spotlight { position:absolute; border-radius:14px; box-shadow:0 0 0 9999px rgba(0,0,0,0.72); transition:all 0.4s cubic-bezier(.4,0,.2,1); pointer-events:none; border:2px solid rgba(255,255,255,0.25); }
  #tut-card { position:absolute; background:var(--modal-bg); border:1px solid var(--border2); border-radius:18px; padding:24px 26px; width:320px; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,0.5); pointer-events:all; transition:all 0.4s cubic-bezier(.4,0,.2,1); }
  #tut-step-badge { font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; opacity:0.6; color:var(--text); }
  #tut-icon { font-size:36px; margin-bottom:10px; }
  #tut-title { font-size:18px; font-weight:900; color:var(--text); margin-bottom:8px; }
  #tut-body { font-size:13px; color:var(--text2); line-height:1.7; margin-bottom:20px; }
  #tut-dots { display:flex; gap:6px; justify-content:center; margin-bottom:18px; }
  .tut-dot { width:7px; height:7px; border-radius:50%; background:var(--border2); transition:all 0.3s; }
  .tut-dot.active { width:20px; border-radius:99px; }
  #tut-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  #tut-skip { background:none; border:none; color:var(--text3); font-size:12px; cursor:pointer; padding:4px; }
  #tut-skip:hover { color:var(--text); }
  #tut-next { border:none; border-radius:10px; padding:10px 24px; font-size:14px; font-weight:800; cursor:pointer; color:#000; transition:all 0.2s; }
  #tut-next:hover { opacity:0.85; transform:scale(1.03); }
  #tut-prev { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 16px; font-size:13px; font-weight:700; cursor:pointer; color:var(--text2); transition:all 0.2s; }
  #tut-prev:hover { background:var(--hover); }
  #tut-help-btn { position:fixed; bottom:20px; right:20px; background:var(--modal-bg); border:1px solid var(--border2); border-radius:99px; padding:8px 16px; font-size:12px; font-weight:700; cursor:pointer; color:var(--text2); z-index:1000; box-shadow:0 4px 20px rgba(0,0,0,0.3); transition:all 0.2s; display:flex; align-items:center; gap:6px; }
  #tut-help-btn:hover { transform:scale(1.05); }