/* ==========================================================================
   Rafed — منصة رافد التعليمية الذكية
   Static prototype — shared stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800&display=swap');

:root{
  /* Brand palette — derived from the Rafed pitch deck */
  --navy-950:#080f24;
  --navy-900:#0b1230;
  --navy-800:#101b3f;
  --navy-700:#16234f;

  --bg:#eef2fb;
  --bg-soft:#f5f7fd;
  --card:#ffffff;

  --cyan:#22d3ee;
  --cyan-dark:#06b6d4;
  --purple:#8b5cf6;
  --purple-dark:#7c3aed;
  --violet:#6366f1;
  --orange:#f59e0b;
  --orange-dark:#f97316;
  --blue:#3b82f6;
  --blue-dark:#1d4ed8;

  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;

  --text:#161b2e;
  --text-muted:#5b6478;
  --text-faint:#8b93a7;
  --border:#e6e9f5;

  --gradient-brand: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 55%, var(--orange) 100%);
  --gradient-cool: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  --gradient-warm: linear-gradient(135deg, var(--purple) 0%, var(--orange) 100%);
  --gradient-hero: radial-gradient(circle at 20% 20%, #16234f 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  --gradient-ai: linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #22d3ee 100%);

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, .14);
  --shadow-glow-cyan: 0 0 0 1px rgba(34,211,238,.25), 0 12px 32px rgba(34,211,238,.18);
  --shadow-glow-purple: 0 0 0 1px rgba(139,92,246,.25), 0 12px 32px rgba(139,92,246,.18);
  --shadow-glow-orange: 0 0 0 1px rgba(245,158,11,.25), 0 12px 32px rgba(245,158,11,.18);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: 'Tajawal', 'Cairo', sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.font-display{
  font-family:'Cairo','Tajawal', sans-serif;
  font-weight:800;
  margin:0;
  color: var(--text);
}

p{ margin:0; line-height:1.8; color: var(--text-muted); }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

.container{ max-width:1240px; margin:0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight:700; font-size:15px;
  border:none; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  white-space:nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: var(--gradient-cool); color:#fff;
  box-shadow: 0 10px 24px rgba(124,58,237,.28);
}
.btn-primary:hover{ box-shadow: 0 14px 32px rgba(124,58,237,.38); transform: translateY(-1px); }
.btn-ghost{
  background: #fff; color: var(--text); border:1.5px solid var(--border);
}
.btn-ghost:hover{ border-color: var(--purple); color: var(--purple-dark); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:13px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- Cards ---------- */
.card{
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border:1px solid var(--border);
}
.glow-card{ position:relative; border-radius: var(--radius-md); background:#fff; }
.glow-cyan{ box-shadow: var(--shadow-glow-cyan); }
.glow-purple{ box-shadow: var(--shadow-glow-purple); }
.glow-orange{ box-shadow: var(--shadow-glow-orange); }

/* ---------- Badges / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 16px; border-radius: var(--radius-pill);
  font-size:13px; font-weight:700;
}
.pill-cyan{ background:rgba(34,211,238,.12); color:#0891b2; }
.pill-purple{ background:rgba(139,92,246,.12); color:#7c3aed; }
.pill-orange{ background:rgba(245,158,11,.14); color:#b45309; }
.pill-success{ background:rgba(34,197,94,.12); color:#15803d; }

/* ---------- Icon badges ---------- */
.icon-badge{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; flex-shrink:0;
}
.icon-badge.lg{ width:64px; height:64px; font-size:26px; }
.ib-cyan{ background: linear-gradient(135deg,#22d3ee,#06b6d4); }
.ib-purple{ background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.ib-orange{ background: linear-gradient(135deg,#fbbf24,#f97316); }
.ib-blue{ background: linear-gradient(135deg,#60a5fa,#1d4ed8); }

/* ---------- Utility ---------- */
.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.text-muted{ color: var(--text-muted); }
.text-center{ text-align:center; }

/* ==========================================================================
   Auth / onboarding shell (login, signup, account setup)
   ========================================================================== */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 920px){ .auth-shell{ grid-template-columns: 1fr; } }

.auth-visual{
  background: var(--gradient-hero);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding: 60px; color:#fff;
}
@media (max-width: 920px){ .auth-visual{ display:none; } }

.auth-visual .orb{
  position:absolute; border-radius:50%; filter: blur(2px); opacity:.85;
}
.auth-visual .glow-blob{
  position:absolute; border-radius:50%; filter: blur(60px); opacity:.35;
}

.auth-visual-content{ position:relative; z-index:2; max-width:460px; }
.auth-logo{ display:flex; align-items:center; gap:12px; margin-bottom:56px; }
.auth-logo-mark{
  width:44px; height:44px; border-radius:14px;
  background: var(--gradient-cool);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:18px; color:#fff;
  box-shadow: 0 8px 20px rgba(34,211,238,.35);
}
.auth-logo-text{ font-family:'Cairo'; font-weight:800; font-size:20px; }

.auth-visual h1{ color:#fff; font-size:34px; line-height:1.5; margin-bottom:18px; }
.auth-visual .accent{
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-visual p{ color:#c3c9e6; font-size:16px; line-height:1.9; }

.auth-stats{ display:flex; gap:28px; margin-top:46px; }
.auth-stat b{ display:block; font-family:'Cairo'; font-size:24px; color:#fff; }
.auth-stat span{ font-size:13px; color:#9aa2c7; }

.auth-form-side{
  display:flex; align-items:center; justify-content:center;
  padding: 40px 24px;
}
.auth-form-wrap{ width:100%; max-width:420px; }
.auth-form-wrap .step-badge{ margin-bottom:14px; }
.auth-form-wrap h2{ font-size:28px; margin-bottom:8px; }
.auth-form-wrap > p.lead{ margin-bottom:32px; }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; }
.field input, .field select{
  width:100%; padding:14px 16px; border-radius:12px;
  border:1.5px solid var(--border); background:#fbfcff;
  font-family:inherit; font-size:15px; color:var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus{
  outline:none; border-color: var(--purple); background:#fff;
  box-shadow: 0 0 0 4px rgba(139,92,246,.12);
}
.field-hint{ font-size:12px; color:var(--text-faint); margin-top:6px; }

.divider{ display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--text-faint); font-size:13px; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--border); }

.social-row{ display:flex; gap:12px; }
.social-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border-radius:12px; border:1.5px solid var(--border);
  background:#fff; font-weight:700; font-size:14px; color:var(--text);
}
.social-btn:hover{ border-color: var(--text-faint); }

.auth-switch{ text-align:center; margin-top:28px; font-size:14px; color:var(--text-muted); }
.auth-switch a{ color: var(--purple-dark); font-weight:700; }

/* onboarding progress dots */
.onb-progress{ display:flex; gap:8px; margin-bottom:28px; }
.onb-progress span{ height:6px; flex:1; border-radius:4px; background:var(--border); transition: background .3s ease; }
.onb-progress span.done{ background: var(--gradient-cool); }

.choice-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.choice-card{
  border:1.5px solid var(--border); border-radius:16px; padding:18px 16px;
  cursor:pointer; transition: all .18s ease; text-align:center; background:#fff;
}
.choice-card:hover{ border-color:#c7cdea; }
.choice-card.selected{
  border-color: var(--purple); background: linear-gradient(180deg,#f7f3ff,#fff);
  box-shadow: 0 6px 18px rgba(139,92,246,.18);
}
.choice-card .emoji{ font-size:28px; margin-bottom:10px; }
.choice-card b{ display:block; font-size:14px; margin-bottom:4px; }
.choice-card small{ color:var(--text-faint); font-size:12px; }

/* ==========================================================================
   App shell (dashboard / lesson) — sidebar + topbar
   ========================================================================== */
.app-shell{ min-height:100vh; display:flex; }

.sidebar{
  width:260px; flex-shrink:0; background: var(--navy-900);
  color:#fff; padding: 28px 20px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar-logo{ display:flex; align-items:center; gap:12px; padding: 0 6px 28px; }
.sidebar-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.sidebar-nav a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  color:#a9b0d4; font-weight:700; font-size:14.5px; transition: all .15s ease;
}
.sidebar-nav a i{ width:20px; text-align:center; font-size:16px; }
.sidebar-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(139,92,246,.18));
  color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.sidebar-nav a.active i{ color: var(--cyan); }

.sidebar-user{
  display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px;
  background: rgba(255,255,255,.05); margin-top:12px;
}
.sidebar-user .avatar{
  width:38px; height:38px; border-radius:50%; background: var(--gradient-cool);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0;
}
.sidebar-user b{ font-size:13.5px; display:block; }
.sidebar-user span{ font-size:11.5px; color:#9aa2c7; }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 32px; background:#fff; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:5;
}
.topbar h1{ font-size:20px; }
.topbar-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:42px; height:42px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); position:relative; font-size:16px;
}
.icon-btn .dot{
  position:absolute; top:9px; left:10px; width:8px; height:8px; border-radius:50%;
  background: var(--orange); border:2px solid #fff;
}

.page-body{ padding: 28px 32px; flex:1; }

@media (max-width: 980px){
  .sidebar{ display:none; }
  .page-body{ padding: 20px; }
  .topbar{ padding: 16px 20px; }
}

/* mobile bottom nav */
.mobile-nav{
  display:none; position:fixed; bottom:0; right:0; left:0; z-index:20;
  background:#fff; border-top:1px solid var(--border);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(15,23,42,.08);
}
.mobile-nav ul{ display:flex; justify-content:space-around; }
.mobile-nav a{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; color:var(--text-faint); font-weight:700; padding:6px 10px; }
.mobile-nav a i{ font-size:18px; }
.mobile-nav a.active{ color: var(--purple-dark); }
@media (max-width: 980px){
  .mobile-nav{ display:block; }
  .page-body{ padding-bottom: 90px; }
}

/* ---------- Stat rings ---------- */
.ring-wrap{ position:relative; width:110px; height:110px; margin:0 auto; }
.ring-wrap svg{ transform: rotate(-90deg); width:100%; height:100%; }
.ring-track{ fill:none; stroke:#eef0fa; stroke-width:10; }
.ring-value{ fill:none; stroke-width:10; stroke-linecap:round; transition: stroke-dashoffset 1s ease; }
.ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center b{ font-family:'Cairo'; font-size:22px; }
.ring-center span{ font-size:11px; color:var(--text-faint); }

/* ---------- Learning path (dashboard) ---------- */
.path-track{
  position:relative; padding: 30px 10px; overflow-x:auto;
}
.path-line{
  display:flex; align-items:center; gap:0; min-width:640px;
}
.path-node{
  display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; z-index:2; flex-shrink:0; width:110px;
}
.path-node .node-dot{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; border:4px solid #fff; box-shadow: var(--shadow-md);
}
.path-node.done .node-dot{ background: linear-gradient(135deg,#34d399,#059669); }
.path-node.current .node-dot{ background: var(--gradient-cool); box-shadow: 0 0 0 6px rgba(139,92,246,.15), var(--shadow-md); }
.path-node.locked .node-dot{ background:#e6e9f5; color:#b6bbd6; }
.path-node small{ font-size:12px; font-weight:700; text-align:center; color:var(--text-muted); }
.path-connector{ height:4px; flex:1; background:#e6e9f5; margin-top:-38px; min-width:40px; }
.path-connector.done{ background: linear-gradient(90deg,#34d399,#22d3ee); }

/* ---------- Chat / AI assistant ---------- */
.chat-fab{
  position:fixed; bottom:26px; left:26px; z-index:40;
  width:62px; height:62px; border-radius:50%; border:none;
  background: var(--gradient-ai); color:#fff; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px rgba(99,102,241,.4);
  animation: floaty 3s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

.chat-panel{
  position:fixed; bottom:26px; left:26px; z-index:41;
  width:380px; max-width:92vw; height:560px; max-height:80vh;
  background:#fff; border-radius:22px; box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
  transform: translateY(20px) scale(.97); opacity:0; pointer-events:none;
  transition: all .22s ease;
}
.chat-panel.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }

.chat-head{
  background: var(--gradient-ai); color:#fff; padding:18px 18px;
  display:flex; align-items:center; gap:12px;
}
.chat-head .bot-avatar{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.chat-head b{ font-size:15px; display:block; }
.chat-head span{ font-size:11.5px; opacity:.85; }
.chat-head .close-chat{ margin-right:auto; background:none; border:none; color:#fff; font-size:18px; opacity:.85; }

.chat-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; background:#f8f9ff; }
.msg{ max-width:82%; padding:12px 16px; border-radius:16px; font-size:13.8px; line-height:1.8; }
.msg-bot{ align-self:flex-start; background:#fff; border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg-user{ align-self:flex-end; background: var(--gradient-cool); color:#fff; border-bottom-right-radius:4px; }
.msg-time{ font-size:10px; color:var(--text-faint); margin-top:4px; }

.chat-suggestions{ display:flex; flex-wrap:wrap; gap:8px; padding: 0 18px 12px; }
.chip{
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-pill);
  padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--purple-dark);
}
.chip:hover{ border-color: var(--purple); }

.chat-input-row{ display:flex; align-items:center; gap:8px; padding:14px; border-top:1px solid var(--border); background:#fff; }
.chat-input-row input{
  flex:1; border:1.5px solid var(--border); border-radius:var(--radius-pill); padding:12px 18px;
  font-family:inherit; font-size:13.5px;
}
.chat-input-row input:focus{ outline:none; border-color:var(--purple); }
.round-btn{
  width:42px; height:42px; border-radius:50%; border:none; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.round-btn.send{ background: var(--gradient-cool); color:#fff; }
.round-btn.mic{ background:var(--bg-soft); color:var(--text-muted); border:1px solid var(--border); }
.round-btn.mic.recording{ background: var(--danger); color:#fff; animation: pulse 1.2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(239,68,68,.5);} 70%{ box-shadow:0 0 0 12px rgba(239,68,68,0);} 100%{ box-shadow:0 0 0 0 rgba(239,68,68,0);} }

.typing-dots{ display:inline-flex; gap:4px; align-items:center; }
.typing-dots span{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation: blink 1.2s infinite; }
.typing-dots span:nth-child(2){ animation-delay:.2s; } .typing-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25;} 40%{ opacity:1;} }

/* ---------- Diagnostic test ---------- */
.test-shell{ max-width:760px; margin:0 auto; padding: 40px 20px 80px; }
.test-progress-bar{ height:8px; border-radius:6px; background:var(--border); overflow:hidden; margin-bottom:10px; }
.test-progress-fill{ height:100%; background: var(--gradient-cool); border-radius:6px; transition: width .4s ease; }
.test-meta{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-faint); margin-bottom:34px; font-weight:700; }

.question-card{ background:#fff; border-radius:22px; padding:34px; box-shadow: var(--shadow-md); }
.question-card .qnum{ display:inline-block; margin-bottom:14px; }
.question-card h2{ font-size:21px; line-height:1.7; margin-bottom:26px; }

.option-list{ display:flex; flex-direction:column; gap:12px; }
.option{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px;
  border:1.5px solid var(--border); font-weight:700; font-size:14.5px; transition: all .15s ease;
}
.option .opt-letter{
  width:30px; height:30px; border-radius:50%; background:var(--bg-soft); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.option:hover{ border-color:#c7cdea; }
.option.selected{ border-color: var(--purple); background:#f8f5ff; }
.option.selected .opt-letter{ background: var(--gradient-cool); color:#fff; }
.option.correct{ border-color: var(--success); background:#f0fdf4; }
.option.correct .opt-letter{ background:var(--success); color:#fff; }
.option.wrong{ border-color: var(--danger); background:#fef2f2; }
.option.wrong .opt-letter{ background:var(--danger); color:#fff; }

.test-nav{ display:flex; justify-content:space-between; margin-top:28px; }

/* results screen */
.result-hero{ text-align:center; padding: 30px 20px; }
.result-hero .icon-badge{ margin:0 auto 20px; }
.result-summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.result-summary-grid .card{ padding:20px; text-align:center; }
.result-summary-grid b{ display:block; font-family:'Cairo'; font-size:26px; margin-bottom:4px; }

/* ---------- Lesson page ---------- */
.lesson-layout{ display:grid; grid-template-columns: 1fr 300px; gap:24px; align-items:start; }
@media (max-width: 1100px){ .lesson-layout{ grid-template-columns:1fr; } }

.lesson-header{ margin-bottom:22px; }
.lesson-header .pill{ margin-bottom:12px; }
.lesson-header h1{ font-size:24px; margin-bottom:8px; }

.video-frame{
  aspect-ratio:16/9; border-radius:20px; background: var(--gradient-hero);
  display:flex; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden; margin-bottom:22px;
}
.video-frame .play-btn{
  width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.15); backdrop-filter: blur(4px);
  border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:26px;
}

.lesson-tabs{ display:flex; gap:6px; border-bottom:1.5px solid var(--border); margin-bottom:22px; }
.lesson-tabs button{
  background:none; border:none; padding:12px 4px; margin-left:24px; font-weight:700; color:var(--text-faint);
  border-bottom:3px solid transparent; font-size:14.5px;
}
.lesson-tabs button.active{ color: var(--purple-dark); border-color: var(--purple); }

.lesson-content{ background:#fff; border-radius:18px; padding:28px; box-shadow:var(--shadow-sm); }
.lesson-content h3{ font-size:17px; margin-bottom:12px; }
.lesson-content p{ margin-bottom:14px; }
.lesson-content ul{ margin-bottom:14px; }
.lesson-content ul li{ display:flex; gap:10px; margin-bottom:10px; color:var(--text-muted); line-height:1.8; }
.lesson-content ul li i{ color: var(--success); margin-top:4px; }

/* ---------- Lesson visual diagrams ---------- */
.frac-diagram{ display:flex; align-items:center; justify-content:center; gap:18px; margin:20px 0 6px; flex-wrap:wrap; }
.frac-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.frac-item svg{ width:84px; height:84px; }
.frac-item span{ font-weight:800; font-family:'Cairo'; font-size:16px; color:var(--text); }
.frac-op{ font-size:24px; font-weight:800; color:var(--text-faint); }

.bar-diagram{ display:flex; flex-direction:column; gap:12px; margin:20px 0; }
.bar-row{ display:flex; align-items:center; gap:14px; }
.bar-label{ width:90px; flex-shrink:0; font-weight:800; font-family:'Cairo'; font-size:14px; text-align:left; }
.bar-track{ flex:1; height:28px; border-radius:8px; background:#eef0fa; display:flex; overflow:hidden; border:1px solid var(--border); }
.bar-seg{ height:100%; }

.tip-box{
  display:flex; align-items:flex-start; gap:12px; background:#fff7ed; border:1px solid #fde3c2;
  border-radius:14px; padding:16px 18px; margin:20px 0; font-size:13.5px; line-height:1.9; color:var(--text);
}
.tip-box i{ color:var(--orange-dark); font-size:18px; margin-top:2px; }
.tip-box.tip-cyan{ background:#ecfeff; border-color:#a5f3fc; }
.tip-box.tip-cyan i{ color:var(--cyan-dark); }

.side-card{ background:#fff; border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); margin-bottom:18px; }
.side-card h4{ font-size:14.5px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }

.lesson-list-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px; font-weight:700; }
.lesson-list-item:last-child{ border-bottom:none; }
.lesson-list-item .dot-num{ width:26px; height:26px; border-radius:50%; background:var(--bg-soft); color:var(--text-faint); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.lesson-list-item.active .dot-num{ background:var(--gradient-cool); color:#fff; }
.lesson-list-item.completed .dot-num{ background:var(--success); color:#fff; }

.streak-strip{ display:flex; align-items:center; gap:10px; background: linear-gradient(90deg,#fff7ed,#fff); border:1px solid #fde3c2; border-radius:14px; padding:14px 16px; margin-bottom:18px; }
.streak-strip i{ color:var(--orange); font-size:22px; }
.streak-strip b{ font-size:14px; } .streak-strip span{ font-size:12px; color:var(--text-faint); display:block; }

/* toast for gamification */
.toast{
  position:fixed; top:24px; left:50%; transform:translateX(-50%) translateY(-20px);
  background:#111a33; color:#fff; padding:14px 24px; border-radius:14px; font-weight:700; font-size:13.5px;
  display:flex; align-items:center; gap:10px; box-shadow: var(--shadow-lg); opacity:0; z-index:100; transition: all .3s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast i{ color: var(--orange); }

/* ==========================================================================
   Full curriculum — lessons list page (accordion) & calendar timeline
   ========================================================================== */
.curriculum-head{
  background:#fff; border-radius:20px; padding:26px 28px; box-shadow:var(--shadow-sm); margin-bottom:24px;
}
.curriculum-progress-row{ display:flex; align-items:center; gap:24px; margin-top:18px; flex-wrap:wrap; }
.curriculum-progress-row .mini-ring{ position:relative; width:64px; height:64px; flex-shrink:0; }
.curriculum-progress-row .mini-ring svg{ transform:rotate(-90deg); width:100%; height:100%; }
.curriculum-progress-row .mini-ring-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Cairo'; font-weight:800; font-size:13px; }
.curriculum-stat{ display:flex; align-items:center; gap:12px; }
.curriculum-stat b{ display:block; font-family:'Cairo'; font-size:18px; }
.curriculum-stat span{ font-size:12px; color:var(--text-faint); }

.semester-tabs{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.semester-tab{
  flex:1; min-width:180px; background:#fff; border:1.5px solid var(--border); border-radius:14px;
  padding:14px 18px; cursor:pointer; transition:all .15s ease;
}
.semester-tab b{ display:block; font-size:14px; margin-bottom:4px; }
.semester-tab span{ font-size:11.5px; color:var(--text-faint); }
.semester-tab.active{ border-color:var(--purple); background:linear-gradient(180deg,#f8f5ff,#fff); box-shadow:0 6px 16px rgba(139,92,246,.14); }
.semester-tab .st-status{ float:left; }

.search-row{ display:flex; gap:10px; margin-bottom:18px; }
.search-row input{
  flex:1; padding:13px 18px; border-radius:12px; border:1.5px solid var(--border); background:#fff;
  font-family:inherit; font-size:14px;
}
.search-row input:focus{ outline:none; border-color:var(--purple); }

.unit-accordion{ background:#fff; border-radius:16px; box-shadow:var(--shadow-sm); margin-bottom:14px; overflow:hidden; border:1px solid var(--border); }
.unit-header{ display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; user-select:none; }
.unit-header .unit-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; flex-shrink:0; }
.unit-header .unit-info{ flex:1; min-width:0; }
.unit-header .unit-info b{ font-size:15px; display:block; margin-bottom:2px; }
.unit-header .unit-info span{ font-size:12px; color:var(--text-faint); }
.unit-header .unit-progress{ width:90px; flex-shrink:0; }
.unit-header .unit-progress .track{ height:6px; border-radius:4px; background:var(--border); overflow:hidden; }
.unit-header .unit-progress .fill{ height:100%; border-radius:4px; }
.unit-header .chevron{ color:var(--text-faint); transition:transform .2s ease; flex-shrink:0; }
.unit-accordion.open .chevron{ transform:rotate(180deg); }
.unit-body{ display:none; border-top:1px solid var(--border); padding:6px 20px 14px; }
.unit-accordion.open .unit-body{ display:block; }

.lesson-row{
  display:flex; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid var(--border);
}
.lesson-row:last-child{ border-bottom:none; }
.lesson-row .lr-status{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.lesson-row.completed .lr-status{ background:var(--success); color:#fff; }
.lesson-row.current .lr-status{ background:var(--gradient-cool); color:#fff; }
.lesson-row.locked .lr-status{ background:var(--bg-soft); color:var(--text-faint); }
.lesson-row .lr-info{ flex:1; min-width:0; }
.lesson-row .lr-info b{ font-size:13.5px; font-weight:700; display:block; }
.lesson-row .lr-info span{ font-size:11.5px; color:var(--text-faint); }
.lesson-row.locked .lr-info b{ color:var(--text-faint); }
.lesson-row .lr-action{ flex-shrink:0; }
.lesson-row.locked{ cursor:not-allowed; }
.lesson-row:not(.locked){ cursor:pointer; }
.lesson-row:not(.locked):hover{ background:var(--bg-soft); border-radius:10px; }

/* Yearly calendar timeline */
.year-overview{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.year-overview .card{ flex:1; min-width:180px; padding:20px; text-align:center; }

.timeline{ position:relative; padding-right:34px; }
.timeline::before{ content:''; position:absolute; right:14px; top:6px; bottom:6px; width:3px; background:var(--border); border-radius:3px; }
.timeline-week{ position:relative; margin-bottom:16px; }
.timeline-week::before{
  content:''; position:absolute; right:-34px; top:6px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--border); z-index:2;
}
.timeline-week.completed::before{ background:var(--success); border-color:var(--success); }
.timeline-week.current::before{ background:var(--purple); border-color:var(--purple); box-shadow:0 0 0 5px rgba(139,92,246,.18); }
.timeline-week-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 18px; }
.timeline-week.current .timeline-week-card{ border-color:var(--purple); box-shadow:var(--shadow-glow-purple); }
.timeline-week-card .tw-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.timeline-week-card .tw-top b{ font-size:13.5px; }
.timeline-week-card .tw-top span{ font-size:11.5px; color:var(--text-faint); }
.timeline-week-card p{ font-size:12.5px; margin:0; }

.scale-in{ animation: scaleIn .35s ease; }
@keyframes scaleIn{ from{ opacity:0; transform: scale(.95);} to{ opacity:1; transform:scale(1);} }
.fade-up{ animation: fadeUp .4s ease; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform:translateY(0);} }