/* ============================= TOKENS ============================= */
:root{
  --bg:#EDEAE1;
  --bg-elevated:#F8F6F0;
  --bg-sunken:#E2DECE;
  --ink:#1B1B1E;
  --ink-soft:#5B5748;
  --ink-faint:#8C8874;
  --accent:#9C6B2E;
  --accent-strong:#7A5122;
  --accent-soft:#E8DAC0;
  --error:#B3312C;
  --error-soft:#F4D9D6;
  --success:#3F6B3A;
  --success-soft:#DCE8D6;
  --border:#D3CDB8;
  --key-bg:#FFFFFF;
  --key-edge:#C6BFA6;
  --key-text:#3A3627;
  --shadow:0 1px 0 var(--key-edge), 0 2px 4px rgba(27,27,30,0.08);
  --radius:10px;
  --font-display:'Special Elite', serif;
  --font-heading:'Space Grotesk', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-urdu:'Noto Nastaliq Urdu', serif;
}
[data-theme="dark"]{
  --bg:#15181D;
  --bg-elevated:#1C2128;
  --bg-sunken:#0F1216;
  --ink:#ECE9DE;
  --ink-soft:#A7A392;
  --ink-faint:#716D5D;
  --accent:#E3A94B;
  --accent-strong:#F2BE6E;
  --accent-soft:#3A2E17;
  --error:#E9736C;
  --error-soft:#3A1F1E;
  --success:#7FC383;
  --success-soft:#1E2E1E;
  --border:#2B313A;
  --key-bg:#242A32;
  --key-edge:#0B0D10;
  --key-text:#E3E0D2;
  --shadow:0 1px 0 var(--key-edge), 0 3px 6px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-heading);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4{font-family:var(--font-heading);margin:0;}
p{margin:0;}
button{font-family:var(--font-heading);cursor:pointer;}
a{color:inherit;}
::selection{background:var(--accent-soft);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ============================= LAYOUT ============================= */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:230px;flex-shrink:0;background:var(--bg-elevated);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:22px 16px;gap:6px;
  position:sticky;top:0;height:100vh;
}
.brand{
  font-family:var(--font-display);
  font-size:22px;letter-spacing:.5px;
  padding:4px 10px 22px 10px;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.brand .caret{
  display:inline-block;width:9px;height:20px;background:var(--accent);
  animation:blink 1.1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;border:none;background:transparent;
  color:var(--ink-soft);font-size:14.5px;font-weight:500;text-align:left;
  transition:background .15s ease, color .15s ease;width:100%;
}
.nav-item:hover{background:var(--bg-sunken);color:var(--ink);}
.nav-item.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600;}
.nav-icon{width:18px;text-align:center;font-size:15px;}
.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.mini-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-radius:8px;background:var(--bg-sunken);
  font-size:13px;color:var(--ink-soft);
}
.switch{
  width:36px;height:20px;border-radius:20px;background:var(--border);
  position:relative;cursor:pointer;border:none;flex-shrink:0;
}
.switch::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--key-bg);transition:transform .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.switch.on{background:var(--accent);}
.switch.on::after{transform:translateX(16px);}

.main{flex:1;min-width:0;padding:28px 34px 60px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.topbar h2{font-size:22px;}
.topbar .sub{color:var(--ink-soft);font-size:13.5px;margin-top:3px;}
.pill{
  padding:5px 12px;border-radius:999px;background:var(--bg-elevated);border:1px solid var(--border);
  font-size:12.5px;color:var(--ink-soft);font-weight:500;
}

.view{display:none;}
.view.active{display:block;animation:fadeUp .3s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ============================= HOME ============================= */
.hero{
  background:linear-gradient(135deg, var(--bg-elevated), var(--bg-sunken));
  border:1px solid var(--border);border-radius:16px;
  padding:38px 34px;margin-bottom:30px;position:relative;overflow:hidden;
}
.hero-title{font-family:var(--font-display);font-size:30px;line-height:1.35;max-width:560px;color:var(--ink);}
.hero-type{font-family:var(--font-mono);color:var(--accent-strong);}
.hero-sub{margin-top:12px;color:var(--ink-soft);max-width:480px;font-size:14.5px;line-height:1.6;}
.hero-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;}
.hero-typewriter{
  margin-top:26px;font-family:var(--font-mono);font-size:15px;color:var(--ink-soft);
  background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 16px;
  max-width:560px;
}
.hero-typewriter .cursor{display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink 1s step-end infinite;}

.btn{
  border-radius:8px;padding:11px 20px;font-weight:600;font-size:14px;border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease; display:inline-flex;align-items:center;gap:8px;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--accent-strong);}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--ink);}
.btn-ghost:hover{background:var(--bg-sunken);}
.btn-sm{padding:7px 13px;font-size:12.5px;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:900px){.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:20px;
  transition:border-color .15s ease, transform .12s ease;
}
.card:hover{border-color:var(--accent);}
.card h3{font-size:16px;margin-bottom:6px;}
.card p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;}
.card .card-icon{font-size:22px;margin-bottom:10px;display:block;}
.card-foot{margin-top:14px;display:flex;justify-content:space-between;align-items:center;}

.section-title{font-size:17px;margin:34px 0 14px;display:flex;align-items:center;gap:10px;}
.section-title .line{flex:1;height:1px;background:var(--border);}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px;}
@media(max-width:900px){.stat-row{grid-template-columns:repeat(2,1fr);}}
.stat-box{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:16px;}
.stat-box .num{font-family:var(--font-mono);font-size:26px;font-weight:600;color:var(--accent-strong);}
.stat-box .lbl{font-size:12px;color:var(--ink-soft);margin-top:4px;text-transform:uppercase;letter-spacing:.4px;}

/* ============================= LESSON CARDS / MODULES ============================= */
.module-block{margin-bottom:26px;}
.module-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.module-badge{
  font-family:var(--font-mono);font-size:11px;padding:3px 9px;border-radius:6px;font-weight:600;
  background:var(--accent-soft);color:var(--accent-strong);
}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.lesson-card{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:16px;
  cursor:pointer;position:relative;transition:border-color .15s ease, transform .12s ease;
}
.lesson-card:hover:not(.locked){border-color:var(--accent);transform:translateY(-2px);}
.lesson-card.locked{opacity:.5;cursor:not-allowed;}
.lesson-card.done::after{
  content:'✓';position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;
  background:var(--success);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;
}
.lesson-num{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);}
.lesson-card h4{font-size:14.5px;margin:6px 0 4px;}
.lesson-type{font-size:11.5px;color:var(--ink-soft);text-transform:capitalize;}
.lesson-score{margin-top:10px;font-size:11.5px;font-family:var(--font-mono);color:var(--accent-strong);}

/* ============================= TYPING VIEW ============================= */
.type-panel{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;
  padding:26px 28px;margin-bottom:20px;
}
.type-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.type-meta h3{font-size:16px;}
.progress-track{height:6px;background:var(--bg-sunken);border-radius:6px;overflow:hidden;margin-bottom:20px;}
.progress-fill{height:100%;background:var(--accent);width:0%;transition:width .15s ease;}

.text-display{
  font-family:var(--font-mono);font-size:22px;line-height:1.9;letter-spacing:.5px;
  padding:20px 22px;background:var(--bg);border:1px solid var(--border);border-radius:10px;
  min-height:130px;user-select:none;
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;
  max-height:260px;overflow-y:auto;
}
.text-display.urdu{font-family:var(--font-urdu);direction:rtl;font-size:26px;line-height:2.3;}
.text-display span{position:relative;}
.ch-pending{color:var(--ink-faint);}
.ch-correct{color:var(--success);}
.ch-incorrect{color:var(--error);background:var(--error-soft);border-radius:3px;}
.ch-current{
  border-bottom:3px solid var(--accent);
  animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

.hidden-input{position:absolute;opacity:0;pointer-events:none;height:0;width:0;}

.live-stats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap;}
.live-stat{font-family:var(--font-mono);}
.live-stat .v{font-size:24px;font-weight:600;color:var(--ink);}
.live-stat .l{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;}

.type-controls{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}

.focus-hint{
  text-align:center;color:var(--ink-faint);font-size:12.5px;margin-top:10px;
}
.paused-overlay{
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  padding:40px;text-align:center;
}
.paused-overlay.show{display:flex;}

/* ============================= KEYBOARD ============================= */
.keyboard{
  background:var(--bg-sunken);border:1px solid var(--border);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.kb-row{display:flex;gap:6px;}
.key{
  background:var(--key-bg);border:1px solid var(--key-edge);border-radius:6px;
  box-shadow:var(--shadow);
  min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;color:var(--key-text);
  transition:transform .06s ease, background .1s ease, box-shadow .1s ease;
}
.key.w-1_5{min-width:58px;}
.key.w-2{min-width:76px;}
.key.w-2_25{min-width:86px;}
.key.w-space{min-width:280px;}
@media(max-width:900px){.key.w-space{min-width:160px;}}
.key.active-key{
  background:var(--accent);color:#fff;transform:translateY(2px);
  box-shadow:0 0 0 var(--key-edge);
}
.key.shift-active{background:var(--accent-soft);color:var(--accent-strong);}
.kb-hint{text-align:center;color:var(--ink-soft);font-size:12.5px;padding:20px;}

/* ============================= TEST / PRACTICE SETUP ============================= */
.option-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.option-chip{
  padding:10px 18px;border-radius:9px;border:1px solid var(--border);background:var(--bg-elevated);
  font-size:13.5px;font-weight:500;color:var(--ink-soft);
}
.option-chip.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);font-weight:600;}
textarea.custom-text{
  width:100%;min-height:120px;padding:14px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-elevated);color:var(--ink);font-family:var(--font-mono);font-size:14px;resize:vertical;
}

/* ============================= MODAL ============================= */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,15,15,.55);display:none;align-items:center;justify-content:center;
  z-index:50;padding:20px;
}
.modal-backdrop.show{display:flex;}
.modal{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:32px;
  max-width:480px;width:100%;text-align:center;animation:fadeUp .25s ease;
}
.modal h2{font-family:var(--font-display);font-size:24px;margin-bottom:6px;}
.modal .sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:22px;}
.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px;}
.result-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px;}
.result-box .v{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--accent-strong);}
.result-box .l{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;margin-top:2px;}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.new-badge-banner{
  background:var(--success-soft);color:var(--success);border-radius:8px;padding:8px 12px;font-size:12.5px;
  margin-bottom:16px;font-weight:600;
}

/* ============================= ACHIEVEMENTS ============================= */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.badge-card{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:18px;text-align:center;
}
.badge-card.locked{opacity:.4;}
.badge-emoji{font-size:30px;display:block;margin-bottom:10px;}
.badge-card h4{font-size:13.5px;margin-bottom:4px;}
.badge-card p{font-size:11.5px;color:var(--ink-soft);}

/* ============================= HISTORY CHART ============================= */
.chart-wrap{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:20px;}
.bars{display:flex;align-items:flex-end;gap:8px;height:140px;margin-top:16px;}
.bar{flex:1;background:var(--accent);border-radius:4px 4px 0 0;position:relative;min-height:4px;}
.bar .tip{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);
  font-size:10px;color:var(--ink-soft);white-space:nowrap;
}
.empty-note{color:var(--ink-faint);font-size:13px;text-align:center;padding:30px 0;}

/* ============================= MOBILE ============================= */
.mobile-topbar{display:none;}
@media(max-width:860px){
  .app{flex-direction:column;}
  .sidebar{
    position:sticky;top:0;z-index:40;width:100%;height:auto;flex-direction:row;
    overflow-x:auto;padding:10px 12px;align-items:center;
  }
  .brand{padding:4px 10px;flex-shrink:0;}
  .nav-item{flex-shrink:0;width:auto;white-space:nowrap;}
  .sidebar-footer{margin-top:0;flex-direction:row;margin-left:auto;flex-shrink:0;}
  .mini-toggle{padding:6px 8px;}
  .main{padding:18px 16px 50px;}
  .hero{padding:26px 20px;}
  .hero-title{font-size:22px;}
  .text-display{font-size:18px;line-height:1.8;padding:16px;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
}