/* ============================================================
   منصة مسابقات حلّل المعرفة 2.0 — نظام الساحة
   ============================================================ */

@font-face { font-family:'SST Arabic'; src:url('../fonts/SSTArabic-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'SST Arabic'; src:url('../fonts/SSTArabic-Roman.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'SST Arabic'; src:url('../fonts/SSTArabic-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'SST Arabic'; src:url('../fonts/SSTArabic-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root, [data-theme="dark"] {
  --bg-grad: radial-gradient(130% 100% at 80% -15%, #0B6B7E 0%, #05384A 40%, #04222C 75%, #021118 100%);
  --glass: rgba(255,255,255,.06); --glass2: rgba(255,255,255,.035);
  --bd: rgba(255,255,255,.14); --bd2: rgba(255,255,255,.24);
  --tx-1: #F2FAF9; --tx-2: rgba(242,250,249,.78); --tx-3: rgba(242,250,249,.55);
  --chip: rgba(255,255,255,.08);
  --gold: #FFD76A; --gold-deep: #E8A23D; --gold-soft: rgba(255,215,106,.14); --gold-bd: rgba(255,215,106,.42); --gold-tx: #FFD76A;
  --teal: #5ECDBF; --teal-deep: #1F8E80; --teal-soft: rgba(94,205,191,.16);
  --coral: #FF9776; --coral-soft: rgba(255,151,118,.16);
  --indigo: #A9B1F4; --indigo-soft: rgba(169,177,244,.16);
  --ok: #5ECDBF; --err: #FF9776;
  --sh: 0 18px 44px rgba(0,0,0,.4);
  --overlay: rgba(2,17,24,.6);
  --on-teal: #04222C; --on-gold: #5E441C;
}
[data-theme="light"] {
  --bg-grad: radial-gradient(130% 100% at 80% -15%, #CDEBE6 0%, #E4F2EF 45%, #F5F9F8 100%);
  --glass: #FFFFFF; --glass2: #F0F7F5;
  --bd: #D8E5E2; --bd2: #BFD3CF;
  --tx-1: #0C2A34; --tx-2: #3C5762; --tx-3: #6E848D;
  --chip: #E7F0EE;
  --gold: #C59649; --gold-deep: #A97D36; --gold-soft: #F6EAD1; --gold-bd: #D9B878; --gold-tx: #8A6224;
  --teal: #1F8E80; --teal-deep: #155E54; --teal-soft: #D9F0EB;
  --coral: #C4512F; --coral-soft: #F9E4DC;
  --indigo: #4A4FA3; --indigo-soft: #E4E6F9;
  --ok: #1F8E80; --err: #C4512F;
  --sh: 0 14px 34px rgba(12,42,52,.14);
  --overlay: rgba(12,42,52,.45);
  --on-teal: #FFFFFF; --on-gold: #FFFFFF;
}

html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh;
  background:var(--bg-grad); background-attachment:fixed;
  color:var(--tx-1);
  font-family:'SST Arabic', ui-sans-serif, system-ui, sans-serif;
  transition:color .3s ease;
  overflow-x:hidden;
}
button { font-family:inherit; }
a { text-decoration:none; color:var(--teal); }

/* ---------- حركات ---------- */
@keyframes hmFloat  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes hmFloat2 { 0%,100% { transform:translateY(-6px) rotate(6deg); } 50% { transform:translateY(8px) rotate(-4deg); } }
@keyframes hmShine  { 0% { transform:translateX(130%); } 100% { transform:translateX(-130%); } }
@keyframes hmPop    { 0% { transform:scale(.6); opacity:0; } 70% { transform:scale(1.06); } 100% { transform:scale(1); opacity:1; } }
@keyframes hmShake  { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-8px); } 40% { transform:translateX(8px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(5px); } }
@keyframes hmGlow   { 0%,100% { box-shadow:0 0 22px rgba(255,215,106,.3); } 50% { box-shadow:0 0 44px rgba(255,215,106,.6); } }
@keyframes hmPulse  { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
@keyframes hmWobble { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
@keyframes hmSlideUp{ 0% { transform:translateY(24px); opacity:0; } 100% { transform:translateY(0); opacity:1; } }

.pop { animation:hmPop .4s ease both; }
.shake { animation:hmShake .45s ease both; }

/* ---------- الهيكل ---------- */
#confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:99; }
.hexdeco { position:fixed; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); pointer-events:none; z-index:0; }
.wrap { position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:clamp(14px,3vw,28px) clamp(14px,3.5vw,32px) 70px; display:flex; flex-direction:column; gap:clamp(18px,3vw,28px); }

/* ---------- الترويسة ---------- */
header.topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 14px; }
.brand { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 15px; background:linear-gradient(130deg,#005C7B 0%,#0B6B7E 50%,#3FB9AA 130%); border-radius:13px; box-shadow:var(--sh); flex-shrink:0; }
.brand img { height:23px; width:auto; display:block; }
.topbar-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

.chip-score { display:inline-flex; align-items:center; gap:8px; background:var(--gold-soft); border:1px solid var(--gold-bd); border-radius:999px; padding:9px 17px; font-size:14px; font-weight:700; color:var(--gold-tx); }
.iconbtn { width:44px; height:44px; border-radius:50%; background:var(--chip); border:1px solid var(--bd); color:var(--tx-1); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .2s ease; flex-shrink:0; }
.iconbtn:hover { border-color:var(--teal); color:var(--teal); }

.btn-store { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:9px; background:linear-gradient(100deg,#FFE9A8,#E8A23D); color:#5E441C; border:none; border-radius:14px; padding:11px 22px; font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:0 8px 26px rgba(255,215,106,.35); transition:transform .18s ease; animation:hmGlow 3s ease-in-out infinite; }
.btn-store:hover { transform:translateY(-2px); }
.btn-store .shine { position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); animation:hmShine 2.8s ease-in-out infinite; pointer-events:none; }

/* ---------- الأزرار ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; border-radius:14px; padding:13px 28px; font-size:15px; font-weight:700; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; min-height:44px; }
.btn:hover { transform:translateY(-2px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-teal { background:linear-gradient(100deg,#5ECDBF,#1F8E80); color:var(--on-teal); box-shadow:0 8px 24px rgba(94,205,191,.3); }
.btn-gold { position:relative; overflow:hidden; background:linear-gradient(100deg,#FFE9A8,#E8A23D); color:#5E441C; box-shadow:0 8px 26px rgba(255,215,106,.35); }
.btn-gold .shine { position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); animation:hmShine 2.8s ease-in-out infinite; pointer-events:none; }
.btn-ghost { background:var(--chip); color:var(--tx-1); border:1.5px solid var(--bd2); font-weight:600; }
.btn-ghost:hover { border-color:var(--teal); color:var(--teal); }
.btn-coral { background:var(--coral-soft); color:var(--coral); border:1.5px solid var(--coral); }

/* ---------- البطل ---------- */
.hero { text-align:center; display:flex; flex-direction:column; align-items:center; gap:13px; padding-top:6px; }
.hero-badge { display:inline-flex; align-items:center; gap:9px; background:linear-gradient(90deg, rgba(63,185,170,.25), rgba(94,111,212,.25)); border:1px solid rgba(94,205,191,.45); border-radius:999px; padding:8px 22px; font-size:13px; font-weight:700; color:var(--teal); }
[data-theme="light"] .hero-badge { background:var(--teal-soft); }
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal); animation:hmPulse 1.8s ease-in-out infinite; }
.hero h1 { margin:0; font-size:clamp(30px,5.5vw,54px); font-weight:700; line-height:1.3; }
.grad-gold { background:linear-gradient(100deg,#FFE9A8,#FFD76A 45%,#E8A23D); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px rgba(255,215,106,.4)); }
[data-theme="light"] .grad-gold { background:linear-gradient(100deg,#C59649,#A97D36); -webkit-background-clip:text; background-clip:text; filter:none; }
.hero p { margin:0; font-size:15px; color:var(--tx-2); line-height:1.9; max-width:520px; }

/* ---------- مربعات الأنماط ---------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:15px; }
.tile { position:relative; overflow:hidden; text-align:right; border-radius:24px; padding:23px 21px; cursor:pointer; display:flex; flex-direction:column; gap:11px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.tile:hover { transform:translateY(-6px) scale(1.015); }
.tile .shine { position:absolute; top:0; bottom:0; width:36%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent); animation:hmShine 3.4s ease-in-out infinite; pointer-events:none; }
.tile .hexicon { width:54px; height:60px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display:flex; align-items:center; justify-content:center; animation:hmWobble 4s ease-in-out infinite; }
.tile .t-title { font-size:19px; font-weight:700; }
.tile .t-desc { font-size:12.5px; line-height:1.8; opacity:.78; }
.tile .t-cta { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; }
.tile .t-tag { position:absolute; top:12px; left:13px; background:#FFD76A; color:#5E441C; font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:999px; animation:hmPulse 2s ease-in-out infinite; }

.tile-teal   { background:linear-gradient(150deg,#12808E 0%,#0A4B5C 80%); border:1.5px solid rgba(94,205,191,.4); color:#F2FAF9; }
.tile-teal:hover { box-shadow:0 0 34px rgba(94,205,191,.45), var(--sh); border-color:#5ECDBF; }
.tile-teal .hexicon { background:linear-gradient(135deg,#5ECDBF,#1F8E80); color:#04222C; }
.tile-teal .t-cta { color:#5ECDBF; }
.tile-gold   { background:linear-gradient(150deg,#A8752B 0%,#5E441C 85%); border:1.5px solid rgba(255,215,106,.45); color:#FFF8E8; animation:hmGlow 3s ease-in-out infinite; }
.tile-gold:hover { border-color:#FFD76A; }
.tile-gold .hexicon { background:linear-gradient(135deg,#FFE9A8,#E8A23D); color:#5E441C; }
.tile-gold .t-cta { color:#FFD76A; }
.tile-indigo { background:linear-gradient(150deg,#5B5FB8 0%,#2E3271 85%); border:1.5px solid rgba(140,150,235,.45); color:#F0F1FD; }
.tile-indigo:hover { box-shadow:0 0 34px rgba(140,150,235,.5), var(--sh); border-color:#8C96EB; }
.tile-indigo .hexicon { background:linear-gradient(135deg,#A9B1F4,#5B5FB8); color:#1D2050; }
.tile-indigo .t-cta { color:#A9B1F4; }
.tile-coral  { background:linear-gradient(150deg,#C25B41 0%,#6E2E1F 85%); border:1.5px solid rgba(255,151,118,.45); color:#FFF1EC; }
.tile-coral:hover { box-shadow:0 0 34px rgba(255,151,118,.45), var(--sh); border-color:#FF9776; }
.tile-coral .hexicon { background:linear-gradient(135deg,#FFB59C,#C25B41); color:#571F12; }
.tile-coral .t-cta { color:#FFB59C; }

/* ---------- البطاقات ---------- */
.card { background:var(--glass); border:1px solid var(--bd); border-radius:22px; padding:clamp(16px,2.6vw,24px); }
.card-title { font-size:16px; font-weight:700; margin:0 0 4px; display:flex; align-items:center; gap:9px; }
.section-bar { width:54px; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--teal),var(--gold)); margin-top:6px; }

/* ---------- المقررات ---------- */
.courses { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; }
.course { position:relative; overflow:hidden; background:var(--glass); border:1.5px solid var(--bd); border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:11px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-align:right; color:var(--tx-1); }
.course:hover { transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--teal); }
.course.selected { border-color:var(--gold-bd); box-shadow:0 0 28px rgba(255,215,106,.25), var(--sh); }
.course .sel-tag { position:absolute; top:13px; left:13px; background:var(--gold-soft); border:1px solid var(--gold-bd); color:var(--gold-tx); font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:999px; display:none; }
.course.selected .sel-tag { display:inline-block; }
.course .logo-box { width:72px; height:58px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.course .logo-box img { max-height:36px; max-width:82%; }
.course .c-name { font-weight:700; font-size:16.5px; }
.course .c-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--tx-3); }
.progressbar { height:7px; background:var(--glass2); border:1px solid var(--bd); border-radius:999px; overflow:hidden; }
.progressbar > div { height:100%; border-radius:999px; background:linear-gradient(90deg,#5ECDBF,#1F8E80); transition:width .6s ease; }
.progressbar.gold > div { background:linear-gradient(90deg,#FFE9A8,#E8A23D); }
.c-progress-label { font-size:11px; color:var(--tx-3); }

/* ---------- شاشة السؤال ---------- */
.quiz-shell { max-width:680px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:15px; }
.quiz-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.quiz-card { background:var(--glass); border:1px solid var(--bd); backdrop-filter:blur(10px); border-radius:26px; padding:clamp(18px,3vw,28px); display:flex; flex-direction:column; gap:17px; box-shadow:var(--sh); }
.q-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.q-info { font-size:12.5px; color:var(--tx-3); line-height:1.8; }
.q-sec { display:inline-block; background:var(--indigo-soft); color:var(--indigo); border:1px solid var(--indigo); font-size:11px; font-weight:600; border-radius:999px; padding:3px 12px; margin-top:5px; max-width:100%; }
.q-rare { display:inline-block; background:var(--gold-soft); color:var(--gold-tx); border:1px solid var(--gold-bd); font-size:11px; font-weight:700; border-radius:999px; padding:3px 12px; margin-top:5px; }
.q-text { font-size:clamp(18px,2.6vw,23px); font-weight:700; line-height:1.9; }
.opts { display:flex; flex-direction:column; gap:11px; }
.opt { display:flex; align-items:center; gap:13px; width:100%; text-align:right; border-radius:16px; padding:14px 16px; font-size:15px; font-weight:500; color:var(--tx-1); cursor:pointer; transition:all .18s ease; background:var(--glass2); border:1.5px solid var(--bd2); min-height:52px; }
.opt:hover:not(:disabled) { border-color:var(--teal); background:var(--teal-soft); }
.opt:disabled { cursor:default; }
.opt .ob { width:30px; height:30px; border-radius:9px; background:var(--chip); color:var(--tx-2); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.opt .ot { flex:1; line-height:1.8; }
.opt.correct { background:var(--teal-soft); border-color:var(--teal); box-shadow:0 0 22px rgba(94,205,191,.35); animation:hmPop .3s ease both; }
.opt.correct .ob { background:var(--teal); color:var(--on-teal); }
.opt.wrong { background:var(--coral-soft); border-color:var(--coral); animation:hmShake .45s ease both; }
.opt.wrong .ob { background:var(--coral); color:#fff; }
.opt.dim { opacity:.5; }

.timer-wrap { position:relative; width:52px; height:52px; flex-shrink:0; }
.timer-wrap svg { width:52px; height:52px; transform:rotate(-90deg); }
.timer-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }

.q-feedback { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:48px; }
.fb-text { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; animation:hmPop .35s ease both; }

.streak-chip { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--gold-tx); background:var(--gold-soft); border:1px solid var(--gold-bd); border-radius:999px; padding:8px 16px; }

/* ---------- شاشة النتيجة ---------- */
.result-shell { max-width:560px; margin:0 auto; width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; gap:17px; padding-top:10px; }
.result-hex { position:relative; width:140px; height:158px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:linear-gradient(140deg,#FFE9A8,#E8A23D); display:flex; align-items:center; justify-content:center; animation:hmFloat 3.5s ease-in-out infinite; filter:drop-shadow(0 0 34px rgba(255,215,106,.55)); color:#5E441C; }
.result-shell h2 { margin:0; font-size:clamp(27px,4.5vw,40px); font-weight:700; line-height:1.35; }
.stats-row { display:flex; gap:11px; width:100%; flex-wrap:wrap; }
.stat { flex:1; min-width:110px; background:var(--glass); border:1px solid var(--bd); border-radius:18px; padding:15px; }
.stat .v { font-size:28px; font-weight:700; }
.stat .l { font-size:12px; color:var(--tx-3); margin-top:2px; }
.stat.gold { background:var(--gold-soft); border-color:var(--gold-bd); }
.stat.gold .v { color:var(--gold-tx); }
.stat .v.teal { color:var(--teal); }
.stat .v.coral { color:var(--coral); }

.badge-earned { display:flex; align-items:center; gap:12px; background:var(--gold-soft); border:1px solid var(--gold-bd); border-radius:16px; padding:12px 17px; animation:hmSlideUp .5s ease both; text-align:right; width:100%; }
.badge-earned .bhex { width:44px; height:50px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:linear-gradient(135deg,#FFE9A8,#E8A23D); display:flex; align-items:center; justify-content:center; color:#5E441C; flex-shrink:0; animation:hmPulse 2s ease-in-out infinite; font-size:20px; }
.badge-earned b { color:var(--gold-tx); }

/* ---------- الأوسمة ---------- */
.badges-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:11px; }
.badge-card { background:var(--glass2); border:1px solid var(--bd); border-radius:17px; padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; transition:transform .2s ease; }
.badge-card:hover { transform:translateY(-3px); }
.badge-card .bhex { width:46px; height:52px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display:flex; align-items:center; justify-content:center; font-size:21px; }
.badge-card.unlocked { border-color:var(--gold-bd); background:var(--gold-soft); }
.badge-card.unlocked .bhex { background:linear-gradient(135deg,#FFE9A8,#E8A23D); color:#5E441C; }
.badge-card.locked .bhex { background:var(--chip); color:var(--tx-3); filter:grayscale(1); }
.badge-card .bn { font-size:12.5px; font-weight:700; }
.badge-card.locked .bn { color:var(--tx-3); }
.badge-card .bd-desc { font-size:10.5px; color:var(--tx-3); line-height:1.7; }

/* ---------- المستوى ---------- */
.level-row { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.level-hex { width:52px; height:58px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:linear-gradient(135deg,#5ECDBF,#1F8E80); color:var(--on-teal); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:19px; flex-shrink:0; }
.level-info { flex:1; min-width:170px; display:flex; flex-direction:column; gap:6px; }

/* ---------- الصدارة ---------- */
.lb-head { background:linear-gradient(130deg,#A8752B,#E8A23D); padding:14px 20px; display:flex; align-items:center; gap:10px; color:#FFF8E8; border-radius:18px 18px 0 0; font-weight:700; font-size:15px; }
.lb-body { border:1px solid var(--bd); border-top:none; border-radius:0 0 18px 18px; overflow:hidden; background:var(--glass); }
.lb-row { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--bd); font-size:13.5px; }
.lb-row:last-child { border-bottom:none; }
.lb-rank { width:28px; height:28px; border-radius:50%; background:var(--chip); color:var(--tx-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex-shrink:0; }
.lb-row.top1 .lb-rank { background:linear-gradient(135deg,#FFE9A8,#E8A23D); color:#5E441C; box-shadow:0 0 14px rgba(255,215,106,.5); }
.lb-row.top2 .lb-rank { background:#9BB0BC; color:#0C2A34; }
.lb-row.top3 .lb-rank { background:#CD8E5A; color:#FFF1EC; }
.lb-name { flex:1; font-weight:600; }
.lb-pts { font-weight:700; color:var(--gold-tx); }
.lb-mode { font-size:11px; color:var(--tx-3); }

/* ---------- التنبيهات ---------- */
#toasts { position:fixed; bottom:18px; right:50%; transform:translateX(50%); z-index:120; display:flex; flex-direction:column; gap:9px; width:min(420px, calc(100vw - 28px)); }
.toast { display:flex; align-items:center; gap:11px; border-radius:16px; padding:12px 16px; font-size:13.5px; font-weight:600; animation:hmSlideUp .35s ease both; box-shadow:var(--sh); backdrop-filter:blur(8px); }
.toast.ok   { background:var(--teal-soft); border:1px solid var(--teal); color:var(--tx-1); }
.toast.gold { background:var(--gold-soft); border:1px solid var(--gold-bd); color:var(--tx-1); }
.toast.err  { background:var(--coral-soft); border:1px solid var(--coral); color:var(--tx-1); }
[data-theme="dark"] .toast { background-color:rgba(4,34,44,.92); }

/* ---------- النوافذ ---------- */
.modal-overlay { position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(4px); z-index:110; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal { width:min(560px,100%); max-height:88vh; overflow-y:auto; background:var(--glass); backdrop-filter:blur(18px); border:1px solid var(--bd2); border-radius:24px; box-shadow:var(--sh); animation:hmPop .35s ease both; }
[data-theme="dark"] .modal { background:rgba(6,42,54,.96); }
[data-theme="light"] .modal { background:#fff; }
.modal .m-bar { height:5px; background:linear-gradient(90deg,#5ECDBF,#FFD76A); border-radius:24px 24px 0 0; }
.modal .m-body { padding:22px; display:flex; flex-direction:column; gap:14px; }
.modal .m-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal .m-title { font-weight:700; font-size:17px; display:flex; align-items:center; gap:9px; }
.m-close { background:transparent; border:none; cursor:pointer; color:var(--tx-3); padding:6px; border-radius:8px; }
.m-close:hover { color:var(--coral); }

.steps { display:flex; flex-direction:column; gap:11px; }
.step { display:flex; gap:12px; align-items:flex-start; background:var(--glass2); border:1px solid var(--bd); border-radius:15px; padding:13px 15px; }
.step .sn { width:30px; height:34px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:linear-gradient(135deg,#5ECDBF,#1F8E80); color:var(--on-teal); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13.5px; flex-shrink:0; margin-top:2px; }
.step.gold { background:var(--gold-soft); border-color:var(--gold-bd); }
.step.gold .sn { background:linear-gradient(135deg,#FFE9A8,#E8A23D); color:#5E441C; }
.step .st { font-size:13.5px; line-height:1.9; color:var(--tx-2); }
.step .st b { color:var(--tx-1); }

/* ---------- الحقول ---------- */
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:13px; font-weight:700; }
.field input, .field select { background:var(--glass2); color:var(--tx-1); border:1.5px solid var(--bd2); border-radius:14px; padding:13px 16px; font-family:inherit; font-size:14.5px; outline:none; transition:all .2s ease; }
.field input:focus, .field select:focus { border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
.field .hint { font-size:11.5px; color:var(--tx-3); }

.seg { display:inline-flex; align-items:center; gap:5px; background:var(--glass2); border:1px solid var(--bd2); border-radius:999px; padding:5px; }
.seg button { background:transparent; color:var(--tx-2); border:none; border-radius:999px; padding:8px 17px; font-size:12.5px; font-weight:600; cursor:pointer; min-height:36px; }
.seg button.on { background:linear-gradient(100deg,#5ECDBF,#1F8E80); color:var(--on-teal); font-weight:700; }

/* ---------- بطاقات المراجعة ---------- */
.flash-shell { max-width:620px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:15px; }
.flashcard { perspective:1200px; cursor:pointer; min-height:300px; }
.flashcard .inner { position:relative; width:100%; min-height:300px; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.4,.1,.2,1); }
.flashcard.flipped .inner { transform:rotateY(180deg); }
.flashcard .face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:24px; padding:26px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; text-align:center; }
.flashcard .front { background:var(--glass); border:1.5px solid var(--bd2); box-shadow:var(--sh); }
.flashcard .back { background:var(--teal-soft); border:1.5px solid var(--teal); transform:rotateY(180deg); }
.flashcard .fc-label { font-size:11.5px; font-weight:700; color:var(--tx-3); letter-spacing:.5px; }
.flashcard .fc-text { font-size:clamp(16px,2.4vw,20px); font-weight:700; line-height:2; white-space:pre-line; }
.flash-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- معركة الفرق ---------- */
.teams-bar { display:flex; gap:11px; }
.team-box { flex:1; border-radius:18px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1.5px solid var(--bd); background:var(--glass2); transition:all .25s ease; }
.team-box .tn { font-weight:700; font-size:14px; }
.team-box .tp { font-weight:700; font-size:19px; }
.team-box.t-a.active { border-color:var(--teal); background:var(--teal-soft); box-shadow:0 0 22px rgba(94,205,191,.3); }
.team-box.t-b.active { border-color:var(--indigo); background:var(--indigo-soft); box-shadow:0 0 22px rgba(169,177,244,.35); }
.team-box .turn-tag { font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px; display:none; }
.team-box.active .turn-tag { display:inline-block; }
.team-box.t-a .turn-tag { background:var(--teal); color:var(--on-teal); }
.team-box.t-b .turn-tag { background:var(--indigo); color:#fff; }
[data-theme="dark"] .team-box.t-b .turn-tag { color:#1D2050; }

/* ---------- عام ---------- */
.grid-2 { display:grid; grid-template-columns:1.1fr .9fr; gap:15px; align-items:start; }
.hidden { display:none !important; }
.muted { color:var(--tx-3); font-size:12.5px; line-height:1.9; }
.spacer { flex:1; }
footer.foot { border-top:1px solid var(--bd); margin-top:8px; padding-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--tx-3); }

@media (max-width: 720px) {
  .grid-2 { grid-template-columns:1fr; }
  .topbar-actions { width:100%; justify-content:flex-end; }
  .stats-row .stat .v { font-size:23px; }
  .quiz-top { gap:8px; }
}
@media (max-width: 420px) {
  .btn { padding:12px 20px; font-size:14px; }
  .tile { padding:19px 17px; }
}