:root{
  --bg:#0b0b11;
  --fg:#e8e8ef;
  --muted:#b6b6c4;
  --border:rgba(226, 208, 208, 0.08);
  --card:rgba(82, 81, 147, 0.836);
  --accent:#8b5cf6;
  --accent2:#22d3ee;
  --radius:18px;
  --shadow:0 12px 30px rgba(37, 48, 81, 0.553);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Cairo, 'Noto Sans Arabic', Arial, sans-serif;
  color:var(--fg);
  background: var(--bg);
  overflow-x:hidden;
  line-height:1.6;
}

/* background & stars */
.bg{ position:fixed; inset:0; z-index:-2; }
#stars{ width:100%; height:100% }
.bg::before, .bg::after{
  content:""; position:fixed; inset:-10%;
  filter:blur(60px); opacity:.35; pointer-events:none; z-index:-1;
}
.bg::before{
  background: radial-gradient(600px 400px at 85% -10%, rgba(34,211,238,.6), transparent 60%);
}
.bg::after{
  background: radial-gradient(800px 500px at -10% 30%, rgba(139,92,246,.6), transparent 60%);
}

.container{ width:min(1100px, 92%); margin-inline:auto; }
.muted{ color:var(--muted) }

.app-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg, rgba(11,11,17,.85), rgba(40, 40, 79, 0.45));
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4%;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px }
.logo{ width:34px; height:34px; border-radius:12px; background:conic-gradient(from 180deg, var(--accent), var(--accent2), #6ee7b7, var(--accent)); box-shadow:0 8px 25px rgba(139,92,246,.25) }

.tools{ display:flex; align-items:center; gap:10px }
.lang-switch{ display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden }
.lang-switch button{ padding:8px 12px; background:transparent; color:var(--fg); border:0; cursor:pointer }
.lang-switch button.active{ background:rgba(255,255,255,.08) }
button.ghost{ border:1px solid var(--border); background:rgba(245, 234, 234, 0.03); color:var(--fg); padding:8px 12px; border-radius:12px; cursor:pointer }
.btn{ border:0; background:linear-gradient(135deg, rgba(139,92,246,.25), rgba(34,211,238,.2)); padding:10px 14px; color:var(--fg); border-radius:12px; cursor:pointer; box-shadow:0 10px 25px rgba(139,92,246,.25) }

main{ padding:28px 0 64px }
.view{ display:none; animation:fade .4s ease both }
.view.active{ display:block }
@keyframes fade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

.title{ font-size:clamp(26px, 3.8vw, 44px); margin:8px 0 8px }
.subtitle{ color:#d8d8e3; max-width:70ch }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
.card{
  background:linear-gradient(180deg, rgba(126, 150, 215, 0.582), rgba(51, 9, 103, 0.555));
  border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  position:relative; overflow:hidden; transition:transform .2s ease;
}
.card:hover{ transform:translateY(-4px) }
.card .flare{ position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:999px; filter:blur(18px); opacity:.4; background:conic-gradient(from 180deg, var(--accent), var(--accent2), #6ee7b7, var(--accent)); animation:spin 30s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

.level-actions, .quiz-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px }

.view-head .eyebrow{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }

.lesson{ border:1px solid var(--border); background:rgba(215, 207, 207, 0.35); border-radius:12px; overflow:hidden }
.lesson .body{ padding:14px }
.lesson h4{ margin:0 0 6px }
.lesson details summary{ cursor:pointer; font-size:14px; color:var(--fg) }
.lesson pre{ background:#f1f1f5; color:#e5e7eb; padding:10px; border-radius:8px; overflow:auto; font-size:12.5px }

.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips a{ border:1px solid var(--border); border-radius:10px; padding:6px 10px; color:var(--fg); text-decoration:none; background:rgba(255,255,255,.03) }

.quiz-q{ border:1px solid var(--border); background:rgba(255,255,255,.05); border-radius:12px; padding:12px; margin-bottom:10px }
.options{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:8px }
.option{ border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; user-select:none }
.option.active{ border-color:rgba(255,255,255,.45); background:rgba(243, 237, 237, 0.833) }

.note{ border:1px solid var(--border); background:rgba(0,0,0,.4); border-radius:12px; padding:12px; margin-top:10px }
.hidden{ display:none }

.app-footer{ border-top:1px solid var(--border); color:var(--muted); padding:18px 4%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px }

/* responsive */
@media (max-width: 980px){
  .grid-3{ grid-template-columns:1fr 1fr }
}
@media (max-width: 640px){
  .grid-3, .grid-2{ grid-template-columns:1fr }
  .options{ grid-template-columns:1fr }
}