/* سجل المتابعة الرقمي — هوية كحلي/ذهبي */
:root{
  --navy:#0E2033; --navy2:#142A44; --gold:#D7A93F; --goldl:#F0D99A;
  --cream:#F8F5EF; --card:#FFFFFF; --ink:#1B2A3A; --muted:#7c8794;
  --line:#e8e2d5; --ok:#2e9e5b; --bad:#d64545;
  --st0:#2e9e5b; --st1:#d64545; --st2:#e8a23d; --st3:#7a8ca3;
  --st4:#58a6d8; --st5:#8e6fc9; --st6:#b3541e;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--cream); color:var(--ink);
  font-family:'Tajawal',system-ui,sans-serif; font-size:16px}
button{font-family:inherit}
.hidden{display:none!important}

/* ═══ الدخول ═══ */
#view-login{min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:20px;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 60%,#1d3a5f 100%)}
.login-card{width:100%; max-width:420px; background:var(--card); border-radius:18px;
  padding:28px 24px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-seal{width:64px; height:64px; margin:-60px auto 10px; background:var(--gold);
  border:4px solid var(--goldl); border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:30px; box-shadow:0 6px 18px rgba(0,0,0,.3)}
.login-title{text-align:center; font-size:24px; font-weight:800; color:var(--navy); margin:4px 0 2px}
.login-sub{text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px}
.field select,.field input{width:100%; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:12px; font-size:16px; font-family:inherit; background:#fbf9f4; color:var(--ink)}
.field select:focus,.field input:focus{outline:none; border-color:var(--gold)}
.btn-primary{width:100%; padding:14px; background:linear-gradient(135deg,var(--gold),#c2942e);
  color:var(--navy); font-size:18px; font-weight:800; border:none; border-radius:12px;
  cursor:pointer; box-shadow:0 4px 14px rgba(215,169,63,.4)}
.btn-primary:active{transform:scale(.98)}
.demo-note{margin-top:14px; background:#fdf6e3; border:1px dashed var(--gold); border-radius:10px;
  padding:10px 12px; font-size:12.5px; color:#7a6520; text-align:center; line-height:1.7}
.login-err{color:var(--bad); font-size:13px; text-align:center; margin-top:10px; min-height:18px; font-weight:700}
.login-foot{margin-top:16px; text-align:center; color:#cbd6e4; font-size:12px}
.login-foot a{color:var(--goldl); text-decoration:none}

/* ═══ الهيكل ═══ */
#view-app{padding-bottom:76px}
.appbar{background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff;
  padding:14px 16px 12px; position:sticky; top:0; z-index:30;
  box-shadow:0 2px 12px rgba(14,32,51,.25); border-bottom:2px solid var(--gold)}
.appbar .row1{display:flex; align-items:center; justify-content:space-between; gap:8px}
.appbar .t{font-size:17px; font-weight:800; color:var(--goldl)}
.appbar .who{font-size:12.5px; color:#c9d5e3; margin-top:2px}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:10px; padding:7px 12px; font-size:13px; font-weight:700; cursor:pointer}
.demo-strip{background:var(--gold); color:var(--navy); text-align:center; font-size:12.5px;
  font-weight:800; padding:4px 8px}

.tabs{position:fixed; bottom:0; right:0; left:0; background:#fff; display:flex;
  border-top:1px solid var(--line); z-index:40; box-shadow:0 -4px 16px rgba(0,0,0,.07);
  padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1; padding:9px 2px 8px; background:none; border:none; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--muted); display:flex; flex-direction:column;
  align-items:center; gap:2px}
.tabs button .ic{font-size:21px; line-height:1}
.tabs button.on{color:var(--navy)}
.tabs button.on .ic{transform:scale(1.12)}
.tabs button.on::after{content:''; width:22px; height:3px; background:var(--gold);
  border-radius:2px; margin-top:2px}

.wrap{padding:14px; max-width:860px; margin:0 auto}
.card{background:var(--card); border-radius:14px; padding:14px 16px; margin-bottom:12px;
  box-shadow:0 2px 10px rgba(27,42,58,.06); border:1px solid #f0ead9}
.card h3{margin:0 0 10px; font-size:15px; font-weight:800; color:var(--navy);
  display:flex; align-items:center; gap:8px}
.card h3 .dot{width:8px; height:8px; border-radius:50%; background:var(--gold)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px}
.kpi{background:linear-gradient(150deg,var(--navy),var(--navy2)); border-radius:14px;
  padding:12px 8px; text-align:center; color:#fff}
.kpi .v{font-size:22px; font-weight:800; color:var(--goldl)}
.kpi .l{font-size:11.5px; color:#c9d5e3; margin-top:2px}

/* حصص اليوم */
.periods{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.period{min-width:86px; background:#fbf8f1; border:1.5px solid var(--line); border-radius:12px;
  padding:8px 6px; text-align:center; flex-shrink:0}
.period .p{font-size:11px; font-weight:800; color:#fff; background:var(--navy);
  border-radius:8px; padding:2px 8px; display:inline-block}
.period .c{font-size:14px; font-weight:800; color:var(--navy); margin-top:6px}
.period.empty{opacity:.45}
.lesson-line{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.lesson-line .nm{font-weight:800; font-size:15px}
.btn-gold{background:var(--navy); color:var(--goldl); border:1.5px solid var(--gold);
  border-radius:10px; padding:8px 14px; font-size:13.5px; font-weight:800; cursor:pointer;
  text-decoration:none; display:inline-block}
.weekpill{background:var(--goldl); color:var(--navy); font-weight:800; font-size:12.5px;
  border-radius:20px; padding:3px 12px; display:inline-block; margin-bottom:6px}

.alert-list .al{display:flex; justify-content:space-between; align-items:center;
  padding:8px 4px; border-bottom:1px dashed var(--line); font-size:14px}
.alert-list .al:last-child{border-bottom:none}
.alert-list .pts{font-weight:800; color:var(--bad)}

/* الفصول */
.class-chips{display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px}
.chip{border:1.5px solid var(--line); background:#fff; color:var(--navy); border-radius:22px;
  padding:8px 16px; font-size:14px; font-weight:800; cursor:pointer; white-space:nowrap; flex-shrink:0}
.chip.on{background:var(--navy); color:var(--goldl); border-color:var(--navy)}
.reg-tools{display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap}
.reg-tools input[type=date]{padding:9px 10px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--ink)}
.btn-soft{background:#eef5ee; color:var(--ok); border:1.5px solid #cfe6cf; border-radius:10px;
  padding:9px 12px; font-size:13px; font-weight:800; cursor:pointer}

.stu{display:flex; align-items:center; gap:8px; padding:9px 2px; border-bottom:1px solid #f3eee1}
.stu:last-child{border-bottom:none}
.stu .num{width:22px; text-align:center; color:var(--muted); font-size:12px; font-weight:700}
.stu .nm{flex:1; font-size:14.5px; font-weight:700; cursor:pointer; line-height:1.3}
.stu .nm small{display:block; color:var(--muted); font-weight:400; font-size:11px}
.statepill{min-width:64px; text-align:center; border-radius:10px; padding:7px 8px; font-size:12.5px;
  font-weight:800; color:#fff; background:#c9cfd6; border:none; cursor:pointer}
.mini{width:38px; height:38px; border-radius:10px; border:1.5px solid var(--line); background:#fff;
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative}
.mini.on{border-color:var(--gold); background:#fdf6e3}
.mini .b{position:absolute; top:-6px; left:-6px; background:var(--navy); color:var(--goldl);
  font-size:10px; font-weight:800; border-radius:9px; min-width:17px; height:17px;
  display:flex; align-items:center; justify-content:center; padding:0 3px}
.stu .pts{min-width:40px; text-align:center; font-weight:800; font-size:14px; color:var(--navy)}
.stu .pts.neg{color:var(--bad)}

/* منبثقات */
.overlay{position:fixed; inset:0; background:rgba(10,20,32,.55); z-index:60; display:flex;
  align-items:flex-end; justify-content:center}
.sheet{background:#fff; width:100%; max-width:560px; border-radius:18px 18px 0 0;
  max-height:86vh; overflow-y:auto; padding:18px 16px 26px; animation:up .18s ease}
@keyframes up{from{transform:translateY(40px); opacity:.6} to{transform:none; opacity:1}}
.sheet h4{margin:0 0 12px; font-size:16px; font-weight:800; color:var(--navy); text-align:center}
.stategrid{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
.stategrid button{padding:13px 8px; border-radius:12px; border:none; color:#fff; font-size:14.5px;
  font-weight:800; cursor:pointer}
.behgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.behgrid button{padding:11px 8px; border-radius:11px; border:1.5px solid var(--line); background:#fbf9f4;
  font-size:13.5px; font-weight:700; cursor:pointer; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:6px}
.behgrid button .p{font-weight:800}
.behgrid button .p.pos{color:var(--ok)} .behgrid button .p.neg{color:var(--bad)}
.behgrid button.sel{border-color:var(--gold); background:#fdf6e3}
.sheet .note{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:10px;
  font-family:inherit; font-size:14px; margin-top:10px; background:#fbf9f4}
.sheet-actions{display:flex; gap:8px; margin-top:14px}
.sheet-actions .btn-primary{flex:1; padding:12px}
.btn-plain{flex:1; padding:12px; background:#eef0f3; border:none; border-radius:12px;
  font-size:15px; font-weight:800; color:var(--muted); cursor:pointer}

/* بطاقة طالب */
.stu-head{text-align:center; margin-bottom:12px}
.stu-head .big{font-size:19px; font-weight:800; color:var(--navy)}
.stu-head .sub{color:var(--muted); font-size:13px}
.statrow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0}
.stat{background:#fbf8f1; border:1px solid var(--line); border-radius:11px; padding:8px 4px; text-align:center}
.stat .v{font-weight:800; font-size:17px; color:var(--navy)}
.stat .l{font-size:10.5px; color:var(--muted)}
.countchips{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.cc{border-radius:16px; padding:4px 11px; font-size:12px; font-weight:800; color:#fff}
.wa-btn{display:block; text-align:center; background:#25d366; color:#fff; font-weight:800;
  border-radius:12px; padding:12px; text-decoration:none; font-size:15px; margin-top:10px}
.wa-btn.off{background:#c8cdd3; pointer-events:none}

/* تقارير */
.report-table{width:100%; border-collapse:collapse; font-size:11.5px; background:#fff}
.report-table th{background:var(--navy); color:var(--goldl); padding:6px 3px; font-size:10.5px;
  border:1px solid #2a466b; white-space:nowrap}
.report-table td{border:1px solid var(--line); padding:5px 4px; text-align:center}
.report-table td.nm{text-align:right; font-weight:700; white-space:nowrap}
.report-table tr:nth-child(even) td{background:#fbf8f1}
.report-table .tot td{background:var(--goldl); font-weight:800}
.rep-head{display:none}
.table-scroll{overflow-x:auto; border-radius:10px; border:1px solid var(--line)}

/* إدارة */
.admin-row{display:flex; justify-content:space-between; align-items:center; padding:9px 2px;
  border-bottom:1px solid #f3eee1; font-size:14px}
.admin-row .cls{color:var(--muted); font-size:12px}

.empty-note{text-align:center; color:var(--muted); padding:26px 10px; font-size:14px; line-height:1.8}
.footer-sig{text-align:center; color:var(--muted); font-size:11.5px; padding:16px 0 8px}
.footer-sig a{color:var(--navy); font-weight:700; text-decoration:none}

/* ═══ الدرجات ═══ */
.grade-table{width:100%; border-collapse:collapse; font-size:12.5px; background:#fff}
.grade-table th{background:var(--navy); color:var(--goldl); padding:7px 4px; font-size:11px;
  border:1px solid #2a466b; white-space:nowrap; position:sticky; top:0}
.grade-table td{border:1px solid var(--line); padding:3px; text-align:center}
.grade-table td.nm{text-align:right; font-weight:700; white-space:nowrap; padding:4px 8px; min-width:120px}
.grade-table tr:nth-child(even) td{background:#fbf8f1}
.grade-table input{width:46px; padding:6px 2px; border:1.5px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:13px; text-align:center; background:#fff; color:var(--ink)}
.grade-table input:focus{outline:none; border-color:var(--gold); background:#fdf6e3}
.grade-table .tot{font-weight:800; font-size:14px; color:var(--navy)}
.lvl{border-radius:14px; padding:3px 8px; font-size:11px; font-weight:800; color:#fff; white-space:nowrap}
.lvl0{background:#2e9e5b}.lvl1{background:#58a6d8}.lvl2{background:#e8a23d}.lvl3{background:#b3541e}.lvl4{background:#d64545}

/* ═══ تحليل النتائج ═══ */
.ana-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px}
.ana{background:#fbf8f1; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center}
.ana .v{font-size:24px; font-weight:800; color:var(--navy)}
.ana .l{font-size:12px; color:var(--muted); margin-top:2px}
.bar-row{display:flex; align-items:center; gap:8px; margin:7px 0; font-size:13px}
.bar-row .lb{min-width:74px; font-weight:700}
.bar-track{flex:1; height:20px; background:#eef0f3; border-radius:10px; overflow:hidden}
.bar-fill{height:100%; border-radius:10px; display:flex; align-items:center; justify-content:flex-end;
  padding-inline-end:6px; color:#fff; font-size:11px; font-weight:800; min-width:22px}

/* ═══ بحث ═══ */
.search-box{width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink); margin-bottom:10px}
.search-box:focus{outline:none; border-color:var(--gold)}
.search-res .stu{cursor:pointer}

/* ═══ سجل التواصل ═══ */
.comm-item{border-bottom:1px dashed var(--line); padding:8px 2px; font-size:13px}
.comm-item:last-child{border-bottom:none}
.comm-item .meta{color:var(--muted); font-size:11.5px; margin-top:2px}
.comm-item .tag{background:var(--goldl); color:var(--navy); border-radius:10px; padding:1px 8px; font-size:11px; font-weight:800}

/* ═══ الطالب ═══ */
#view-student{padding-bottom:30px; background:var(--cream); min-height:100vh}
.st-hero{background:linear-gradient(150deg,var(--navy),var(--navy2) 70%,#1d3a5f); color:#fff;
  padding:22px 16px 26px; text-align:center; border-bottom:3px solid var(--gold)}
.st-hero .medal{font-size:46px}
.st-hero .nm{font-size:21px; font-weight:800; color:var(--goldl); margin-top:4px}
.st-hero .cl{font-size:13px; color:#c9d5e3}
.st-hero .out{position:absolute; top:14px; left:14px}
.seg{display:flex; gap:6px; background:#fff; padding:6px; margin:12px; border-radius:14px;
  box-shadow:0 2px 10px rgba(27,42,58,.06); position:sticky; top:6px; z-index:20}
.seg button{flex:1; padding:9px 4px; border:none; background:none; border-radius:10px; font-family:inherit;
  font-size:13.5px; font-weight:800; color:var(--muted); cursor:pointer}
.seg button.on{background:var(--navy); color:var(--goldl)}
.cert{background:#fff; border:3px solid var(--gold); border-radius:16px; margin:12px; padding:24px 18px;
  text-align:center; position:relative; box-shadow:0 6px 24px rgba(27,42,58,.1)}
.cert .seal{font-size:44px}
.cert .t{font-size:22px; font-weight:800; color:var(--navy); margin:6px 0}
.cert .who{font-size:24px; font-weight:800; color:var(--gold); margin:10px 0; border-bottom:2px dotted var(--gold); display:inline-block; padding:0 20px 6px}
.cert .body{font-size:14px; line-height:2; color:var(--ink)}
.cert .stars{font-size:24px; letter-spacing:4px; margin:8px 0}
.cert .foot{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:16px}
.lesson-card{background:#fff; border:1px solid #f0ead9; border-radius:14px; margin:0 12px 10px; padding:14px;
  box-shadow:0 2px 10px rgba(27,42,58,.06)}
.lesson-card .sj{font-weight:800; color:var(--navy); font-size:15px}
.lesson-card .ls{color:var(--muted); font-size:13px; margin:3px 0 8px}

/* ═══ وضع الحصة الحية (العرض على البروجكتر) ═══ */
#view-live{position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; color:#fff;
  background:radial-gradient(1200px 600px at 70% -10%,#1d3a5f 0%,#142A44 45%,#0E2033 100%)}
.live-top{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; border-bottom:2px solid var(--gold); background:rgba(0,0,0,.15)}
.live-title{font-size:22px; font-weight:800; color:var(--goldl)}
.live-title small{color:#c9d5e3; font-weight:400; font-size:13px}
.live-btn{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:10px; padding:8px 14px; font-size:14px; font-weight:800; cursor:pointer; font-family:inherit}
.live-wrap{flex:1; display:flex; gap:12px; padding:12px; overflow:hidden; transition:gap .35s ease}
.live-center{flex:1; display:flex; flex-direction:column; min-width:0}
.live-tools{display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; transition:max-height .32s ease, opacity .25s ease, margin .3s ease; max-height:220px; overflow:hidden}
.live-btn.off{opacity:.5}
/* إخفاء/إظهار لوحة الشرف — تتمدّد الشاشة تلقائياً */
.live-board{transition:width .35s ease, min-width .35s ease, max-width .35s ease, opacity .3s ease, padding .3s ease, margin .3s ease, border-width .3s ease}
#view-live.board-hidden .live-wrap{gap:0}
#view-live.board-hidden .live-board{width:0; min-width:0; max-width:0; padding:0; margin:0; border-width:0; opacity:0; overflow:hidden}
/* إخفاء/إظهار شريط الأدوات */
#view-live.tools-hidden .live-tools{max-height:0; opacity:0; margin-bottom:0; border:0}
.live-tools button{background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.28);
  border-radius:10px; padding:8px 14px; font-weight:800; font-size:14px; cursor:pointer; font-family:inherit}
.live-tools button.on{background:var(--gold); color:#0E2033; border-color:var(--gold)}
.live-main{flex:1; overflow:auto; min-height:0; display:flex; flex-direction:column}
.live-stage{flex:1; background:#0a1420; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-height:0}
.live-stage iframe{flex:1; width:100%; border:0; background:#fff}
.stage-bar{background:rgba(255,255,255,.08); padding:8px 10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.stage-bar input{flex:1; min-width:140px; padding:9px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12); color:#fff; font-family:inherit; font-size:14px}
.stage-ws{background:#fff; color:#1B2A3A; padding:22px 26px; overflow:auto; flex:1; line-height:1.9}
.btip{text-align:center; color:#9fb0c4; font-size:11.5px; margin-bottom:8px}
/* 🎬 قصة الدرس (عرض مرئي) */
.story{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:24px; text-align:center; background:radial-gradient(900px 500px at 50% 0%,#1d3a5f,#0a1420)}
.story-visual{font-size:min(30vw,190px); line-height:1; filter:drop-shadow(0 8px 20px rgba(0,0,0,.4)); display:flex; align-items:center; justify-content:center}
.story-img{max-height:min(48vh,360px); max-width:92%; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.5); object-fit:contain; background:#fff}
.story-visual{animation:stpop .55s ease}
@keyframes stpop{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.story-text{font-size:min(5.2vw,36px); font-weight:800; color:#eaf1f8; margin-top:26px; max-width:860px; line-height:1.85; animation:stfade .5s ease}
@keyframes stfade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.story-player{position:absolute; bottom:16px; left:16px; right:16px; display:flex; flex-direction:column; gap:10px; align-items:center}
.story-seek{width:min(680px,92%); height:12px; background:rgba(255,255,255,.18); border-radius:8px; cursor:pointer; overflow:hidden}
.story-seek-fill{height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--goldl)); border-radius:8px; transition:width .2s linear}
.story-ctrl{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center}
.story-time{color:#c9d5e3; font-size:13px; font-variant-numeric:tabular-nums; min-width:92px; text-align:center; direction:ltr; unicode-bidi:isolate}

/* درس تفاعلي غنيّ */
.rl-scroll{flex:1; overflow-y:auto; background:#0a1420; border-radius:0 0 14px 14px}
.rl-wrap{max-width:860px; margin:0 auto; padding:22px 20px 40px; color:#eaf1f8}
.rl-title{font-size:min(6vw,38px); font-weight:800; color:var(--goldl); text-align:center; margin-bottom:16px}
.rl-obj{background:rgba(215,169,63,.12); border:1px solid var(--gold); border-radius:14px; padding:14px 18px; margin-bottom:16px}
.rl-obj-h{font-weight:800; color:var(--gold); margin-bottom:6px; font-size:16px}
.rl-obj ul{margin:0; padding-inline-start:22px; line-height:2}
.rl-intro{font-size:min(3.2vw,19px); line-height:2; background:rgba(255,255,255,.05); border-radius:12px; padding:14px 18px; margin-bottom:18px}
.rl-sec{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px 18px; margin-bottom:14px}
.rl-h{display:flex; align-items:center; gap:10px; font-size:min(3.6vw,22px); font-weight:800; color:var(--goldl); margin-bottom:10px}
.rl-n{background:var(--gold); color:#0E2033; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0}
.rl-body{font-size:min(3.2vw,18px); line-height:2.1}
.rl-points{margin:8px 0 0; padding-inline-start:22px; line-height:2.1; font-size:min(3.2vw,18px)}
.rl-points li{margin-bottom:4px}
.rl-tip{margin-top:10px; background:rgba(88,166,216,.15); border-inline-start:4px solid var(--st4); border-radius:8px; padding:8px 12px; font-size:15px}
.rl-vocab{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.rl-term{background:rgba(255,255,255,.06); border-radius:10px; padding:10px 12px}
.rl-term b{color:var(--goldl); display:block; margin-bottom:3px; font-size:16px}
.rl-term span{font-size:14.5px; color:#c9d5e3}
.rl-q{font-size:min(3.4vw,20px); font-weight:800; margin-bottom:12px; text-align:center}
.rl-act{border-color:var(--gold)}
.rl-summary{background:linear-gradient(135deg,var(--navy2),#1d3a5f); border:1px solid var(--gold); border-radius:14px; padding:16px 18px; font-size:min(3.2vw,18px); line-height:2; font-weight:700}
.qz-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:700px; margin:0 auto}
.qz-opt-card{padding:22px 14px; border-radius:16px; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#fff; font-size:min(3.4vw,22px); font-weight:800; cursor:pointer; transition:transform .1s, background .2s}
.qz-opt-card:hover{border-color:var(--gold)} .qz-opt-card:active{transform:scale(.97)}
.qz-opt-card.ok{background:linear-gradient(135deg,#2e9e5b,#227a45); border-color:#2e9e5b; animation:brpulse .6s}
.qz-opt-card.no{background:linear-gradient(135deg,#d64545,#a83232); border-color:#d64545; opacity:.85}
@media (max-width:520px){ .qz-grid{grid-template-columns:1fr} }
.live-roster{flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px; align-content:start; padding-bottom:20px}
.rcard{background:rgba(255,255,255,.09); border:1.5px solid rgba(255,255,255,.16); border-radius:14px;
  padding:12px 8px; text-align:center; cursor:pointer; transition:transform .1s, box-shadow .2s; position:relative}
.rcard:hover{box-shadow:0 0 0 2px var(--gold)}
.rcard:active{transform:scale(.94)}
.rcard .rn{font-size:14.5px; font-weight:700; line-height:1.3}
.rcard .rp{font-size:22px; font-weight:800; color:var(--goldl); margin-top:5px}
.rcard .rp.neg{color:#ff8a8a}
.rcard .rrk{position:absolute; top:6px; inset-inline-start:8px; font-size:12px; color:#9fb0c4; font-weight:800}
.live-board{width:34%; min-width:270px; max-width:420px; background:rgba(255,255,255,.06);
  border:2px solid var(--gold); border-radius:16px; padding:12px 10px; overflow-y:auto; display:flex; flex-direction:column}
.bhead{font-size:21px; font-weight:800; color:var(--goldl); text-align:center; margin-bottom:12px}
.brow{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; margin-bottom:7px;
  background:rgba(255,255,255,.06); transition:background .3s}
.brow .rk{font-size:19px; width:30px; text-align:center; flex-shrink:0}
.brow .bn{flex:1; font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brow .bp{font-weight:800; font-size:19px; color:var(--goldl); flex-shrink:0}
.brow.t1{background:linear-gradient(135deg,#D7A93F,#c2942e); color:#0E2033}
.brow.t1 .bp{color:#0E2033}
.brow.t2{background:linear-gradient(135deg,#c7cfda,#9aa7b8); color:#0E2033}
.brow.t2 .bp{color:#0E2033}
.brow.t3{background:linear-gradient(135deg,#d8a06a,#b3541e); color:#fff}
.brow.t3 .bp{color:#fff}
.brow{cursor:pointer}
.brow:hover{outline:2px solid var(--gold)}
.brow.pulse{animation:brpulse .7s}
@keyframes brpulse{0%{transform:scale(1.06); box-shadow:0 0 22px var(--gold)}100%{transform:none; box-shadow:none}}
.floatpt{position:fixed; font-size:34px; font-weight:800; pointer-events:none; z-index:92;
  text-shadow:0 2px 8px rgba(0,0,0,.5); animation:floatup 1.1s ease-out forwards}
.floatpt.pos{color:#3ad07a} .floatpt.neg{color:#ff6b6b}
@keyframes floatup{0%{opacity:0; transform:translateY(6px) scale(.6)}20%{opacity:1}100%{opacity:0; transform:translateY(-80px) scale(1.6)}}
.conf{position:fixed; top:8%; font-size:26px; pointer-events:none; z-index:95; animation:conf 1.6s ease-out forwards}
@keyframes conf{0%{opacity:1; transform:translateY(0) rotate(0)}100%{opacity:0; transform:translateY(320px) rotate(420deg)}}
.live-act{position:fixed; inset:0; background:rgba(8,16,26,.72); z-index:88; display:flex; align-items:center; justify-content:center; padding:16px}
.live-act .box{background:#142A44; border:2px solid var(--gold); border-radius:20px; padding:20px; width:100%; max-width:480px; animation:up .18s ease}
.live-act h4{color:var(--goldl); text-align:center; font-size:21px; margin:0 0 4px}
.live-act .cur{text-align:center; color:#c9d5e3; font-size:14px; margin-bottom:14px}
.live-act .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.act{padding:16px 8px; border:none; border-radius:14px; font-size:16px; font-weight:800; cursor:pointer; color:#fff; font-family:inherit; transition:transform .1s}
.act:active{transform:scale(.95)}
.act.g{background:linear-gradient(135deg,#2e9e5b,#227a45)} .act.r{background:linear-gradient(135deg,#d64545,#a83232)}
.act.b{background:linear-gradient(135deg,#3f7fd7,#2a5aa0)} .act.close{background:#33415a; grid-column:1/3}
@media (max-width:720px){
  .live-wrap{flex-direction:column} .live-board{width:auto; max-width:none; max-height:40vh}
  .live-roster{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}
/* شريط الحصة الحية على الشاشات الضيقة: العنوان في سطر كامل والأزرار شبكة تحته (الشاشات العريضة/البروجكتر بلا تغيير) */
@media (max-width:720px){
  .live-top{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 12px}
  .live-top .live-title{grid-column:1/-1; order:-1; min-width:0; font-size:18px; line-height:1.4}
  /* حاوية الأزرار الثلاثة تحمل display:flex كنمط مضمّن في app.js، لذا !important ضروري لتفكيكها إلى خلايا الشبكة */
  .live-top>div:not(.live-title){display:contents !important}
  .live-top .live-btn{padding:8px 6px; font-size:13px; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
}
@media (max-width:600px){
  .live-top{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:760px){
  .tabs{position:sticky; top:0; bottom:auto; border-top:none; border-bottom:1px solid var(--line)}
  #view-app{padding-bottom:20px}
}
@media print{
  .appbar,.tabs,.reg-tools,.class-chips,.no-print,.demo-strip,.seg,.st-hero .out{display:none!important}
  #view-app,#view-student{padding:0}
  .wrap{max-width:none; padding:0}
  .card,.cert{box-shadow:none}
  .rep-head{display:block; text-align:center; margin-bottom:8px}
  .rep-head .rt{font-size:18px; font-weight:800; color:var(--navy)}
  .rep-head .rs{font-size:12px; color:#444}
  body{background:#fff}
}

/* صور الأسئلة وغلاف الدرس */
.q-img{max-height:min(34vh,260px); max-width:88%; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.45); margin:0 auto 14px; display:block; object-fit:cover; background:#fff}
.rl-hero{width:100%; max-height:260px; object-fit:cover; border-radius:16px; margin-bottom:16px; box-shadow:0 10px 30px rgba(0,0,0,.45); display:block}
/* 🎮 ألعاب الدرس */
.gm-menu{flex:1; display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; padding:24px; background-size:cover; background-position:center; overflow:auto}
.gm-card{width:min(290px,90%); min-height:200px; border-radius:20px; border:2px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:22px 16px; cursor:pointer; font-family:inherit; transition:.2s; text-align:center}
.gm-card:hover:not([disabled]){transform:translateY(-4px); border-color:var(--gold); background:rgba(215,169,63,.15)}
.gm-card[disabled]{opacity:.4; cursor:not-allowed}
.gm-card b{font-size:22px; color:var(--goldl)} .gm-card small{color:#c9d5e3; line-height:1.7; font-size:13px} .gm-ic{font-size:54px; line-height:1}
.gm-body{flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column}
.gm-center{align-items:center; justify-content:center; text-align:center; color:#fff}
.gm-hud{color:var(--goldl); font-weight:800; font-variant-numeric:tabular-nums}
.gm-cols{display:grid; grid-template-columns:1fr 1fr; gap:14px; flex:1}
.gm-col{display:flex; flex-direction:column; gap:10px}
.gm-tile{padding:14px 12px; border-radius:14px; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:min(2.6vw,18px); font-weight:800; cursor:pointer; font-family:inherit; text-align:start; transition:.15s; line-height:1.6}
.gm-def{font-weight:500; font-size:min(2.4vw,16px)}
.gm-tile.sel{border-color:var(--gold); background:rgba(215,169,63,.25)}
.gm-tile.done{background:linear-gradient(135deg,#2e9e5b,#227a45); border-color:#2e9e5b; opacity:.85; cursor:default}
.gm-tile.bad{background:#a83232; border-color:#d64545; animation:gmshake .4s}
@keyframes gmshake{25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}
.gm-timer{width:min(700px,92%); height:14px; background:rgba(255,255,255,.15); border-radius:8px; overflow:hidden; margin-bottom:18px}
.gm-timer div{height:100%; background:linear-gradient(90deg,#d64545,var(--gold),#2e9e5b); transition:width .1s linear}
.gm-q{color:#9fb0c4; margin-bottom:10px}
.gm-stmt{font-size:min(5vw,34px); font-weight:800; line-height:1.8; max-width:860px; margin-bottom:22px}
.gm-tf{display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.gm-big{font-size:min(6vw,40px); font-weight:800; padding:22px 48px; border-radius:20px; border:0; color:#fff; cursor:pointer; font-family:inherit; min-width:200px}
.gm-big.ok{background:linear-gradient(135deg,#2e9e5b,#227a45)} .gm-big.no{background:linear-gradient(135deg,#d64545,#a83232)}
.gm-big[disabled]{opacity:.5}
.gm-fb{margin-top:14px; font-size:22px} .gm-fb.ok{color:#3ad07a} .gm-fb.no{color:#ff7b7b}
.gm-ladder{flex-direction:row; gap:16px}
.gm-steps{display:flex; flex-direction:column; gap:6px; min-width:150px}
.gm-step{padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.06); color:#9fb0c4; font-variant-numeric:tabular-nums; direction:ltr; text-align:right}
.gm-step.won{color:#3ad07a} .gm-step.cur{background:var(--gold); color:#0E2033; font-weight:800}
@media (max-width:700px){ .gm-ladder{flex-direction:column} .gm-steps{flex-direction:row; flex-wrap:wrap} .gm-cols{grid-template-columns:1fr} }

/* 🎮 ألعاب التخمين والصور والفرق */
.gm-pickrow{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:12px; min-height:34px}
.gm-who{color:var(--goldl); font-weight:800; font-size:22px; min-width:120px; text-align:center}
.gm-who.pop{animation:brpulse .5s}
.gm-sub{color:#c9d5e3; font-size:20px; margin-top:-8px; margin-bottom:8px}
.gs-wrap{position:relative; width:min(640px,92%); aspect-ratio:3/2; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.5); margin-bottom:12px; background:#fff}
.gs-img{width:100%; height:100%; object-fit:cover; display:block}
.gs-grid{position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr)}
.gs-tile{background:linear-gradient(135deg,#1d3a5f,#0E2033); border:1px solid rgba(255,255,255,.12); transition:opacity .45s, transform .45s}
.gs-tile.off{opacity:0; transform:scale(.6) rotate(12deg); pointer-events:none}
.mm-grid{display:grid; grid-template-columns:repeat(var(--n,4),1fr); gap:12px; max-width:820px; margin:0 auto; width:100%}
.mm-card{aspect-ratio:4/3; border:0; background:none; padding:0; cursor:pointer; perspective:800px; font-family:inherit}
.mm-in{position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d}
.mm-card.flip .mm-in, .mm-card.done .mm-in{transform:rotateY(180deg)}
.mm-face{position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid rgba(255,255,255,.2)}
.mm-back{background:linear-gradient(135deg,#1d3a5f,#0E2033); color:var(--goldl); font-size:44px; font-weight:800}
.mm-front{background:#fff; color:#0E2033; transform:rotateY(180deg); font-size:min(2.6vw,18px); font-weight:800; padding:8px; text-align:center}
.mm-front img{width:100%; height:100%; object-fit:cover}
.mm-front small{font-weight:600; font-size:min(2vw,14px); line-height:1.5}
.mm-card.done .mm-face{border-color:#2e9e5b; box-shadow:0 0 0 3px #2e9e5b inset}
.rd-word{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:14px 0 8px}
.rd-box{width:min(9vw,54px); height:min(11vw,64px); border-radius:10px; border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:min(6vw,34px); font-weight:800; color:#fff; transition:.3s}
.rd-box.on{background:var(--gold); color:#0E2033; border-color:var(--gold); animation:brpulse .4s}
.rd-sp{width:18px}
.od-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:900px; margin:0 auto}
.od-card{position:relative; border-radius:14px; border:2px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; padding:0; overflow:hidden; cursor:pointer; font-family:inherit; text-align:center; display:flex; flex-direction:column}
.od-card img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.od-emo{font-size:56px; padding:10px; line-height:1}
.od-t{font-size:min(2.2vw,14px); line-height:1.6; padding:8px 10px; color:#eaf1f8}
.od-n{position:absolute; top:6px; inset-inline-start:6px; width:34px; height:34px; border-radius:50%; background:var(--gold); color:#0E2033; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; opacity:0; transition:.2s}
.od-card.sel{border-color:var(--gold)} .od-card.sel .od-n{opacity:1}
.od-card.ok{border-color:#2e9e5b; box-shadow:0 0 0 3px #2e9e5b inset} .od-card.no{border-color:#d64545; box-shadow:0 0 0 3px #d64545 inset}
.tm-board{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; width:100%; max-width:760px; margin:0 auto 10px}
.tm-team{border-radius:16px; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; border:3px solid transparent; opacity:.65; transition:.3s}
.tm-team b{font-size:min(3vw,18px)} .tm-team span{font-size:min(6vw,34px); font-weight:800; font-variant-numeric:tabular-nums}
.tm-team.g{background:linear-gradient(135deg,#2e9e5b,#1e6b3f); color:#fff} .tm-team.y{background:linear-gradient(135deg,var(--gold),#a67c1f); color:#0E2033}
.tm-team.on{opacity:1; border-color:#fff; transform:scale(1.04); box-shadow:0 8px 24px rgba(0,0,0,.4)}
.tm-vs{color:#c9d5e3; font-weight:800}
@media (max-width:700px){ .od-grid{grid-template-columns:repeat(2,1fr)} .mm-grid{grid-template-columns:repeat(3,1fr)} }

/* 🎡 من يجيب؟ + تقدّم الطالب */
.gm-pickwrap{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap}
.gm-prog{color:#9fb0c4; font-size:13px; background:rgba(255,255,255,.08); border-radius:10px; padding:4px 10px}
.gm-award{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; width:100%}
.gm-aw{border:0; border-radius:12px; padding:8px 14px; font-family:inherit; font-weight:800; font-size:14px; color:#fff; cursor:pointer}
.gm-aw.g{background:#2e9e5b} .gm-aw.r{background:#a83232} .gm-aw.y{background:var(--gold); color:#0E2033} .gm-aw[disabled]{opacity:.6; cursor:default}
.gm-choose{max-height:50vh; overflow:auto}
.pg-bars{display:flex; gap:4px; align-items:flex-end; height:110px; padding:6px 4px 20px; background:#fbf8f1; border:1px solid var(--line); border-radius:11px; position:relative}
.pg-bar{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative}
.pg-bar > div{border-radius:4px 4px 0 0; min-height:3px}
.pg-bar small{position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:9px; color:var(--muted); direction:ltr}

/* 📤 إرسال الأوراق التفاعلية */
.as-modes{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.as-mode{background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:10px 4px;
  font-family:inherit; font-size:12.5px; color:var(--ink); cursor:pointer; text-align:center; line-height:1.5}
.as-mode span{display:block; font-size:20px; margin-bottom:2px}
.as-mode.on{border-color:var(--gold); background:#FDF8EC; font-weight:800}
.as-link{display:flex; gap:8px; align-items:center; background:#FDF8EC; border:1.5px dashed var(--gold);
  border-radius:12px; padding:9px 12px; margin-top:10px}
.as-link code{flex:1; font-size:12.5px; font-weight:600; color:var(--navy); direction:ltr; unicode-bidi:isolate; word-break:break-all}
.ar-bar{display:inline-block; width:100%; min-width:60px; height:9px; background:#e8e2d5; border-radius:99px; overflow:hidden; vertical-align:middle}
.ar-bar i{display:block; height:100%; border-radius:99px}
.as-chk{display:block; background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:10px 12px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer}
.as-chk input{width:17px; height:17px; vertical-align:-3px; margin-left:6px; accent-color:var(--gold)}
.as-chk small{display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:3px; line-height:1.6}

/* درجات تلقائية من الرصد */
.gr-in.auto{background:#F1EEE6; color:#6b7280; font-style:italic}
.gr-in.auto::placeholder{color:#4b5563; opacity:1}

/* التقييم اللحظي: مكتبة التقييمات كاملة */
.live-act .box{max-height:92vh; overflow:auto}
.live-act .lsec{color:var(--goldl); font-weight:800; font-size:13.5px; margin:12px 2px 6px}
.live-act .grid.g3{grid-template-columns:repeat(3,1fr); gap:8px}
.live-act .grid.g3 .act{font-size:13.5px; padding:10px 6px}
.live-act .act.n{background:#2b3f5c; color:#e6edf5}
.live-act .act.on{outline:3px solid var(--gold); outline-offset:-3px}
@media(max-width:520px){ .live-act .grid.g3{grid-template-columns:repeat(2,1fr)} }