/* ═══════════════════════════════════════════════════════════════
   diraya.css — مكوّنات بوابة الدراية الجديدة (حلقات التسميع، الإنجاز، اللائحة)
   يُكمِّل style.css ولا يستبدله. الجوال هو الأصل ثم يتوسّع للشاشات الكبيرة.
   ═══════════════════════════════════════════════════════════════ */

/* ───── شريط الدور (4 أدوار) ───── */
.roles.r4 button{padding:9px 2px;font-size:12.5px}
.code-in{letter-spacing:2px;text-align:center;font-family:var(--f-kufi);font-weight:700;text-transform:uppercase}

/* ───── بطاقة حلقة التسميع (الطالب) ───── */
.hq{background:linear-gradient(135deg,#121238 0%,#1B1A4E 100%);border:1px solid rgba(206,160,105,.35);border-radius:var(--r-m);padding:22px 20px 20px;color:#fff;box-shadow:var(--shadow-2);position:relative;overflow:hidden;isolation:isolate;margin-bottom:0}
.card + .hq,.hq + .card,.hq + .hq{margin-top:18px}
.hq::before{content:"";position:absolute;inset:0;background:var(--pattern);opacity:.35;pointer-events:none}
.hq>*{position:relative;z-index:1}
.hq::before,.hq::after{z-index:0}
.hq-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hq-head h3{font-size:16px;color:var(--gold-300);margin:0}
.hq-head .who{font-size:12.5px;color:#C9C6E4}
.hq-when{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.hq-when b{display:block;font-family:var(--f-kufi);font-size:17px;line-height:1.7}
.hq-when span{display:block;font-size:12.5px;color:#C9C6E4}
.hq-time{font-family:var(--f-kufi);font-weight:800;font-size:26px;color:var(--gold-300);font-variant-numeric:tabular-nums;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(206,160,105,.3);border-radius:14px;padding:8px 16px;min-width:120px}
.hq-time small{display:block;font-size:11px;color:#C9C6E4;font-weight:400}
.hq .nl-count{margin:14px 0 4px}
.hq-range{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.hq-range .rg{background:rgba(255,255,255,.07);border:1px solid rgba(206,160,105,.25);border-radius:12px;padding:8px 14px;font-size:13px}
.hq-range .rg b{font-family:var(--f-kufi);font-size:15px;color:var(--gold-300);margin-inline-start:6px}
.hq-range .rg.pend{border-color:rgba(228,49,43,.55);background:rgba(228,49,43,.12)}
.hq-range .rg.pend b{color:#FFB4AE}
.hq-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hq-actions .btn{flex:1 1 200px}
.hq-state{font-size:13px;color:#C9C6E4;margin-top:10px}
.hq-state b{color:var(--gold-300)}
.hq-empty{text-align:center;padding:10px 0 4px;color:#C9C6E4;font-size:14px}
.btn-tg{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.28);display:inline-flex;align-items:center;gap:9px}
.btn-tg:hover{background:rgba(42,171,238,.16);border-color:rgba(42,171,238,.6)}
.btn-ok{background:var(--ok);color:#fff}
.btn-warn{background:linear-gradient(135deg,#E9C079,#CEA069);color:var(--navy-900)}

/* ───── قائمة تحقّق الإنجاز اليومي ───── */
.dl{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--cream-50);overflow:hidden}
.dl-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--cream-100)}
.dl-h b{font-family:var(--f-kufi);font-size:14px}
.dl-h .grow{flex:1}
.dl-prog{font-size:12.5px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.dl-bar{height:5px;background:var(--cream-200)}
.dl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-500),var(--gold-400));transition:width .35s ease}
.dl-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--cream-200);cursor:pointer;font-size:14px;line-height:1.6;user-select:none;-webkit-user-select:none}
.dl-item:last-of-type{border-bottom:0}
.dl-item input{position:absolute;opacity:0;width:0;height:0;margin:0}
.dl-item i{flex:0 0 24px;width:24px;height:24px;border-radius:8px;border:2px solid var(--gold-500);display:grid;place-items:center;color:transparent;transition:background .15s,color .15s;background:#fff}
.dl-item input:checked+i{background:var(--navy-900);border-color:var(--navy-900);color:var(--gold-300)}
.dl-item input:checked~span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--gold-400)}
.dl-item input:focus-visible+i{outline:3px solid var(--gold-400);outline-offset:2px}
.dl-item.locked{cursor:default;opacity:.85}
.dl-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;background:#fff;border-top:1px solid var(--line)}
.dl-foot .hint{flex-basis:100%;margin:0;font-size:12px}
.dl-state{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-s);margin-top:16px;font-size:14px;line-height:1.7}
.dl-state.done{background:var(--ok-bg);color:var(--ok)}
.dl-state.pend{background:#EEF1F8;color:var(--navy-800)}
.dl-state.exc{background:var(--warn-bg);color:var(--warn)}
.dl-state.pause{background:#EEF1F8;color:var(--navy-800)}
.dl-state.hol{background:var(--cream-100);color:var(--muted)}
.dl-state b{font-family:var(--f-kufi)}
.dl-state .grow{flex:1}
.dl-state button{font-size:12.5px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;padding:6px}
.dl-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);flex-shrink:0}

/* ───── العدّاد الكبير (إنجازي) ───── */
.ctr{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:6px}
.ctr-col{display:flex;flex-direction:column;gap:8px}
.ctr-b{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--gold-500);background:#fff;color:var(--gold-ink);font-family:var(--f-kufi);font-weight:800;font-size:15px;display:grid;place-items:center;transition:background .15s,transform .1s}
.ctr-b:active{transform:scale(.95);background:var(--cream-100)}
.ctr-num{text-align:center;padding:10px 6px}
.ctr-num input{font-family:var(--f-kufi);font-weight:800;font-size:clamp(46px,14vw,64px);line-height:1.1;text-align:center;border:0;background:transparent;color:var(--navy-900);padding:0;width:100%;font-variant-numeric:tabular-nums;letter-spacing:1px}
.ctr-num input:focus{outline:none;border-bottom:3px solid var(--gold-400);box-shadow:none}
.ctr-num small{display:block;color:var(--muted);font-size:13px;font-weight:700;margin-top:2px}
.ctr.behind .ctr-num input{color:var(--bad)}
.ctr.ahead .ctr-num input{color:var(--ok)}
.ruler{margin-top:14px;position:relative;padding-bottom:22px}
.ruler input[type=range]{width:100%;accent-color:var(--gold-500);height:28px;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.ruler-ticks{position:relative;height:16px;font-size:10px;color:var(--muted-2);margin-top:2px}
.ruler-ticks span{position:absolute;top:0;transform:translateX(50%);white-space:nowrap}
.ruler-ticks span::before{content:"";position:absolute;top:-8px;right:50%;width:1px;height:6px;background:var(--line)}
.ruler-mark{position:absolute;top:-6px;transform:translateX(50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--gold-600)}
.ruler-mark.me{border-top-color:var(--navy-900)}
.ruler-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin-top:6px}
.ruler-leg i{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--gold-600);margin-inline-end:6px;vertical-align:1px}
.ruler-leg i.me{border-top-color:var(--navy-900)}
.pos-line{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:var(--r-s);font-size:13.5px;line-height:1.7}
.pos-line.behind{background:var(--bad-bg);color:var(--bad)}
.pos-line.ontrack{background:var(--warn-bg);color:var(--warn)}
.pos-line.ahead{background:var(--ok-bg);color:var(--ok)}
.pos-line.none{background:var(--cream-100);color:var(--muted)}
.pos-line b{font-family:var(--f-kufi)}
.pos-line .dot{width:10px;height:10px;flex-shrink:0}
.ctr-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.ctr-foot .hint{margin:0;flex:1;font-size:12.5px}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat3 .s{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 10px;text-align:center}
.stat3 .s b{display:block;font-family:var(--f-kufi);font-size:20px;color:var(--navy-900);line-height:1.3}
.stat3 .s span{font-size:11.5px;color:var(--muted);font-weight:700}
.units{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.unit{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--line);background:#fff}
.unit.pend{border-color:#E5C2BE;background:var(--bad-bg);color:var(--bad)}
.unit.ok{border-color:#BFDFD0;background:var(--ok-bg);color:var(--ok)}
.unit.gold{border-color:var(--gold-400);background:var(--warn-bg);color:var(--gold-ink)}

/* ───── شريط الالتزام ───── */
.cmp{display:grid;gap:12px}
.cmp-row{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.cmp-row .k{font-weight:700}
.cmp-row .n{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:#fff}
.dots i.on{background:var(--navy-900);border-color:var(--navy-900)}
.dots i.hot{background:var(--bad);border-color:var(--bad)}
.dots.dia i{border-radius:3px;transform:rotate(45deg);width:13px;height:13px}
.dots.dia i.on{background:var(--bad);border-color:var(--bad)}
.cmp-w{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:13.5px;padding-top:12px;border-top:1px dashed var(--line)}
.cmp-w .k{font-weight:800;font-family:var(--f-kufi)}
.risk{background:var(--bad-bg);color:var(--bad);border-radius:var(--r-s);padding:12px 14px;font-size:13.5px;margin-top:12px;line-height:1.7}
.risk b{font-family:var(--f-kufi)}
.nlist{margin-top:14px;border-top:1px solid var(--line)}
.nlist summary{cursor:pointer;padding:12px 0;font-weight:800;font-family:var(--f-kufi);font-size:13.5px;color:var(--navy-800);list-style:none;display:flex;align-items:center;gap:8px}
.nlist summary::-webkit-details-marker{display:none}
.nlist summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--gold-600);border-bottom:2px solid var(--gold-600);transform:rotate(45deg);margin-inline-start:auto;transition:transform .2s}
.nlist[open] summary::after{transform:rotate(-135deg)}
.nrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--cream-200);font-size:13px}
.nrow .d{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.nrow .w{font-weight:800;font-family:var(--f-kufi);font-size:12px;padding:2px 9px;border-radius:999px}
.nrow .w.w2{background:var(--bad-bg);color:var(--bad)}
.nrow .w.w1{background:var(--warn-bg);color:var(--warn)}
.nrow .w.v{background:var(--cream-100);color:var(--muted);text-decoration:line-through}

/* ───── إيقاف الخطة ───── */
.pq{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pq b{font-family:var(--f-kufi);font-size:24px;color:var(--navy-900);line-height:1.2}
.pq small{font-size:12.5px;color:var(--muted);display:block;font-weight:700}
.pq .prog{flex:1;min-width:120px}
.days{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.day{border:1.5px solid var(--line);border-radius:12px;padding:7px 6px;min-width:62px;text-align:center;font-size:12px;line-height:1.5;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.day b{display:block;font-family:var(--f-kufi);font-size:15px}
.day small{display:block;color:var(--muted);font-size:10.5px}
.day.on{border-color:var(--navy-900);background:var(--navy-900);color:#F4EDE0}
.day.on small{color:var(--gold-300)}
.day.dis{opacity:.45;cursor:not-allowed;background:var(--cream-100)}
.day.req{border-style:dashed;border-color:var(--gold-500);cursor:default}
.plist{margin-top:14px;display:grid;gap:8px}
.prow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);font-size:13.5px;background:var(--cream-50)}
.prow .grow{flex:1}
.prow .x{color:var(--bad);font-weight:800;font-size:12.5px;padding:4px 8px}

/* ───── شريط الأيام (14 يومًا) ───── */
.strip{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;margin-top:8px}
.strip .c{aspect-ratio:1/1.35;border-radius:7px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.3}
.strip .c b{font-size:11px;color:var(--ink)}
.strip .c.done{background:var(--ok-bg);border-color:#BFDFD0}
.strip .c.done b{color:var(--ok)}
.strip .c.missed{background:var(--bad-bg);border-color:#E5C2BE}
.strip .c.missed b{color:var(--bad)}
.strip .c.partial{background:#FDF1EF;border-color:#E5C2BE}
.strip .c.excused{background:#EEF1F8;border-color:#CDD3E8}
.strip .c.excuse_pending{background:var(--warn-bg);border-color:var(--gold-400)}
.strip .c.paused{background:repeating-linear-gradient(135deg,#EEF1F8 0 4px,#fff 4px 8px);border-color:#CDD3E8}
.strip .c.holiday{background:var(--cream-100)}
.strip .c.today{outline:2px solid var(--gold-500);outline-offset:1px}
.strip .c.future{opacity:.55}
.leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--muted);margin-top:8px}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid var(--line);vertical-align:-1px;margin-inline-end:5px}

/* ───── واجهة الطاقم: بطاقة الجلسة ───── */
.picker{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.picker select{flex:1;min-width:200px;font-size:14px;padding:10px 12px}
.sess{background:linear-gradient(135deg,#121238 0%,#1B1A4E 100%);border:1px solid rgba(206,160,105,.35);border-radius:var(--r-m);padding:20px;color:#fff;box-shadow:var(--shadow-2);position:relative;overflow:hidden;isolation:isolate}
.sess::before{content:"";position:absolute;inset:0;background:var(--pattern);opacity:.3;pointer-events:none}
.sess>*{position:relative;z-index:1}
.sess::before,.sess::after{z-index:0}
.sess-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.sess-top h3{font-size:17px;margin:0;color:#fff;line-height:1.7}
.sess-top .sub{font-size:12.5px;color:#C9C6E4;margin-top:2px}
.sess-top .grow{flex:1}
.sess-ph{font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--gold-300);white-space:nowrap}
.sess-ph.open{background:rgba(47,125,92,.35);color:#B6E8CF}
.sess-ph.late{background:rgba(206,160,105,.3);color:var(--gold-200)}
.sess-ph.closed{background:rgba(255,255,255,.08);color:#C9C6E4}
.sess-ph.cancelled{background:rgba(176,67,60,.35);color:#FFB4AE}
.sess-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}
.sess-stats .s{background:rgba(255,255,255,.07);border:1px solid rgba(206,160,105,.22);border-radius:12px;padding:8px 4px;text-align:center}
.sess-stats .s b{display:block;font-family:var(--f-kufi);font-size:20px;color:var(--gold-300);line-height:1.2}
.sess-stats .s span{font-size:10.5px;color:#C9C6E4;font-weight:700}
.sess-range{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.sess-range label{display:block;font-size:11.5px;color:#C9C6E4;margin-bottom:5px;font-weight:700}
.sess-range select{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(206,160,105,.35);font-size:14px;padding:9px 10px;min-height:44px}
.sess-range select option{color:var(--ink);background:#fff}
.sess-range .n{grid-column:1/-1;font-size:12.5px;color:#C9C6E4}
.sess-range .n b{color:var(--gold-300)}
.sess-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sess-act .btn{flex:1 1 140px;padding:11px 14px;font-size:13.5px}
.sess-cnt{font-family:var(--f-kufi);font-weight:800;font-size:15px;color:var(--gold-300);font-variant-numeric:tabular-nums}
.warn-note{margin-top:12px;font-size:12.5px;color:#FFD9A8;background:rgba(206,160,105,.12);border:1px dashed rgba(206,160,105,.4);border-radius:10px;padding:8px 12px}

/* ───── واجهة الطاقم: صفوف الطلاب ───── */
.sr-wrap{margin-top:16px;display:grid;gap:10px}
.sr{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;box-shadow:var(--shadow-1)}
.sr.absent{background:#FBF5F4}
.sr.excused,.sr.paused{opacity:.9}
.sr-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sr-name{font-family:var(--f-kufi);font-weight:800;font-size:15px;line-height:1.6}
.sr-name small{display:block;font-size:11.5px;color:var(--muted);font-weight:700;font-family:var(--f-body)}
.sr-top .grow{flex:1}
.sr-src{font-size:10.5px;color:var(--muted-2);font-weight:700}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--cream-50)}
.seg button{width:44px;height:40px;font-family:var(--f-kufi);font-weight:800;font-size:14px;color:var(--muted);border-inline-start:1px solid var(--line);transition:background .12s,color .12s}
.seg button:first-child{border-inline-start:0}
.seg button.on-present{background:var(--ok);color:#fff}
.seg button.on-late{background:var(--gold-500);color:var(--navy-900)}
.seg button.on-absent{background:var(--bad);color:#fff}
.seg button.on-excused{background:var(--navy-800);color:#F4EDE0}
.seg button.on-paused{background:var(--muted);color:#fff}
.sr-units{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
.sr-units .lbl{font-size:11.5px;color:var(--muted);font-weight:800;font-family:var(--f-kufi);margin-inline-end:2px}
.uc{border:1.5px solid var(--line);border-radius:12px;padding:6px 11px;background:#fff;text-align:center;font-variant-numeric:tabular-nums;min-width:82px;transition:background .12s,border-color .12s,transform .08s;line-height:1.35}
.uc:active{transform:scale(.97)}
.uc b{display:block;font-family:var(--f-kufi);font-weight:800;font-size:13px;color:var(--ink)}
.uc small{display:block;font-size:10.5px;color:var(--muted);font-weight:700}
.uc.clean{background:var(--ok-bg);border-color:#9ED0B8}.uc.clean b,.uc.clean small{color:var(--ok)}
.uc.n1,.uc.n2{background:var(--warn-bg);border-color:var(--gold-400)}.uc.n1 b,.uc.n2 b,.uc.n1 small,.uc.n2 small{color:var(--gold-ink)}
.uc.n3,.uc.error{background:var(--bad-bg);border-color:#E0A5A0}.uc.n3 b,.uc.error b,.uc.n3 small,.uc.error small{color:var(--bad)}
.uc.rep{border-style:dashed}
.uc[disabled]{opacity:.45;cursor:not-allowed}
.sr-note{margin-top:10px;display:flex;gap:8px;align-items:center}
.sr-note input{font-size:13px;padding:8px 12px;min-height:40px}
.sr-note .btn{padding:8px 14px;min-height:40px;font-size:12.5px;white-space:nowrap}
.sr-quick{font-size:12px;font-weight:800;color:var(--gold-ink);padding:6px 10px;border:1px solid var(--gold-400);border-radius:999px;background:#fff}
.sr-cmp{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;color:var(--muted);font-weight:700}
.sr-cmp i{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:6px;background:var(--cream-100);color:var(--ink);font-style:normal;font-size:11px;padding:0 5px}
.sr-cmp i.hot{background:var(--bad-bg);color:var(--bad)}
.sr-cmp i.w{background:var(--navy-900);color:var(--gold-300)}

/* ───── واجهة الطاقم: بطاقات عامة ───── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:16px 14px;box-shadow:var(--shadow-1)}
.kpi b{display:block;font-family:var(--f-kufi);font-size:26px;color:var(--navy-900);line-height:1.2}
.kpi span{font-size:12px;color:var(--muted);font-weight:700}
.kpi.bad b{color:var(--bad)}
.q{display:grid;gap:10px}
.qi{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--cream-50)}
.qi .t{font-size:13.5px;line-height:1.7}
.qi .t b{font-family:var(--f-kufi)}
.qi .t small{display:block;color:var(--muted);font-size:12px}
.qi .a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.qi .a .btn{padding:8px 14px;font-size:12.5px;min-height:38px}
.hcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:18px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:8px}
.hcard h4{font-size:16px;margin:0}
.hcard .m{font-size:13px;color:var(--muted);line-height:1.8}
.hcard .m b{color:var(--ink);font-family:var(--f-kufi)}
.hcard .row-btn{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.grid-h{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{flex:1;min-width:150px;padding:10px 12px;font-size:14px}
.srow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--cream-200);cursor:pointer}
.srow:hover{background:var(--cream-50)}
.srow:last-child{border-bottom:0}
.srow .nm{font-weight:800;font-family:var(--f-kufi);font-size:14px}
.srow .nm small{display:block;font-family:var(--f-body);font-weight:700;font-size:11.5px;color:var(--muted);margin-top:2px}
.srow .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pos-chip{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pos-chip.behind{background:var(--bad-bg);color:var(--bad)}
.pos-chip.ontrack{background:var(--warn-bg);color:var(--warn)}
.pos-chip.ahead{background:var(--ok-bg);color:var(--ok)}
.pos-chip.none{background:var(--cream-100);color:var(--muted)}
.mini7{display:inline-flex;gap:3px}
.mini7 i{width:10px;height:14px;border-radius:3px;background:var(--cream-200)}
.mini7 i.done{background:var(--ok)}.mini7 i.missed{background:var(--bad)}.mini7 i.partial{background:#E0A5A0}.mini7 i.excused{background:var(--navy-800)}.mini7 i.excuse_pending{background:var(--gold-500)}.mini7 i.paused{background:var(--muted-2)}
.drawer{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(11,10,36,.55);backdrop-filter:blur(3px)}
.drawer .dp{background:var(--cream-50);width:100%;max-width:820px;max-height:92vh;border-radius:22px 22px 0 0;overflow:auto;padding:0 0 calc(20px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-2)}
.dp-h{position:sticky;top:0;background:var(--cream-50);display:flex;align-items:center;gap:10px;padding:16px 20px 12px;border-bottom:1px solid var(--line);z-index:2}
.dp-h h3{font-size:16px;margin:0;flex:1}
.dp-h .x{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:18px;color:var(--muted)}
.dp-b{padding:16px 20px;display:grid;gap:14px}
.dp-b .card-p{padding:16px}
.dp-b h4{font-size:14px;margin:0 0 8px}
.slotrow{display:grid;grid-template-columns:1.2fr 1.2fr .8fr auto;gap:8px;align-items:center;margin-bottom:8px}
.slotrow select,.slotrow input{padding:9px 10px;font-size:14px;min-height:42px}
.slotrow .x{color:var(--bad);font-weight:800;font-size:13px;padding:8px}
.slot-prev{font-size:12px;color:var(--muted);margin-top:-2px;margin-bottom:8px}
.rem{white-space:pre-wrap;font-family:var(--f-body);font-size:14.5px;line-height:1.9;min-height:260px}
.role-tag{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(206,160,105,.2);color:var(--gold-300);margin-inline-start:6px;vertical-align:2px}
.nav-lbl{font-size:10.5px;color:#7F7BA8;font-weight:800;padding:10px 14px 2px;letter-spacing:.3px}

/* ───── الجوال ───── */
@media (max-width:760px){
 .card + .hq,.hq + .card,.hq + .hq{margin-top:14px}
 .hq{padding:18px 16px 16px}
 .hq-when{grid-template-columns:1fr}
 .hq-time{min-width:0;justify-self:start;padding:6px 14px;font-size:22px}
 .ctr-b{width:46px;height:46px;font-size:14px}
 .cmp-row,.cmp-w{grid-template-columns:86px 1fr auto;font-size:12.5px}
 .strip{gap:3px}
 .strip .c{font-size:9px;border-radius:5px}
 .strip .c b{font-size:10px}
 .sess{padding:16px 14px}
 .sess-stats{grid-template-columns:repeat(5,1fr);gap:4px}
 .sess-stats .s b{font-size:17px}
 .sess-stats .s span{font-size:9.5px}
 .sess-act .btn{flex:1 1 46%}
 .sr{padding:12px 12px}
 .seg button{width:40px;height:38px}
 .uc{min-width:74px;padding:5px 8px}
 .kpis{grid-template-columns:repeat(2,1fr)}
 .grid-h{grid-template-columns:1fr}
 .qi{grid-template-columns:1fr}
 .qi .a{justify-content:flex-start}
 .slotrow{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
 .slotrow input{grid-column:1}
 .slotrow .x{grid-column:2;text-align:end}
 .nav-lbl{display:none}
 .stat3 .s b{font-size:18px}
 .day{min-width:56px;padding:6px 4px}
}
@media (max-width:420px){
 .roles.r4 button{font-size:11.5px;padding:8px 0}
 .sess-stats{grid-template-columns:repeat(3,1fr)}
 .sess-stats .s:nth-child(4),.sess-stats .s:nth-child(5){grid-column:span 1}
}
@media (prefers-color-scheme: dark){
 .dl{background:var(--navy-850);border-color:var(--line-navy)}
 .dl-h{background:var(--navy-800);border-color:var(--line-navy)}
 .dl-item{border-color:var(--line-navy)}
 .dl-item i{background:var(--navy-900)}
 .dl-foot{background:var(--navy-850);border-color:var(--line-navy)}
 .ctr-b,.unit,.day,.prow,.sr,.kpi,.hcard,.qi,.uc,.stat3 .s,.strip .c{background:var(--navy-850);border-color:var(--line-navy)}
 .ctr-num input,.stat3 .s b,.kpi b,.uc b,.strip .c b,.day b{color:var(--cream-50)}
 .seg{background:var(--navy-900);border-color:var(--line-navy)}
 .seg button{border-color:var(--line-navy)}
 .dots i{background:var(--navy-900);border-color:var(--line-navy)}
 .dots i.on{background:var(--gold-500);border-color:var(--gold-500)}
 .drawer .dp,.dp-h{background:var(--navy-900)}
 .dp-h{border-color:var(--line-navy)}
 .dp-h .x{background:var(--navy-850);border-color:var(--line-navy)}
 .srow{border-color:var(--line-navy)}
 .srow:hover{background:var(--navy-850)}
 .pos-chip.none,.sr-cmp i,.strip .c.holiday{background:var(--navy-800);color:var(--cream-100)}
 .sess-range select{background:rgba(255,255,255,.1)}
}

/* ═══════════════════════════════════════════════════════════════
   النظام اللوني ذو الوضعَين + الزخارف الهندسية (مودرن)
   نهاري: كريمي فاتح وزخارف كريمية غامقة · ليلي: كحلي وزخارف ذهبية
   ═══════════════════════════════════════════════════════════════ */
:root{
  --pg-bg:#F7F2E8; --pg-bg-2:#EEE5D2;
  --pg-card:rgba(255,255,255,.66); --pg-card-2:rgba(255,255,255,.45); --pg-border:rgba(156,130,98,.35); --pg-border-2:rgba(156,130,98,.6);
  --pg-ink:#1B1A4E; --pg-muted:#6F6B8A; --pg-orn:#9C8262; --pg-orn-2:#7A6247;
  --pg-field:rgba(255,255,255,.58); --pg-field-border:rgba(156,130,98,.55);
  --pg-side:rgba(255,255,255,.62); --pg-shadow:0 18px 50px rgba(60,45,20,.10);
  --pg-nav:#4E4A73; --pg-nav-on-bg:linear-gradient(135deg,#1B1A4E,#2A2768); --pg-nav-on:#F2CA8C;
  --band:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2780%27 height=%2780%27 viewBox=%270 0 80 80%27%3E%3Cg fill=%27none%27 stroke=%27%239C8262%27 stroke-width=%271%27 stroke-opacity=%27.55%27%3E%3Cpath d=%27M40 4 50 30 76 40 50 50 40 76 30 50 4 40 30 30z%27/%3E%3Cpath d=%27M40 18 46 34 62 40 46 46 40 62 34 46 18 40 34 34z%27 stroke-opacity=%27.35%27/%3E%3Cpath d=%27M0 0 12 12M80 0 68 12M0 80 12 68M80 80 68 68%27/%3E%3Ccircle cx=%2740%27 cy=%2740%27 r=%274%27/%3E%3Ccircle cx=%270%27 cy=%2740%27 r=%275%27/%3E%3Ccircle cx=%2780%27 cy=%2740%27 r=%275%27/%3E%3Ccircle cx=%2740%27 cy=%270%27 r=%275%27/%3E%3Ccircle cx=%2740%27 cy=%2780%27 r=%275%27/%3E%3C/g%3E%3C/svg%3E");
  --band-gold:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2780%27 height=%2780%27 viewBox=%270 0 80 80%27%3E%3Cg fill=%27none%27 stroke=%27%23F2CA8C%27 stroke-width=%271%27 stroke-opacity=%27.55%27%3E%3Cpath d=%27M40 4 50 30 76 40 50 50 40 76 30 50 4 40 30 30z%27/%3E%3Cpath d=%27M40 18 46 34 62 40 46 46 40 62 34 46 18 40 34 34z%27 stroke-opacity=%27.35%27/%3E%3Cpath d=%27M0 0 12 12M80 0 68 12M0 80 12 68M80 80 68 68%27/%3E%3Ccircle cx=%2740%27 cy=%2740%27 r=%274%27/%3E%3Ccircle cx=%270%27 cy=%2740%27 r=%275%27/%3E%3Ccircle cx=%2780%27 cy=%2740%27 r=%275%27/%3E%3Ccircle cx=%2740%27 cy=%270%27 r=%275%27/%3E%3Ccircle cx=%2740%27 cy=%2780%27 r=%275%27/%3E%3C/g%3E%3C/svg%3E");
  --rosette-gold:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 400%27 fill=%27none%27 stroke=%27%23F2CA8C%27 stroke-width=%271%27%3E%3Cg transform=%27translate(200 200)%27%3E%3Ccircle r=%27190%27/%3E%3Ccircle r=%27150%27/%3E%3Ccircle r=%2760%27/%3E%3Cpath d=%27M0-190 55-55 190 0 55 55 0 190-55 55-190 0-55-55Z%27/%3E%3Cpath d=%27M0-150 43-43 150 0 43 43 0 150-43 43-150 0-43-43Z%27 transform=%27rotate(22.5)%27/%3E%3Cpath d=%27M0-100 28-28 100 0 28 28 0 100-28 28-100 0-28-28Z%27/%3E%3Cpath d=%27M0-100 28-28 100 0 28 28 0 100-28 28-100 0-28-28Z%27 transform=%27rotate(45)%27/%3E%3Cg stroke-opacity=%27.6%27%3E%3Cpath d=%27M0-190V190M-190 0H190M-134-134 134 134M-134 134 134-134%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --gpattern-navy:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27 viewBox=%270 0 140 140%27%3E%3Cg fill=%27none%27 stroke=%27%231B1A4E%27 stroke-width=%27.9%27%3E%3Cg stroke-opacity=%270.35%27%3E%3Cpath d=%27M70 20 90 41 111 41 111 62 132 82 111 103 111 124 90 124 70 145 50 124 29 124 29 103 8 82 29 62 29 41 50 41z%27 transform=%27translate(0 -12)%27/%3E%3C/g%3E%3Cg stroke-opacity=%270.24%27%3E%3Cpath d=%27M70 44 88 70 70 96 52 70z%27/%3E%3Ccircle cx=%2770%27 cy=%2770%27 r=%276%27/%3E%3C/g%3E%3Cg stroke-opacity=%270.2%27%3E%3Cpath d=%27M0 0 21 21M140 0 119 21M0 140 21 119M140 140 119 119%27/%3E%3Cpath d=%27M0 70h21M119 70h21M70 0v21M70 119v21%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --pg-band:rgba(156,130,98,.11); --pg-band-2:rgba(156,130,98,.06); --pg-gold-wash:linear-gradient(135deg,rgba(242,202,140,.32),rgba(206,160,105,.10));
  --khatam-gold:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23F2CA8C%27 stroke-width=%271.5%27%3E%3Crect x=%276%27 y=%276%27 width=%2712%27 height=%2712%27/%3E%3Crect x=%276%27 y=%276%27 width=%2712%27 height=%2712%27 transform=%27rotate(45 12 12)%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%271.6%27 fill=%27%23F2CA8C%27 stroke=%27none%27/%3E%3C/svg%3E");
  --corner-gold:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 60 60%27 fill=%27none%27 stroke=%27%23F2CA8C%27 stroke-width=%271.2%27%3E%3Cpath d=%27M2 58V14Q2 2 14 2H58%27/%3E%3Cpath d=%27M8 52V18Q8 8 18 8H52%27 stroke-opacity=%27.55%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%2710%27 height=%2710%27 transform=%27rotate(45 15 15)%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%2710%27 height=%2710%27/%3E%3Ccircle cx=%2715%27 cy=%2715%27 r=%271.4%27 fill=%27%23F2CA8C%27 stroke=%27none%27/%3E%3C/svg%3E");
  --mcorner:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 fill=%27none%27 stroke=%27%239C8262%27 stroke-width=%271.4%27%3E%3Cpath d=%27M4 96V22Q4 4 22 4H96%27/%3E%3Cpath d=%27M12 90V26Q12 12 26 12H90%27 stroke-opacity=%27.55%27/%3E%3Cpath d=%27M22 22l14 14M22 22l-6 20M22 22l20-6%27 stroke-opacity=%27.8%27/%3E%3Crect x=%2724%27 y=%2724%27 width=%2716%27 height=%2716%27 transform=%27rotate(45 32 32)%27/%3E%3Crect x=%2724%27 y=%2724%27 width=%2716%27 height=%2716%27/%3E%3Ccircle cx=%2732%27 cy=%2732%27 r=%272.5%27 fill=%27%239C8262%27 stroke=%27none%27/%3E%3Ccircle cx=%274%27 cy=%2760%27 r=%272.2%27 fill=%27%239C8262%27 stroke=%27none%27/%3E%3Ccircle cx=%2760%27 cy=%274%27 r=%272.2%27 fill=%27%239C8262%27 stroke=%27none%27/%3E%3Cpath d=%27M4 70q6-6 12 0t12 0M70 4q-6 6 0 12t0 12%27 stroke-opacity=%27.7%27/%3E%3C/svg%3E"); --gold-b:rgba(184,147,92,.8); --gold-b2:rgba(184,147,92,.42); --pg-panel:#FBF7EF; --bayt:#6E5432;
  --gpattern-gold:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27 viewBox=%270 0 140 140%27%3E%3Cg fill=%27none%27 stroke=%27%23CEA069%27 stroke-width=%27.9%27%3E%3Cg stroke-opacity=%270.16%27%3E%3Cpath d=%27M70 20 90 41 111 41 111 62 132 82 111 103 111 124 90 124 70 145 50 124 29 124 29 103 8 82 29 62 29 41 50 41z%27 transform=%27translate(0 -12)%27/%3E%3C/g%3E%3Cg stroke-opacity=%270.11%27%3E%3Cpath d=%27M70 44 88 70 70 96 52 70z%27/%3E%3Ccircle cx=%2770%27 cy=%2770%27 r=%276%27/%3E%3C/g%3E%3Cg stroke-opacity=%270.09%27%3E%3Cpath d=%27M0 0 21 21M140 0 119 21M0 140 21 119M140 140 119 119%27/%3E%3Cpath d=%27M0 70h21M119 70h21M70 0v21M70 119v21%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --gpattern:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27 viewBox=%270 0 140 140%27%3E%3Cg fill=%27none%27 stroke=%27%239C8262%27 stroke-width=%27.9%27%3E%3Cg stroke-opacity=%270.27%27%3E%3Cpath d=%27M70 20 90 41 111 41 111 62 132 82 111 103 111 124 90 124 70 145 50 124 29 124 29 103 8 82 29 62 29 41 50 41z%27 transform=%27translate(0 -12)%27/%3E%3C/g%3E%3Cg stroke-opacity=%270.19%27%3E%3Cpath d=%27M70 44 88 70 70 96 52 70z%27/%3E%3Ccircle cx=%2770%27 cy=%2770%27 r=%276%27/%3E%3C/g%3E%3Cg stroke-opacity=%270.15%27%3E%3Cpath d=%27M0 0 21 21M140 0 119 21M0 140 21 119M140 140 119 119%27/%3E%3Cpath d=%27M0 70h21M119 70h21M70 0v21M70 119v21%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --rosette:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 400%27 fill=%27none%27 stroke=%27%239C8262%27 stroke-width=%271%27%3E%3Cg transform=%27translate(200 200)%27%3E%3Ccircle r=%27190%27/%3E%3Ccircle r=%27150%27/%3E%3Ccircle r=%2760%27/%3E%3Cpath d=%27M0-190 55-55 190 0 55 55 0 190-55 55-190 0-55-55Z%27/%3E%3Cpath d=%27M0-150 43-43 150 0 43 43 0 150-43 43-150 0-43-43Z%27 transform=%27rotate(22.5)%27/%3E%3Cpath d=%27M0-100 28-28 100 0 28 28 0 100-28 28-100 0-28-28Z%27/%3E%3Cpath d=%27M0-100 28-28 100 0 28 28 0 100-28 28-100 0-28-28Z%27 transform=%27rotate(45)%27/%3E%3Cg stroke-opacity=%27.6%27%3E%3Cpath d=%27M0-190V190M-190 0H190M-134-134 134 134M-134 134 134-134%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --khatam:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%239C8262%27 stroke-width=%271.5%27%3E%3Crect x=%276%27 y=%276%27 width=%2712%27 height=%2712%27/%3E%3Crect x=%276%27 y=%276%27 width=%2712%27 height=%2712%27 transform=%27rotate(45 12 12)%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%271.6%27 fill=%27%239C8262%27 stroke=%27none%27/%3E%3C/svg%3E");
  --frieze:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2756%27 height=%2716%27 viewBox=%270 0 56 16%27%3E%3Cg fill=%27none%27 stroke=%27%239C8262%27 stroke-width=%271%27%3E%3Cpath d=%27M0 8h17M39 8h17%27/%3E%3Crect x=%2723%27 y=%273%27 width=%2710%27 height=%2710%27/%3E%3Crect x=%2723%27 y=%273%27 width=%2710%27 height=%2710%27 transform=%27rotate(45 28 8)%27/%3E%3Ccircle cx=%2728%27 cy=%278%27 r=%271.3%27 fill=%27%239C8262%27 stroke=%27none%27/%3E%3Ccircle cx=%2717%27 cy=%278%27 r=%271.2%27/%3E%3Ccircle cx=%2739%27 cy=%278%27 r=%271.2%27/%3E%3C/g%3E%3C/svg%3E");
  --corner:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 60 60%27 fill=%27none%27 stroke=%27%239C8262%27 stroke-width=%271.2%27%3E%3Cpath d=%27M2 58V14Q2 2 14 2H58%27/%3E%3Cpath d=%27M8 52V18Q8 8 18 8H52%27 stroke-opacity=%27.55%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%2710%27 height=%2710%27 transform=%27rotate(45 15 15)%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%2710%27 height=%2710%27/%3E%3Ccircle cx=%2715%27 cy=%2715%27 r=%271.4%27 fill=%27%239C8262%27 stroke=%27none%27/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
 :root{
  --pg-bg:#0E0D2E; --pg-bg-2:#121238;
  --pg-card:rgba(255,255,255,.06); --pg-card-2:rgba(255,255,255,.04); --pg-border:rgba(206,160,105,.3); --pg-border-2:rgba(206,160,105,.55);
  --pg-ink:#F4EDE0; --pg-muted:#B9B5DA; --pg-orn:#CEA069; --pg-orn-2:#F2CA8C;
  --pg-field:rgba(255,255,255,.07); --pg-field-border:rgba(206,160,105,.45);
  --pg-side:rgba(11,10,36,.72); --pg-shadow:0 18px 50px rgba(0,0,0,.45);
  --pg-nav:#B9B5DA; --pg-nav-on-bg:linear-gradient(135deg,rgba(206,160,105,.22),rgba(206,160,105,.08)); --pg-nav-on:#F2CA8C;
  --mcorner:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 fill=%27none%27 stroke=%27%23CEA069%27 stroke-width=%271.4%27%3E%3Cpath d=%27M4 96V22Q4 4 22 4H96%27/%3E%3Cpath d=%27M12 90V26Q12 12 26 12H90%27 stroke-opacity=%27.55%27/%3E%3Cpath d=%27M22 22l14 14M22 22l-6 20M22 22l20-6%27 stroke-opacity=%27.8%27/%3E%3Crect x=%2724%27 y=%2724%27 width=%2716%27 height=%2716%27 transform=%27rotate(45 32 32)%27/%3E%3Crect x=%2724%27 y=%2724%27 width=%2716%27 height=%2716%27/%3E%3Ccircle cx=%2732%27 cy=%2732%27 r=%272.5%27 fill=%27%23CEA069%27 stroke=%27none%27/%3E%3Ccircle cx=%274%27 cy=%2760%27 r=%272.2%27 fill=%27%23CEA069%27 stroke=%27none%27/%3E%3Ccircle cx=%2760%27 cy=%274%27 r=%272.2%27 fill=%27%23CEA069%27 stroke=%27none%27/%3E%3Cpath d=%27M4 70q6-6 12 0t12 0M70 4q-6 6 0 12t0 12%27 stroke-opacity=%27.7%27/%3E%3C/svg%3E"); --gold-b:rgba(206,160,105,.78); --gold-b2:rgba(206,160,105,.38); --pg-panel:#15143E; --bayt:#F2CA8C;
  --band:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2780%27 height=%2780%27 viewBox=%270 0 80 80%27%3E%3Cg fill=%27none%27 stroke=%27%23CEA069%27 stroke-width=%271%27 stroke-opacity=%27.55%27%3E%3Cpath d=%27M40 4 50 30 76 40 50 50 40 76 30 50 4 40 30 30z%27/%3E%3Cpath d=%27M40 18 46 34 62 40 46 46 40 62 34 46 18 40 34 34z%27 stroke-opacity=%27.35%27/%3E%3Cpath d=%27M0 0 12 12M80 0 68 12M0 80 12 68M80 80 68 68%27/%3E%3Ccircle cx=%2740%27 cy=%2740%27 r=%274%27/%3E%3Ccircle cx=%270%27 cy=%2740%27 r=%275%27/%3E%3Ccircle cx=%2780%27 cy=%2740%27 r=%275%27/%3E%3Ccircle cx=%2740%27 cy=%270%27 r=%275%27/%3E%3Ccircle cx=%2740%27 cy=%2780%27 r=%275%27/%3E%3C/g%3E%3C/svg%3E");
  --pg-band:rgba(206,160,105,.12); --pg-band-2:rgba(206,160,105,.06); --pg-gold-wash:linear-gradient(135deg,rgba(242,202,140,.18),rgba(206,160,105,.06));
  --gpattern:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27 viewBox=%270 0 140 140%27%3E%3Cg fill=%27none%27 stroke=%27%23CEA069%27 stroke-width=%27.9%27%3E%3Cg stroke-opacity=%270.16%27%3E%3Cpath d=%27M70 20 90 41 111 41 111 62 132 82 111 103 111 124 90 124 70 145 50 124 29 124 29 103 8 82 29 62 29 41 50 41z%27 transform=%27translate(0 -12)%27/%3E%3C/g%3E%3Cg stroke-opacity=%270.11%27%3E%3Cpath d=%27M70 44 88 70 70 96 52 70z%27/%3E%3Ccircle cx=%2770%27 cy=%2770%27 r=%276%27/%3E%3C/g%3E%3Cg stroke-opacity=%270.09%27%3E%3Cpath d=%27M0 0 21 21M140 0 119 21M0 140 21 119M140 140 119 119%27/%3E%3Cpath d=%27M0 70h21M119 70h21M70 0v21M70 119v21%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --rosette:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 400%27 fill=%27none%27 stroke=%27%23CEA069%27 stroke-width=%271%27%3E%3Cg transform=%27translate(200 200)%27%3E%3Ccircle r=%27190%27/%3E%3Ccircle r=%27150%27/%3E%3Ccircle r=%2760%27/%3E%3Cpath d=%27M0-190 55-55 190 0 55 55 0 190-55 55-190 0-55-55Z%27/%3E%3Cpath d=%27M0-150 43-43 150 0 43 43 0 150-43 43-150 0-43-43Z%27 transform=%27rotate(22.5)%27/%3E%3Cpath d=%27M0-100 28-28 100 0 28 28 0 100-28 28-100 0-28-28Z%27/%3E%3Cpath d=%27M0-100 28-28 100 0 28 28 0 100-28 28-100 0-28-28Z%27 transform=%27rotate(45)%27/%3E%3Cg stroke-opacity=%27.6%27%3E%3Cpath d=%27M0-190V190M-190 0H190M-134-134 134 134M-134 134 134-134%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --khatam:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23CEA069%27 stroke-width=%271.5%27%3E%3Crect x=%276%27 y=%276%27 width=%2712%27 height=%2712%27/%3E%3Crect x=%276%27 y=%276%27 width=%2712%27 height=%2712%27 transform=%27rotate(45 12 12)%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%271.6%27 fill=%27%23CEA069%27 stroke=%27none%27/%3E%3C/svg%3E");
  --frieze:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2756%27 height=%2716%27 viewBox=%270 0 56 16%27%3E%3Cg fill=%27none%27 stroke=%27%23CEA069%27 stroke-width=%271%27%3E%3Cpath d=%27M0 8h17M39 8h17%27/%3E%3Crect x=%2723%27 y=%273%27 width=%2710%27 height=%2710%27/%3E%3Crect x=%2723%27 y=%273%27 width=%2710%27 height=%2710%27 transform=%27rotate(45 28 8)%27/%3E%3Ccircle cx=%2728%27 cy=%278%27 r=%271.3%27 fill=%27%23CEA069%27 stroke=%27none%27/%3E%3Ccircle cx=%2717%27 cy=%278%27 r=%271.2%27/%3E%3Ccircle cx=%2739%27 cy=%278%27 r=%271.2%27/%3E%3C/g%3E%3C/svg%3E");
  --corner:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 60 60%27 fill=%27none%27 stroke=%27%23CEA069%27 stroke-width=%271.2%27%3E%3Cpath d=%27M2 58V14Q2 2 14 2H58%27/%3E%3Cpath d=%27M8 52V18Q8 8 18 8H52%27 stroke-opacity=%27.55%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%2710%27 height=%2710%27 transform=%27rotate(45 15 15)%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%2710%27 height=%2710%27/%3E%3Ccircle cx=%2715%27 cy=%2715%27 r=%271.4%27 fill=%27%23CEA069%27 stroke=%27none%27/%3E%3C/svg%3E");
 }
}

/* ───── أرضية الصفحة كلها ───── */
body.dr-page{background:radial-gradient(900px 520px at 85% -10%,var(--pg-bg-2),transparent 60%),radial-gradient(700px 500px at 0% 100%,var(--pg-bg-2),transparent 60%),var(--pg-bg);color:var(--pg-ink)}
body.dr-page::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:var(--gpattern);opacity:.9;
  -webkit-mask-image:radial-gradient(ellipse 120% 100% at 50% 30%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 120% 100% at 50% 30%,#000 30%,transparent 100%)}
body.dr-page>*{position:relative;z-index:1}
body.dr-page .toast{z-index:100}

/* ───── صفحة الدخول (مودرن) ───── */
.dr-gate{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--pg-ink);overflow:hidden}
.dr-gate.hidden{display:none}
.dr-gate .rosette{position:absolute;left:50%;top:-120px;width:min(720px,140vw);height:min(720px,140vw);transform:translateX(-50%);pointer-events:none;color:var(--pg-orn);opacity:.09;z-index:0}
.dr-gate .rosette-b{left:auto;right:-220px;top:auto;bottom:-260px;width:520px;height:520px;transform:none;opacity:.07}
.dr-gate>*{position:relative;z-index:1}
.gate-head{padding:20px 22px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1080px;width:100%;margin:0 auto}
.gate-brand{display:flex;align-items:center;gap:12px;color:var(--pg-ink);text-decoration:none}
.gate-brand img{width:34px;height:auto;aspect-ratio:201/230}
.gate-brand b{font-family:var(--f-kufi);font-size:15px;font-weight:700}
.gate-back{display:inline-flex;align-items:center;gap:6px;color:var(--pg-muted);font-size:13px;font-weight:700;text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--pg-border);background:var(--pg-card-2)}
.gate-back:hover{color:var(--pg-ink);border-color:var(--pg-border-2)}
.dr-gate-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 40px;text-align:center}
.login-card{position:relative;width:100%;max-width:480px;background:radial-gradient(ellipse 120% 80% at 50% 0%,var(--pg-band) 0%,transparent 70%),linear-gradient(180deg,var(--pg-card) 0%,var(--pg-card-2) 100%);border:1px solid var(--gold-b2);border-radius:30px;box-shadow:0 30px 80px rgba(60,45,20,.10);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-align:start;overflow:hidden}
.login-card::before,.login-card::after{content:"";position:absolute;width:64px;height:64px;background:var(--mcorner) center/contain no-repeat;pointer-events:none;opacity:.55}
.login-card::before{top:10px;right:10px;transform:scaleX(-1)}
.login-card::after{bottom:10px;left:10px;transform:scaleY(-1)}
.lc-top{padding:36px 26px 22px;text-align:center;position:relative}
.lc-top::before{content:"";position:absolute;inset:0;background:var(--band) center/72px 72px;opacity:.6;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000 25%,transparent 100%)}
.lc-top>*{position:relative}
.lc-top::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:16px;background:var(--frieze) center/56px 16px repeat-x;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);opacity:.85}
.lc-logo{width:min(200px,54vw);height:auto;aspect-ratio:470/440;display:block;margin:0 auto 10px;filter:drop-shadow(0 10px 28px rgba(206,160,105,.22))}
.lc-top h1{font-family:var(--f-kufi);font-size:22px;font-weight:800;margin:0;color:var(--pg-ink);line-height:1.5;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.lc-top .sub{color:var(--pg-muted);font-size:13px;margin:6px 0 0;font-weight:700}
.beta{display:inline-block;font-family:var(--f-kufi);font-size:11px;font-weight:800;color:var(--navy-900);background:linear-gradient(135deg,var(--gold-300),var(--gold-500));border-radius:999px;padding:3px 11px;letter-spacing:.2px;box-shadow:0 4px 14px rgba(206,160,105,.3);vertical-align:middle}
.lc-body{padding:22px 24px 26px}
.lc-body .roles{background:var(--pg-card-2);border:1px solid var(--pg-border);margin-top:0}
.lc-body .roles button{color:var(--pg-muted)}
.lc-body .roles button.on{background:var(--pg-nav-on-bg);color:var(--pg-nav-on)}
.lc-body .field label{color:var(--pg-ink)}
.lc-body input,.lc-body select{background:var(--pg-field);border-color:var(--pg-field-border);color:var(--pg-ink);backdrop-filter:blur(6px)}
.lc-body input:focus{border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(206,160,105,.18)}
.lc-body .hint,.lc-body .demo-note{color:var(--pg-muted)}
.lc-body .demo-note{background:var(--pg-card-2);border:1px solid var(--pg-border)}
.lc-body .btn-navy{background:var(--pg-nav-on-bg);color:#F4EDE0}
.dr-gate .gate-bayt{font-family:var(--f-amiri);font-size:clamp(16px,2.2vw,20px);line-height:2;color:var(--pg-orn-2);margin:26px 0 0;max-width:34em}
.dr-gate .orn{display:flex;align-items:center;gap:14px;margin:10px auto 18px;width:min(360px,72vw);color:var(--pg-orn)}
.dr-gate .orn::before,.dr-gate .orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--pg-orn));opacity:.7}
.dr-gate .orn::after{background:linear-gradient(270deg,transparent,var(--pg-orn))}
.dr-gate .orn span{font-size:18px;line-height:1}
.dr-gate .gate-foot{padding:14px 20px 24px;text-align:center;font-size:12.5px;color:var(--pg-muted)}
@media (max-width:600px){
 .gate-head{padding:14px 14px 0}
 .dr-gate-main{padding:16px 12px 30px}
 .lc-top{padding:28px 18px 16px}
 .lc-top h1{font-size:20px}
 .lc-body{padding:18px 16px 22px}
 .login-card{border-radius:24px}
 .login-card::before,.login-card::after{width:48px;height:48px}
 .dr-gate .rosette{top:-80px}
 .dr-gate .rosette-b{display:none}
}
@media (prefers-reduced-motion:reduce){.dr-gate *{transition:none}}

/* ───── الشريط الجانبي والرأس: زجاج بلونَي الوضعَين ───── */
#view-student .side,#view-staff .side{background:var(--pg-side);color:var(--pg-ink);border-inline-end:1px solid var(--pg-border);overflow:hidden;isolation:isolate;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#view-student .side::before,#view-staff .side::before{content:"";position:absolute;inset:0;background-image:var(--gpattern);opacity:.8;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%)}
#view-student .side::after,#view-staff .side::after{content:"";position:absolute;left:-150px;bottom:-150px;width:400px;height:400px;background:var(--rosette) center/contain no-repeat;opacity:.12;pointer-events:none;z-index:0}
#view-student .side>*,#view-staff .side>*{position:relative;z-index:1}
#view-student .side-brand,#view-staff .side-brand{border-bottom:0;position:relative;color:var(--pg-ink)}
#view-student .side-brand small,#view-staff .side-brand small{color:var(--pg-orn-2)}
#view-student .side-brand::after,#view-staff .side-brand::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:16px;background:var(--frieze) center/56px 16px repeat-x;opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
#view-student .side-nav,#view-staff .side-nav{padding-top:22px}
#view-student .snav,#view-staff .snav{color:var(--pg-nav)}
#view-student .snav:hover,#view-staff .snav:hover{background:var(--pg-card-2);color:var(--pg-ink)}
#view-student .snav.on,#view-staff .snav.on{background:var(--pg-nav-on-bg);color:var(--pg-nav-on);box-shadow:0 8px 22px rgba(27,26,78,.18)}
#view-student .snav.on::before,#view-staff .snav.on::before{background:var(--gold-400)}
#view-student .side-user,#view-staff .side-user{border-top:1px solid var(--pg-border);color:var(--pg-ink)}
#view-student .side-user span,#view-staff .side-user span{color:var(--pg-muted)}
#view-student .side-user button,#view-staff .side-user button{color:var(--pg-muted);border-color:var(--pg-border)}
#view-student .topbar,#view-staff .topbar{position:sticky;background:var(--pg-side);border-bottom:1px solid var(--pg-border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--pg-ink)}
#view-student .topbar h2,#view-staff .topbar h2{color:var(--pg-ink)}
#view-student .topbar .tb-sub,#view-staff .topbar .tb-sub{color:var(--pg-muted)}
#view-student .topbar::after,#view-staff .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--pg-orn) 25%,var(--pg-orn) 75%,transparent);opacity:.7}
#view-student .main,#view-staff .main{background:transparent}
@media (max-width:760px){
 #view-student .side,#view-staff .side{position:relative;border-inline-end:0;border-bottom:1px solid var(--pg-border)}
 #view-student .side::after,#view-staff .side::after{display:none}
 #view-student .side::before,#view-staff .side::before{-webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.5),#000);mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.5),#000)}
 #view-student .side-nav,#view-staff .side-nav{padding-top:8px}
}

/* ───── البطاقات: زجاج شفاف + خاتم قبل العناوين ───── */
#view-student .card,#view-staff .card,#view-student .kpi,#view-staff .kpi,#view-staff .hcard,#view-staff .sr,#view-staff .qi,#view-student .prow,#view-staff .prow,#view-student .stat3 .s,#view-staff .stat3 .s,#view-student .q-card,#view-staff .q-card,#view-student .mini-stat,#view-student .att-closed,#view-student .stat{
  background:var(--pg-card);border-color:var(--pg-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--pg-ink)}
#view-student .card-h,#view-staff .card-h{background:transparent;border-bottom:1px solid var(--pg-border)}
#view-student .card-h h3::before,#view-staff .card-h h3::before,.dp-h h3::before{content:"";display:inline-block;width:13px;height:13px;margin-inline-end:8px;vertical-align:-1px;background:var(--khatam) center/contain no-repeat}
#view-student .tbl th,#view-staff .tbl th{background:var(--pg-card-2);color:var(--pg-ink)}
#view-student .tbl td,#view-staff .tbl td,#view-student .tbl th,#view-staff .tbl th{border-color:var(--pg-border)}
#view-student input,#view-student select,#view-student textarea,#view-staff input,#view-staff select,#view-staff textarea,.dp-b input,.dp-b select,.dp-b textarea{background:var(--pg-field);border-color:var(--pg-field-border);color:var(--pg-ink);backdrop-filter:blur(6px)}
#view-student input:focus,#view-staff input:focus,#view-student select:focus,#view-staff select:focus,#view-student textarea:focus,#view-staff textarea:focus{border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(206,160,105,.18)}
#view-student .roles,#view-staff .roles,#view-student .seg,#view-staff .seg,#view-staff .picker select{background:var(--pg-card-2);border-color:var(--pg-border)}
#view-student .dl,#view-student .dl-h,#view-student .dl-foot{background:var(--pg-card-2);border-color:var(--pg-border)}
#view-student .dl-item{border-color:var(--pg-border)}
#view-student .dl-item i{background:var(--pg-field)}
#view-student .unit,#view-staff .unit,#view-staff .uc,#view-student .day,#view-student .strip .c,.dp-b .strip .c{background:var(--pg-card);border-color:var(--pg-border)}
#view-student .day.on{background:var(--pg-nav-on-bg);color:#F4EDE0;border-color:transparent}
#view-student .ctr-b{background:var(--pg-card)}
#view-student .strip .c b,#view-staff .strip .c b{color:var(--pg-ink)}
#view-student .strip .c.done,#view-staff .strip .c.done{background:var(--ok-bg)}
#view-student .strip .c.missed,#view-staff .strip .c.missed{background:var(--bad-bg)}
#view-student .strip .c.excused{background:rgba(27,26,78,.12)}
#view-student .strip .c.excuse_pending{background:var(--warn-bg)}
#view-staff .srow:hover{background:var(--pg-card-2)}
#view-staff .srow{border-color:var(--pg-border)}
#view-staff .pos-chip.none,#view-staff .sr-cmp i{background:var(--pg-card-2);color:var(--pg-ink)}
#view-student .card.card-p .chip.chip-navy,#view-staff .chip.chip-navy{background:var(--pg-nav-on-bg);color:#F4EDE0}

/* ───── البطاقات الكحلية: تبقى كحلية في الوضعَين (بؤرة اللون) مع النمط والوردة ───── */
.hq,.sess,.nl-card,.att-open,.dr-id-wrap{isolation:isolate}
.hq::before,.sess::before{background:var(--gpattern-gold,var(--gpattern));opacity:.55}
.hq::after,.sess::after,.nl-card::after,.att-open::after{content:"";position:absolute;left:-110px;top:-90px;width:320px;height:320px;background:var(--rosette) center/contain no-repeat;opacity:.1;pointer-events:none;z-index:0}
.hq>*,.sess>*,.nl-card>*,.att-open>*{position:relative;z-index:1}
.hq::before,.hq::after,.sess::before,.sess::after,.nl-card::before,.nl-card::after,.att-open::before,.att-open::after{z-index:0}
.nl-card::after{left:auto;right:-120px;top:-110px;width:300px;height:300px}
.att-open::before{background-image:var(--gpattern);opacity:.55}

/* ───── بطاقة هوية الطالب ───── */
.card-id{position:relative;overflow:hidden;isolation:isolate}
.card-id>*{position:relative;z-index:1}
.card-id::after{content:"";position:absolute;left:-70px;top:-60px;width:240px;height:240px;background:var(--rosette) center/contain no-repeat;opacity:.16;pointer-events:none;z-index:0}
.card-id::before{content:"";position:absolute;right:8px;bottom:6px;width:54px;height:54px;background:var(--corner) center/contain no-repeat;transform:rotate(180deg) scaleX(-1);opacity:.7;pointer-events:none;z-index:0}
.card-id .dr-av{box-shadow:0 0 0 3px var(--pg-card),0 0 0 4.5px var(--gold-400)}

/* ───── النافذة المنزلقة ───── */
.drawer .dp,.dp-h{background:var(--pg-bg)}
.dp-h{border-color:var(--pg-border);position:relative}
.dp-b .card-p{background:var(--pg-card);border:1px solid var(--pg-border);border-radius:var(--r-m)}

/* ═══════════════════════════════════════════════════════════════
   الطبقة الزخرفية الغنية — إطارات مزدوجة، أشرطة منقوشة، تدرّجات، بلاطات كحلية/ذهبية
   ═══════════════════════════════════════════════════════════════ */
/* أرضية أوضح ووردتان ثابتتان */
body.dr-page::before{opacity:1;-webkit-mask-image:radial-gradient(ellipse 140% 110% at 50% 20%,#000 45%,rgba(0,0,0,.25) 100%);mask-image:radial-gradient(ellipse 140% 110% at 50% 20%,#000 45%,rgba(0,0,0,.25) 100%)}
body.dr-page::after{content:"";position:fixed;left:-280px;top:-220px;width:760px;height:760px;background:var(--rosette) center/contain no-repeat;opacity:.075;pointer-events:none;z-index:0}

/* ── البطاقة: إطار مزدوج + رأس منقوش + هلال ذهبي تحت العنوان + زاوية أرابيسك ── */
#view-student .card,#view-staff .card{position:relative;border-radius:22px;background:linear-gradient(180deg,var(--pg-card) 0%,var(--pg-card-2) 100%);box-shadow:var(--pg-shadow),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden}
#view-student .card::after,#view-staff .card::after{content:"";position:absolute;inset:6px;border:1px solid var(--pg-border);border-radius:17px;pointer-events:none;opacity:.32;z-index:0}
#view-student .card::before,#view-staff .card::before{content:"";position:absolute;top:9px;left:9px;width:48px;height:48px;background:var(--corner) center/contain no-repeat;opacity:.55;pointer-events:none;z-index:0}
#view-student .card>*,#view-staff .card>*{position:relative;z-index:1}
#view-student .card-h,#view-staff .card-h{padding:16px 22px 14px;border-bottom:0;background:linear-gradient(180deg,var(--pg-band) 0%,transparent 100%);position:relative;overflow:hidden}
#view-student .card-h::before,#view-staff .card-h::before{content:"";position:absolute;inset:0;background:var(--band) center/80px 80px;opacity:.75;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 70%,transparent 100%)}
#view-student .card-h::after,#view-staff .card-h::after{content:"";position:absolute;right:22px;left:22px;bottom:0;height:2px;background:linear-gradient(270deg,var(--gold-500) 0%,var(--gold-400) 35%,transparent 100%);border-radius:2px;opacity:.9}
#view-student .card-h>*,#view-staff .card-h>*{position:relative}
#view-student .card-h h3,#view-staff .card-h h3{font-size:16px;letter-spacing:.1px}
#view-student .card-h h3::before,#view-staff .card-h h3::before{width:15px;height:15px;margin-inline-end:9px;vertical-align:-2px}
#view-student .card-p,#view-staff .card-p{padding:20px 22px}

/* ── بلاطات مهمة اليوم ── */
#view-student .task{gap:14px}
#view-student .task .ti{position:relative;overflow:hidden;border-radius:18px;padding:16px 16px 14px;border:1px solid var(--pg-border);background:linear-gradient(160deg,var(--pg-card) 0%,var(--pg-band) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
#view-student .task .ti::before{content:"";position:absolute;inset:0;background:var(--gpattern) center/110px 110px;opacity:.9;pointer-events:none;-webkit-mask-image:radial-gradient(circle at 0% 100%,#000 0,transparent 70%);mask-image:radial-gradient(circle at 0% 100%,#000 0,transparent 70%)}
#view-student .task .ti::after{content:"";position:absolute;top:10px;left:10px;width:26px;height:26px;background:var(--khatam) center/contain no-repeat;opacity:.55;pointer-events:none}
#view-student .task .ti>*{position:relative}
#view-student .task .ti small{color:var(--pg-orn-2);font-weight:800;font-size:11.5px;letter-spacing:.3px}
#view-student .task .ti b{font-size:24px;color:var(--pg-ink);margin-top:6px}
#view-student .task .ti span{color:var(--pg-muted)}
#view-student .task .ti.hifz{background:linear-gradient(150deg,#1B1A4E 0%,#221F5C 55%,#2A2768 100%);border-color:rgba(206,160,105,.45);box-shadow:0 14px 30px rgba(27,26,78,.22)}
#view-student .task .ti.hifz::before{background:var(--gpattern-gold) center/110px 110px;opacity:.9;-webkit-mask-image:none;mask-image:none}
#view-student .task .ti.hifz::after{background-image:var(--khatam-gold,var(--khatam));opacity:.8}
#view-student .task .ti.hifz small{color:var(--gold-300)}
#view-student .task .ti.hifz b{color:#FBF8F1}
#view-student .task .ti.hifz span{color:#C9C6E4}
#view-student .task .ti a{color:var(--gold-ink)}
#view-student .fri{background:linear-gradient(135deg,#1B1A4E,#2A2768);border:1px solid rgba(206,160,105,.35);position:relative;overflow:hidden;isolation:isolate}
#view-student .fri::before{content:"";position:absolute;inset:0;background:var(--gpattern-gold) center/110px 110px;opacity:.7;pointer-events:none;z-index:0}
#view-student .fri>*{position:relative;z-index:1}

/* ── قائمة التحقّق ── */
#view-student .dl{border-radius:18px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
#view-student .dl-h{background:linear-gradient(90deg,var(--pg-band) 0%,transparent 100%);position:relative;padding:13px 18px}
#view-student .dl-h::before{content:"";position:absolute;left:0;top:0;bottom:0;width:120px;background:var(--band) center/64px 64px;opacity:.55;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
#view-student .dl-h>*{position:relative}
#view-student .dl-item{padding:13px 18px;transition:background .15s}
#view-student .dl-item:hover{background:var(--pg-band-2)}
#view-student .dl-item i{border-radius:9px;border-color:var(--gold-500);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
#view-student .dl-item input:checked+i{background:linear-gradient(135deg,var(--gold-300),var(--gold-500));border-color:transparent;color:var(--navy-900)}
#view-student .dl-bar{height:6px;background:var(--pg-band-2)}
#view-student .dl-bar i{background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
#view-student .dl-foot{background:linear-gradient(180deg,transparent,var(--pg-band-2))}

/* ── الجداول: رؤوس منقوشة وصف الأسبوع الكحلي المزخرف واليوم بغسل ذهبي ── */
#view-student .tbl,#view-staff .tbl{border-collapse:separate;border-spacing:0}
#view-student .tbl th,#view-staff .tbl th{background:linear-gradient(180deg,var(--pg-band),var(--pg-band-2));color:var(--pg-orn-2);font-family:var(--f-kufi);font-size:12.5px;letter-spacing:.2px;border-bottom:2px solid var(--pg-border);padding:12px 14px}
#view-student .tbl td,#view-staff .tbl td{border-bottom:1px solid var(--pg-border);padding:12px 14px}
#view-student .tbl tr:nth-child(even):not(.pl-week) td{background:var(--pg-band-2)}
#view-student .tbl tr.pl-week td{position:relative;background:linear-gradient(135deg,#1B1A4E 0%,#2A2768 100%);color:var(--gold-300);padding:13px 18px;font-size:13.5px;border-bottom:0;overflow:hidden}
#view-student .tbl tr.pl-week td::before{content:"";position:absolute;inset:0;background:var(--gpattern-gold) center/100px 100px;opacity:.7;pointer-events:none}
#view-student .tbl tr.pl-week td::after{content:"";position:absolute;left:12px;top:50%;width:120px;height:14px;transform:translateY(-50%);background:var(--frieze) center/56px 14px repeat-x;opacity:.9;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
#view-student .tbl tr.pl-week a{color:#FBF8F1;font-weight:800;text-decoration:none;border-bottom:1px solid rgba(206,160,105,.6);position:relative}
#view-student .tbl tr.today td{background:var(--pg-gold-wash);font-weight:800;color:var(--pg-ink)}
#view-student .tbl tr.today td:first-child{border-inline-start:4px solid var(--gold-500)}
#view-student .tbl tr.past td{opacity:.65}
#view-student .tbl tr.fr td{color:var(--pg-muted)}
#view-student .tbl td .num,#view-student .tbl td.num{font-variant-numeric:tabular-nums}

/* ── الشريط الجانبي: نقش أقوى وقضيب زخرفي وفرِيز أكبر ── */
#view-student .side::before,#view-staff .side::before{opacity:1;background-size:120px 120px;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.15) 100%)}
#view-student .side::after,#view-staff .side::after{opacity:.16;width:440px;height:440px}
#view-student .side-brand,#view-staff .side-brand{padding:22px 20px 26px;background:linear-gradient(180deg,var(--pg-band) 0%,transparent 100%)}
#view-student .side-brand::after,#view-staff .side-brand::after{height:18px;background-size:64px 18px;bottom:2px;left:14px;right:14px;opacity:1}
#view-student .side-nav,#view-staff .side-nav{position:relative;padding-top:20px}
#view-student .side-nav::before,#view-staff .side-nav::before{content:"";position:absolute;left:6px;top:24px;bottom:24px;width:1px;background:linear-gradient(180deg,transparent,var(--pg-orn) 20%,var(--pg-orn) 80%,transparent);opacity:.55;pointer-events:none}
#view-student .snav,#view-staff .snav{border-radius:13px;padding:11px 14px 11px 12px}
#view-student .snav.on,#view-staff .snav.on{background:linear-gradient(135deg,#1B1A4E,#2A2768);color:var(--gold-300);box-shadow:0 10px 26px rgba(27,26,78,.22),inset 0 1px 0 rgba(255,255,255,.08)}
#view-student .snav.on svg,#view-staff .snav.on svg{opacity:1;color:var(--gold-300)}
#view-student .snav.on::before,#view-staff .snav.on::before{background:var(--gold-300)}
#view-student .side-user,#view-staff .side-user{background:linear-gradient(0deg,var(--pg-band) 0%,transparent 100%)}

/* ── شريط العنوان: وردة في الطرف وخط ذهبي تحت العنوان ── */
#view-student .topbar,#view-staff .topbar{overflow:hidden;padding-top:16px;padding-bottom:14px}
#view-student .topbar::before,#view-staff .topbar::before{content:"";position:absolute;left:-90px;top:-120px;width:280px;height:280px;background:var(--rosette) center/contain no-repeat;opacity:.14;pointer-events:none}
#view-student .topbar h2,#view-staff .topbar h2{position:relative;padding-bottom:8px}
#view-student .topbar h2::after,#view-staff .topbar h2::after{content:"";position:absolute;right:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(270deg,var(--gold-500),var(--gold-300))}
#view-student .topbar .tb-sub,#view-staff .topbar .tb-sub{align-self:flex-start;margin-top:6px}

/* ── بطاقة هوية الطالب: كحلية بتدرّج وذهب (عضوية) ── */
#view-student .card-id{background:linear-gradient(135deg,#121238 0%,#1B1A4E 50%,#26235F 100%);border-color:rgba(206,160,105,.45);color:#F4EDE0;box-shadow:0 18px 44px rgba(18,18,56,.35)}
#view-student .card-id::after{background-image:var(--rosette-gold);opacity:.16;width:300px;height:300px;left:-90px;top:-110px}
#view-student .card-id::before{background-image:var(--corner-gold,var(--corner));opacity:.85}
#view-student .card-id .dr-id h3{color:#FBF8F1}
#view-student .card-id .dr-meta{color:#C9C6E4}
#view-student .card-id .dr-meta b{color:var(--gold-300)}
#view-student .card-id .dr-date{color:#B9B5DA}
#view-student .card-id .dr-av{box-shadow:0 0 0 3px #1B1A4E,0 0 0 5px var(--gold-400),0 10px 24px rgba(0,0,0,.3)}
#view-student .card-id .chip{background:rgba(255,255,255,.1);color:#F4EDE0;border:1px solid rgba(206,160,105,.35)}

/* ── مؤشرات وبطاقات صغيرة ── */
#view-student .stat3 .s,#view-staff .stat3 .s,#view-staff .kpi{background:linear-gradient(160deg,var(--pg-card),var(--pg-band));border-radius:18px;position:relative;overflow:hidden}
#view-student .stat3 .s::before,#view-staff .kpi::before{content:"";position:absolute;top:6px;left:6px;width:22px;height:22px;background:var(--khatam) center/contain no-repeat;opacity:.5}
#view-student .stat3 .s b,#view-staff .kpi b{background:linear-gradient(135deg,var(--pg-ink),var(--pg-orn-2));-webkit-background-clip:text;background-clip:text;color:transparent}
#view-staff .kpi.bad b{background:none;color:var(--bad)}
#view-staff .hcard{background:linear-gradient(160deg,var(--pg-card),var(--pg-band-2));border-radius:20px}
#view-staff .hcard h4{position:relative;padding-bottom:8px}
#view-staff .hcard h4::after{content:"";position:absolute;right:0;bottom:0;width:44px;height:2px;background:linear-gradient(270deg,var(--gold-500),transparent)}

/* ── أزرار ورقائق ── */
#view-student .btn-gold,#view-staff .btn-gold,.lc-body .btn-gold{box-shadow:0 10px 24px rgba(206,160,105,.3),inset 0 1px 0 rgba(255,255,255,.5)}
#view-student .btn-navy,#view-staff .btn-navy{background:linear-gradient(135deg,#1B1A4E,#2A2768);box-shadow:0 10px 24px rgba(27,26,78,.2)}
#view-student .chip-gold,#view-staff .chip-gold{background:linear-gradient(135deg,var(--gold-200),var(--gold-300));color:var(--navy-900)}

/* ── دليلي والمراجع ── */
#view-student .g-list li{border-color:var(--pg-border)}
#view-student .g-list li::before{background:linear-gradient(135deg,#1B1A4E,#2A2768);color:var(--gold-300);box-shadow:0 4px 12px rgba(27,26,78,.25)}
#view-student .ref-item{background:linear-gradient(160deg,var(--pg-card),var(--pg-band-2));border-color:var(--pg-border);border-radius:16px}

/* ── خريطة المتن ── */
#view-student .mm-bar{height:16px;border-color:var(--pg-border);background:var(--pg-band-2);box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
#view-student .mm-bar .s1{background:linear-gradient(90deg,var(--gold-200),var(--gold-300))}
#view-student .mm-bar .s2{background:linear-gradient(90deg,var(--gold-400),var(--gold-500))}
#view-student .mm-bar .s3{background:linear-gradient(90deg,#1B1A4E,#2A2768)}

/* ── الجوال ── */
@media (max-width:760px){
 #view-student .card,#view-staff .card{border-radius:18px}
 #view-student .card::after,#view-staff .card::after{inset:5px;border-radius:14px}
 #view-student .card::before,#view-staff .card::before{width:38px;height:38px}
 #view-student .card-h,#view-staff .card-h{padding:14px 16px 12px}
 #view-student .card-p,#view-staff .card-p{padding:16px}
 #view-student .task .ti b{font-size:20px}
 #view-student .topbar::before,#view-staff .topbar::before{display:none}
 #view-student .tbl th,#view-student .tbl td{padding:10px 10px}
}
@media (prefers-color-scheme:dark){
 #view-student .task .ti{box-shadow:none}
 #view-student .card,#view-staff .card{box-shadow:var(--pg-shadow)}
 #view-student .stat3 .s b,#view-staff .kpi b{background:linear-gradient(135deg,#F4EDE0,var(--gold-300));-webkit-background-clip:text;background-clip:text}
}

/* ═══════════════════════════════════════════════════════════════
   التدريب الذاتي — بالطراز نفسه: طبقة واحدة، تدرّجات، زخارف، بلا جزر
   ═══════════════════════════════════════════════════════════════ */
.tr-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;padding:30px 28px 26px;margin-bottom:22px;border:1px solid rgba(206,160,105,.4);
  background:radial-gradient(900px 400px at 100% 0%,#2A2768 0%,transparent 55%),linear-gradient(135deg,#121238 0%,#1B1A4E 55%,#221F5C 100%);box-shadow:0 22px 50px rgba(18,18,56,.28)}
.tr-hero::before{content:"";position:absolute;inset:0;background:var(--gpattern-gold) center/120px 120px;opacity:.75;pointer-events:none;z-index:0}
.tr-hero::after{content:"";position:absolute;left:-120px;top:-140px;width:380px;height:380px;background:var(--rosette-gold) center/contain no-repeat;opacity:.14;pointer-events:none;z-index:0}
.tr-hero>*{position:relative;z-index:1}
.tr-hero b{font-size:21px;color:#FBF8F1;display:block;padding-inline-start:26px;position:relative;line-height:1.6}
.tr-hero b::before{content:"";position:absolute;right:0;top:9px;width:17px;height:17px;background:var(--khatam-gold) center/contain no-repeat}
.tr-hero p{color:#C9C6E4;font-size:14px;margin:12px 0 18px;line-height:2;max-width:46em}
.tr-hstats{gap:10px;margin-bottom:20px}
.tr-hstats span{background:linear-gradient(135deg,rgba(242,202,140,.2),rgba(206,160,105,.06));border:1px solid rgba(206,160,105,.45);color:#F2CA8C;padding:8px 15px;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.tr-hero .btn-gold{box-shadow:0 12px 28px rgba(206,160,105,.35),inset 0 1px 0 rgba(255,255,255,.5)}

/* مراحل التقدم */
.tr-stages{gap:12px;margin:0 0 22px}
.tr-stage{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--pg-card),var(--pg-band-2));border:1px solid var(--pg-border);border-radius:18px;padding:14px 16px;color:var(--pg-ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tr-stage::after{content:"";position:absolute;top:6px;left:6px;width:22px;height:22px;background:var(--khatam) center/contain no-repeat;opacity:.5;pointer-events:none}
.tr-stage b{color:var(--pg-ink);font-size:13px}
.tr-stage .tr-sbar{color:var(--pg-muted)}
.tr-stage.done{background:var(--pg-gold-wash),linear-gradient(160deg,var(--pg-card),var(--pg-band-2));border-color:var(--gold-500)}
.tr-si{font-size:24px;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#1B1A4E,#2A2768);color:#F2CA8C;box-shadow:0 8px 18px rgba(27,26,78,.22)}
.tr-scrown{color:var(--gold-600)}

/* بطاقات الأبواب */
.tr-units{gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tr-unit{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--pg-card) 0%,var(--pg-band-2) 100%);border:1px solid var(--pg-border);border-radius:22px;padding:26px 16px 20px;box-shadow:var(--pg-shadow),inset 0 1px 0 rgba(255,255,255,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tr-unit::before{content:"";position:absolute;inset:6px;border:1px solid var(--pg-border);border-radius:17px;opacity:.35;pointer-events:none;z-index:0}
.tr-unit::after{content:"";position:absolute;top:9px;left:9px;width:40px;height:40px;background:var(--corner) center/contain no-repeat;opacity:.55;pointer-events:none;z-index:0}
.tr-unit>*{position:relative;z-index:1}
.tr-unit:hover{transform:translateY(-5px);border-color:var(--gold-500);box-shadow:0 26px 54px rgba(60,45,20,.18)}
.tr-unit .tr-ic{width:66px;height:66px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:28px;line-height:1;background:linear-gradient(145deg,var(--gold-300),var(--gold-500));color:var(--navy-900);box-shadow:0 12px 26px rgba(206,160,105,.32),0 0 0 4px var(--pg-card),0 0 0 5px var(--pg-border-2)}
.tr-unit h4{color:var(--pg-ink);font-size:15px;margin:0 0 6px}
.tr-unit p{color:var(--pg-muted);font-size:12px;line-height:1.85;min-height:auto;margin:0 0 10px}
.tr-stars{margin-bottom:12px;font-size:16px}
.tr-stars .s{color:var(--pg-border-2)}
.tr-stars .s.on{color:var(--gold-500);text-shadow:0 2px 8px rgba(206,160,105,.45)}
.tr-unit .btn-navy{background:linear-gradient(135deg,#1B1A4E,#2A2768);box-shadow:0 8px 20px rgba(27,26,78,.2);border-radius:999px;padding:9px 22px}

/* الجولة: شريط التقدم والسؤال والخيارات */
.tr-top{gap:12px;margin-bottom:6px}
.tr-x{background:var(--pg-field);border-color:var(--pg-field-border);color:var(--pg-muted)}
.tr-bar{height:12px;background:var(--pg-band);border:1px solid var(--pg-border);box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.tr-bar i{background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
.tr-flame{color:var(--pg-orn-2)}
.tr-lvtag{color:var(--pg-orn-2)}
.tr-meta .chip{background:linear-gradient(135deg,var(--pg-band),transparent);border:1px solid var(--pg-border);color:var(--pg-ink)}
.tr-q{position:relative;color:var(--pg-ink);padding:18px 22px 18px 22px;margin:14px 0 18px;border-radius:18px;background:linear-gradient(180deg,var(--pg-band),transparent);border-inline-start:3px solid var(--gold-500)}
.tr-q::after{content:"";position:absolute;right:18px;left:18px;bottom:0;height:1px;background:linear-gradient(270deg,var(--gold-500),transparent 70%);opacity:.7}
.tr-opt{background:var(--pg-field);border-color:var(--pg-field-border);color:var(--pg-ink);border-radius:16px;padding:15px 18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tr-opt:hover{border-color:var(--gold-500);background:var(--pg-gold-wash);transform:translateX(-3px)}
.tr-tile{background:var(--pg-field);border-color:var(--pg-field-border);color:var(--pg-ink);border-radius:14px}
.tr-tile.sel{background:var(--pg-gold-wash);border-color:var(--gold-500)}
.tr-chip{background:var(--pg-field);border-color:var(--pg-field-border);color:var(--pg-ink);box-shadow:0 2px 0 var(--pg-border)}
.tr-ans{border-bottom:2px dashed var(--gold-500);background:linear-gradient(180deg,transparent,var(--pg-band-2));border-radius:12px 12px 0 0;padding:12px 10px}
.tr-verse{color:var(--pg-ink)}
.tr-blank{color:var(--gold-600);border-bottom-color:var(--gold-500)}
@media (prefers-color-scheme:dark){ .tr-blank{color:var(--gold-300)} }

/* لوح النتيجة السفلي */
.tr-sheet{background:var(--pg-panel);color:var(--pg-ink);border-radius:26px 26px 0 0;box-shadow:0 -20px 60px rgba(18,18,56,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.tr-sheet::before{content:"";position:absolute;inset:0;background:var(--band) center/72px 72px;opacity:.35;pointer-events:none;border-radius:inherit;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.tr-sheet>*{position:relative}
.tr-sheet.okk{background:linear-gradient(180deg,rgba(30,158,98,.14),transparent 60%),var(--pg-panel);border-top:3px solid #1E9E62}
.tr-sheet.noo{background:linear-gradient(180deg,rgba(206,75,67,.14),transparent 60%),var(--pg-panel);border-top:3px solid #CE4B43}
.tr-correct{color:var(--pg-ink)}
.tr-why{color:var(--pg-muted)}
.tr-sheet .btn-navy,.tr-sheet .btn-gold{border-radius:999px;min-width:180px}

/* نهاية الجولة */
.tr-finish{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;background:linear-gradient(180deg,var(--pg-card),var(--pg-band-2));border:1px solid var(--pg-border);padding:34px 20px 36px}
.tr-finish::before{content:"";position:absolute;left:50%;top:-160px;width:520px;height:520px;transform:translateX(-50%);background:var(--rosette) center/contain no-repeat;opacity:.12;pointer-events:none;z-index:0}
.tr-finish>*{position:relative;z-index:1}
.tr-score{background:linear-gradient(135deg,var(--pg-ink),var(--pg-orn-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:44px}
.tr-finish .hint{color:var(--pg-muted)}

/* لوحة المتصدرين */
.tr-lb-me{background:var(--pg-gold-wash),var(--pg-card);border:1px solid var(--gold-500);border-radius:14px;color:var(--pg-ink)}
.tr-lb-me b{color:var(--gold-600)}
.tr-lb-row{background:var(--pg-card);border-color:var(--pg-border);border-radius:14px;color:var(--pg-ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tr-lb-row.me{background:var(--pg-gold-wash),var(--pg-card);border-color:var(--gold-500)}
.tr-lb-name{color:var(--pg-ink)}
.tr-lb-score{color:var(--pg-muted)}
@media (prefers-color-scheme:dark){
 .tr-score{background:linear-gradient(135deg,#F4EDE0,var(--gold-300));-webkit-background-clip:text;background-clip:text}
 .tr-lb-me b{color:var(--gold-300)}
 .tr-stage.done b{color:var(--gold-300)}
}
@media (max-width:640px){
 .tr-hero{padding:22px 18px 20px;border-radius:20px}
 .tr-hero b{font-size:18px}
 .tr-units{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .tr-unit{padding:20px 12px 16px;border-radius:18px}
 .tr-unit .tr-ic{width:54px;height:54px;font-size:24px}
 .tr-q{padding:14px 16px}
}