:root{
  --ink:#14213D;
  --ink-soft:#2C3B5C;
  --paper:#FBFAF7;
  --paper-dim:#F1EEE6;
  --card:#FFFFFF;
  --line:#DDD8CC;
  --gold:#B78628;
  --gold-soft:#F2E7CE;
  --teal:#1F6F6B;
  --teal-soft:#E1EEEC;
  --success:#2F7A4F;
  --success-soft:#E4F1E8;
  --warn:#B4562A;
  --warn-soft:#F6E6DC;
  --danger:#A3312B;
  --danger-soft:#F5E1DF;
  --muted:#6B6455;
  --radius:8px;
  --shadow:0 1px 2px rgba(20,33,61,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  font-weight:400;
  line-height:1.65;
  min-height:100vh;
}
[dir="ltr"], .ltr{direction:ltr; text-align:left; font-family:'IBM Plex Sans', sans-serif;}
h1,h2,h3,.serif{font-family:'Amiri','IBM Plex Serif',serif;}
.serif-en{font-family:'IBM Plex Serif',serif;}
a{color:inherit;}
button, input, textarea, select{font-family:inherit; font-size:1rem;}
::selection{background:var(--gold-soft);}

/* Layout */
#app{display:flex; min-height:100vh;}
#sidebar{
  width:248px; flex-shrink:0; background:var(--ink); color:#EDE9DD;
  padding:22px 18px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
#sidebar .brand{display:flex; align-items:center; gap:10px; margin-bottom:26px; padding:0 4px;}
#sidebar .brand .mark{width:30px; height:30px; border:1.5px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Amiri',serif; color:var(--gold); font-size:16px;}
#sidebar .brand .name{font-family:'Amiri',serif; font-size:1.25rem;}
#sidebar .brand .sub{font-size:.68rem; color:#9AA3BD; margin-top:-2px; letter-spacing:.02em;}
.nav-group{margin-bottom:4px;}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; margin-bottom:2px;
  color:#C8CCE0; text-decoration:none; cursor:pointer; font-size:.92rem; border:1px solid transparent;
}
.nav-item:hover{background:#1D2C4E;}
.nav-item.active{background:#20304F; color:#fff; border-color:#3A4A70;}
.nav-item .dot{width:5px;height:5px;border-radius:50%;background:#5B6690; flex-shrink:0;}
.nav-item.active .dot{background:var(--gold);}
#sidebar .streak-box{margin-top:20px; padding:12px; border:1px solid #2C3A5E; border-radius:8px; background:#182746;}
#sidebar .streak-box .num{font-family:'Amiri',serif; font-size:1.6rem; color:var(--gold);}
#sidebar .streak-box .lbl{font-size:.72rem; color:#9AA3BD;}

#main{flex:1; min-width:0; padding:26px 34px 60px;}
.topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.topbar h1{font-size:1.5rem; margin:0 0 4px;}
.topbar .desc{color:var(--muted); font-size:.9rem; margin:0;}
.level-chip{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:8px 16px;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow);
}
.level-chip .badge{font-family:'IBM Plex Serif',serif; font-weight:600; font-size:1.15rem; color:var(--teal);}
.level-chip .sub{font-size:.72rem; color:var(--muted);}

/* Cards & grid */
.grid{display:grid; gap:16px;}
.grid.cols-2{grid-template-columns:1fr 1fr;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;} #sidebar{position:fixed; z-index:50; transform:translateX(100%); transition:transform .2s;} #sidebar.open{transform:translateX(0);} #main{padding:18px;}}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.card h3{margin:0 0 12px; font-size:1.05rem; display:flex; align-items:center; gap:8px;}
.card .eyebrow{font-size:.72rem; color:var(--muted); margin-bottom:2px;}
.hairline{border:none; border-top:1px solid var(--line); margin:14px 0;}

/* Progress bars */
.pbar-row{margin-bottom:12px;}
.pbar-row:last-child{margin-bottom:0;}
.pbar-top{display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:5px;}
.pbar-top .lvl{color:var(--muted); font-size:.78rem;}
.pbar{height:7px; background:var(--paper-dim); border-radius:4px; overflow:hidden;}
.pbar > div{height:100%; background:var(--teal); border-radius:4px;}
.pbar.gold > div{background:var(--gold);}
.pbar.warn > div{background:var(--warn);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:6px; border:1px solid var(--ink);
  background:var(--ink); color:#fff; cursor:pointer; font-size:.9rem; font-weight:500;
}
.btn:hover{background:var(--ink-soft);}
.btn.secondary{background:transparent; color:var(--ink); border-color:var(--line);}
.btn.secondary:hover{background:var(--paper-dim);}
.btn.teal{background:var(--teal); border-color:var(--teal);}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#241a05;}
.btn.danger{background:var(--danger); border-color:var(--danger);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}

/* Pills / badges */
.pill{display:inline-block; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:500; border:1px solid transparent;}
.pill.new{background:var(--danger-soft); color:var(--danger);}
.pill.recognized{background:var(--warn-soft); color:var(--warn);}
.pill.understand{background:var(--gold-soft); color:#8A6300;}
.pill.canuse{background:var(--teal-soft); color:var(--teal);}
.pill.mastered{background:var(--success-soft); color:var(--success);}
.pill.critical{background:var(--danger-soft); color:var(--danger);}
.pill.weak{background:var(--warn-soft); color:var(--warn);}
.pill.developing{background:var(--gold-soft); color:#8A6300;}
.pill.plain{background:var(--paper-dim); color:var(--ink-soft);}

textarea, input[type=text], select{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:#fff; color:var(--ink);
}
textarea{min-height:110px; resize:vertical;}
label.field-label{font-size:.8rem; color:var(--muted); display:block; margin-bottom:5px;}
.field{margin-bottom:14px;}

table.simple{width:100%; border-collapse:collapse; font-size:.9rem;}
table.simple th, table.simple td{text-align:right; padding:8px 6px; border-bottom:1px solid var(--line);}
table.simple th{color:var(--muted); font-weight:500; font-size:.78rem;}

.empty-state{color:var(--muted); font-size:.88rem; text-align:center; padding:30px 10px;}
.loading-dot{display:inline-block; width:6px;height:6px;border-radius:50%;background:var(--gold); animation:pulse 1s infinite ease-in-out;}
@keyframes pulse{0%,100%{opacity:.3} 50%{opacity:1}}
.sk-list{display:flex; flex-direction:column; gap:8px;}
.sk-item{border:1px solid var(--line); border-radius:6px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.sk-item .t{font-size:.88rem; font-weight:500;}
.sk-item.done{opacity:.55;}
.timer-ring{width:120px;height:120px; margin:0 auto;}
.mono-num{font-family:'IBM Plex Serif',serif; font-variant-numeric:tabular-nums;}
.two-col-diff{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:700px){.two-col-diff{grid-template-columns:1fr;}}
.diff-box{border:1px solid var(--line); border-radius:6px; padding:12px 14px; background:var(--paper-dim);}
.diff-box.my{border-color:var(--danger); background:var(--danger-soft);}
.diff-box.corrected{border-color:var(--teal); background:var(--teal-soft);}
.diff-box.natural{border-color:var(--gold); background:var(--gold-soft);}
.diff-box.c1{border-color:var(--success); background:var(--success-soft);}
.diff-box .lbl{font-size:.7rem; text-transform:none; color:var(--muted); margin-bottom:5px;}
.score-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0;}
@media(max-width:700px){.score-grid{grid-template-columns:repeat(2,1fr);}}
.score-cell{text-align:center; border:1px solid var(--line); border-radius:6px; padding:10px 4px;}
.score-cell .n{font-family:'IBM Plex Serif',serif; font-size:1.3rem;}
.score-cell .l{font-size:.68rem; color:var(--muted);}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 20px; border-radius:6px; font-size:.85rem; z-index:100; box-shadow:0 4px 14px rgba(0,0,0,.2);}
.modal-bg{position:fixed; inset:0; background:rgba(20,33,61,.55); display:flex; align-items:center; justify-content:center; z-index:80; padding:20px;}
.modal{background:#fff; border-radius:10px; padding:24px; max-width:560px; width:100%; max-height:86vh; overflow-y:auto;}
.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.chip{padding:6px 14px; border:1px solid var(--line); border-radius:20px; font-size:.82rem; cursor:pointer; background:#fff;}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.word-card{border:1px solid var(--line); border-radius:8px; padding:14px 16px;}
.word-card .word{font-family:'IBM Plex Serif',serif; font-size:1.15rem; direction:ltr; text-align:left;}
.word-card .meaning{color:var(--ink-soft); font-size:.9rem; margin:4px 0 8px;}
.small{font-size:.78rem; color:var(--muted);}
.mb-0{margin-bottom:0 !important;}
.flex{display:flex; align-items:center;}
.gap-8{gap:8px;}
.between{justify-content:space-between;}
.svg-chart{width:100%; height:150px;}
.hidden{display:none !important;}
.hamburger{display:none; border:1px solid var(--line); background:#fff; border-radius:6px; padding:8px 10px; cursor:pointer;}
@media(max-width:980px){.hamburger{display:inline-flex;}}