:root {
  --bg: #f5f2ea;
  --surface: #ffffff;
  --surface-2: #faf8f3;
  --ink: #1d2b27;
  --muted: #5f6f6a;
  --line: #e4ded1;
  --brand: #0f5c4d;
  --brand-2: #157a66;
  --brand-soft: #e3f1ec;
  --accent: #f0a033;
  --accent-soft: #fdf0dc;
  --ok: #1e8a4c;
  --ok-soft: #e2f5e9;
  --bad: #c0392b;
  --bad-soft: #fbe7e4;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20,40,35,.06), 0 8px 24px rgba(20,40,35,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; }
.hidden { display: none !important; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.topbar {
  background: var(--brand);
  color: #fff;
  position: sticky; top: 0; z-index: 10;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: #fff; text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; background: var(--accent);
  display: grid; place-items: center; color: var(--brand); font-size: 1.3rem;
}
.topbar .user { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.points-pill { background: rgba(255,255,255,.15); padding: 4px 12px; border-radius: 99px; font-weight: 600; white-space: nowrap; }

/* ---------- Cards & layout ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.section { padding-top: 28px; padding-bottom: 28px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- Hero ---------- */
.hero { padding: 36px 0 12px; }
.hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.hero p { color: var(--muted); max-width: 560px; }
.hero-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 820px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.feature-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; }
.feature-list .ic { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--brand-soft); display: grid; place-items: center; font-size: 1.1rem; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; margin: 0 0 6px; font-size: .95rem; }
.field { margin-bottom: 14px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-2); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
input.ltr { direction: ltr; text-align: right; letter-spacing: .5px; }
.dob { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: 8px; }
.hint { font-size: .85rem; color: var(--muted); margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--brand); color: #fff;
  cursor: pointer; text-decoration: none;
  transition: transform .05s, background .15s;
}
.btn:hover { background: var(--brand-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.accent { background: var(--accent); color: #3b2604; }
.btn.accent:hover { background: #e8932a; }
.btn.ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.danger { background: transparent; color: var(--bad); border-color: #f0c9c3; }
.btn.danger:hover { background: var(--bad-soft); }
.btn.sm { padding: 6px 12px; font-size: .88rem; border-radius: 10px; }
.topbar .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.topbar .btn.ghost:hover { background: rgba(255,255,255,.12); }

.tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); padding: 4px; border-radius: 14px; margin-bottom: 18px; overflow-x: auto; }
.tab { flex: 1; white-space: nowrap; background: none; border: 0; font: inherit; font-weight: 600; padding: 9px 14px; border-radius: 10px; color: var(--muted); cursor: pointer; }
.tab.active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: .95rem; }
.alert.err { background: var(--bad-soft); color: var(--bad); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.info { background: var(--accent-soft); color: #7a4b07; }

/* ---------- Competitions ---------- */
.comp {
  display: flex; gap: 14px; align-items: center;
  padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.comp + .comp { margin-top: 10px; }
.comp .ic { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: var(--accent-soft); }
.comp.done .ic { background: var(--ok-soft); }
.comp h3 { font-size: 1.05rem; margin: 0; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .82rem; font-weight: 600; background: var(--brand-soft); color: var(--brand); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--accent-soft); color: #8a5408; }
.badge.bad { background: var(--bad-soft); color: var(--bad); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
.stat b { display: block; font-size: 1.6rem; color: var(--brand); line-height: 1.2; }
.stat span { font-size: .85rem; color: var(--muted); }

/* ---------- Quiz ---------- */
.progress { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 10px 0 18px; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width .25s; }
.q-text { font-size: 1.2rem; font-weight: 600; margin-bottom: 18px; }
.options { display: grid; gap: 10px; }
.opt {
  display: flex; gap: 12px; align-items: center; text-align: right;
  font: inherit; padding: 14px 16px;
  border: 2px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.opt:hover { border-color: var(--brand-2); }
.opt .l { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.opt.sel { border-color: var(--brand); background: var(--brand-soft); }
.opt.sel .l { background: var(--brand); color: #fff; border-color: var(--brand); }
.qnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.qnav button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .85rem; cursor: pointer; }
.qnav button.answered { background: var(--brand-soft); border-color: var(--brand-2); color: var(--brand); font-weight: 700; }
.qnav button.current { outline: 2px solid var(--accent); }

/* ---------- Result ---------- */
.score-ring { width: 150px; height: 150px; margin: 6px auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); }
.score-ring > div { width: 118px; height: 118px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 1.8rem; font-weight: 700; color: var(--brand); }
.review { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 10px; background: var(--surface); }
.review.right { border-inline-start: 5px solid var(--ok); }
.review.wrong { border-inline-start: 5px solid var(--bad); }
.review .ans { font-size: .95rem; margin-top: 6px; }
.review .exp { font-size: .9rem; color: var(--muted); margin-top: 6px; background: var(--surface-2); padding: 8px 10px; border-radius: 10px; }

/* ---------- Leaderboard ---------- */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.lb-row + .lb-row { border-top: 1px solid var(--line); }
.lb-row.me { background: var(--accent-soft); }
.lb-rank { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.lb-rank.r1 { background: #f7c948; border-color: #e5b52e; }
.lb-rank.r2 { background: #dfe3e6; border-color: #c8cdd1; }
.lb-rank.r3 { background: #e7b288; border-color: #d39a6c; }
.bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar > div { height: 100%; background: var(--brand-2); }

/* ---------- Tables (admin) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.drop {
  border: 2px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; background: var(--surface-2); cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--brand-2); background: var(--brand-soft); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px; z-index: 50; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
.toast.err { background: var(--bad); }
.toast.ok { background: var(--ok); }

.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

footer { padding: 30px 0; text-align: center; color: var(--muted); font-size: .88rem; }

/* منع تمدد عناصر الشبكة على الشاشات الصغيرة */
.grid > *, .hero-grid > * { min-width: 0; }
#authCard .tab { white-space: normal; line-height: 1.4; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }

/* ---------- العداد ---------- */
.timer { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.timer-num { min-width: 64px; text-align: center; font-weight: 700; font-size: 1.6rem; color: var(--brand); line-height: 1; }
.timer-num small { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.timer-bar { flex: 1; height: 12px; background: var(--line); border-radius: 99px; overflow: hidden; }
.timer-bar > div { height: 100%; background: var(--brand-2); width: 100%; transition: width .2s linear; }
.timer.warn .timer-num { color: var(--bad); }
.timer.warn .timer-bar > div { background: var(--bad); }
.no-copy { -webkit-user-select: none; user-select: none; }
.rules { text-align: right; padding-inline-start: 20px; margin: 14px 0; display: grid; gap: 6px; }
.opt:disabled { cursor: default; opacity: .75; }
.overall { font-weight: 700; font-size: .95rem; padding: 3px 12px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); white-space: nowrap; direction: ltr; }
.overall.warn { background: var(--bad-soft); color: var(--bad); }
.qnav button.later { background: var(--accent-soft); border-color: var(--accent); color: #8a5408; font-weight: 700; }
.pw-rules { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 2px; font-size: .85rem; color: var(--muted); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li.ok::before { content: "✓ "; }
.kb-warn { font-size: .85rem; color: var(--bad); margin-top: 4px; font-weight: 600; }
.modal { position: fixed; inset: 0; background: rgba(20,30,28,.45); display: grid; place-items: center; z-index: 40; padding: 16px; }
.modal-card { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; }
.board-card h3 { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-soft); }
.nowrap { white-space: nowrap; }
.board-name { flex: 1; min-width: 0; font-size: .9rem; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.board-name.wrap { white-space: normal; }
/* لوحة الشرف في الرئيسية: مساحة أكبر للأسماء */
#homeBoard { width: min(1180px, calc(100vw - 32px)); margin-inline: auto; position: relative; inset-inline-start: 50%; transform: translateX(50%); }
.board-card { padding: 18px 16px; }
.board-card .lb-row { gap: 8px; padding: 10px 6px; }
.board-card .lb-rank { width: 30px; height: 30px; font-size: .9rem; }
.board-grid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

/* ================= لوحة الشرف (الرئيسية) ================= */
.hof-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hof-head h2 { margin: 0; font-size: 1.5rem; }
.hof-head p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.hof-trophy { width: 56px; height: 56px; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: 1.8rem;
  background: linear-gradient(145deg, #ffd978, #f0a033); box-shadow: 0 8px 20px rgba(240,160,51,.35); }

.hof-card { --c1: #0f5c4d; --c2: #1e8a73; --soft: #e3f1ec;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,40,35,.05), 0 12px 32px rgba(20,40,35,.08); display: flex; flex-direction: column; }
.hof-card.g4 { --c1: #0f5c4d; --c2: #21977d; --soft: #e3f3ee; }
.hof-card.g5 { --c1: #b35a12; --c2: #e8902f; --soft: #fdf0dc; }
.hof-card.g6 { --c1: #2c4a8f; --c2: #4f74c9; --soft: #e8eefb; }
.hof-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 14px 18px; color: #fff; background: linear-gradient(120deg, var(--c1), var(--c2)); }
.hof-grade { font-weight: 700; font-size: 1.15rem; }
.hof-sub { font-size: .8rem; opacity: .85; }

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; padding: 22px 14px 0;
  background: linear-gradient(180deg, var(--soft), transparent 75%); }
.pod { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pod-crown { font-size: 1.3rem; line-height: 1; margin-bottom: 2px; animation: hof-bob 2.6s ease-in-out infinite; }
@keyframes hof-bob { 50% { transform: translateY(-3px); } }
.pod-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem;
  color: var(--c1); background: #fff; border: 3px solid var(--ring, #cfd5d3); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.pod-1 .pod-avatar { width: 58px; height: 58px; font-size: 1.4rem; }
.pod-1 { --ring: #f2c13b; --base: linear-gradient(180deg, #ffd978, #f0b429); --bh: 74px; }
.pod-2 { --ring: #c3cad1; --base: linear-gradient(180deg, #eef1f4, #c9d0d6); --bh: 54px; }
.pod-3 { --ring: #e0a46f; --base: linear-gradient(180deg, #f6cfa8, #dc9a5f); --bh: 40px; }
.pod-name { margin-top: 8px; font-weight: 700; font-size: .8rem; line-height: 1.4; color: var(--ink); word-break: break-word; }
.pod-1 .pod-name { font-size: .88rem; }
.pod-points { margin: 4px 0 8px; font-weight: 700; font-size: .85rem; color: var(--c1); }
.pod-points span { font-weight: 400; font-size: .72rem; color: var(--muted); }
.pod-base { width: 100%; height: var(--bh); border-radius: 12px 12px 0 0; background: var(--base);
  display: grid; place-items: start center; padding-top: 6px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.06); }
.pod-base span { font-weight: 800; font-size: 1.3rem; color: rgba(0,0,0,.45); }
.pod-empty .pod-base { opacity: .35; }
.pod-empty { opacity: .9; }

.hof-rest { padding: 6px 14px 14px; border-top: 1px solid var(--line); }
.hof-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; }
.hof-row + .hof-row { border-top: 1px dashed var(--line); }
.hof-rank { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--soft); color: var(--c1); }
.hof-pts { font-weight: 700; font-size: .85rem; color: var(--c1); white-space: nowrap; }

.hof-empty { flex: 1; display: grid; place-items: center; text-align: center; padding: 30px 16px; color: var(--muted);
  background: linear-gradient(180deg, var(--soft), transparent 80%); }
.hof-empty div { font-size: 2.2rem; filter: grayscale(.3); opacity: .8; }
.hof-empty p { margin: 6px 0 0; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .pod-crown { animation: none; } }

/* ---------- بطاقة المعلم ---------- */
.tcard { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 20px 18px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,40,35,.05), 0 14px 34px rgba(20,40,35,.09); max-width: 520px; }
.tcard::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--brand-2), var(--accent)); }
.tcard-photo-wrap { position: relative; flex: none; }
.tcard-photo { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 700; font-size: 1.6rem;
  border: 4px solid #fff; box-shadow: 0 0 0 3px var(--accent), 0 10px 22px rgba(15,92,77,.25); }
.tcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard-badge { position: absolute; bottom: 2px; inset-inline-start: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; background: var(--accent); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.tcard-info { position: relative; z-index: 1; min-width: 0; }
.tcard-role { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .2px; color: var(--brand);
  background: var(--brand-soft); padding: 3px 10px; border-radius: 99px; }
.tcard-name { font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; line-height: 1.35; }
.tcard-school { color: var(--muted); font-size: .9rem; }
.tcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tcard-chips span { font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  background: var(--accent-soft); color: #8a5408; border: 1px solid #f6dcae; }
@media (max-width: 480px) {
  .tcard { gap: 14px; padding: 16px; }
  .tcard-photo { width: 84px; height: 84px; }
  .tcard-badge { width: 28px; height: 28px; font-size: .85rem; }
  .tcard-name { font-size: 1.1rem; }
}

/* ---------- أزرار الدخول ونافذة دخول الطالب ---------- */
.top-actions { display: flex; gap: 8px; align-items: center; }
.topbar .btn.accent { color: #3b2604; }
.hero-cta { margin-top: 6px; padding: 13px 26px; font-size: 1.05rem; box-shadow: 0 8px 20px rgba(240,160,51,.35); }
.features-card { align-self: start; }
.modal { position: fixed; inset: 0; background: rgba(20,30,28,.5); display: grid; place-items: center; z-index: 40; padding: 16px; backdrop-filter: blur(2px); }
.login-card { position: relative; max-width: 440px; padding-top: 26px; animation: pop .18s ease-out; }
.modal-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font-size: 1rem; cursor: pointer; }
.modal-x:hover { background: var(--bad-soft); color: var(--bad); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
@media (max-width: 480px) {
  .top-actions .btn { padding: 6px 10px; font-size: .8rem; }
  .brand span:last-child { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }
.top-actions .btn { white-space: nowrap; }
@media (max-width: 480px) {
  .top-actions { gap: 6px; }
  .top-actions .em { display: none; }
  .topbar .wrap { gap: 8px; }
  .brand { gap: 8px; font-size: 1rem; white-space: nowrap; }
  .brand-mark { width: 32px; height: 32px; font-size: 1.1rem; }
}
.comp-res { display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }

/* بطاقة الترحيب في صفحة الطالب */
.welcome {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 10px 28px rgba(15,92,77,.22);
}
.welcome::after {
  content: ""; position: absolute; inset-inline-start: -40px; bottom: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,217,120,.28), transparent 70%);
  pointer-events: none;
}
.wl-avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem; font-weight: 700;
  color: var(--brand); background: linear-gradient(135deg, #ffd978, var(--accent));
  border: 3px solid rgba(255,255,255,.85); box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.wl-text { min-width: 0; position: relative; z-index: 1; }
.wl-hi { display: block; margin-bottom: 4px; font-size: .9rem; opacity: .85; }
.wl-name { margin: 2px 0 14px; font-size: 1.7rem; line-height: 1.25; color: #fff; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chips .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 12px; border-radius: 99px; font-size: .85rem; font-weight: 600;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff;
  white-space: nowrap;
}
.wl-stats { margin: 14px 0 22px; }
.wl-stats .stat { box-shadow: var(--shadow); border: 0; }
.wl-stats .stat b { font-size: 1.9rem; margin-top: 4px; }
.wl-stats .stat .stat-lbl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .9rem; font-weight: 600; }
.wl-stats .stat .stat-lbl i { font-style: normal; font-size: 1.05rem; line-height: 1; }
@media (max-width: 560px) {
  .welcome { padding: 18px; gap: 14px; }
  .wl-avatar { width: 52px; height: 52px; font-size: 1.4rem; }
  .wl-name { font-size: 1.35rem; }
  .wl-stats .stat { padding: 10px 6px; }
  .wl-stats .stat .stat-lbl { font-size: .75rem; gap: 3px; }
  .wl-stats .stat .stat-lbl i { font-size: .85rem; }
}
/* الأرقام في سطر واحد حتى لو نزلت الكلمة إلى سطرين في الجوال */
.wl-stats .stat { display: flex; flex-direction: column; align-items: center; }
.wl-stats .stat .stat-lbl { flex: 1; }

/* رسائل المعلم في صفحة الطالب */
#msgs:not(:empty) { margin-top: 14px; display: grid; gap: 10px; }
.msg {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); border-inline-start: 5px solid var(--brand-2);
  box-shadow: var(--shadow); transition: opacity .3s, transform .3s;
}
.msg-praise { border-inline-start-color: var(--ok); background: linear-gradient(90deg, var(--ok-soft), var(--surface) 60%); }
.msg-alert  { border: 0; color: #fff; background: linear-gradient(135deg, #d64534, #a8281b); box-shadow: 0 8px 22px rgba(192,57,43,.28); }
.msg-alert .msg-ic { background: rgba(255,255,255,.95); }
.msg-alert .msg-ok { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.8); }
.msg-alert .msg-ok:hover { background: #fff; color: #a8281b; }
.msg-info   { border-inline-start-color: var(--brand-2); background: linear-gradient(90deg, var(--brand-soft), var(--surface) 60%); }
.msg-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.msg-body { flex: 1; min-width: 0; }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; }
.msg-tag { font-size: .75rem; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.msg-body p { margin: 4px 0 0; font-size: 1.02rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-ok {
  margin-inline-start: auto; flex: none; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700; line-height: 1;
  padding: 6px 12px; border-radius: 99px;
  border: 1.5px solid var(--brand-2); background: transparent; color: var(--brand);
  transition: background .15s, color .15s;
}
.msg-ok:hover { background: var(--brand); color: #fff; }
.msg-ok:disabled { opacity: .5; cursor: default; }
.msg-out { opacity: 0; transform: translateY(-6px); }
@media (max-width: 560px) {
  .msg { gap: 10px; align-items: flex-start; }
  .msg-ic { width: 38px; height: 38px; font-size: 1.15rem; }
}

/* سؤال اليوم */
#daily:not(:empty) { margin-top: 14px; }
.dq {
  padding: 18px 20px; border-radius: 18px; background: var(--surface);
  border: 1px solid #f3dcb0; box-shadow: var(--shadow);
  background: linear-gradient(160deg, #fff8e8 0%, var(--surface) 55%);
}
.dq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dq-title { font-weight: 700; font-size: 1.1rem; color: #8a5408; }
.dq-pts { font-size: .85rem; font-weight: 600; padding: 3px 12px; border-radius: 99px; background: var(--accent-soft); color: #8a5408; }
.dq-sub { margin: 8px 0 14px; color: var(--muted); }
.dq-q { margin: 14px 0 12px; font-size: 1.1rem; line-height: 1.7; }
.dq-timer { font-weight: 700; padding: 3px 12px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); direction: ltr; min-width: 64px; text-align: center; }
.dq-timer.low { background: var(--bad-soft); color: var(--bad); }
.dq-bar { height: 5px; border-radius: 99px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
.dq-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffd978); border-radius: 99px; transition: width .25s linear; }
.dq-res { font-weight: 700; font-size: .9rem; padding: 3px 12px; border-radius: 99px; }
.dq-right { border-color: #bfe5cd; background: linear-gradient(160deg, var(--ok-soft) 0%, var(--surface) 55%); }
.dq-right .dq-res { background: var(--ok); color: #fff; }
.dq-wrong { border-color: #f1c4be; background: linear-gradient(160deg, var(--bad-soft) 0%, var(--surface) 55%); }
.dq-wrong .dq-res { background: var(--bad); color: #fff; }
.opt.ok { border-color: var(--ok); background: var(--ok-soft); opacity: 1; }
.opt.ok .l { background: var(--ok); color: #fff; border-color: var(--ok); }
.opt.bad { border-color: var(--bad); background: var(--bad-soft); opacity: 1; }
.opt.bad .l { background: var(--bad); color: #fff; border-color: var(--bad); }
.dq-exp { margin-top: 12px; font-size: .92rem; color: var(--muted); background: var(--surface-2); padding: 10px 12px; border-radius: 12px; }
.dq-stats .stat { display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow); border: 0; }
.dq-stats .stat b { font-size: 1.9rem; margin-top: 4px; }
.dq-stats .stat .stat-lbl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .9rem; font-weight: 600; }
.dq-stats .stat .stat-lbl i { font-style: normal; }
@media (max-width: 560px) {
  .dq { padding: 16px; }
  .dq-stats .stat .stat-lbl { font-size: .75rem; gap: 3px; }
}

/* إعلان سؤال اليوم في الصفحة الرئيسية */
.dq-ad {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 22px;
  margin: 8px 0 28px; padding: 24px 26px; border-radius: 22px;
  background: linear-gradient(120deg, #fff4d6 0%, #ffe6a8 45%, #ffd27a 100%);
  border: 1px solid #f5d38c; box-shadow: 0 12px 30px rgba(240,160,51,.22);
}
.dq-ad::before {
  content: ""; position: absolute; inset-inline-end: -60px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  pointer-events: none;
}
.dq-ad-sun { flex: none; font-size: 3.4rem; line-height: 1; animation: dqSpin 18s linear infinite; filter: drop-shadow(0 4px 10px rgba(240,160,51,.4)); }
@keyframes dqSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dq-ad-sun { animation: none; } }
.dq-ad-body { flex: 1; min-width: 0; position: relative; }
.dq-ad-kicker { font-size: .85rem; font-weight: 700; color: #8a5408; }
.dq-ad-title { margin: 2px 0 10px; font-size: 1.45rem; line-height: 1.35; color: #3d2a05; }
.dq-ad-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.dq-ad-meta span { font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.7); color: #6b4306; white-space: nowrap; }
.dq-ad-live { margin: 10px 0 0; font-size: .92rem; color: #5a3d07; }
.dq-ad-live:empty { display: none; }
.dq-ad-side { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: relative; }
.dq-ad-clock { text-align: center; padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.75); }
.dq-ad-clock-lbl { display: block; font-size: .75rem; color: #8a5408; }
.dq-ad-clock b { font-size: 1.35rem; letter-spacing: 1px; color: #3d2a05; font-variant-numeric: tabular-nums; }
.dq-ad .btn { white-space: nowrap; }
/* آخر ٣ ساعات: لون أكثر إلحاحًا */
.dq-ad.urgent { background: linear-gradient(120deg, #ffe3dc 0%, #ffc9b9 50%, #ffa98f 100%); border-color: #f4b3a3; box-shadow: 0 12px 30px rgba(192,57,43,.22); }
.dq-ad.urgent .dq-ad-kicker, .dq-ad.urgent .dq-ad-clock-lbl { color: var(--bad); }
.dq-ad.urgent .dq-ad-clock b { color: var(--bad); }
@media (max-width: 720px) {
  .dq-ad { flex-wrap: wrap; padding: 20px 18px; gap: 14px; }
  .dq-ad-sun { font-size: 2.6rem; }
  .dq-ad-body { flex-basis: calc(100% - 70px); }
  .dq-ad-title { font-size: 1.2rem; }
  .dq-ad-side { flex-basis: 100%; flex-direction: row; align-items: center; }
  .dq-ad-clock { flex: 1; }
  .dq-ad-side .btn { flex: 1; }
}
/* رسالة سريعة بعد الإجابة ثم اختفاء */
.dq-flash { display: flex; align-items: center; gap: 14px; animation: dqPop .35s ease-out; transition: opacity .35s, transform .35s; }
.dq-flash-ic { flex: none; font-size: 2.2rem; line-height: 1; }
.dq-flash-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dq-flash-title { font-size: 1.15rem; }
.dq-flash .dq-sub { margin: 0; font-size: .9rem; }
.dq-right .dq-flash-title { color: var(--ok); }
.dq-wrong .dq-flash-title { color: var(--bad); }
.dq-out { opacity: 0; transform: scale(.97) translateY(-6px); }
@keyframes dqPop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dq-flash { animation: none; } }

/* أزرار أيقونات صغيرة في الجداول */
.icon-actions { white-space: nowrap; }
.icon-actions > * + * { margin-inline-start: 4px; }
.btn.icon-btn { width: 36px; height: 36px; padding: 0; font-size: 1rem; line-height: 1; border-radius: 10px; }
.icon-btn-ph { display: inline-block; width: 36px; height: 36px; vertical-align: middle; }
td .badge { white-space: nowrap; }

/* تصنيف المنهج: شجرة الوحدات والدروس + شريط التصنيف الجماعي */
.lesson-tree, #sdTree { display: grid; gap: 10px; }
.lt-unit { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.lt-unit-h { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; margin: 0; }
.lt-lessons { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; padding-inline-start: 26px; }
.lt-lesson { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: .92rem; cursor: pointer; margin: 0; }
.lt-unit input, .lt-lesson input, #qTable input[type=checkbox], #qAll { width: 17px; height: 17px; accent-color: var(--brand); flex: none; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px;
  border-radius: 12px; background: var(--brand-soft); border: 1px solid #bfe0d6; position: sticky; top: 8px; z-index: 5; }
.bulk-bar input, .bulk-bar select { padding: 6px 10px; }

/* المتصلون الآن */
.online-card { margin-bottom: 18px; }
.online-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; margin-inline-end: 4px;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: livePulse 1.8s infinite; vertical-align: middle; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.online-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; }
.on-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.on-item.busy { background: var(--accent-soft); border-color: #f3dcb0; }
.on-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  color: var(--brand); background: var(--brand-soft); }
.on-av::after { content: ""; position: absolute; bottom: 0; inset-inline-end: 0; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid var(--surface); }
.on-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.on-txt b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-act { font-size: .8rem; color: var(--ink); }

/* لوحة الشرف: قائمة بالميداليات */
.medal-list { list-style: none; margin: 0; padding: 14px 14px 16px; display: grid; gap: 8px; }
.medal-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); }
.medal-row.m1 { background: linear-gradient(90deg, #fff6d6, var(--surface) 75%); border-color: #f3dc8f; padding-block: 13px; }
.medal-row.m2 { background: linear-gradient(90deg, #f1f4f7, var(--surface) 75%); border-color: #d9dfe5; }
.medal-row.m3 { background: linear-gradient(90deg, #fbeadb, var(--surface) 75%); border-color: #efcfb1; }
.medal-row .board-name { font-size: .92rem; }
.medal-row.m1 .board-name { font-size: 1rem; }
/* الميدالية: قرص معدني مع شريط */
.medal { --m1: #ffe58f; --m2: #e9a915; --edge: #c98a0b; --rib1: var(--c1, #0f5c4d); --rib2: var(--c2, #21977d);
  position: relative; flex: none; width: 40px; height: 46px; display: grid; place-items: end center; }
.medal::before {                 /* الشريط */
  content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 18px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--rib1) 0 33%, var(--rib2) 33% 66%, var(--rib1) 66%);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 50% 72%, 22% 100%);
}
.medal i {                        /* القرص */
  position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 1rem; color: rgba(0,0,0,.55);
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--m1) 28%, var(--m2) 100%);
  border: 2.5px solid var(--edge); box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.45);
}
.m1 .medal { width: 46px; height: 54px; }
.m1 .medal i { width: 40px; height: 40px; font-size: 1.15rem; }
.m2 .medal { --m1: #f7f9fb; --m2: #aeb8c2; --edge: #8d99a5; }
.m3 .medal { --m1: #f6cfa6; --m2: #c47a3a; --edge: #9c5a22; }
.m4 .medal { --m1: #d6f1ec; --m2: #5fb3a3; --edge: #3d8f80; }
.m5 .medal { --m1: #e6e1f7; --m2: #9586cf; --edge: #6f60ad; }
.medal-pts { flex: none; font-weight: 800; font-size: .95rem; color: var(--c1); white-space: nowrap; }
.medal-pts small { font-weight: 400; font-size: .72rem; color: var(--muted); }
.m1 .medal-pts { font-size: 1.05rem; }

/* ميداليات فاخرة (تتجاوز التنسيق السابق) */
.medal { width: 46px; height: 56px; }
.medal::before {                       /* شريط ساتان بثنية */
  top: 0; width: 26px; height: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.18)),
    linear-gradient(90deg, var(--rib1) 0 30%, #fff8 30% 36%, var(--rib2) 36% 64%, #fff8 64% 70%, var(--rib1) 70%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 50% 80%, 20% 100%);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.medal i {
  width: 38px; height: 38px; font-size: 1.05rem; font-weight: 900; border: 0;
  background: conic-gradient(from 200deg, var(--g1), var(--g2), var(--g3), var(--g2), var(--g1), var(--g3), var(--g1));
  box-shadow: 0 0 0 2px var(--g4), 0 0 0 3.5px var(--g3), 0 5px 12px var(--glow),
              inset 0 2px 3px rgba(255,255,255,.7), inset 0 -3px 5px rgba(0,0,0,.25);
  color: var(--txt); text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(0,0,0,.25);
  overflow: hidden;
}
.medal i::after {                      /* لمعة */
  content: ""; position: absolute; top: 4px; left: 7px; width: 14px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.75); transform: rotate(-30deg); filter: blur(.5px);
}
.m1 .medal { width: 54px; height: 64px; }
.m1 .medal::before { width: 30px; height: 26px; }
.m1 .medal i { width: 46px; height: 46px; font-size: 1.25rem; }
.m1 .medal { --g1: #fff6c9; --g2: #f6c945; --g3: #b8860b; --g4: #fff2b0; --glow: rgba(212,160,23,.45); --txt: #6b4a00; }
.m2 .medal { --g1: #ffffff; --g2: #d7dde3; --g3: #8a96a3; --g4: #f4f7fa; --glow: rgba(120,135,150,.35); --txt: #3d4752; }
.m3 .medal { --g1: #ffe1c4; --g2: #d98e4f; --g3: #8a4f1d; --g4: #f8dcc0; --glow: rgba(176,100,40,.35); --txt: #5a2f0c; }
/* لمعان خفيف يمر على الذهبية */
.m1 .medal i::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
  background-size: 250% 100%; animation: medalShine 3.2s ease-in-out infinite; }
@keyframes medalShine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .m1 .medal i::before { animation: none; } }
.medal-row.m1 { box-shadow: 0 6px 18px rgba(212,160,23,.18); border-color: #ecd27a; }

/* المركز الرابع والخامس: رقم فقط */
.m4 .medal, .m5 .medal { width: 46px; height: 40px; place-items: center; }
.m4 .medal::before, .m5 .medal::before, .m4 .medal i::after, .m5 .medal i::after { display: none; }
.m4 .medal i, .m5 .medal i { width: 32px; height: 32px; font-size: .95rem; font-weight: 800; background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); text-shadow: none; }

/* لوحة الشرف في لوحة المعلم */
.medal-sm { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; font-size: .9rem;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.15), inset 0 2px 2px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.2); }
.medal-sm.m1 { background: conic-gradient(from 200deg, #fff6c9, #f6c945, #b8860b, #f6c945, #fff6c9); color: #6b4a00; }
.medal-sm.m2 { background: conic-gradient(from 200deg, #fff, #d7dde3, #8a96a3, #d7dde3, #fff); color: #3d4752; }
.medal-sm.m3 { background: conic-gradient(from 200deg, #ffe1c4, #d98e4f, #8a4f1d, #d98e4f, #ffe1c4); color: #5a2f0c; }
.rank-sm { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: .85rem;
  background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
tr.lb-top td { background: #fffbef; }
.lb-pts { color: var(--brand); font-size: 1.05rem; }

/* قائمة حساب المعلم */
.acct { position: relative; }
.topbar .btn.icon-btn.acct-btn { width: 38px; height: 36px; font-size: 1.05rem; }
.acct-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 220px; z-index: 50;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 6px; display: grid; gap: 2px; }
.acct-menu.hidden { display: none; }
.acct-who { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.acct-who b { text-align: right; }
.acct-menu button { font: inherit; text-align: right; background: none; border: 0; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.acct-menu button:hover { background: var(--brand-soft); }
.topbar .btn.icon-btn.acct-btn:hover { background: rgba(255,255,255,.18); }
#logoutBtn:hover { background: rgba(255,90,70,.25) !important; border-color: rgba(255,160,150,.7); }

/* شارة الطالب (اسمه) في الزاوية */
.me-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 99px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 700; font-size: .92rem;
  white-space: nowrap; text-decoration: none; }
.me-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  color: var(--brand); background: linear-gradient(135deg, #ffd978, var(--accent)); border: 2px solid rgba(255,255,255,.85); }
.me-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
a.me-link:hover { background: rgba(255,255,255,.22); }
.me-go { font-weight: 600; font-size: .8rem; opacity: .85; }
.topbar a.icon-btn { display: inline-grid; place-items: center; }
@media (max-width: 560px) {
  .me-name { max-width: 70px; }
  .me-go { display: none; }
  .topbar .user { gap: 6px; }
}
/* الجوال: في صفحة الطالب نكتفي بشعار الموقع لتتسع أيقوناته واسمه */
@media (max-width: 430px) {
  .topbar .wrap:has(.me-chip) .brand [data-site-title] { display: none; }
}

/* ملف الطالب: زر وقائمة منسدلة */
button.me-chip { font: inherit; font-weight: 700; cursor: pointer; }
button.me-chip:hover, button.me-chip[aria-expanded="true"] { background: rgba(255,255,255,.24); }
.me-caret { font-size: .7rem; opacity: .8; }
.me-menu { min-width: 250px; padding: 10px; gap: 8px; }
.me-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); }
.me-head > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.me-head b { font-size: .95rem; }
.me-av.lg { width: 42px; height: 42px; font-size: 1.15rem; flex: none; }
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.me-stats > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.me-stats i { font-style: normal; font-size: 1rem; line-height: 1; }
.me-stats b { font-size: 1.25rem; color: var(--brand); line-height: 1.3; }
.me-stats span { font-size: .72rem; color: var(--muted); }
.me-menu a { display: block; text-decoration: none; color: var(--ink); padding: 9px 10px; border-radius: 10px; font-weight: 600; }
.me-menu a:hover { background: var(--brand-soft); }
.start-group { display: flex; align-items: center; gap: 12px; }
#meBtn[aria-expanded="true"] { background: rgba(255,255,255,.22); }
/* زر الملف: دائرة الحرف الأول */
.me-av-btn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.me-av-btn .me-av { width: 36px; height: 36px; font-size: 1.05rem; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: transform .15s, box-shadow .15s; }
.me-av-btn:hover .me-av, .me-av-btn[aria-expanded="true"] .me-av { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.2); }
.me-av-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.me-menu { min-width: 270px; max-width: calc(100vw - 24px); }
.me-head b#meFull { display: block; white-space: nowrap; overflow: hidden; font-size: .9rem; }
#daily ~ .tabs { margin-top: 18px; }
/* تفاصيل سؤال اليوم (لوحة المعلم) */
.dqi-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dqi-who { display: flex; flex-direction: column; gap: 2px; }
.dqi-who b { font-size: 1.05rem; }
.dqi-res { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.dqi-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.dqi-meta .chip { background: #f1eee6; color: #555; font-size: .76rem; padding: 3px 10px; border-radius: 999px; border: 0; }
.dqi-q { font-weight: 700; font-size: 1.05rem; line-height: 1.8; padding: 12px 14px; background: #f7f5ef; border-radius: 12px; margin-bottom: 10px; }
.dqi-opts { display: grid; gap: 8px; }
.dqi-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1.5px solid #e5e1d6; border-radius: 12px; }
.dqi-opt.ok { border-color: var(--ok); background: #eaf7ef; }
.dqi-opt.bad { border-color: var(--bad); background: #fdecec; }
.dqi-l { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #efece4; }
.dqi-opt.ok .dqi-l { background: var(--ok); color: #fff; }
.dqi-opt.bad .dqi-l { background: var(--bad); color: #fff; }
.dqi-t { flex: 1; }
.dqi-tag { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.dqi-opt.ok .dqi-tag { color: var(--ok); }
.dqi-opt.bad .dqi-tag { color: var(--bad); }
.dqi-exp { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fff8e6; line-height: 1.8; font-size: .92rem; }
/* صفحة الإحصائيات (لوحة المعلم) */
.sx-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.sx-kpis .stat b { display: block; font-size: 1.6rem; color: var(--brand); }
.sx-kpis .stat span { color: var(--muted); font-size: .88rem; }
.sx-card { margin-bottom: 16px; }
.sx-card h3 { margin-top: 0; }
.sx-grid { gap: 16px; }
.sx-grid > .sx-card { margin-bottom: 0; }
.sx-grid + .sx-card, .sx-grid + .sx-grid { margin-top: 16px; }
.sx-bars { display: grid; gap: 12px; }
.sx-bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.sx-track { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 4px 0 2px; }
.sx-fill { height: 100%; border-radius: 99px; }
.sx-fill.hi { background: var(--ok); } .sx-fill.mid { background: var(--accent); } .sx-fill.lo { background: var(--bad); }
b.hi { color: var(--ok); } b.mid { color: #b06d0c; } b.lo { color: var(--bad); }
.sx-mini { display: flex; align-items: center; gap: 8px; }
.sx-mini .sx-track { flex: 1; margin: 0; }
.sx-mini b { color: var(--bad); font-size: .9rem; }
.sx-idle { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow: auto; }
.sx-idle .chip { display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; font-size: .82rem; }
.sx-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 190px; }
.sx-day { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.sx-col { flex: 1; width: 70%; max-width: 34px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.sx-col > div { width: 100%; background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-radius: 8px 8px 0 0; }
.sx-day-n { font-size: .75rem; font-weight: 700; color: var(--brand); min-height: 1.3em; }
.sx-day-l { font-size: .68rem; color: var(--muted); text-align: center; line-height: 1.3; margin-top: 4px; white-space: nowrap; }
.sx-opt { position: relative; overflow: hidden; }
.sx-opt > * { position: relative; z-index: 1; }
.sx-opt .sx-opt-bg { position: absolute; inset: 0 0 0 auto; z-index: 0; background: rgba(0,0,0,.05); }
.sx-opt.ok .sx-opt-bg { background: rgba(30,138,76,.14); }
.sx-opt.bad .sx-opt-bg { background: rgba(192,57,43,.12); }
.sx-opt-n { font-size: .8rem; white-space: nowrap; color: var(--muted); }
@media (max-width: 600px) { .sx-day-l { font-size: .6rem; } .sx-days { gap: 3px; } }
/* الأسئلة الخاطئة لطالب */
.sxw-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 12px; padding: 8px 10px; background: var(--accent-soft); border-radius: 12px; font-size: .88rem; font-weight: 600; }
.sxw-focus .chip { display: inline-block; background: #fff; border-radius: 99px; padding: 2px 10px; font-size: .8rem; font-weight: 500; }
.sxw-list { display: grid; gap: 10px; max-height: 60vh; overflow: auto; padding-inline-end: 2px; }
.sxw-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.sxw-q { font-weight: 700; line-height: 1.7; }
.sxw-ans { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 4px; font-size: .88rem; }
.sxw-bad { color: var(--bad); background: var(--bad-soft); padding: 2px 10px; border-radius: 8px; }
.sxw-ok { color: var(--ok); background: var(--ok-soft); padding: 2px 10px; border-radius: 8px; }
.sx-stack { margin-top: 16px; }
.sx-stack .sx-idle { max-height: none; }
/* طلاب لم يشاركوا: عمود لكل صف */
.sx-stack .sx-idle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 760px) { .sx-stack .sx-idle { grid-template-columns: 1fr !important; } }
.sx-idle-col { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.sx-idle-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.sx-idle-col ol { list-style: none; margin: 0; padding: 4px 12px 8px; }
.sx-idle-col li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.sx-idle-col li:last-child { border-bottom: 0; }
.sx-idle-col li .n { flex: none; min-width: 1.4em; color: var(--muted); font-size: .8rem; }
.sx-idle-col li .nm { flex: 1; min-width: 0; }
.sx-idle-col li .small { flex: none; white-space: nowrap; }
.sx-idle-col .center { padding: 12px; margin: 0; }
/* مراجعة التحديات السابقة */
.comp-res .btn.sm { margin-top: 2px; padding: 4px 10px; font-size: .8rem; }
.rv-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chip-btn { font: inherit; font-size: .85rem; font-weight: 600; padding: 5px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.chip-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-btn:disabled { opacity: .45; cursor: default; }
.rv-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.rv-opt { font-size: .88rem; padding: 5px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.rv-opt b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ebe7dd; font-size: .78rem; margin-inline-end: 4px; }
.rv-opt.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.rv-opt.ok b { background: var(--ok); color: #fff; }
.rv-opt.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.rv-opt.bad b { background: var(--bad); color: #fff; }
.comp-res [data-review] { font-size: 1.05rem; padding: 3px 12px; line-height: 1.4; }
/* صور الأسئلة */
.q-fig { margin: 4px 0 12px; text-align: center; }
.q-img { display: block; max-width: 100%; max-height: 320px; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; object-fit: contain; }
.q-fig figcaption { font-size: .75rem; color: var(--muted); margin-top: 4px; }
.review .q-fig { margin: 8px 0 4px; }
.review .q-img { max-height: 220px; }
.img-zoom { position: fixed; inset: 0; z-index: 1000; background: rgba(10,20,18,.88); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.img-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; }
.img-zoom button { position: absolute; top: 14px; inset-inline-start: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 1.1rem; cursor: pointer; }
.modal .q-img, #p-daily .q-img, #p-stats .q-img { cursor: default; }
.drop.sm-drop { padding: 14px; font-size: .9rem; }
.img-bulk { border-top: 1px dashed var(--line); margin-top: 14px; }
.pv-nav { margin-top: 14px; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pv-nav button:disabled { opacity: .4; }
.badge.nafes { background: #e8e4fb; color: #4b3aa8; }
/* تحليل الاختبار */
.ana-card { max-width: 1000px !important; background: var(--bg); }
.ana-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; }
.ana-kpis .stat b { display: block; font-size: 1.4rem; color: var(--brand); }
.ana-kpis .stat b.hi { color: var(--ok); } .ana-kpis .stat b.mid { color: #b06d0c; } .ana-kpis .stat b.lo { color: var(--bad); }
.ana-kpis .stat span { color: var(--muted); font-size: .85rem; }
.ana-grid { gap: 14px; margin-bottom: 14px; }
.ana-grid > .sx-card { margin-bottom: 0; }
.ana-hard { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-bottom: 1px dashed var(--line); cursor: pointer; font-size: .9rem; }
.ana-hard:last-child { border-bottom: 0; }
.ana-hard:hover span:last-child { color: var(--brand); text-decoration: underline; }
.ana-hard .badge { flex: none; }
.bad-txt { color: var(--bad); font-weight: 700; }
#sxModal { z-index: 60; }
.sx-mini b.hi { color: var(--ok); } .sx-mini b.mid { color: #b06d0c; } .sx-mini b.lo { color: var(--bad); }
/* منحنى الدرجات */
.curve-wrap { direction: ltr; overflow-x: auto; }
.score-curve { width: 100%; min-width: 560px; height: auto; display: block; font-family: inherit; }
.score-curve .grid { stroke: var(--line); stroke-width: 1; }
.score-curve .ax { fill: var(--muted); font-size: 11px; }
.score-curve .ax-t { fill: var(--muted); font-size: 12px; font-weight: 600; }
.score-curve .val { fill: var(--ink); font-size: 11px; font-weight: 700; }
.score-curve .cbar.hi { fill: var(--ok); opacity: .55; } .score-curve .cbar.mid { fill: var(--accent); opacity: .6; } .score-curve .cbar.lo { fill: var(--bad); opacity: .5; }
.score-curve .curve { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
.score-curve .avg { stroke: var(--brand-2); stroke-width: 2; stroke-dasharray: 6 5; }
.score-curve .avg-t { fill: var(--brand); font-size: 12px; font-weight: 700; }
.va-list { max-height: 62vh; overflow: auto; padding-inline-end: 2px; }
.va-list .review:first-child { margin-top: 0; }
#sxModal .modal-card:has(#vaList) { max-width: 680px !important; }

/* ---------- بطاقة المعلم بالصورة الكرتونية (تخرج من أعلى الدائرة) ---------- */
.tcard.has-avatar { overflow: visible; margin-top: 46px; padding-top: 18px; padding-bottom: 18px; align-items: center;
  background: radial-gradient(120% 140% at 100% 0%, var(--brand-soft) 0, transparent 55%), var(--surface); }
.tcard.has-avatar::before { border-radius: 22px 22px 0 0; }
.tcard-photo.is-avatar { position: relative; width: 132px; height: 132px; margin-top: -52px; overflow: visible; border: 0;
  background: radial-gradient(circle at 35% 30%, #2a9a82 0, var(--brand-2) 38%, var(--brand) 100%);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--accent), 0 14px 28px rgba(15,92,77,.28); }
.tcard-photo.is-avatar::after { content: ""; position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0 / 18px 18px; opacity: .6; pointer-events: none; }
.av-clip { position: absolute; left: 0; right: 0; bottom: 0; height: 190%; overflow: hidden; border-radius: 0 0 999px 999px; z-index: 1; }
.av-clip img { position: absolute; left: 50%; bottom: -6px; width: 112%; height: auto; transform: translateX(-50%);
  object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)); transform-origin: 50% 100%;
  animation: tbob 4.5s ease-in-out infinite; }
@keyframes tbob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .av-clip img { animation: none; } }
.tcard.has-avatar .tcard-info { padding-bottom: 4px; }
.tcard.has-avatar .tcard-role { margin-bottom: 6px; }
@media (max-width: 480px) {
  .tcard.has-avatar { margin-top: 40px; }
  .tcard-photo.is-avatar { width: 104px; height: 104px; margin-top: -44px; }
}
@media (min-width: 820px) { .hero-grid:has(.tcard.has-avatar) .features-card { margin-top: 46px; } }
/* بطاقة المعلم: نص فقط (الاسم والمدرسة) */
.tcard.has-avatar { padding-top: 24px; padding-bottom: 24px; }
.tcard-photo.is-avatar { margin-top: -18px; }
.tcard.has-avatar .tcard-name { font-size: 1.45rem; margin-bottom: 6px; }
.tcard.has-avatar .tcard-school { font-size: 1rem; }
@media (max-width: 480px) {
  .tcard.has-avatar { padding-top: 20px; padding-bottom: 20px; }
  .tcard-photo.is-avatar { margin-top: -14px; }
  .tcard.has-avatar .tcard-name { font-size: 1.15rem; }
  .tcard.has-avatar .tcard-school { font-size: .9rem; }
}
/* رسالة سريعة من قائمة المتصلين */
.on-item .on-msg { margin-inline-start: auto; flex: none; }
.qm-to { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; }
.qm-kinds { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.qm-kinds label { cursor: pointer; }
.qm-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.qm-kinds span { display: inline-block; padding: 5px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: .88rem; font-weight: 600; }
.qm-kinds input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.qm-kinds input:focus-visible + span { outline: 2px solid var(--accent); }
.qm-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.qm-quick button { font: inherit; font-size: .8rem; padding: 4px 10px; border-radius: 10px; border: 1px dashed var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.qm-quick button:hover { border-color: var(--brand-2); color: var(--brand); }
/* إبراز الرسالة الجديدة عند الطالب */
.msg.msg-new { animation: msgpop .9s ease 2; }
@keyframes msgpop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.02); box-shadow: 0 0 0 4px var(--accent-soft); } }
/* نافذة الرسالة الشفافة فوق الصفحة */
body.msg-lock { overflow: hidden; }
.msg-overlay { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 20px;
  background: rgba(12, 40, 34, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: mfade .25s ease; }
.msg-pop { width: min(420px, 100%); text-align: center; padding: 26px 22px 20px; border-radius: 24px; position: relative;
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 24px 60px rgba(10, 40, 34, .28); animation: mpop .35s cubic-bezier(.2,.9,.3,1.3); }
.msg-pop-ic { width: 64px; height: 64px; margin: -58px auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem;
  background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.15), 0 0 0 5px rgba(255,255,255,.6); }
.msg-pop-tag { display: inline-block; font-size: .8rem; font-weight: 700; padding: 3px 12px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
.msg-pop-body { font-size: 1.15rem; font-weight: 600; line-height: 1.9; margin: 12px 0 18px; color: var(--ink); white-space: pre-line; }
.msg-pop-ok { width: 100%; padding: 12px; font-size: 1.05rem; }
.msg-pop-more { margin-top: 8px; font-size: .8rem; color: var(--muted); }
.msg-pop-praise { border-color: rgba(30,138,76,.35); }
.msg-pop-praise .msg-pop-tag { background: var(--ok-soft); color: var(--ok); }
.msg-pop-alert { background: rgba(192, 57, 43, .78); border-color: rgba(255,255,255,.5); }
.msg-pop-alert .msg-pop-body { color: #fff; }
.msg-pop-alert .msg-pop-tag { background: rgba(255,255,255,.2); color: #fff; }
.msg-pop-alert .msg-pop-ok { background: #fff; color: #a8281b; }
.msg-pop-alert .msg-pop-more { color: rgba(255,255,255,.85); }
.msg-pop-out { animation: mout .22s ease forwards; }
@keyframes mfade { from { opacity: 0; } }
@keyframes mpop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes mout { to { opacity: 0; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .msg-overlay, .msg-pop, .msg-pop-out { animation: none; } }
.msg-pop-ok:focus { outline: none; } .msg-pop-ok:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* احتفال الترحيب: هدايا متساقطة */
.gift-layer { position: fixed; inset: 0; z-index: 950; pointer-events: none; overflow: hidden; transition: opacity .5s; }
.gift-layer.gift-done { opacity: 0; }
.gift-layer .gift, .gift-layer .confetti { position: absolute; top: -60px; will-change: transform, opacity; }
.gift-layer .gift { font-size: calc(26px * var(--s)); filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.gift-layer .confetti { width: 9px; height: 14px; border-radius: 2px; }
@keyframes giftFall {
  0%   { transform: translate(0, 0) rotate(0) scale(var(--s)); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--dx), 105vh) rotate(var(--rot)) scale(var(--s)); opacity: 0; }
}
.gift-big { position: absolute; left: 50%; top: 42%; font-size: 84px; transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); animation: bigIn .6s cubic-bezier(.2,1.4,.4,1) forwards; }
.gift-big.open { animation: bigOpen 1.1s ease forwards; }
@keyframes bigIn { to { transform: translate(-50%, -50%) scale(1) rotate(-8deg); } }
@keyframes bigOpen { 0% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1.5); opacity: 0; } }
.gift-spark { position: absolute; left: 50%; top: 42%; font-size: 24px; transform: translate(-50%, -50%); animation: spark 1.2s ease-out forwards; }
@keyframes spark { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.1); opacity: 0; } }
/* رسالة الهدية 🎁 */
.msg-pop-gift { overflow: hidden; padding-top: 30px;
  background: linear-gradient(160deg, rgba(255, 248, 225, .9), rgba(255, 236, 196, .82));
  border: 1px solid rgba(240, 160, 51, .55); box-shadow: 0 24px 60px rgba(176, 109, 12, .28), inset 0 0 0 1px rgba(255,255,255,.6); }
.msg-pop-gift .msg-pop-ic { position: relative; z-index: 1; margin-top: -4px; width: 78px; height: 78px; font-size: 2.4rem;
  background: radial-gradient(circle at 35% 30%, #fff, #fff3d6); box-shadow: 0 10px 24px rgba(176,109,12,.3), 0 0 0 5px rgba(240,160,51,.35);
  animation: giftWiggle 1.6s ease-in-out infinite; }
@keyframes giftWiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-10deg) scale(1.06); } 80% { transform: rotate(9deg) scale(1.06); } 90% { transform: rotate(-5deg); } }
.gift-ribbon { position: absolute; inset: 0; pointer-events: none; }
.gift-ribbon::before, .gift-ribbon::after { content: ""; position: absolute; background: linear-gradient(90deg, #e8574a, #c73a2e); opacity: .9; }
.gift-ribbon::before { top: 0; height: 77px; left: 50%; width: 16px; transform: translateX(-50%); }
.gift-ribbon::after { left: 0; right: 0; top: 70px; height: 14px; background: linear-gradient(180deg, #e8574a, #c73a2e); }
.msg-pop-gift .gift-title, .msg-pop-gift .msg-pop-tag, .msg-pop-gift .msg-pop-body, .msg-pop-gift .msg-pop-ok, .msg-pop-gift .msg-pop-more { position: relative; z-index: 1; }
.gift-title { margin-top: 18px; font-size: 1.45rem; font-weight: 800; color: #8a4b05;
  background: linear-gradient(90deg, #b06d0c, #e8574a, #b06d0c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.msg-pop-gift .msg-pop-tag { margin-top: 4px; background: rgba(255,255,255,.75); color: #8a5408; border: 1px solid #f6dcae; }
.msg-pop-gift .msg-pop-body { background: rgba(255,255,255,.65); border-radius: 14px; padding: 10px 12px; }
.msg-pop-gift .msg-pop-ok { background: linear-gradient(135deg, #f0a033, #e07b1a); color: #fff; border: 0; box-shadow: 0 8px 18px rgba(224,123,26,.35); }
@media (prefers-reduced-motion: reduce) { .msg-pop-gift .msg-pop-ic { animation: none; } }
/* خيارات بالصور */
.options.img-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .options.img-opts { grid-template-columns: repeat(4, 1fr); } }
.options.img-opts .opt { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 8px 12px; margin: 0; position: relative; }
.options.img-opts .opt .l { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; }
.opt-pic { position: relative; display: block; width: 100%; }
.opt-pic img { display: block; width: 100%; height: 120px; object-fit: contain; border-radius: 10px; background: #fff; }
@media (min-width: 760px) { .opt-pic img { height: 130px; } }
.opt-zoom { position: absolute; bottom: 4px; inset-inline-end: 4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; background: rgba(255,255,255,.92); box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor: zoom-in; }
.opt-t { font-size: .92rem; }
.opt:not(.img-opts .opt) .opt-pic { width: 90px; flex: none; }
.opt-mini { display: inline-block; vertical-align: middle; height: 46px; max-width: 70px; object-fit: contain; border-radius: 6px; background: #fff; margin-inline: 4px; border: 1px solid var(--line); }
.rv-opt .opt-mini { height: 54px; max-width: 90px; }
/* نافذة صور السؤال والخيارات */
.img-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.img-slot { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.img-slot.main { grid-column: 1 / -1; }
.img-slot-h { font-size: .88rem; }
.img-slot-v { min-height: 60px; display: grid; place-items: center; background: #fff; border-radius: 8px; padding: 4px; }
.img-slot-v img { max-width: 100%; max-height: 110px; object-fit: contain; }
.img-slot.main .img-slot-v img { max-height: 170px; }
.img-slot-a { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 480px) { .img-slots { grid-template-columns: 1fr 1fr; } }
.qe-oi .opt-mini { height: 28px; }
.dqi-opt .opt-mini { height: 72px; max-width: 120px; }

/* ---------- 💬 دردشة الصف ---------- */
.tab.has-live::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-inline-start: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.chat-card { padding: 16px; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chat-rules { margin: 8px 0 12px; font-size: .82rem; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; padding: 6px 10px; }
.chat-list { height: min(58vh, 460px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; scroll-behavior: smooth; }
.chat-empty { margin: auto; }
.cmsg { max-width: 78%; align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; border-start-start-radius: 4px; padding: 6px 12px 4px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.cmsg.mine { align-self: flex-end; background: var(--brand); color: #fff; border-color: var(--brand); border-radius: 14px; border-start-end-radius: 4px; }
.cmsg.teacher { background: var(--accent-soft); border-color: #f3d39e; }
.cmsg .cname { display: block; font-size: .78rem; color: var(--brand); }
.cmsg.teacher .cname { color: #8a5408; }
.cmsg .cbody { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.cmsg .ctime { display: block; font-size: .68rem; opacity: .65; text-align: end; margin-top: 2px; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { flex: 1; min-width: 0; }
.chat-form .btn { flex-shrink: 0; }
.chat-note { margin: 8px 0 0; color: #8a5408; }
/* لوحة المعلم */
.cmsg.blocked { background: var(--bad-soft); border-color: #f0b8b0; border-style: dashed; }
.cmsg.hiddenmsg { opacity: .5; text-decoration: line-through; }
.cmsg .cact { display: flex; gap: 4px; margin-top: 4px; }
.cmsg .cact button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 0 6px; font-size: .78rem; cursor: pointer; line-height: 1.8; }
.chat-admin-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.chat-admin-bar select { width: auto; }
.chat-muted-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- شريط التبويبات المنظّم (أيقونة فوق الاسم، بلا تمرير جانبي) ---------- */
.tabs.tabs-grid { display: grid; grid-template-columns: repeat(var(--tab-cols, 4), minmax(0, 1fr)); gap: 4px; overflow: visible; }
.tabs.tabs-grid .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 4px; font-size: .86rem; line-height: 1.3; white-space: nowrap; position: relative; min-width: 0; }
.tabs.tabs-grid .tab .ti { font-size: 1.3rem; line-height: 1; }
.tabs.tabs-grid .tab .tl { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabs.tabs-grid .tab.has-live::after { position: absolute; top: 6px; inset-inline-end: calc(50% + 14px); margin: 0; }
.admin-tabs { --tab-cols: 9; }
.student-tabs { --tab-cols: 4; }
@media (max-width: 760px) {
  .admin-tabs { --tab-cols: 3; }
}
@media (max-width: 400px) {
  .tabs.tabs-grid .tab { font-size: .8rem; padding: 7px 2px; }
}
.chat-rules.chat-motto { text-align: center; font-weight: 600; color: var(--brand); background: var(--brand-soft); border-style: solid; border-color: transparent; }

/* ---------- ✉️ اسأل المعلم ---------- */
.tbadge { position: absolute; top: 4px; inset-inline-end: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: #e11d48; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface-2); }
.tbadge.static { position: static; box-shadow: none; display: inline-block; }
.student-tabs { --tab-cols: 5; }
.admin-tabs { --tab-cols: 10; }
@media (max-width: 760px) { .admin-tabs { --tab-cols: 5; } .admin-tabs .tab { font-size: .76rem; padding: 7px 2px; } }
.chat-form textarea { flex: 1; min-width: 0; resize: none; font: inherit; }
.inbox-list { height: min(52vh, 420px); }
.inbox-grid { grid-template-columns: 320px 1fr; }
@media (max-width: 760px) { .inbox-grid { grid-template-columns: 1fr; } }
.ib-side { padding: 14px; }
.ib-convs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 470px; overflow-y: auto; }
.ib-conv { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; background: none; border: 1px solid transparent; border-radius: 12px;
  padding: 8px; font: inherit; color: inherit; cursor: pointer; }
.ib-conv:hover { background: var(--surface-2); }
.ib-conv.active { background: var(--brand-soft); border-color: #bfe0d6; }
.ib-av { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; }
.ib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.ib-main b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-prev { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-conv.unread .ib-prev { color: var(--ink); font-weight: 600; }
.ib-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.ib-time { font-size: .7rem; color: var(--muted); }
.ib-del { border: 0; background: none; cursor: pointer; font-size: .75rem; opacity: .55; padding: 0 2px; }
.ib-del:hover { opacity: 1; }
@media (max-width: 760px) { .tabs.tabs-grid.admin-tabs .tab { font-size: .7rem; padding: 7px 1px; } }
@media (max-width: 440px) { .tabs.tabs-grid.student-tabs .tab { font-size: .7rem; padding: 7px 1px; } .tabs.tabs-grid.student-tabs .tab .ti { font-size: 1.2rem; } }
.ctime .tick { font-weight: 700; font-size: .8rem; letter-spacing: -3px; margin-inline-start: 5px; }
.ctime .tick.read { color: #8ee0ff; }
/* شروط الدردشة */
.terms-pop { width: min(470px, 100%); text-align: start; max-height: calc(100vh - 60px); overflow-y: auto; }
.terms-pop h3, .terms-pop > p { text-align: center; }
.terms-pop .msg-pop-ic { margin-top: -6px; }
.terms-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.terms-list li { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.65); border: 1px solid rgba(15,92,77,.12);
  border-radius: 12px; padding: 8px 10px; font-size: .92rem; line-height: 1.6; }
.terms-list li span { flex-shrink: 0; }
.terms-ack { display: flex; gap: 10px; align-items: flex-start; background: var(--brand-soft); border: 1px solid #bfe0d6; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px; font-size: .9rem; line-height: 1.7; cursor: pointer; }
.terms-ack input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; accent-color: var(--brand); }
.terms-pop #termsLater { display: block; margin-inline: auto; }
.chat-terms-btn { width: 100%; margin-top: 10px; }
.ch-agree-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.ch-agree-list > div { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.ib-head-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ib-head-name #ibDelAll { padding: 2px 8px; }
.ib-head { flex-wrap: nowrap; }
.ib-head-name { position: relative; flex: 1; }
.ib-head-name h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-av-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; transition: box-shadow .15s; }
.ib-av-btn:hover, .ib-av-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px #bfe0d6; }
.ib-info { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 30; width: min(290px, 80vw); background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 34px rgba(10,40,34,.18); padding: 12px 14px; }
.ib-info-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.ib-info-head b { line-height: 1.5; }
.ib-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .88rem; }
.ib-info dt { color: var(--muted); }
.ib-info dd { margin: 0; font-weight: 600; }
.ib-info { width: min(340px, 86vw); max-height: min(70vh, 560px); overflow-y: auto; }
.ib-av.lg { width: 46px; height: 46px; font-size: 1.2rem; }
.ib-info-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ib-info-chips .chip { font-size: .75rem; padding: 1px 8px; background: var(--brand-soft); color: var(--brand); border: 0; }
.ib-info-load { display: grid; place-items: center; padding: 18px 0; }
.ib-stats { margin: 4px 0 10px; }
.ib-comps-t { font-size: .82rem; font-weight: 700; color: var(--muted); margin: 6px 0 4px; }
.ib-comps { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; margin-bottom: 10px; }
.ib-comp { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; font-size: .84rem; }
.ib-comp-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-comp-s { flex-shrink: 0; font-weight: 700; direction: ltr; }
.ib-comp-s.hi { color: var(--ok); } .ib-comp-s.mid { color: #b7791f; } .ib-comp-s.lo { color: var(--bad); }
.ib-info-acct { border-top: 1px solid var(--line); padding-top: 8px; font-size: .82rem !important; }
.ib-editbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 4px 6px 4px 12px;
  background: var(--accent-soft); border: 1px solid #f3d39e; border-radius: 10px; font-size: .85rem; font-weight: 600; color: #8a5408; }
.ib-editbar + .chat-form { margin-top: 6px; }
.comp-meta { display: flex; flex-wrap: wrap; gap: 0 6px; }
.comp-meta span { white-space: nowrap; }
@media (min-width: 480px) { .comp-meta span + span::before { content: "·"; margin-inline-end: 6px; } }
@media (max-width: 479px) { .comp-meta { flex-direction: column; } }
.comp-ic { display: inline-block; margin-inline-end: 6px; font-size: 1.05em; }
#chatState, #chState { font-size: 1.1rem; padding: 2px 10px; }
.comp.review-card { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.comp.review-card:hover { border-color: #bfe0d6; box-shadow: 0 6px 18px rgba(15,92,77,.12); transform: translateY(-1px); }
.comp.review-card:active { transform: none; }
.comp.review-card:focus-visible { outline: 3px solid #9fd4c5; outline-offset: 2px; }
/* نقطة حالة التحدي المنتهي: خضراء = مفتوح، حمراء = مغلق */
.comp-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; }
.comp-dot.on { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); animation: dotpulse 2s ease-in-out infinite; }
.comp-dot.off { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
@keyframes dotpulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.06); } }
/* زرا إنهاء التحدي وفتحه */
.comp-end-btn, .comp-open-btn { white-space: nowrap; font-weight: 700; border: 1px solid; }
.comp-end-btn { background: var(--bad-soft); color: var(--bad); border-color: #f0b8b0; }
.comp-end-btn:hover { background: #f8d6d1; }
.comp-open-btn { background: var(--ok-soft); color: var(--ok); border-color: #b6e2c6; }
.comp-open-btn:hover { background: #cfeedb; }
/* تحدٍّ فات الطالب (أُنهي أو انتهى وقته ولم يحلّه) */
.comp.missed { opacity: .82; }
.comp.missed .ic { background: var(--bad-soft); }
.comp-missed { font-size: .8rem; font-weight: 700; color: var(--bad); }
.comp-state { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.comp-state.on { color: var(--ok); } .comp-state.off { color: var(--bad); }
.comp-state .comp-dot { width: 10px; height: 10px; margin: 0; }
/* لوحة الشرف في صفحة الطالب: أسماء أصغر قليلًا */
#panelBoard .lb-name { font-size: .88rem; }
/* من شاهد الرسالة */
.mr-msg { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; margin-bottom: 10px; }
.mr-sum { margin-bottom: 10px; }
.mr-sec { margin-top: 8px; }
.mr-sec summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.mr-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.mr-list > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px dashed var(--line); font-size: .9rem; }
/* أيقونة العين المسطّحة */
.ico-eye { width: 19px; height: 19px; color: var(--brand); vertical-align: -4px; flex-shrink: 0; }
.btn .ico-eye { display: inline-block; }
p .ico-eye { width: 16px; height: 16px; vertical-align: -3px; }
.eye-title .ico-eye, #sxTitle .ico-eye { width: 22px; height: 22px; vertical-align: -5px; }
.btn:hover .ico-eye { color: var(--brand-2); }
/* اسم الطالب القابل للضغط ← بطاقة الطالب */
.sp-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit;
  text-decoration: underline dotted rgba(15,92,77,.45); text-underline-offset: 4px; }
.sp-link:hover { color: var(--brand); text-decoration-style: solid; }
.sp-body .ib-info-head { margin-top: 4px; }
.sp-actions { gap: 8px; margin-top: 12px; }
.sp-actions .btn { flex: 1; }
.sp-body dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .88rem; }
.sp-body dt { color: var(--muted); }
.sp-body dd { margin: 0; font-weight: 600; }
.sp-body .ib-info-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.sp-body .ib-info-acct { border-top: 1px solid var(--line); padding-top: 8px; }

/* أيقونة بطاقة الطالب بجوار الاسم */
.sp-wrap { display: inline-flex; align-items: center; gap: 6px; }
.sp-ico { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(15,92,77,.10); color: var(--brand); cursor: pointer; transition: background .15s, transform .15s; }
.sp-ico:hover { background: var(--brand); color: #fff; transform: scale(1.08); }
.sp-av { width: 28px; height: 28px; font-size: .85rem; padding: 0; }

/* وضع الصيانة */
body.maint-lock { overflow: hidden; }
.maint-screen { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px;
  background: linear-gradient(160deg, #eef7f3, #f8f5ec); }
.maint-card { max-width: 420px; width: 100%; text-align: center; background: #fff; border-radius: 22px; padding: 32px 22px 22px;
  box-shadow: 0 12px 40px rgba(15,92,77,.12); border: 1px solid var(--line); }
.maint-ico { font-size: 3.2rem; line-height: 1; margin-bottom: 10px; display: inline-block; animation: maintSpin 3s ease-in-out infinite; }
@keyframes maintSpin { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.maint-card h2 { margin: 0 0 8px; color: var(--brand); }
.maint-card p { margin: 6px 0; color: var(--ink, #333); line-height: 1.8; }
.maint-until { font-weight: 600; color: var(--brand) !important; }
.maint-teacher { display: inline-block; margin-top: 16px; font-size: .78rem; color: var(--muted); text-decoration: none; }
.maint-teacher:hover { text-decoration: underline; }
/* زر وشريط الصيانة في لوحة المعلم */
.maint-btn.on { background: #fdecea; border-color: #f3b8b0; color: #b42318; }
.maint-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fdecea; border: 1px solid #f3b8b0; color: #8a1c12;
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; font-size: .9rem; }
.maint-bar .btn { margin-inline-start: auto; }
.maint-state { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-weight: 600; }
.maint-state.on { background: #fdecea; color: #b42318; }
.maint-state.off { background: var(--brand-soft); color: var(--brand); }
.maint-msg { white-space: pre-line; overflow-wrap: anywhere; max-height: 45vh; overflow-y: auto; }
/* شاشة الصيانة شفافة فوق الصفحة الرئيسية */
.maint-screen { background: rgba(15,40,34,.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.maint-card { background: rgba(255,255,255,.80); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 16px 50px rgba(0,0,0,.18); }
/* صورة المعلم في شاشة الصيانة: تبرز فوق حافة البطاقة */
.maint-card.has-pic { padding-top: 104px; margin-top: 96px; position: relative; }
.maint-pic { position: absolute; top: -92px; left: 50%; transform: translateX(-50%); width: 184px; height: 184px; border-radius: 50%;
  background: #f2ead5; border: 5px solid #fff; box-shadow: 0 10px 30px rgba(15,92,77,.25); overflow: hidden;
  animation: maintFloat 4s ease-in-out infinite; }
.maint-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
@keyframes maintFloat { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .maint-pic { animation: none; } }
/* معاينة أسئلة التحدي */
.cp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.cp-q { padding: 14px; margin-bottom: 12px; }
.cp-q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cp-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-tags .chip { font-size: .72rem; }
.cp-q .q-img { max-height: 220px; margin: 0 0 10px; }
.cp-exp { margin-top: 10px; font-size: .88rem; color: var(--muted); }
.cp-exp summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.cp-meta .chip, .cp-tags .chip { display: inline-block; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 600; }
.cp-tags .chip { background: #f1eee6; color: var(--muted); font-weight: 500; padding: 2px 8px; font-size: .72rem; }

/* ---------- ⚔️ البطولة (الطالب) ---------- */
.student-tabs.six { --tab-cols: 6; }
@media (max-width: 440px) { .tabs.tabs-grid.student-tabs.six { --tab-cols: 3; } .tabs.tabs-grid.student-tabs.six .tab { font-size: .8rem; padding: 8px 2px; } }
.tr-card { margin-bottom: 14px; }
.tr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-head h3 { margin: 0; flex: 1; }
.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tr-chips .chip { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 600; }
.tr-rules { margin: 6px 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .92rem; }
.tr-rules li { background: var(--surface-2, #faf8f2); border-radius: 10px; padding: 8px 12px; }
.ok-t { color: var(--ok); } .bad-t { color: var(--bad); }
.tr-join, .tr-go { width: 100%; font-size: 1.05rem; padding: 12px; }
.tr-go { animation: trPulse 1.6s ease-in-out infinite; }
@keyframes trPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(234,179,8,.45); } 50% { box-shadow: 0 0 0 8px rgba(234,179,8,0); } }
.tr-joined { background: #eaf7ef; color: var(--ok); font-weight: 700; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.tr-note { background: var(--brand-soft); color: var(--brand); border-radius: 12px; padding: 10px 12px; font-weight: 600; text-align: center; }
.tr-match { text-align: center; display: grid; gap: 8px; }
.tr-vs { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 1.1rem; }
.tr-vs span { font-size: 1.4rem; }
.tr-champ { text-align: center; display: grid; gap: 6px; justify-items: center; font-weight: 600; color: #a16207;
  background: linear-gradient(135deg, #fff7d6, #fdecb6); border-radius: 14px; padding: 16px; }
.tr-champ b { font-size: 1.3rem; color: #713f12; }
.tr-brbtn { margin-top: 12px; }
.tr-br { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* شجرة البطولة */
.br { display: flex; gap: 14px; min-width: max-content; padding-bottom: 6px; }
.br-col { display: flex; flex-direction: column; min-width: 150px; }
.br-h { text-align: center; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.br-ms { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 10px; }
.br-m { border: 1.5px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; font-size: .82rem; }
.br-m.live { border-color: #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,.2); }
.br-m.bye { opacity: .75; }
.br-p { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; }
.br-p + .br-p { border-top: 1px solid var(--line); }
.br-p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.br-p.w { background: #eaf7ef; font-weight: 700; color: #166534; }
.br-p.l { color: var(--muted); }
.br-p.l span { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.br-p.me { box-shadow: inset 3px 0 0 var(--brand); }
.br-p small { font-size: .68rem; color: var(--muted); font-weight: 400; }

/* شاشة المباراة */
.mt-card { max-width: 640px; margin: 0 auto; }
.mt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mt-round { font-weight: 700; color: var(--brand); }
.mt-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--brand), #13806a);
  color: #fff; border-radius: 18px; padding: 14px 10px; }
.mt-p { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.mt-p b { font-size: .92rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-p small { font-size: .72rem; opacity: .85; display: inline-flex; align-items: center; gap: 4px; }
.mt-av { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; }
.mt-p.me .mt-av { background: #fde68a; color: #713f12; }
.mt-num { font-size: 2.3rem; font-weight: 800; display: flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.mt-num span { direction: ltr; unicode-bidi: isolate; min-width: 1ch; text-align: center; }
.mt-num i { font-style: normal; opacity: .6; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; display: inline-block; }
.dot.on { background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,.35); }
.mt-qbar { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-weight: 700; font-size: .9rem; }
.mt-tbar { flex: 1; height: 8px; background: #ece8dc; border-radius: 99px; overflow: hidden; }
.mt-tbar div { height: 100%; background: var(--brand); border-radius: 99px; transition: width .1s linear; margin-inline-start: auto; }
.mt-tbar div.low { background: var(--bad); }
.mt-body { margin-top: 10px; min-height: 200px; }
.mt-wait { text-align: center; padding: 24px 8px; display: grid; gap: 8px; justify-items: center; }
.mt-wait p { margin: 0; font-weight: 600; }
.mt-big { font-size: 3rem; line-height: 1; }
.mt-pulse { animation: maintSpin 2s ease-in-out infinite; }
.mt-ready { font-size: 1.2rem; padding: 14px 40px; margin: 8px 0; }
.mt-cd { font-size: 4.5rem; font-weight: 800; color: var(--brand); line-height: 1; animation: mtPop 1s ease-out infinite; }
@keyframes mtPop { 0% { transform: scale(1.3); opacity: .4; } 30% { transform: scale(1); opacity: 1; } }
.mt-res { border-radius: 12px; padding: 10px 12px; font-weight: 700; text-align: center; margin-bottom: 10px; }
.mt-res.ok { background: #eaf7ef; color: #166534; }
.mt-res.bad { background: #fdecec; color: #991b1b; }
.mt-res.none { background: #f1eee6; color: var(--muted); }
.mt-last .small-q { font-size: 1rem; margin-bottom: 8px; }
.mt-last .opt { padding: 8px 10px; }
.mt-next { text-align: center; font-weight: 700; color: var(--brand); margin-top: 12px; }
.mt-gold { text-align: center; font-weight: 800; color: #a16207; background: #fff7d6; border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.opt.picked { outline: 3px solid var(--brand); }
.mt-end { text-align: center; display: grid; gap: 6px; justify-items: center; padding: 18px 8px; margin-top: 12px; border-radius: 16px; }
.mt-end.won { background: linear-gradient(135deg, #fff7d6, #fdecb6); }
.mt-end.lost { background: #f4f1ea; }
.mt-end h2 { margin: 0; }
.mt-end p { margin: 0; }
.admin-tabs { --tab-cols: 11; }
@media (max-width: 760px) { .admin-tabs { --tab-cols: 4; } }
/* البطولات (المعلم) */
.t-players { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.t-pl { display: inline-flex; align-items: center; gap: 4px; background: #f4f1ea; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: .85rem; }
.t-pl .sp-wrap .sp-av { width: 22px; height: 22px; font-size: .72rem; }
.t-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .75rem; padding: 2px 6px; border-radius: 50%; }
.t-x:hover { background: #fdecec; color: var(--bad); }
.t-actions { gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.t-ends { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.t-ends input { padding: 5px 8px; font-size: .82rem; }
.br-ctl { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-top: 1px dashed var(--line); background: #faf8f2; flex-wrap: wrap; }
.br-ctl span { color: #b42318; font-weight: 700; margin-inline-end: auto; }
.br-ctl button { border: 1px solid var(--line); background: #fff; border-radius: 6px; font-size: .72rem; padding: 2px 6px; cursor: pointer; }
.br-ctl button:hover { background: var(--brand-soft); }
#tList { margin-top: 14px; }
.br-win { border: 0; background: none; cursor: pointer; font-size: .8rem; padding: 0 2px; opacity: .55; }
.br-win:hover { opacity: 1; transform: scale(1.15); }
.br-p b { margin-inline-start: auto; }
/* مواعيد المباريات */
.sl-box { background: #faf8f2; border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; text-align: center; width: 100%; }
.sl-h { font-weight: 700; color: var(--brand); }
.sl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.sl-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 6px; cursor: pointer; font: inherit; display: grid; gap: 2px; }
.sl-btn b { font-size: .9rem; }
.sl-btn small { font-size: .72rem; color: var(--muted); }
.sl-btn:hover { border-color: var(--brand); }
.sl-btn.op { border-color: #eab308; background: #fffbea; }
.sl-btn.mine { border-color: var(--brand); background: var(--brand-soft); }
.sl-btn.mine small { color: var(--brand); font-weight: 700; }
.sl-agreed { background: #eaf7ef; color: #166534; border-radius: 14px; padding: 12px; display: grid; gap: 4px; text-align: center; width: 100%; }
.sl-agreed b { font-size: 1.05rem; }
.sl-agreed small { font-size: .78rem; }
.tr-go.ghost-go { background: #fff; color: var(--brand); border: 1.5px solid var(--brand); animation: none; box-shadow: none; }
.t-open { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; background: #faf8f2; border-radius: 12px; padding: 10px; }
.t-open label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; }
.t-open input { padding: 5px 8px; font-size: .85rem; }
.t-times { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.t-open .hint { flex-basis: 100%; font-size: .75rem; color: var(--muted); }
.t-open input[type=date], .t-open input[type=time] { width: auto; min-width: 0; }
.t-times input { width: 118px !important; }
.br-ctl span.calm { color: var(--brand); }
/* 🏆 وسام البطل */
.champ { display: inline-flex; align-items: center; gap: 1px; border: 0; background: none; padding: 0 2px; margin-inline-start: 4px; cursor: pointer;
  vertical-align: middle; line-height: 1; font: inherit; color: #a16207; }
.champ b { font-size: .72rem; font-weight: 800; }
.champ .champ-svg { filter: drop-shadow(0 1px 1.5px rgba(120,80,0,.35)); transition: transform .2s; }
.champ:hover .champ-svg { transform: scale(1.15) rotate(-6deg); }
.champ-pop { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 16px; background: rgba(10,30,25,.55); animation: champFade .25s; }
@keyframes champFade { from { opacity: 0; } }
.champ-pop-card { position: relative; overflow: hidden; width: min(340px, 100%); text-align: center; border-radius: 22px; padding: 26px 20px 18px;
  background: radial-gradient(circle at 50% 0%, #fff8d6, #fff 65%); box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: champIn .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes champIn { from { transform: scale(.6); opacity: 0; } }
.champ-rays { position: absolute; top: -60px; left: 50%; width: 320px; height: 320px; margin-left: -160px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(244,196,67,.22) 0 10deg, transparent 10deg 20deg); border-radius: 50%;
  animation: champSpin 18s linear infinite; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
@keyframes champSpin { to { transform: rotate(360deg); } }
.champ-big { position: relative; display: inline-block; animation: champSwing 3s ease-in-out infinite; transform-origin: 50% 0; filter: drop-shadow(0 8px 14px rgba(140,90,0,.35)); }
@keyframes champSwing { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.champ-pop-card h3 { position: relative; margin: 8px 0 6px; font-size: 1.35rem; background: linear-gradient(90deg, #8a5a06, #e5ac2c, #8a5a06); -webkit-background-clip: text; background-clip: text; color: transparent; }
.champ-pop-card ul { position: relative; list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.champ-pop-card li { background: #fff7d6; border-radius: 10px; padding: 7px 10px; font-weight: 600; color: #713f12; }
.champ-pop-card p { position: relative; margin: 0 0 14px; color: #713f12; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .champ-rays, .champ-big { animation: none; } }
.tr-medal { display: inline-block; animation: champSwing 3s ease-in-out infinite; transform-origin: 50% 0; filter: drop-shadow(0 6px 10px rgba(140,90,0,.3)); }
.wl-name .champ { margin-inline-start: 8px; }
.mt-big .champ-big { display: inline-block; }
/* حركة الوسام: توهج ذهبي نابض، وفي النافذة الكبيرة دوران العملة */
.champ .champ-svg { animation: champGlow 2.6s ease-in-out infinite; }
@keyframes champGlow { 0%,100% { filter: drop-shadow(0 1px 1.5px rgba(120,80,0,.35)); } 50% { filter: drop-shadow(0 0 5px rgba(255,200,60,.95)); } }
.champ-big .champ-svg, .tr-medal .champ-svg { animation: champFlip 6s ease-in-out infinite; transform-origin: 50% 66%; }
@keyframes champFlip { 0%,70% { transform: perspective(300px) rotateY(0); } 85% { transform: perspective(300px) rotateY(180deg); } 100% { transform: perspective(300px) rotateY(360deg); } }
.champ-pop-card::before, .champ-pop-card::after { content: "✦"; position: absolute; color: #f4c443; font-size: 1.4rem; animation: champTw 2s ease-in-out infinite; }
.champ-pop-card::before { top: 30px; right: 60px; }
.champ-pop-card::after { top: 110px; left: 54px; animation-delay: 1s; font-size: 1rem; }
@keyframes champTw { 0%,100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .champ .champ-svg, .champ-big .champ-svg, .tr-medal .champ-svg, .champ-pop-card::before, .champ-pop-card::after { animation: none; } }
.duel-card .br-col { min-width: 220px; }
.duel-card .br-h:empty { display: none; }
.tr-champ.duel { background: linear-gradient(135deg, #eef7f3, #dff0e8); color: var(--brand); }
.tr-champ.duel b { color: var(--brand); }
.du-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.du-when label { cursor: pointer; position: relative; }
.du-when input { position: absolute; opacity: 0; pointer-events: none; }
.du-when span { display: grid; gap: 2px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 700; background: #fff; transition: .15s; }
.du-when small { font-weight: 400; font-size: .76rem; color: var(--muted); }
.du-when input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.du-when input:focus-visible + span { box-shadow: 0 0 0 3px rgba(15,92,77,.25); }
.du-row { align-items: center; }
.du-opt { position: relative; cursor: pointer; }
.du-opt input { position: absolute; opacity: 0; pointer-events: none; }
.du-opt span { display: inline-block; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .85rem; transition: .15s; }
.du-opt input:checked + span { border-color: var(--brand); background: var(--brand); color: #fff; }
.du-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(15,92,77,.25); }
.du-row.now .du-f { opacity: .45; }
.br-ctl .br-live { border: 1px solid #eab308; background: #fffbea; border-radius: 6px; font-size: .72rem; padding: 2px 6px; text-decoration: none; color: #713f12; font-weight: 700; }
.br-ctl .br-live:hover { background: #fde68a; }
/* 📰 شريط الأخبار المتحرك أعلى صفحة الطالب */
.news-bar { display: flex; align-items: stretch; background: linear-gradient(90deg, #0b4a3e, #13806a); border-top: 1px solid rgba(255,255,255,.12); height: 38px; overflow: hidden; }
.news-bar.off { display: none; }
.nb-tag { flex: none; display: flex; align-items: center; padding: 0 14px; font-weight: 800; font-size: .88rem; color: #3b2600;
  background: linear-gradient(135deg, #ffe9a3, #f4c443); position: relative; z-index: 1; box-shadow: -6px 0 12px rgba(0,0,0,.2); }
.nb-tag::after { content: ""; position: absolute; left: -10px; top: 0; border-style: solid; border-width: 19px 10px 19px 0; border-color: transparent #f4c443 transparent transparent; }
.nb-track { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.nb-move { display: flex; width: max-content; white-space: nowrap; animation: nbScroll 30s linear infinite; will-change: transform; }
/* الشريط لا يتوقف عند الضغط أو التمرير عليه */
.nb-items { display: inline-flex; align-items: center; }
.nb-item { color: #fff; font-weight: 600; font-size: .92rem; padding: 0 6px; }
.nb-sep { color: #f4c443; padding: 0 18px; font-size: .8rem; }
@keyframes nbScroll { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .nb-move { animation-duration: 120s !important; } }
.news-admin { margin-top: 14px; }
.na-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.na-row .na-body { flex: 1; }
.na-row .chip { background: var(--brand-soft); color: var(--brand); border-radius: 99px; padding: 2px 10px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.nb-tag { font-size: 1.15rem; padding: 0 12px; }
.nb-tag i { font-style: normal; display: inline-block; animation: nbHorn 2.4s ease-in-out infinite; }
@keyframes nbHorn { 0%,80%,100% { transform: none; } 85% { transform: rotate(-12deg) scale(1.1); } 90% { transform: rotate(10deg) scale(1.1); } 95% { transform: rotate(-6deg); } }
/* الشريط أخضر بالكامل */
.news-bar { background: linear-gradient(90deg, #0a4237, #0f5c4d 50%, #0a4237); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(0,0,0,.15); }
.nb-tag { background: transparent; color: #fff; box-shadow: none; padding: 0 14px; border-inline-end: 1px solid rgba(255,255,255,.18); }
.nb-tag::after { display: none; }
.nb-sep { color: rgba(255,255,255,.45); }
.nb-item { color: #f1fbf7; }
.t-add { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.t-add select { width: auto; min-width: 240px; flex: 1; max-width: 420px; }
/* ⏳ عدّاد موعد المباراة */
.cd { font-size: .9rem; font-weight: 700; border-radius: 10px; padding: 6px 10px; margin-top: 4px; display: grid; gap: 2px; text-align: center; }
.cd b { font-variant-numeric: tabular-nums; font-size: 1.1em; letter-spacing: .5px; }
.cd.far { background: rgba(15,92,77,.08); color: var(--brand); }
.cd.soon { background: #fff7d6; color: #92400e; }
.cd.now { background: #dc2626; color: #fff; animation: cdBlink 1.2s ease-in-out infinite; }
.cd.now span { font-weight: 600; font-size: .85em; opacity: .95; }
.cd.late { background: #f1eee6; color: var(--muted); }
@keyframes cdBlink { 50% { box-shadow: 0 0 0 6px rgba(220,38,38,.25); } }
/* بطاقة تذكير المباراة أعلى الصفحة الرئيسية */
#tourAlert:empty { display: none; }
.ta { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #0f5c4d, #13806a); color: #fff; border-radius: 16px; padding: 12px 14px; margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(15,92,77,.25); }
.ta.pick { background: linear-gradient(135deg, #92400e, #d97706); }
.ta.live { background: linear-gradient(135deg, #b91c1c, #dc2626); }
.ta-t { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ta-t b { font-size: 1rem; }
.ta-t span { font-size: .88rem; opacity: .95; }
.ta .cd { text-align: start; margin-top: 2px; }
.ta .cd.far { background: rgba(255,255,255,.14); color: #fff; }
.ta .cd.soon { background: #fde68a; }
.ta .btn { flex: none; }
.cd { display: block; line-height: 1.6; }
.cd.now span { display: block; }
/* 👁️ وضع المعاينة */
.pv-bar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: repeating-linear-gradient(135deg, #4c1d95, #4c1d95 14px, #5b21b6 14px, #5b21b6 28px); color: #fff; padding: 8px 14px; font-size: .9rem; font-weight: 600; text-align: center; }
.pv-bar .btn { background: #fff; color: #4c1d95; border: 0; }
.sp-actions { flex-wrap: nowrap; }
.sp-actions #spView { flex: none; width: 52px; }
.sp-actions #spView svg { width: 22px; height: 22px; }
/* ✉️ صفحة الرسائل الموحّدة */
.admin-tabs { --tab-cols: 10; }
@media (max-width: 760px) { .admin-tabs { --tab-cols: 5; } }
.ms-seg { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(20,40,35,.05); flex-wrap: wrap; }
.ms-seg button { border: 0; background: none; font: inherit; font-weight: 700; font-size: .92rem; color: var(--muted); padding: 9px 18px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: .15s; }
.ms-seg button:hover { color: var(--brand); background: var(--brand-soft); }
.ms-seg button.active { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(15,92,77,.25); }
.ms-seg .tbadge { box-shadow: none; }
.ms-new-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ms-new-card { max-width: 980px; }
.ms-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.ms-kinds label { position: relative; cursor: pointer; }
.ms-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.ms-kinds span { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-weight: 700; transition: .15s; }
.ms-kinds i { font-style: normal; font-size: 1.6rem; line-height: 1; }
.ms-kinds label:hover span { border-color: var(--brand); }
.ms-kinds input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); box-shadow: 0 0 0 3px rgba(15,92,77,.12); }
.ms-kinds input[value=gift]:checked + span { border-color: #d97706; background: #fff7e6; color: #92400e; box-shadow: 0 0 0 3px rgba(217,119,6,.15); }
.ms-kinds input[value=alert]:checked + span { border-color: #dc2626; background: #fdecec; color: #991b1b; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.ms-kinds input[value=info]:checked + span { border-color: #2563eb; background: #eff6ff; color: #1e40af; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
@media (max-width: 520px) { .ms-kinds { grid-template-columns: repeat(2, 1fr); } .ms-seg button { padding: 8px 12px; font-size: .85rem; } }
/* 🧪 أيقونات العلوم للملف الشخصي */
.av-svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
:is(.wl-avatar, .me-av, .ib-av, .mt-av, .lv-av, .on-av, .pod-avatar, .lb-av):has(> .av-svg) { background: none !important; padding: 0 !important; overflow: hidden; color: inherit; }
.lb-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .8rem; }
.c-av { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-inline-end: 4px; }
.av-edit { position: relative; cursor: pointer; }
.av-edit::after { content: "✏️"; position: absolute; bottom: -2px; left: -2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .7rem; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.av-pick { position: fixed; inset: 0; z-index: 9980; background: rgba(10,30,25,.55); display: grid; place-items: center; padding: 16px; }
.av-pick-card { background: #fff; border-radius: 22px; padding: 18px; width: min(460px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.av-pick-card h3 { margin: 0 0 4px; }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.av-opt { border: 2px solid transparent; background: #faf8f2; border-radius: 16px; padding: 8px 4px 6px; cursor: pointer; display: grid; justify-items: center; gap: 4px; font: inherit; font-size: .74rem; font-weight: 600; color: var(--muted); transition: .15s; }
.av-opt .ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 1.5rem; font-weight: 800; }
.av-opt:hover { border-color: var(--line); transform: translateY(-2px); }
.av-opt.sel { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
@media (max-width: 380px) { .av-opt .ic { width: 48px; height: 48px; } }
img.av-svg { object-fit: cover; }
.av-grid { grid-template-columns: repeat(4, 1fr); }
.av-opt .ic { width: 64px; height: 64px; }
button.on-av { border: 0; padding: 0; cursor: pointer; font: inherit; transition: box-shadow .15s, transform .15s; }
button.on-av:hover { transform: scale(1.06); box-shadow: 0 0 0 3px #bfe0d6; }
.on-av:has(> .av-svg) { overflow: visible !important; }
/* حضور الطالب في مراحل البطولة */
.br-p span small.pr { display: block; font-size: .68rem; font-weight: 700; margin-top: 2px; text-decoration: none; }
.pr.on { color: #15803d; }
.pr.was { color: #a16207; }
.pr.page { color: #0369a1; }
.br .br-p span { max-width: 160px; }
/* اختيار عدة أوقات للمباراة */
.sl-btn small { min-height: 1em; }
.sl-btn:not(.mine):not(.op) small { opacity: .7; }
.sl-btn.mine.op { border-color: #16a34a; }
.sl-hint { font-size: .82rem; color: #475569; font-weight: 600; }
.sl-auto { font-size: .76rem; color: #a16207; background: #fffbea; border-radius: 10px; padding: 5px 8px; }
.br-ctl .slot-st { font-size: .74rem; font-weight: 700; }
.slot-st.ok { color: #15803d; } .slot-st.wait { color: #a16207; } .slot-st.bad { color: #b91c1c; }
.br-ctl select.mtime { font: inherit; font-size: .72rem; padding: 2px 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 88px; }
.br-win.fix { opacity: .8; color: #b45309; font-weight: 800; font-size: .85rem; }
/* تقرير تحليل النتائج */
.rp-bar { gap: 8px; align-items: center; margin-bottom: 10px; }
.rp-bar select { width: auto; padding: 5px 10px; }
#rpWrap { background: #eef1f6; border-radius: 16px; padding: 14px; margin-bottom: 8px; overflow-x: auto; }
.ana-sub { margin: 4px 0 14px; }
.c-ren { border: 0; background: none; cursor: pointer; font-size: .8rem; padding: 0 6px; opacity: .45; vertical-align: middle; }
.c-ren:hover { opacity: 1; }
/* رمز الدخول المؤقت */
.code-card { text-align: center; }
.code-big { font-size: 2.6rem; font-weight: 800; letter-spacing: .25em; color: var(--brand); background: var(--brand-soft); border-radius: 16px; padding: 14px 10px; margin: 14px 0 6px; font-variant-numeric: tabular-nums; }
.code-big.off { opacity: .35; text-decoration: line-through; }
.code-in { font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-weight: 700; }
/* ⚔️ تحدَّ زميلك */
.sd-card { border: 2px solid #f2c27a; background: linear-gradient(180deg, #fffaf0, #fff); }
.sd-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #f7f8fa; margin-bottom: 8px; flex-wrap: wrap; }
.sd-row.in { background: #fff4e0; border: 1px solid #f5c26b; }
.sd-row .sd-t { flex: 1; min-width: 140px; }
.sd-row .sd-t small { color: var(--muted); margin-inline-start: 4px; }
.sd-av { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-grid; place-items: center; font-weight: 700; flex: none; }
.sd-av .av-svg { width: 100%; height: 100%; }
.sd-on { position: absolute; bottom: -1px; left: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.sd-off { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); margin-top: 10px; }
.sd-off input { width: auto; }
.sd-peers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 300px; overflow: auto; }
.sd-peer { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 8px; cursor: pointer; font: inherit; text-align: right; }
.sd-peer small { display: block; font-size: .7rem; color: var(--muted); }
.sd-peer.sel { border-color: var(--brand); background: var(--brand-soft); }
.sd-peer:disabled { opacity: .45; cursor: not-allowed; }
.sd-h { font-weight: 700; margin: 12px 0 6px; }
.sd-times { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-time { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: .85rem; }
.sd-time.sel { border-color: var(--brand); background: var(--brand); color: #fff; }
.sd-switch { display: flex; gap: 8px; align-items: center; }
.sd-switch input { width: 20px; height: 20px; }
@media (max-width: 420px) { .sd-peers { grid-template-columns: 1fr; } }
.ta.sd-inv { background: #fff4e0; border: 1.5px solid #f5c26b; }
.ta.sd-inv .ta-t b { color: #9a3412; }
/* تبويبا البطولات */
.tr-seg { display: flex; width: fit-content; max-width: 100%; }
.tseg-n { background: rgba(0,0,0,.12); border-radius: 99px; padding: 0 7px; font-size: .75rem; min-width: 20px; text-align: center; }
.ms-seg button.active .tseg-n { background: rgba(255,255,255,.25); }
#p-tour[data-seg="cup"] .t-sec-duel, #p-tour[data-seg="cup"] .duel-card,
#p-tour[data-seg="duel"] .t-sec-cup, #p-tour[data-seg="duel"] #tList > .tr-card:not(.duel-card) { display: none; }
#p-tour .t-sec-duel + .t-sec-duel { margin-top: 14px; }
.ta.sd-inv .ta-t span { color: #9a3412; opacity: .85; }
.tr-runner { text-align: center; margin-top: 8px; padding: 8px; border-radius: 12px; background: #f1f5f9; color: #475569; font-size: .9rem; }
.tr-runner b { color: #334155; margin-inline-start: 4px; }
.na-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.na-form input { flex: 1 1 280px; }
.na-form select { width: auto; }

/* ================= 🎨 بنر الموقع + شريط الأخبار (تصميم موحّد) ================= */
.topbar {
  background:
    radial-gradient(ellipse at 15% -60%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(circle at 88% 140%, rgba(33,151,125,.55), transparent 48%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(135deg, #093f34 0%, #0f5c4d 48%, #127461 100%);
  box-shadow: 0 8px 24px rgba(6,40,33,.22);
  isolation: isolate;
}
.topbar::after {        /* خيط ذهبي أسفل البنر */
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, #f4c443 18%, #ffe39a 50%, #f4c443 82%, transparent);
  opacity: .9;
}
.topbar .wrap { min-height: 66px; }
.brand { letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.brand-mark {
  background: linear-gradient(145deg, #ffe7a0, #f4c443 55%, #e0a32e);
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
}
.topbar .btn.accent { background: linear-gradient(145deg, #ffd36a, #f0a033); box-shadow: 0 3px 10px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.45); }
.topbar .btn.ghost, .topbar .btn.icon-btn.acct-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); backdrop-filter: blur(4px); }

/* الشريط: كبسولة زجاجية داخل البنر بعرض محتوى الصفحة */
.news-bar {
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.16)); border-top: 0;
  height: auto; padding: 7px max(16px, calc((100% - 980px) / 2 + 16px)) 10px; gap: 10px; align-items: center;
}
.nb-tag {
  border-radius: 99px; padding: 0 13px; height: 30px; gap: 6px; font-size: .82rem; letter-spacing: .3px;
  background: linear-gradient(145deg, #ffe7a0, #f4c443 60%, #e8ad35); color: #4a3000;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
}
.nb-tag::after { display: none; }
.nb-tag i { font-style: normal; animation: nbPulse 2.4s ease-in-out infinite; display: inline-block; }
.nb-tag::before { content: "أخبار"; order: 2; font-weight: 800; }
@keyframes nbPulse { 0%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(-12deg) scale(1.12); } 30% { transform: rotate(8deg); } 45% { transform: rotate(0) scale(1); } }
.nb-track {
  height: 30px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18);
}
.nb-item { font-size: .9rem; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.nb-sep { color: #f4c443; opacity: .9; }
@media (max-width: 560px) {
  .news-bar { padding: 6px 10px 9px; gap: 7px; }
  .nb-tag { padding: 0 10px; height: 28px; }
  .nb-tag::before { content: none; }
  .nb-track { height: 28px; }
  .nb-item { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .nb-tag i { animation: none; } }
/* شارة الأخبار: البوق وحده بلا خلفية ولا كلمة */
.nb-tag { background: none; box-shadow: none; padding: 0 4px; height: auto; font-size: 1.2rem; }
.nb-tag::before { content: none; }
.nb-tag i { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
@media (max-width: 560px) { .nb-tag { padding: 0 2px; font-size: 1.1rem; } }
/* الأخبار شريط مستقل أسفل الخط الذهبي للبنر */
.topbar:has(.news-bar:not(.hidden):not(.off))::after { display: none; }
.news-bar {
  position: relative; padding: 6px max(16px, calc((100% - 980px) / 2 + 16px));
  background: linear-gradient(90deg, #0a3f35, #0d5446 50%, #0a3f35);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, transparent, #f4c443 18%, #ffe39a 50%, #f4c443 82%, transparent) 1;
  box-shadow: inset 0 6px 10px -6px rgba(0,0,0,.45);
}
.nb-track { background: none; border: 0; box-shadow: none; border-radius: 0; height: 28px; }
@media (max-width: 560px) { .news-bar { padding: 5px 10px; } }
.champ-pop-card li small { display: block; font-size: .8rem; font-weight: 700; color: #a16207; margin-top: 2px; }
/* فرصة ثانية في المباريات */
.mt-res.chance { background: #fff7e0; color: #92400e; border: 1.5px solid #f5c26b; }
.opt.struck { opacity: .45; text-decoration: line-through; background: #fdecec; border-color: #f3b4b4; }
.opt.struck::after { content: " ❌"; }
/* أيقونة نادرة حصرية */
.av-opt.rare { background: linear-gradient(160deg, #fff7d6, #fff); border-color: #f4c443; position: relative; }
.av-opt.rare::before { content: "حصرية"; position: absolute; top: -8px; inset-inline-start: 50%; transform: translateX(50%); background: linear-gradient(90deg, #f4c443, #e8902f); color: #3b2500; font-size: .62rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; }
.av-opt.locked .ic { filter: grayscale(1) brightness(.75); position: relative; }
.av-opt .lk { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 1.1rem; filter: none; }
/* تبويب الأحداث */
#p-tour[data-seg="event"] .t-sec-cup, #p-tour[data-seg="event"] .t-sec-duel, #p-tour[data-seg="event"] #tList, #p-tour[data-seg="event"] #newsAdmin,
#p-tour:not([data-seg="event"]) .t-sec-event { display: none; }
#evList { margin-top: 14px; display: grid; gap: 12px; }
.ev-card { border-inline-start: 4px solid #7c5cff; }
.ev-card.ev-test { border-inline-start-color: #94a3b8; }
.danger-t { color: #b91c1c; }
/* 🚀 شريط الحدث الكبير */
.ev-banner { background: linear-gradient(90deg, #1b1150, #3b2a9a 50%, #1b1150); color: #fff; border-bottom: 2px solid #7c5cff; position: relative; z-index: 4; }
.ev-banner .eb-in { max-width: 980px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 10px; }
.ev-banner .eb-ic { font-size: 1.5rem; animation: ebBob 2.4s ease-in-out infinite; }
@keyframes ebBob { 50% { transform: translateY(-3px) rotate(-8deg); } }
.ev-banner .eb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ev-banner .eb-t b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-banner #ebCd { font-size: .8rem; color: #e0d9ff; font-variant-numeric: tabular-nums; }
.ev-banner .eb-go { border: 0; border-radius: 12px; padding: 7px 12px; font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: linear-gradient(145deg, #ffe7a0, #f4c443 60%, #e09b2a); color: #3b2500; box-shadow: 0 3px 10px #0005; }
.ev-banner .eb-go.on { background: linear-gradient(145deg, #bbf7d0, #22c55e); color: #052e16; }
.ev-banner .eb-go.hot { background: linear-gradient(145deg, #fecaca, #ef4444); color: #fff; animation: ebPulse 1.2s ease-in-out infinite; }
@keyframes ebPulse { 50% { box-shadow: 0 0 0 6px #ef444455; } }
.ev-banner .eb-more { color: #e0d9ff; text-decoration: none; font-size: 1.2rem; padding: 0 2px; }
.ev-banner.hot { background: linear-gradient(90deg, #3b0a2a, #7c1d4f 50%, #3b0a2a); border-bottom-color: #ef4444; }
.ev-card .tr-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ev-card .chip, .ev-card .tr-head .chip { display: inline-flex; align-items: center; gap: 4px; background: #f1f5f9; color: #334155; border-radius: 99px; padding: 3px 10px; font-size: .78rem; font-weight: 700; }

/* 🚀 وسام بطل الحدث الكبير: نافذة بطابع فضائي */
.champ-pop.ev { background: rgba(14,6,40,.7); }
.champ-pop.ev .champ-pop-card { background: radial-gradient(circle at 50% 0%, #3b1d86, #160a3a 70%); color: #f5edff; }
.champ-pop.ev .champ-rays { background: repeating-conic-gradient(from 0deg, rgba(167,139,250,.28) 0 10deg, transparent 10deg 20deg); }
.champ-pop.ev .champ-pop-card h3 { background: linear-gradient(90deg, #f4c443, #fff3b8, #f4c443); -webkit-background-clip: text; background-clip: text; }
.champ-pop.ev .champ-pop-card li { background: rgba(255,255,255,.1); color: #fff; }
.champ-pop.ev .champ-pop-card li small { color: #c4b5fd; }
.champ-pop.ev .champ-big { filter: drop-shadow(0 8px 18px rgba(124,77,255,.55)); }

/* 🌞 سؤال اليوم المختصر (سطر واحد) */
.dq-mini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.dq-mini-ic { font-size: 1.7rem; animation: ebBob 3s ease-in-out infinite; }
.dq-mini-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.dq-mini-t b { color: #8a5408; font-size: 1.02rem; }
.dq-mini-t small { color: var(--muted); font-size: .8rem; }
.dq-mini .btn { width: auto; flex: none; padding: 8px 16px; }

/* 🚀 بطاقة الحدث الكبير في صفحة الطالب */
.ev-hero { position: relative; overflow: hidden; border-radius: 22px; margin: 16px 0; color: #fff;
  background: radial-gradient(120% 90% at 85% 0%, #4c2bb3 0%, #1d1060 45%, #0c0630 100%); border: 1px solid #7c5cff66;
  box-shadow: 0 14px 34px rgba(29,16,96,.35); }
.ev-hero.hot { border-color: #ef4444; box-shadow: 0 0 0 3px #ef444455, 0 14px 34px rgba(124,29,79,.4); animation: evhGlow 1.6s ease-in-out infinite; }
@keyframes evhGlow { 50% { box-shadow: 0 0 0 7px #ef444422, 0 14px 34px rgba(124,29,79,.4); } }
.evh-art { position: relative; height: 118px; }
.ev-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.zorg-fly { animation: zorgFly 3.2s ease-in-out infinite; }
@keyframes zorgFly { 50% { transform: translate(-6px, 6px) rotate(-3deg); } }
.evh-body { position: relative; padding: 0 16px 16px; margin-top: -6px; }
.evh-tag { display: inline-block; font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #ef4444; color: #fff; letter-spacing: .2px; }
.evh-title { margin: 8px 0 4px; font-size: 1.35rem; color: #fde68a; text-shadow: 0 0 18px #f4c44366; }
.evh-story { margin: 0 0 8px; color: #e0d9ff; font-size: .92rem; line-height: 1.7; }
.evh-story b { color: #fff; }
.evh-when { font-weight: 700; font-size: .9rem; color: #fff; margin-bottom: 10px; }
.evh-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; direction: ltr; }
.evh-cd .evh-u:nth-child(1) { order: 4; } .evh-cd .evh-u:nth-child(2) { order: 3; } .evh-cd .evh-u:nth-child(3) { order: 2; } .evh-cd .evh-u:nth-child(4) { order: 1; }
.evh-u { background: linear-gradient(180deg, #ffffff22, #ffffff0a); border: 1px solid #ffffff2a; border-radius: 14px; padding: 8px 2px 6px; text-align: center; }
.evh-u b { display: block; font-size: 1.65rem; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.1; }
.evh-u b.tick { animation: evTick .35s ease-out; }
@keyframes evTick { from { transform: translateY(-6px); opacity: .3; } }
.evh-u small { font-size: .72rem; color: #c4b5fd; font-weight: 700; }
.evh-done { font-weight: 800; font-size: 1.1rem; color: #fde68a; }
.evh-prizes { display: flex; gap: 5px; flex-wrap: wrap; margin: 12px 0; }
.evh-prizes span { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 3px 7px 3px 4px; white-space: nowrap; border-radius: 99px; background: #ffffff14; border: 1px solid #f4c44344; }
.evh-prizes img { width: 20px; height: 20px; border-radius: 50%; }
.evh-prizes .champ-svg { height: 22px; width: auto; }
.evh-prizes i { font-style: normal; font-size: 1rem; }
.evh-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evh-go { border: 0; border-radius: 14px; padding: 11px 18px; font: inherit; font-weight: 900; font-size: 1rem; cursor: pointer; text-decoration: none;
  background: linear-gradient(145deg, #fff1b8, #f4c443); color: #3b2a00; box-shadow: 0 6px 16px #f4c44344; }
.evh-go.on { background: linear-gradient(145deg, #bbf7d0, #22c55e); color: #052e16; }
.evh-go.hot { background: linear-gradient(145deg, #fecaca, #ef4444); color: #fff; animation: ebPulse 1.2s ease-in-out infinite; flex: 1; text-align: center; }
.evh-rs { color: #e0d9ff; font-weight: 700; }
.evh-more { color: #c4b5fd; text-decoration: none; font-weight: 700; font-size: .85rem; margin-inline-start: auto; }
@media (prefers-reduced-motion: reduce) { .zorg-fly, .ev-hero.hot, .evh-u b.tick { animation: none; } }

/* 🌍 اختيار عالم الحدث (لوحة المعلم) */
.ev-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ev-th { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: 16px; border: 3px solid transparent;
  color: #fff; font: inherit; cursor: pointer; text-align: center; box-shadow: 0 4px 12px #0003; transition: transform .12s; }
.ev-th:hover { transform: translateY(-2px); }
.ev-th.sel { border-color: #f4c443; box-shadow: 0 0 0 3px #f4c44355, 0 6px 16px #0004; }
.ev-th.sel::after { content: "✓"; position: absolute; top: 6px; left: 8px; width: 22px; height: 22px; border-radius: 50%; background: #f4c443; color: #3b2500; font-weight: 900; display: grid; place-items: center; font-size: .8rem; }
.ev-th-b svg { width: 70px; height: 70px; display: block; }
.ev-th b { font-size: .92rem; }
.ev-th small { font-size: .72rem; opacity: .8; }
.ev-th img { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px #f4c443; }

/* ألوان نافذة وسام الحدث حسب العالم */
.champ-pop.ev-ocean .champ-pop-card { background: radial-gradient(circle at 50% 0%, #0e7490, #042f3b 70%); }
.champ-pop.ev-volcano .champ-pop-card { background: radial-gradient(circle at 50% 0%, #9a3412, #1a0703 70%); }
.champ-pop.ev-virus .champ-pop-card { background: radial-gradient(circle at 50% 0%, #15803d, #03170b 70%); }
.champ-pop.ev-ice .champ-pop-card { background: radial-gradient(circle at 50% 0%, #0369a1, #04131f 70%); }
.champ-pop.ev-ocean .champ-pop-card li small, .champ-pop.ev-ice .champ-pop-card li small { color: #bae6fd; }
.champ-pop.ev-volcano .champ-pop-card li small { color: #fed7aa; }
.champ-pop.ev-virus .champ-pop-card li small { color: #bbf7d0; }

/* 🌞 سؤال اليوم: شريط مختصر فخم (الصفحة الرئيسية) */
.dq-ad.dq-slim { gap: 14px; margin: 0 0 24px; padding: 12px 14px 12px 16px; border-radius: 18px;
  background: linear-gradient(110deg, #fffaf0 0%, #fff1cf 55%, #ffe3a3 100%); border: 1px solid #f1d08a;
  box-shadow: 0 6px 18px rgba(240,160,51,.16), inset 0 1px 0 #fff; }
.dq-slim::before { width: 160px; height: 160px; top: -70px; inset-inline-end: -40px; }
.dq-slim::after { content: ""; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #f4c443, #e09b2a); }
.dq-slim .dq-ad-sun { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.7rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe3a3); box-shadow: 0 0 0 2px #f4c44366, 0 4px 10px rgba(240,160,51,.3); animation: none; }
.dq-slim .dq-ad-kicker { font-size: .74rem; letter-spacing: .2px; }
.dq-slim .dq-ad-title { margin: 0; font-size: 1.02rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dq-slim .dq-ad-meta { display: none; }
.dq-slim .dq-ad-live { margin: 2px 0 0; font-size: .78rem; color: #8a5a10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dq-slim .dq-ad-side { flex-direction: row; align-items: center; gap: 8px; }
.dq-slim .dq-ad-clock { padding: 4px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #f1d08a; }
.dq-slim .dq-ad-clock-lbl { font-size: .66rem; }
.dq-slim .dq-ad-clock b { font-size: .98rem; letter-spacing: .5px; }
.dq-slim .btn { padding: 9px 16px; font-size: .92rem; }
@media (max-width: 720px) {
  .dq-ad.dq-slim { flex-wrap: wrap; padding: 12px 14px; gap: 10px 12px; }
  .dq-slim .dq-ad-sun { font-size: 1.5rem; width: 42px; height: 42px; }
  .dq-slim .dq-ad-body { flex-basis: calc(100% - 60px); }
  .dq-slim .dq-ad-title { font-size: .98rem; }
  .dq-slim .dq-ad-side { flex-basis: 100%; }
  .dq-slim .dq-ad-clock { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; }
  .dq-slim .dq-ad-side .btn { flex: 1; }
}

/* 🚀 بطاقة الحدث على الشاشات الواسعة: الصورة بجانب التفاصيل */
@media (min-width: 760px) {
  .ev-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
  .ev-hero .evh-art { align-self: stretch; height: auto; min-height: 250px; order: 2; }
  .ev-hero .evh-body { margin: 0; padding: 20px 22px; }
  .ev-hero .evh-title { font-size: 1.6rem; }
}

/* 🚀 بطاقة الحدث أعلى الصفحة الرئيسية: تظهر بحركة دخول ناعمة */
#evHero.ev-top.ev-hero { margin: 14px 0 18px; animation: evIn .6s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes evIn { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
@media (max-width: 720px) {
  #evHero.ev-top .evh-art { height: 100px; }
  #evHero.ev-top .evh-body { padding: 0 14px 14px; }
  #evHero.ev-top .evh-title { font-size: 1.25rem; margin: 6px 0 2px; }
  #evHero.ev-top .evh-story { font-size: .86rem; line-height: 1.6; margin-bottom: 6px; }
  #evHero.ev-top .evh-when { margin-bottom: 8px; font-size: .85rem; }
  #evHero.ev-top .evh-u { padding: 6px 2px 4px; }
  #evHero.ev-top .evh-u b { font-size: 1.45rem; }
  #evHero.ev-top .evh-prizes { margin: 10px 0; }
  #evHero.ev-top .evh-go { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { #evHero.ev-top.ev-hero { animation: none; } }

/* 👥 المشاركون في الحدث (لوحة المعلم) */
.chip-btn { border: 0; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.chip-btn:hover { filter: brightness(.95); }
.evp-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.evp-tabs .seg-b { flex: 1; border: 1px solid var(--line, #e5e7eb); background: var(--surface-2, #f3f4f6); border-radius: 12px; padding: 8px; font: inherit; font-weight: 700; cursor: pointer; }
.evp-tabs .seg-b.on { background: var(--brand, #0f766e); color: #fff; border-color: transparent; }
.evp-body { max-height: 55vh; overflow: auto; }
.evp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.evp-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: var(--surface-2, #f8fafc); flex-wrap: wrap; }
.evp-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--brand-soft, #ccfbf1); font-weight: 800; flex: none; }
.evp-av img, .evp-av svg { width: 100%; height: 100%; }
.evp-n { flex: 1; min-width: 120px; display: flex; flex-direction: column; line-height: 1.35; }
.evp-n small { color: var(--muted); font-size: .78rem; }