/* ═══ 5. Pages ═══ */
/* Home */

.home { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.home > *, .main > * { min-width: 0; }

/* Header art colours (morning · night · dark theme) */

.alert-card { display: flex; align-items: center; gap: 14px; }
.alert-card h3 { margin: 1px 0 3px; }
.alert-card__cd { display: grid; gap: 6px; justify-items: end; }
.alert-card, .msg { position: relative; }
.alert-card::before, .msg.unread::before { content: ""; position: absolute; inset-inline-start: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c, var(--primary)); }
[dir="rtl"] .alert-card::before, [dir="rtl"] .msg.unread::before { border-radius: 4px 0 0 4px; }
.alert-card.calm { --c: var(--k-forum); }

.sc { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 2px; border-radius: 18px; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.35; color: var(--ink-2); transition: background .15s, transform .15s var(--spring); }
.sc .ico-tile { width: 52px; height: 52px; border-radius: 17px; }
.sc .ico-tile .i { width: 24px; height: 24px; }
.sc:hover { background: var(--surface-2); }
.sc:active { transform: scale(.94); }

.soon { padding-block: 2px 6px; }
.soon-card { flex: none; width: 210px; display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 18px; text-align: start; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); border-top: 3px solid var(--c); transition: transform .15s var(--spring); }
.soon-card:active { transform: scale(.97); }
.soon-card__t { font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }

.kind { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 68%, var(--ink)); }
:root[data-tone="dark"] .kind { color: color-mix(in srgb, var(--c) 75%, #fff); background: color-mix(in srgb, var(--c) 20%, var(--surface)); }

/* Task & item rows */

.tlist { display: grid; gap: 8px; }
.ti { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: background .2s, opacity .2s; }
.ti__main { flex: 1; min-width: 0; text-align: start; display: grid; gap: 2px; }
.ti__end { flex: none; display: flex; align-items: center; }
.ti.is-star { background: color-mix(in srgb, #F2C94C 10%, var(--surface)); border-color: color-mix(in srgb, #E9A86A 40%, var(--line)); }
.ti .star { color: #E2A33B; display: inline-block; vertical-align: -2px; margin-inline-end: 4px; fill: #F2C94C; }
.ti.is-done { background: var(--surface-2); }
.grade { display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 11px; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--ink); font-size: 15px; }
.grade span { font-size: 12px; color: var(--ink-3); }
.grade.add { align-items: center; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 700; }
.quick { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; padding-inline-start: 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); }
.quick input { border: 0; background: none; outline: none; min-height: 42px; font-size: 16px; color: var(--ink); }

/* Detail sheet */

.detail__head { display: flex; gap: 12px; align-items: flex-start; }
.detail__head h2 { font-size: 19px; }
.facts { display: grid; gap: 10px; margin-top: 16px; }
.fact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.fact > .i { color: var(--ink-3); }
.fact.note { display: block; line-height: 1.8; white-space: pre-wrap; }
.grade-ask { display: grid; gap: 16px; }
.grade-input { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0; }
.grade-input input { width: 130px; text-align: center; font-size: 34px; font-weight: 700; min-height: 72px; border-radius: 20px; }
.grade-input span { font-size: 18px; color: var(--ink-3); font-weight: 700; }

/* Courses */

.course-card { display: grid; gap: 6px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: pointer; position: relative; overflow: hidden; transition: transform .18s var(--ease), box-shadow .2s; --c: var(--peri); }
.course-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--c); }
.course-card:hover { box-shadow: var(--shadow-2); }
.course-card:active { transform: scale(.985); }
.course-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.course-card .ico-tile { --c: inherit; }
.course-card__next { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 11px; border-radius: 13px; background: var(--surface-2); font-size: 13px; }
.course-tabs { margin-bottom: 14px; width: 100%; }
.notes-card { display: grid; gap: 8px; }
.notes { min-height: 280px; background: var(--surface-2); border-color: var(--line); line-height: 2; font-size: 16px; }

/* Finals */

@keyframes drain { from { transform: scaleY(1); } to { transform: scaleY(.15); } }
@keyframes fill { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes fall { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flip { 0%, 46% { transform: rotate(0); } 50%, 96% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.final, .event { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.date-block { flex: none; width: 60px; height: 64px; border-radius: 16px; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.date-block b { font-size: 24px; line-height: 1.1; }
.date-block span { font-size: 11.5px; font-weight: 700; }
:root[data-tone="dark"] .date-block { color: color-mix(in srgb, var(--c) 80%, #fff); }
.event h3 { margin: 4px 0 2px; }

/* Calendar */

.milestone { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r-xl); background: var(--c); color: #fff; position: relative; overflow: hidden; }
.milestone__n { display: grid; justify-items: center; min-width: 76px; padding: 10px 6px; border-radius: 18px; background: rgba(255, 255, 255, .22); }
.milestone__n b { font-size: 34px; line-height: 1.05; }
.milestone__n span { font-size: 12px; }
.milestone h2 { color: #fff; margin: 2px 0; }
.milestone .small { opacity: .92; }
.milestone__ico { position: absolute; inset-inline-end: -8px; bottom: -12px; opacity: .22; }
.milestone__ico .i { width: 96px; height: 96px; }
.timeline { margin-top: 14px; }
.tl { position: relative; height: 70px; margin: 18px 4px 6px; }
.tl__track { position: absolute; inset-inline: 0; top: 18px; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.tl__track i { display: block; height: 100%; background: color-mix(in srgb, var(--primary) 35%, transparent); }
.tl__seg { position: absolute; top: 14px; height: 18px; border-radius: 6px; background: var(--c); box-shadow: 0 0 0 2px var(--surface); }
.tl__now { position: absolute; top: 0; height: 46px; width: 2px; background: var(--primary); translate: 50% 0; }
[dir="rtl"] .tl__now { translate: 50% 0; }
.tl__now b { position: absolute; top: -18px; left: 50%; translate: -50% 0; font-size: 11px; color: var(--primary); white-space: nowrap; }
.tl__month { position: absolute; top: 44px; font-size: 11px; color: var(--ink-3); translate: 50% 0; white-space: nowrap; }
.tl__month::before { content: ""; position: absolute; top: -10px; left: 50%; width: 1px; height: 6px; background: var(--line-2); }
.tl__legend { display: flex; gap: 14px; flex-wrap: wrap; }

/* تفريغ */
.icon-btn.rec { color: var(--danger); background: var(--danger-soft); }

/* About */

.about-hero { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 26px 16px; }
.about-logo { width: 84px; height: 84px; margin-bottom: 10px; filter: drop-shadow(0 10px 24px rgba(91, 91, 168, .25)); }
.about-hero p { max-width: 520px; margin-top: 10px; line-height: 1.9; }
.person { display: flex; align-items: center; gap: 12px; text-align: start; width: 100%; padding: 14px; }
.person .grow { display: grid; }
.thanks { margin: 0; padding: 20px; border-radius: 22px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); display: grid; gap: 10px; }
.thanks > .i { color: var(--c); width: 26px; height: 26px; }
.thanks blockquote { margin: 0; font-size: 15.5px; line-height: 1.9; }
.thanks figcaption { display: flex; align-items: center; gap: 10px; }
.thanks .avatar { width: 34px; height: 34px; font-size: 12px; }
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Settings */

.profile { display: flex; align-items: center; gap: 12px; }
.sent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2); font-weight: 700; }
.steps .i { color: var(--primary); }

/* Admin */

.msg p { margin-top: 10px; line-height: 1.8; }
.perm-list { display: grid; gap: 6px; margin-top: 8px; }
.perm { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 13px; background: var(--surface-2); font-size: 14px; }
.perm input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Auth */

.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px calc(24px + var(--safe-b)); position: relative; background: #DCEBF7; }
:root[data-tone="dark"] .auth { background: #1A2233; }
.auth__sky { position: fixed; inset: 0; }
.auth__sky .sky { position: absolute; inset: 0; }
.auth { background: #E6EBF8; }
:root[data-tone="dark"] .auth { --wave-1: rgba(120, 126, 214, .30); --wave-2: rgba(63, 127, 166, .30); --wave-3: rgba(20, 24, 54, .45); --wave-line: rgba(200, 204, 240, .25); --glow: rgba(200, 196, 255, .28); background: #1D2240; }
.auth__card { position: relative; width: min(420px, 100%); padding: 30px 24px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-3); text-align: center; animation: rise .6s var(--ease); }
.auth__logo { width: 72px; height: 72px; margin: 0 auto 14px; }
.wait-art { width: 82px; height: 82px; margin: 0 auto 14px; border-radius: 26px; display: grid; place-items: center; background: var(--lav-soft); color: var(--primary); }
.wait-art .i { width: 36px; height: 36px; animation: flip 6s var(--ease) infinite; }

/* Progress */

.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-toast { position: fixed; z-index: 130; top: calc(var(--safe-t) + 16px); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-3); font-weight: 700; font-size: 14px; }

/* ═══ 2.1 additions ═══ */

.tab__badge { position: absolute; top: -4px; inset-inline-end: 4px; min-width: 16px; height: 16px; font-size: 10px; }
.by { font-size: 11.5px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 1px 8px; border-radius: 999px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Page notices (published by the panel) */

.notice { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 10px; border-radius: 20px; background: color-mix(in srgb, var(--n) 16%, var(--surface)); color: color-mix(in srgb, var(--n) 55%, var(--ink)); border: 1px solid color-mix(in srgb, var(--n) 30%, transparent); }
.notice p { font-weight: 700; line-height: 1.7; color: var(--ink); }
.notice .tiny { opacity: .8; }
.notice__ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--n); color: #fff; flex: none; }
.notice.strong { background: var(--n); color: #fff; border-color: transparent; }
.notice.strong p { color: #fff; }
.notice.strong .notice__ico { background: rgba(255, 255, 255, .22); }
.notice.strong .icon-btn { color: #fff; }

/* Important websites */

.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.site { position: relative; display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-align: center; transition: transform .15s var(--spring), box-shadow .2s; }
.site:hover { box-shadow: var(--shadow-2); }
.site:active { transform: scale(.96); }
.site__mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c, var(--peri)); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .3px; }
.site__mark.sm { width: 34px; height: 34px; border-radius: 11px; font-size: 10.5px; }
.site__t { font-size: 12.5px; font-weight: 700; line-height: 1.35; }

/* Finals: prep cards */

.prep { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; }

/* About */

.lead-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--r-xl); background: var(--primary-soft); }
.lead-card p { margin-top: 6px; line-height: 1.85; }
.avatar.big { width: 64px; height: 64px; font-size: 22px; }
.person { align-items: flex-start; }
.person p { margin-top: 4px; line-height: 1.7; }
.contact-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.contact-chip:hover { border-color: var(--peri); color: var(--primary); }

/* Syllabus */
.weeks { padding-block: 4px 12px; }
.wk { position: relative; flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; color: var(--ink-2); }
.wk.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.wk.late { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.wk.now { background: var(--primary); color: var(--on-primary); border-color: transparent; transform: scale(1.08); }
.counter { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 14px; }
.counter input { width: 44px; text-align: center; border: 0; background: var(--surface); border-radius: 10px; min-height: 36px; font-weight: 700; font-size: 16px; }
.counter .icon-btn { width: 36px; height: 36px; background: var(--surface); }

/* steady tab bar: the long «الاختبارات النهائية» may take two lines without changing the bar height */

.tab { height: 58px; min-height: 0; overflow: hidden; line-height: 1.2; }
.tab.on { font-weight: 700; }

/* book-mode syllabus on phones: a compact cover banner instead of a tall book */

.mt-s.pill { margin-top: 6px; }

/* ═══ 2.2 smart pieces ═══ */

.brief { display: flex; flex-wrap: wrap; gap: 8px; }
.brief__f { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); transition: transform .15s var(--spring); }
.brief__f:active { transform: scale(.96); }
.brief__f.pri { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.brief__f.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.brief__f.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.brief__f.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.brief__f.sky { background: var(--sky-soft); color: #3F7FA6; border-color: transparent; }
:root[data-tone="dark"] .brief__f.sky { color: var(--sky); }
.prep-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-l); background: color-mix(in srgb, var(--c) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 26%, var(--line)); --c: var(--peri); }
.prep-card h3 { margin: 1px 0 2px; }
.prep-card__n { flex: none; width: 60px; height: 64px; border-radius: 18px; display: grid; place-content: center; text-align: center; background: var(--c); color: #fff; }
.prep-card__n b { font-size: 26px; line-height: 1.05; }
.prep-card__n span { font-size: 11px; font-weight: 700; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; font-size: 13px; padding: 4px 2px; }
.audience .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.audience .seg button { justify-content: center; }

/* unified lecture sign-in (schedule) */

.lms { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: -2px 0 14px; border-radius: 18px; background: var(--primary-soft); color: var(--ink); text-decoration: none; border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); }
.lms .ico-tile { --c: var(--primary); }
.lms b { display: block; }
.lms:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }

/* course page: «ملف المادة» · «بنك الأسئلة» */

.course-card__open { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, var(--ink-2)); }

/* course files */

.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fchip { display: inline-flex; align-items: stretch; max-width: 100%; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.fchip__b { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; max-width: 240px; }
.fchip__b b { padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--c, var(--primary)) 16%, var(--surface)); color: color-mix(in srgb, var(--c, var(--primary)) 70%, var(--ink)); letter-spacing: .3px; }
.fchip__b:hover { background: var(--hover); }

/* exam countdown labels: «يبدأ» / «ينتهي» */

.alert-card__cd { align-items: center; }
.prep-card__scope { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface); font-weight: 700; font-size: 13.5px; }
.prep-card__scope .i { color: color-mix(in srgb, var(--c) 70%, var(--ink)); }

/* who sees it: «نشر للجميع» / «لي فقط» */

.aud-note { display: flex; align-items: center; gap: 6px; margin: 6px 2px 0; font-size: 12.5px; font-weight: 700; }
.audience.is-all .aud-note { color: var(--ok); }
.audience.is-me .aud-note { color: var(--ink-2); }
.audience.is-all .seg button.on { background: var(--ok); color: #fff; }
.audience.is-me .seg button.on { background: var(--ink-2); color: var(--surface); }
.pill.mine { background: var(--surface-2); color: var(--ink-2); border: 1px dashed var(--line-2); }
.hint.pub { color: var(--ok); font-weight: 700; }

/* بنك الأسئلة */

.qb { display: grid; gap: 12px; }

/* admin team */

.team-add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* من نحن */

.about-sep { display: flex; align-items: center; gap: 10px; margin: 18px 8px; color: var(--peri); }
.about-sep i { flex: 1; height: 1px; background: var(--line); }
.team-intro { text-align: center; padding: 4px 8px 14px; }
.team-intro p { margin: 8px auto 0; max-width: 560px; line-height: 1.95; }
.person { border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.person__thanks { margin-top: 6px; padding-inline-start: 10px; border-inline-start: 3px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--ink-2); line-height: 1.7; }
.contact-chip.pri { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.feedback { display: grid; justify-items: center; gap: 10px; text-align: center; margin-top: 26px; padding: 22px 16px; border-radius: var(--r-xl); background: var(--lav-soft); }
.feedback > .i { color: #E58C8C; width: 26px; height: 26px; }

/* start page */

.auth.start { align-content: center; gap: 18px; }
.start__hero { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; animation: rise .6s var(--ease); color: #262C48; }
:root[data-tone="dark"] .start__hero { color: #EEF0F8; }
.start__hero h1 { font-size: 28px; line-height: 1.25; }
.start__sub { font-size: 13px; font-weight: 700; letter-spacing: 1px; opacity: .7; }
.start__line { margin-top: 8px; font-size: 14px; opacity: .85; }
.auth.start .auth__card { padding: 26px 22px; }
.auth.start .auth__card h2 { font-size: 20px; }
.ifield { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px; border-radius: 16px; background: var(--surface-2); border: 1.5px solid var(--line); transition: border-color .2s; }
.ifield:focus-within { border-color: var(--primary); background: var(--surface); }
.ifield .i { color: var(--ink-3); flex: none; }
.ifield input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: inherit; font-size: 16px; color: var(--ink); height: 50px; }
.ifield input.ltr { text-align: right; }
.btn.lg { min-height: 54px; font-size: 16px; border-radius: 16px; }
.wait-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.wait-steps li { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.wait-steps li.done { background: var(--ok-soft); color: var(--ok); }
.wait-steps li.now { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }

/* install prompt */

.install { display: grid; justify-items: center; gap: 6px; text-align: center; }
.install__logo { width: 76px; height: 76px; margin-bottom: 6px; filter: drop-shadow(0 8px 18px rgba(91, 91, 168, .25)); }
.install .steps { width: 100%; margin-top: 10px; text-align: start; }

/* ═══ 2.3.1 tweaks ═══ */

.section-title.row { display: flex; align-items: center; }
.chip-add { width: 30px; height: 30px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--primary); display: grid; place-items: center; cursor: pointer; }
.chip-add:hover { background: var(--primary-soft); }

.pill.sm { height: 19px; padding: 0 7px; font-size: 10.5px; }

/* course cards: grades rectangle */

.grade-box { display: grid; justify-items: center; gap: 1px; min-width: 72px; padding: 6px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); background: color-mix(in srgb, var(--c) 9%, var(--surface)); color: var(--ink); font: inherit; cursor: pointer; line-height: 1.2; }
.grade-box .tiny { color: var(--ink-3); font-weight: 700; }
.grade-box b { font-size: 17px; }
.grade-box small { font-size: 11px; color: var(--ink-3); font-weight: 700; }
.grade-box:hover { background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.course-card__top { align-items: center; gap: 8px; }

.seg.wrap3 { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.seg.wrap3 button { justify-content: center; }

/* permissions grid (team) */

.caps { display: grid; gap: 10px; }
.cap-group { padding: 10px 12px; border-radius: 16px; background: var(--surface-2); }
.cap-group__t { font-size: 12.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.cap { display: flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; font-size: 14px; }
.cap + .cap { border-top: 1px solid var(--line); }
.cap input { position: absolute; opacity: 0; pointer-events: none; }
.cap__box { width: 24px; height: 24px; flex: none; border-radius: 8px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; background: var(--surface); transition: background .15s, border-color .15s; }
.cap input:checked + .grow + .cap__box { background: var(--primary); border-color: var(--primary); color: #fff; }
.cap input:focus-visible ~ .cap__box { outline: 2px solid var(--primary); outline-offset: 2px; }

/* المذاكرة */

.study-list { display: grid; gap: 8px; }
.study-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.study-row:hover { background: var(--hover); }
.study-row__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.study-link { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: var(--c); color: #fff; text-decoration: none; margin-bottom: 12px; }
.study-link .soft { color: rgba(255, 255, 255, .85); }

/* sign-in: remembered accounts */

.quick-acc { display: grid; gap: 8px; margin-top: 14px; text-align: start; }
.qa { display: flex; align-items: stretch; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.qa__b { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; text-align: start; }
.qa__b .avatar { width: 38px; height: 38px; font-size: 14px; }
.qa__b:hover { background: var(--hover); }
.qa__x { width: 44px; border: 0; border-inline-start: 1px solid var(--line); background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.qa__x:hover { color: var(--danger); }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.remember { cursor: pointer; justify-content: flex-start; }
.nowrap { white-space: nowrap; }
.event { position: relative; }
.event.click { cursor: pointer; }
.event.click:hover { box-shadow: var(--shadow-2); }
.event__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.event h3 { margin: 2px 0 4px; line-height: 1.5; }
.event__edit { position: absolute; bottom: 12px; inset-inline-end: 12px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }

/* ═══ 1.1 ═══ */

@media (max-width: 719px) {
  .links { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .site { padding: 10px 6px 9px; gap: 6px; border-radius: 16px; }
  .site__mark { width: 40px; height: 40px; border-radius: 12px; font-size: 11px; }
  .site__t { font-size: 12px; }}
.panel-btn { position: relative; color: var(--primary); }
.viewas-bar { position: fixed; z-index: 80; inset-inline: 12px; bottom: calc(var(--tabbar) + var(--safe-b) + 10px); display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 16px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-3); }
.viewas-bar span { flex: 1; }
@media (min-width: 720px) { .viewas-bar { bottom: 18px; inset-inline: auto 24px; }}
.urgent-box { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, #E58C8C 10%, var(--surface)); border: 1px solid color-mix(in srgb, #E58C8C 30%, var(--line)); }
.alert-pop { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 6px 4px 2px; }
.alert-pop p { line-height: 1.9; }
.rank-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rank-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.rank-chip .i { color: var(--primary); }
.sym-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sym { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.sym.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.avatar.rank { background: var(--primary-soft); color: var(--primary); }
.msg__title { font-weight: 400; }
.temp-pass { font-size: 34px; font-weight: 800; letter-spacing: 6px; padding: 12px 18px; border-radius: 16px; background: var(--surface-2); border: 1px dashed var(--line-2); }
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; cursor: pointer; }
.chip-check input { accent-color: var(--primary); }
.phone-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.ifield__eye { border: 0; background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; padding: 4px; }
.contact-card { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.contact-card__note { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.8; color: var(--ink-2); padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.contact-card__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.cact { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.cact.wa { background: color-mix(in srgb, #25A366 14%, var(--surface)); color: #1E8A55; }
.hiring, .privacy { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.hiring { align-items: center; background: color-mix(in srgb, #6DBA9C 9%, var(--surface)); }
.privacy { background: var(--primary-soft); border-color: transparent; }
.privacy p { margin-top: 6px; font-size: 13.5px; line-height: 1.95; color: var(--ink-2); }
.opinions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.opinion { margin: 0; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; }
.opinion .i { color: var(--peri); }
.opinion blockquote { margin: 0; line-height: 1.85; font-size: 14px; }
.opinion figcaption { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.ti__extra { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.ti__extra .i { color: var(--peri); flex: none; }

/* course cards never overflow their column (iPad and narrow screens) */

.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.course-card { min-width: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
.course-card > * { min-width: 0; }
.course-card__top { flex-wrap: nowrap; min-width: 0; }
.course-card__top .grade-box { flex: none; }
.course-card .ring { flex: none; }
.study-row.locked { cursor: default; opacity: .72; }
.study-row.locked:hover { background: var(--surface); }

.sched-head { gap: 8px; }
.sched-head h1 { white-space: nowrap; }
@media (max-width: 430px) {   .sched-head .icon-btn { width: 40px; height: 40px; }}

/* ═══ 1.2 · header waves ═══ */

.sky { overflow: hidden; }

.who { display: grid; justify-items: center; gap: 4px; }
.who .avatar.lg { width: 58px; height: 58px; font-size: 20px; margin-bottom: 4px; }
.auth__links { gap: 12px; flex-wrap: wrap; justify-content: center; }
.study-item { display: flex; align-items: center; gap: 6px; }
.study-item .study-row { flex: 1; min-width: 0; padding-block: 10px; text-decoration: none; }

/* ═══ 1.2 · تواصلي معنا ═══ */

.kind-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.kchip.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.to-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.to-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.to-chip .avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; }
.to-chip.on { border-color: var(--primary); background: var(--primary-soft); }
.sent { display: grid; gap: 8px; align-items: stretch; }
.sent .row-s { align-items: center; }
.msg-reply { padding: 10px 12px; border-radius: 12px; background: var(--surface); border-inline-start: 3px solid var(--primary); }
.msg-reply p { margin-top: 4px; line-height: 1.8; }
.msg .msg-reply { background: var(--surface-2); margin-top: 10px; }
.quote-box { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); line-height: 1.8; }
.faq { display: grid; gap: 8px; }
.faq__i { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.faq__i summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i[open] summary .i:last-child { transform: rotate(180deg); }
.faq__i p { padding: 0 16px 14px; line-height: 1.9; color: var(--ink-2); }
.row-s.wrap { flex-wrap: wrap; }
.fchips-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.fchips-row .kchip { flex: none; padding: 6px 12px; font-size: 13px; }
.fchips-row .kchip .num { opacity: .7; margin-inline-start: 2px; }
.to-chip { padding: 6px 12px 6px 8px; }
.to-sym { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.to-sym .i { width: 15px; height: 15px; }
.to-chip.on .to-sym { background: var(--primary); color: var(--on-primary); }
.icon-btn.sm { width: 30px; height: 30px; }
.contact-card__info { display: flex; flex-wrap: wrap; gap: 6px; }
.cinfo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.sheet .contact-card { border: 0; padding: 0; background: none; box-shadow: none; }
.site__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; line-height: 1.4; }
.consult-box { display: grid; gap: 6px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--primary-soft); color: var(--ink-2); font-size: 13px; line-height: 1.8; text-align: start; }
.consult-box > b { color: var(--primary); display: flex; align-items: center; gap: 6px; }
.consult-box .btn { justify-self: start; }

/* websites get a light wash of their own colour · contact numbers a warm one, so the two kinds read apart */

.links .site { background: color-mix(in srgb, var(--c, #8E8EC8) 9%, var(--surface)); border-color: color-mix(in srgb, var(--c, #8E8EC8) 22%, var(--line)); font: inherit; color: var(--ink); cursor: pointer; }
.links .site.contact { background: color-mix(in srgb, #E9A86A 16%, var(--surface)); border: 1px dashed color-mix(in srgb, #E9A86A 55%, var(--line)); }

/* week view: one line for the week, then each day once */
.brief-hint { display: flex; align-items: center; gap: 6px; margin: 4px 4px -6px; font-size: 12.5px; color: var(--ink-3); }

/* rows never push a list wider than the screen */

.tlist > *, .list > *, .stack-s > *, .course-body > * { min-width: 0; }
.tlist { grid-template-columns: minmax(0, 1fr); }

/* ═══ 1.6 · 404 ═══ */

.nf { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 16px 32px; }
.nf__num { display: flex; align-items: center; gap: 6px; font-size: 76px; font-weight: 700; line-height: 1; color: var(--primary); direction: ltr; }
.nf__o { position: relative; width: 78px; height: 78px; display: grid; place-items: center; }
.nf__planet { width: 50px; height: 50px; border-radius: 50%; background: #A9A6E0; box-shadow: inset -7px -7px 16px rgba(60, 60, 140, .3), 0 8px 24px rgba(91, 91, 168, .3); }
.nf__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--primary) 45%, transparent); animation: nf-spin 9s linear infinite; }
.nf__ring b { position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #F2C08C; box-shadow: 0 0 12px rgba(242, 192, 140, .8); }
@keyframes nf-spin { to { transform: rotate(360deg); } }
.nf p { max-width: 380px; line-height: 1.9; }
@media (prefers-reduced-motion: reduce) { .nf__ring { animation: none; }}
.nf h1 { font-size: 22px; margin-top: 8px; }
.nf__acts { margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* ═══ 1.6 · لوحة الاستخدام ═══ */

.ub { margin-top: 18px; display: grid; gap: 12px; }
.ub__head h2 { font-size: 18px; }
.ub__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.ub__tile { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.ub__tile b { font-size: 26px; line-height: 1.2; color: var(--ink); }
.ub__l { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.ub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.ub__card { padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.ub__card.wide { grid-column: 1 / -1; }
.ub__t { font-weight: 700; margin-bottom: 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ub__chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ub__axis { stroke: var(--line-2); stroke-width: 1; }
.ub__grid-l { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.ub__tick { font-size: 11px; fill: var(--ink-3); font-family: var(--font); }
.ub__bar rect:nth-child(2) { fill: var(--primary); opacity: .8; transition: opacity .15s; }
.ub__bar:hover rect:nth-child(2) { opacity: 1; }
.ub__peak { margin-top: 6px; }
.ub__rows { display: grid; gap: 10px; }
.ub__row { display: grid; grid-template-columns: minmax(90px, 40%) 1fr 42px; align-items: center; gap: 10px; font-size: 13px; }
.ub__k { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub__track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ub__track i { display: block; height: 100%; border-radius: 4px; background: var(--primary); opacity: .8; }
.ub__row b { text-align: end; color: var(--ink); font-size: 13px; }
.ub__hours { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-bottom: 20px; }
.ub__h { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.ub__h i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--primary); opacity: .75; }
.ub__h:hover i { opacity: 1; }
.ub__h span { position: absolute; top: 100%; margin-top: 4px; inset-inline-start: 0; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.ub__note { margin: 0; }

/* ═══ 1.9 · home: on the phone and iPad the «today» wrappers vanish (same order as always) ═══ */

.home__today, .today__a, .today__b { display: contents; }
.intro .cascade .home__today > * > * { opacity: 0; animation: rise .7s var(--ease) forwards; animation-delay: 1.8s; }
.links .site.contact { border-style: solid; }

/* ═══ 1.10 · the computer: what is next and her day side by side, then the nearest exam, the five nearest items, the shortcuts.
   Nothing is zoomed (the pen and the mouse land exactly where they point). ═══ */

.today__t { display: none; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .main { max-width: calc(1240px + var(--side)); padding-inline: 44px; }
  .home { gap: 20px; }
  .home__today { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: stretch; }
  .today__a, .today__b { display: grid; gap: 12px; align-content: start; min-width: 0; }
  .today__a > .alert-card { height: 100%; }
  .today__b { padding: 16px 18px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
  .today__t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
  .today__t .i { color: var(--primary); }
  .today__b > section > .section-title:first-child { margin-top: 0; }
  .today__b .brief-hint { margin: 0; }
  
  .home .alert-card { max-width: none; }

/* «على الأبواب»: the five nearest, centred; the rest under «المزيد» */

  
  .soon-sec .scroller.soon { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; overflow: visible; justify-content: center; padding-inline: 0; margin-inline: 0; }
  .soon-sec .soon-card { width: auto; min-width: 0; }
  .soon-sec .soon-extra { display: none; }
  .home .links { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }}

/* ═══ 1.8 · لوحة التحكم: overview + grouped sections ═══ */
.adm-head { align-items: center; gap: 10px; }
.adm-head h1 { margin: 0; }
.adm-card { padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.adm-card__t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; margin-bottom: 10px; color: var(--ink-2); }
.adm-todo { display: grid; gap: 8px; }
.adm-todo__i { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); background: color-mix(in srgb, var(--c) 9%, var(--surface)); color: var(--ink); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.adm-todo__i:hover { background: color-mix(in srgb, var(--c) 15%, var(--surface)); }
.adm-calm { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.adm-calm .i { color: var(--ok); }
.adm-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.adm-kpi { display: grid; gap: 2px; padding: 14px 16px; border-radius: 20px; background: var(--surface-2); color: var(--ink-2); text-decoration: none; font-size: 12.5px; }
.adm-kpi b { font-size: 26px; line-height: 1.15; color: var(--ink); }
.adm-kpi:hover { background: var(--hover); }
.adm-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.adm-quick__i { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); background: color-mix(in srgb, var(--c) 11%, var(--surface)); color: var(--ink); font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; transition: transform .15s var(--spring); }
.adm-quick__i .ico-tile { background: var(--c); color: #fff; }
.adm-quick__i:active { transform: scale(.97); }
@media (min-width: 720px) {
  .adm-kpis { grid-template-columns: repeat(4, 1fr); }
  .adm-quick { grid-template-columns: repeat(4, 1fr); }}

/* ═══ the sign-in page's sky: soft drifting light and layered waves along the bottom ═══ */

.auth { --wave-1: rgba(160, 168, 232, .30); --wave-2: rgba(127, 179, 213, .30); --wave-3: rgba(255, 255, 255, .62); --wave-line: rgba(91, 91, 168, .20); --glow: rgba(255, 214, 140, .55); }

/* dark theme: the daytime sky stays a lighter blue than the night, still darker than the page */

.sky { overflow: hidden; }

/* drifting light */

.sky-stars { position: absolute; inset: 0 0 auto; width: 100%; height: 70%; fill: #fff; }
.sky-stars circle { opacity: .75; animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }

/* the waves: one band along the bottom; each layer is two identical periods and slides by exactly one (seamless on every browser) */

.sky-waves { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 96px; }

.wv { transform-box: fill-box; animation: wave-drift 40s linear infinite; will-change: transform; }
.wv-line { fill: none; stroke: var(--wave-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wv, .sky-stars circle { animation: none; }}

/* text */

@media (min-width: 720px) { .sky-waves { height: 110px; }}

/* ═══ 1.9 · panel forms: one titled card per topic, the save button always in reach ═══ */

.adm-form { display: grid; gap: 14px; }
.adm-sec { display: grid; gap: 12px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.adm-sec > h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--ink); }
.adm-sec > h3 .i { color: var(--primary); }
.adm-sec .list { margin: 0; }
.adm-sec .field { margin: 0; }
.adm-sec .hint { margin: -4px 0 0; }
.adm-save { position: sticky; bottom: calc(var(--tabbar) + var(--safe-b) + 10px); z-index: 5; display: flex; justify-content: flex-end; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
@media (min-width: 960px) { .adm-save { bottom: 16px; }}
.mode-opts { display: grid; gap: 8px; }
.mode-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.mode-opt .grow { display: grid; gap: 2px; }
.mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mode-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.mode-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.who-sees { padding: 0; }
.who-sees > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; list-style: none; }
.who-sees > summary::-webkit-details-marker { display: none; }
.who-sees[open] > summary .i:last-child { transform: rotate(180deg); }
.who-sees > .list { padding: 0 8px 10px; }
.st-adm .btn .lbl { margin-inline-start: 4px; }
@media (max-width: 719px) { .st-adm .btn .lbl { display: none; }}
.finals-wait { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 34px 18px; border-radius: var(--r-xl); background: var(--lav-soft); }
.finals-wait .i-l { width: 44px; height: 44px; color: var(--primary); }
.finals-wait b { font-size: 17px; line-height: 1.7; }

/* ═══ 1.10 · shortcuts: one calm palette (the site's own lavender for sites, its blue for numbers) ═══ */

.links .site, .links .site.contact { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.links .site:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.links .site .site__mark { background: #6E6EC0; color: #fff; box-shadow: 0 6px 14px rgba(91, 91, 168, .22); }
.links .site.contact .site__mark { background: #5F9CC4; box-shadow: 0 6px 14px rgba(79, 143, 184, .22); }
:root[data-tone="dark"] .links .site .site__mark { box-shadow: none; }

/* ═══ 1.10 · the timetable: today's date at the top, one clear sign-in bar, lectures in their course colour ═══ */
.sched-head { align-items: center; flex-wrap: wrap; row-gap: 2px; }
.notice-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -2px 6px 10px; }
.qx { display: grid; gap: 6px; }
.qx__box { min-height: 220px; line-height: 2; font-size: 14.5px; resize: vertical;
  }

/* 1.12 — today's phrase shown clearly above the box */

.qx-today { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: #E8EAF8; color: #262C48; }
:root[data-tone="dark"] .qx-today { background: #2C3060; color: #EEF0F8; }
.qx-today .ico-tile { flex: none; }
.qx-today b { display: block; font-size: 12px; opacity: .7; margin-bottom: 2px; }
.qx-today p { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.7; }
.qx__bar { display: flex; align-items: center; gap: 8px; }
.adm-save .tiny { margin-inline-end: auto; align-self: center; color: var(--warn, #C7783A); }
.sec-list { display: grid; gap: 8px; }
.sec-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); }
.sec-row .grow { display: grid; min-width: 0; }
.sec-row.off { opacity: .6; }
.about-sec { display: grid; gap: 6px; margin-top: 18px; padding: 20px 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); text-align: center; justify-items: center; }
.about-sec__label { font-size: 12px; font-weight: 700; color: var(--primary); }
.about-sec h2 { margin: 0; font-size: 19px; }
.about-sec p { max-width: 520px; line-height: 1.9; margin: 0; }
.about-sec__names { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.name-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--lav-soft); font-size: 13.5px; font-weight: 700; }
.name-chip .i { color: #E58C8C; }

/* 1.10 — «المواقع والربط»: integrations as tidy rows, the GA board inside the panel */

.int-list { display: grid; gap: 10px; }
.int-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: start; transition: border-color .2s, transform .2s; }
.int-row:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.int-row:active { transform: scale(.99); }
.int-row .grow { display: grid; gap: 2px; min-width: 0; }
.int-row__v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); text-align: start; }
.btn.danger-t { color: var(--danger); }
.ga-board { min-height: 60px; }
.ga-wait { display: flex; align-items: center; gap: 8px; padding: 18px; color: var(--soft); font-size: 14px; }
.ga-wait svg { animation: gaPulse 1.2s ease-in-out infinite; }
@keyframes gaPulse { 50% { opacity: .35; } }
.ub.ga .ub__tile.live { background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.ga-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: var(--ok); animation: gaPulse 1.6s ease-in-out infinite; }
.ga-file { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px dashed var(--line); cursor: pointer; color: var(--soft); }
.ga-file:hover { border-color: var(--primary); color: var(--primary); }
.ga-help summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); font-size: 14px; }
.ga-help ol { margin: 10px 0 8px; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .ga-dot, .ga-wait svg { animation: none; }}

/* 1.10 — the panel's overview on a phone: compact tiles */

@media (max-width: 719px) {/* the overview on a phone: tidy rows like «إضافة سريعة», not big tiles */
  .adm-kpi { padding: 12px 14px; }
  .adm-kpi b { font-size: 22px; }
  .adm-quick__i { min-height: 52px; padding: 8px 10px; font-size: 13px; }}
.ub.ga .ub__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .ub.ga .ub__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }}

/* her own phrase: its own short band under the welcome, in the same colours, gently moving */

.mine-line { position: relative; overflow: hidden; margin: 0; padding: 12px 18px 12px 44px; border-radius: 20px; color: #262C48; border: 1px solid rgba(91, 91, 168, .12);
  background: #E4E6F8; }
.mine-line.is-night, :root[data-tone="dark"] .mine-line { color: #EEF0F8; border-color: transparent; background: #2E3364; }
.mine-line blockquote { margin: 0; font-size: 15.5px; line-height: 1.7; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mine-line.sm blockquote { font-size: 14px; }
.mine-line.xs blockquote { font-size: 12.5px; line-height: 1.65; }
.mine-line__mark { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-38%); font-size: 40px; line-height: 1; font-family: Georgia, serif; color: #9C8FD8; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .mine-line { animation: none; }}
@media (min-width: 960px) { .mine-line { padding: 14px 24px 14px 56px; } .mine-line blockquote { font-size: 17px; }}

/* 1.11 — «على الأبواب»: whole cards only (2 on a phone, 3 on a tablet), sliding card by card */

.soon-card__t { min-height: 0; }
@media (max-width: 959px) {
  .scroller.soon { scroll-snap-type: x mandatory; gap: 10px; }
  .scroller.soon > .soon-card { flex: 0 0 calc((100% - 10px) / 2); width: auto; min-width: 0; scroll-snap-align: start; padding: 12px; }
  .soon-sec .soon-extra { display: grid; }}
@media (min-width: 600px) and (max-width: 959px) { .scroller.soon > .soon-card { flex-basis: calc((100% - 20px) / 3); }}

/* 1.11 — shortcuts: each in one of the site's colours, a little smaller */

.links .site .site__mark, .links .site.contact .site__mark { background: var(--c); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 30%, transparent); }
.links .site { padding: 11px 6px 10px; gap: 7px; }
.links .site .site__mark { width: 44px; height: 44px; border-radius: 14px; font-size: 11.5px; }
.links .site .site__mark .i { width: 22px; height: 22px; }
.links .site__t { font-size: 13px; line-height: 1.4; }
@media (max-width: 719px) { .links .site .site__mark { width: 38px; height: 38px; border-radius: 12px; font-size: 10.5px; } .links .site .site__mark .i { width: 19px; height: 19px; } .links .site__t { font-size: 12px; }}
@media (max-width: 719px) { .home .links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .links .site { padding: 10px 4px 9px; border-radius: 16px; }}
@media (max-width: 959px) { .scroller.soon { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }}
.contact-card__info { justify-content: center; }

/* 1.11 — a message's buttons side by side (approve · decline · forward) */

.msg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 719px) { .msg-acts > .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 8px; }}

/* 1.11 — panel editing: smaller, calmer text in the fields (the site itself keeps its sizes) */

.adm-form .input, .adm-form .textarea, .adm-form select { font-size: 14px; line-height: 1.75; }
.adm-form .field > label { font-size: 13px; }
.adm-form { gap: 16px; }

/* 1.11 — contact apps as small round icons (the founder's card, and the team when switched on) */

.cicon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); transition: transform .15s var(--spring), color .2s, border-color .2s; }
.cicon:hover { transform: translateY(-1px); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.cicon.chat-phone { color: #fff; background: #25A55F; border-color: #25A55F; } .cicon.chat-phone:hover { color: #fff; } .cicon.send { color: #3F7FA6; } .cicon.mail { color: #8E6CB8; }
.person-wrap { position: relative; display: grid; }
.person-wrap .person { height: 100%; }
.person__icons { position: absolute; bottom: 10px; inset-inline-end: 12px; display: flex; gap: 6px; }
.person__icons .cicon { width: 28px; height: 28px; }
.person__icons .cicon .i { width: 14px; height: 14px; }
.person-wrap:has(.person__icons) .person { padding-bottom: 46px; }

/* 1.11 — an announcement's reach */

.reach { display: grid; gap: 10px; padding: 12px 14px; }
.reach.off { opacity: .7; }
.reach__bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.reach__bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .6s var(--ease); }
.reach__f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* a choice row inside a panel card fills the width and never hides its last option */

.adm-sec > .seg { display: flex; width: 100%; }
.adm-sec > .seg > button { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 6px; font-size: 13px; }

/* 1.12 — schedule: the lecture link is a small button beside «+»; each day says its date in full; today's mark sits in the corner */

.lms-btn { background: var(--primary); color: var(--on-primary); }
.lms-btn:hover { background: color-mix(in srgb, var(--primary) 88%, #000); color: var(--on-primary); }
.life-in { display: flex; gap: 10px; }
.life-in label { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 13px; color: var(--ink-2); }
.life-in .input { width: 100%; max-width: 90px; text-align: center; }

/* her own phrase: centred in its band */

.mine-line { text-align: center; padding-inline: 44px; }
.mine-line blockquote { margin-inline: auto; }
@media (min-width: 960px) { .mine-line { padding-inline: 56px; }}

/* «القادم» and «يومك»: the same size side by side; today's lectures listed together */

@media (min-width: 720px) {
  .home__today { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
  .today__a, .today__b { display: grid !important; min-width: 0; }
  .today__a > * { height: 100%; }
  .today__b { padding: 16px 18px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); align-content: start; gap: 10px; }}
.next-card { display: grid; gap: 10px; align-content: start; }
.next-card__h { display: flex; align-items: center; gap: 10px; }
.next-card__h b { font-size: 15px; }
.next-card__list { display: grid; gap: 8px; }
.next-lec { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); color: var(--ink); text-decoration: none; min-width: 0; }
.next-lec.live { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent); }
.next-lec .grow { display: grid; min-width: 0; }
.next-lec__t { display: grid; justify-items: center; min-width: 58px; padding-inline-end: 10px; border-inline-end: 1px dashed color-mix(in srgb, var(--c) 40%, var(--line)); line-height: 1.3; }
.next-lec__t b { font-size: 14px; color: var(--c); filter: saturate(1.2) brightness(.85); }
.next-lec__t small { font-size: 11px; color: var(--ink-3); }
.next-lec .pill { flex: none; font-variant-numeric: tabular-nums; }
.next-card__go { justify-self: start; }

/* ═══ 1.13 · an exam's details: start and end on one coloured line, the countdown in the middle; each part in its own frame ═══ */

.xline { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 12px; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--c) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); }
.xline__end { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 10px 6px; border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(38, 44, 72, .06); }
.xline__end .tiny { display: inline-flex; align-items: center; gap: 4px; }
.xline__end b { font-size: 13.5px; }
.xline__end .num { font-size: 13px; color: var(--c); font-weight: 700; filter: saturate(1.2) brightness(.85); }
.xline__mid { position: relative; grid-column: 1 / -1; grid-row: 2; display: grid; place-items: center; }
.xline__mid i { position: absolute; inset-inline: 12%; top: 50%; height: 4px; border-radius: 4px; transform: translateY(-50%); background: color-mix(in srgb, var(--c) 55%, var(--line)); opacity: .85; }
.xline__cd { position: relative; z-index: 1; }
.xline__cd .pill { font-size: 12px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 8%, var(--surface)); font-variant-numeric: tabular-nums; }
.detail .facts { display: grid; gap: 8px; }
.detail .fact { padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--c); }
.xline::before { content: ""; grid-column: 1 / -1; grid-row: 1; align-self: center; justify-self: center; width: 20px; height: 2px; background: color-mix(in srgb, var(--c) 45%, var(--line)); }
.xline__end:first-of-type { grid-column: 1; grid-row: 1; } .xline__end:last-of-type { grid-column: 2; grid-row: 1; }

/* ═══ 1.14 · schedule (as before, tidied): the week's range once, days as clear chips, headings «الأحد 11» ═══ */

.week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 18px; background: var(--surface-2); }
.week-nav__t { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; min-height: 40px; text-align: center; }
.week-nav__t b { font-size: 16px; }
.week-nav__t button.pill { border: 0; cursor: pointer; font: inherit; font-size: 12px; background: var(--surface); color: var(--primary); }

/* an exam's details take the course colour (no pink wash) */

.xline { background: color-mix(in srgb, var(--c) 7%, var(--surface)); }

/* 1.14 — quick add: up to six side by side on a computer */

@media (min-width: 960px) { .adm-quick { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }}
.qp .icon-btn.sm[disabled] { opacity: .3; }

/* 1.14 — the usage board: calm sizes (charts never grow past a comfortable width, tiles smaller) */

.ub__chart svg { max-width: 620px; margin-inline: auto; max-height: 150px; }
.ub__tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ub__tile { padding: 10px 12px; border-radius: 14px; }
.ub__tile b { font-size: 20px; }
.ub__card { padding: 14px; }
@media (min-width: 960px) { .ub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* «القادم» and «يومك»: exactly the same height */

@media (min-width: 720px) { .today__a { align-content: stretch !important; grid-template-rows: 1fr; } .today__a > * { height: auto !important; align-self: stretch; }}

/* ═══ 1.15 · «على الأبواب»: each card breathes — kind, title, course, then the time and the countdown on their own footer ═══ */

.soon-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.soon-card__t { margin: 0; min-height: 0; }
.soon-card__foot { display: grid; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, var(--line)); }
.soon-card__when { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); }
.soon-card__when > .i { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 10px; color: color-mix(in srgb, var(--c) 75%, var(--ink)); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.soon-card__when > span { display: grid; min-width: 0; line-height: 1.35; }
.soon-card__when small { font-size: 11px; color: var(--ink-3); }
.soon-card__when b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soon-card__foot .pill { justify-self: start; max-width: 100%; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══ 1.15 · الدرجات: one clear total with a bar built from every activity, then each kind in its own card ═══ */

.gsum { display: grid; gap: 14px; padding: 16px; border-radius: 22px; background: color-mix(in srgb, var(--c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); }
.gsum__top { display: flex; align-items: center; gap: 12px; }
.gsum__top .grow { display: grid; gap: 2px; min-width: 0; }
.gsum__l { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.gsum__v { font-size: 34px; font-weight: 700; line-height: 1.15; }
.gsum__v small { font-size: 16px; color: var(--ink-3); }
.gsum__s { font-size: 12px; color: var(--ink-2); }
.gsum__pct { flex: none; display: grid; justify-items: center; gap: 0; min-width: 78px; padding: 10px 12px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(38, 44, 72, .06); }
.gsum__pct b { font-size: 22px; line-height: 1.2; color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
.gsum__pct b small { font-size: 12px; }
.gsum__pct span { font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.gsum__bar { display: flex; gap: 3px; height: 12px; }
.gsum__bar > span { position: relative; min-width: 6px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--k) 16%, var(--surface-2)); }
.gsum__bar > span i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--k); }
.gsum__keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--ink-2); }
.gsum__keys span { display: inline-flex; align-items: center; gap: 6px; }
.gsum__keys i { width: 8px; height: 8px; border-radius: 3px; background: var(--k); }
.ggroup { margin-top: 12px; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.ggroup.self { opacity: .9; background: var(--surface-2); }
.ggroup__h { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; }
.ggroup__h b { font-size: 14.5px; }
.ggroup__h .num { font-weight: 700; font-size: 15px; }
.ggroup__h .num small { font-size: 12px; color: var(--ink-3); }
.ggroup__list { display: grid; gap: 6px; }
.gi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--surface-2); font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.gi:hover { background: var(--hover); }
.gi__t { flex: 1; min-width: 0; display: grid; gap: 6px; }
.gi__t b { font-size: 13.5px; font-weight: 700; }
.gi__bar { display: block; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--k) 14%, var(--surface)); overflow: hidden; }
.gi__bar i { display: block; height: 100%; border-radius: inherit; background: var(--k); }
.gi.todo .gi__t b { color: var(--ink-3); }
.gi__v { flex: none; display: inline-flex; align-items: baseline; gap: 3px; }
.gi__v b { font-size: 17px; }
.gi__v small { font-size: 12px; color: var(--ink-3); }
.gi__add { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft); }
.gi__n { flex: none; font-size: 12px; color: var(--ink-3); }
@media (min-width: 960px) { .gsum { padding: 20px 22px; } .ggroup__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* ═══ 1.15 · «بداية فصل دراسي جديد»: a calm red frame, what goes and what stays side by side ═══ */

.term-zone { margin-top: 18px; border: 1.5px solid color-mix(in srgb, var(--danger) 35%, var(--line)); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.term-zone h3 { color: var(--danger); }
.term-zone p { margin: 0 0 10px; line-height: 1.8; }
.term__warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.7; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.term__warn .i { flex: none; margin-top: 4px; }
.term .label { margin-bottom: 6px; }
.term__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.term__list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.term__list.off .i { color: var(--danger); }
.term__list.keep .i { color: var(--ok); }
.term__ok { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.term__ok input { width: 20px; height: 20px; accent-color: var(--danger); flex: none; }

/* ═══ 1.18 · the welcome: one calm colour that follows the hour (never pale: the text stays white and clear), no gradients;
   the date as a small calendar leaf, and a quiet sea of three wave layers drifting along the bottom ═══ */
.welcome { --wc: #4C6BB0; position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; padding: 16px 18px 44px; border-radius: 22px; color: #fff; background: var(--wc);
  box-shadow: 0 10px 26px -18px rgba(30, 34, 70, .6); transition: background-color .6s; }
.welcome.tn-dawn { --wc: #4E4A8E; }
.welcome.tn-morning { --wc: #4A6CB4; }
.welcome.tn-noon { --wc: #3878AE; }
.welcome.tn-afternoon { --wc: #5A5CA8; }
.welcome.tn-sunset { --wc: #6A4F92; }
.welcome.tn-night { --wc: #262B5A; }
:root[data-tone="dark"] .welcome { box-shadow: none; }
.welcome__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.welcome__who { display: grid; min-width: 0; }
.welcome__hello { font-size: 13px; opacity: .88; }
.welcome__name { margin: 0; font-size: 26px; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
/* the date: a little calendar — the weekday on its band, then two floors: the Gregorian date and the Hijri date */
.welcome__leaf { flex: none; display: grid; min-width: 118px; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2); line-height: 1.15; }
.leaf__wd { padding: 3px 10px; background: rgba(255, 255, 255, .2); font-size: 11.5px; font-weight: 700; text-align: center; }
.leaf__row { display: flex; align-items: center; gap: 7px; padding: 5px 10px; }
.leaf__row + .leaf__row { border-top: 1px dashed rgba(255, 255, 255, .25); }
.leaf__row b { font-size: 20px; min-width: 24px; text-align: center; }
.leaf__row > span { display: grid; font-size: 11px; font-weight: 700; white-space: nowrap; }
.leaf__row small { font-size: 10px; font-weight: 400; opacity: .82; }
/* the day's phrase: its frame is as wide as its words */
.welcome__quote { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: flex-start; gap: 7px; width: fit-content; max-width: 100%; margin: 0; padding: 6px 12px; border-radius: 14px;
  font-size: 12.5px; line-height: 1.7; color: #fff; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18); }
.welcome__quote .i { flex: none; margin-top: 4px; opacity: .8; }
/* the sea: three layers, each its own length, pace and depth; it rises a little above the edge and breathes slowly */
.welcome__sea { position: absolute; z-index: -1; inset-inline: 0; bottom: 0; height: 40px; animation: sea-breathe 9s ease-in-out infinite; transform-origin: 50% 100%; }
.welcome__sea svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sea-a path { fill: rgba(255, 255, 255, .08); }
.sea-b path { fill: rgba(255, 255, 255, .1); }
.sea-c path { fill: rgba(255, 255, 255, .14); }
@keyframes sea-breathe { 50% { transform: scaleY(1.12); } }
@media (prefers-reduced-motion: reduce) { .welcome__sea { animation: none; }}
@media (min-width: 720px) {
  .welcome { gap: 12px; padding: 20px 26px 54px; border-radius: 24px; }
  .welcome__hello { font-size: 14px; }
  .welcome__name { font-size: 32px; }
  .welcome__leaf { min-width: 140px; } .leaf__wd { font-size: 12.5px; } .leaf__row b { font-size: 24px; } .leaf__row > span { font-size: 12px; } .leaf__row small { font-size: 11px; }
  .welcome__quote { font-size: 13.5px; padding: 7px 14px; }
  .welcome__sea { height: 52px; }}
@media (min-width: 960px) { .welcome { padding: 22px 32px 58px; } .welcome__name { font-size: 34px; }}

/* ═══ 1.16 · the course page: a light card in the course colour — name, doctor and details as one tidy block —
   and its tools as one calm bar of five (number over name), never tall boxes ═══ */

.ccard { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 14px; margin-bottom: 18px; padding: 16px; border-radius: 24px;
  background: color-mix(in srgb, var(--c) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 24%, var(--line)); }
.ccard__head { display: flex; align-items: flex-start; gap: 12px; }
.ccard__badge { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: var(--c); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.ccard__id { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ccard__id h1 { margin: 0; font-size: 20px; line-height: 1.35; text-wrap: balance; }
.ccard__doc { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ccard__own { color: color-mix(in srgb, var(--c) 70%, var(--ink)); font-weight: 700; }
.ccard__meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.ccard__meta > span { unicode-bidi: isolate; }
.ccard__meta > i { font-style: normal; margin-inline: 7px; opacity: .7; }
.ccard__time { display: inline-flex; align-items: center; gap: 4px; }
.ccard__time .i-s { width: 13px; height: 13px; }
@media (max-width: 719px) { .ccard__meta > i:has(+ .ccard__time) { display: none; } .ccard__time { flex-basis: 100%; margin-top: 2px; }}
.cdock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 16%, var(--line)); box-shadow: 0 1px 2px rgba(38, 44, 72, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cdock__c { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 58px; padding: 7px 2px; border: 0; border-radius: 14px; background: none;
  font: inherit; color: var(--ink); text-decoration: none; text-align: center; cursor: pointer; transition: background .15s, transform .15s var(--spring); }
.cdock__c + .cdock__c::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 1px; background: var(--line); }
.cdock__c:hover { background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.cdock__c:active { transform: scale(.95); }
.cdock__c.off { opacity: .55; cursor: default; }
.cdock__v { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; line-height: 1; color: color-mix(in srgb, var(--c) 68%, var(--ink)); white-space: nowrap; }
.cdock__v b { font-size: 17px; }
.cdock__v b small { font-size: 11px; font-weight: 700; opacity: .7; }
.cdock__v > small { font-size: 10.5px; font-weight: 700; opacity: .8; }
.cdock__ring { width: 20px; height: 20px; transform: rotate(-90deg); }
.cdock__ring circle { fill: none; stroke-width: 3.5; }
.cdock__ring .t { stroke: color-mix(in srgb, var(--c) 20%, var(--surface)); }
.cdock__ring .v { stroke: var(--c); stroke-linecap: round; }
.cdock__add { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--c); }
.cdock__add .i-s { width: 13px; height: 13px; }
.cdock__l { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.cdock__l .i-s { width: 12px; height: 12px; flex: none; }
@media (max-width: 479px) { .cdock__l .i-s { display: none; }}
@media (max-width: 359px) { .cdock__v b { font-size: 15px; } .cdock__l { font-size: 10px; }}
@media (min-width: 720px) {
  .ccard { padding: 20px 22px; gap: 16px; }
  .ccard__badge { width: 52px; height: 52px; border-radius: 17px; }
  .ccard__id h1 { font-size: 24px; }
  .ccard__meta { font-size: 12.5px; }
  .cdock__c { min-height: 64px; }
  .cdock__v b { font-size: 19px; }
  .cdock__l { font-size: 12px; }}

/* ═══ 1.16 · the control panel, laid out again: one bar of sections (wraps, nothing hidden), the overview in clear rows,
   every form card the same width and rhythm ═══ */
.adm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 20px; padding: 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.adm-bar__sep { width: 1px; height: 20px; margin-inline: 2px; background: var(--line-2); }
.adm-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 999px; color: var(--ink-2); background: var(--surface-2); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.adm-chip .i-s { color: var(--c, var(--primary)); }
.adm-chip:hover { background: var(--hover); color: var(--ink); }
.adm-chip.on { background: var(--primary); color: var(--on-primary); }
.adm-chip.on .i-s { color: inherit; }
.adm-chip .badge { position: static; min-width: 18px; height: 18px; font-size: 11px; }
@media (max-width: 719px) {
  /* phones: the sections as an even grid (three across), so the bar stays short and nothing scrolls sideways */
  .adm-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 6px; }
  @media (min-width: 380px) { .adm-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
  .adm-bar__sep { display: none; }
  .adm-chip { justify-content: center; flex-direction: column; gap: 3px; min-height: 54px; padding: 6px 3px; border-radius: 14px; font-size: 10.5px; text-align: center; white-space: normal; line-height: 1.25; }
  .adm-chip .i-s { width: 18px; height: 18px; }
  .adm-chip .badge { position: absolute; top: 4px; inset-inline-end: 6px; }}
@media (min-width: 960px) { .adm-bar { position: sticky; top: calc(var(--top) + 8px); z-index: 6; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }}
.adm-main { display: grid; gap: 16px; min-width: 0; padding-bottom: 40px; }
.adm-main > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* the overview */
.adm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: 12.5px; }
.adm-kpi .i-s { grid-row: 1 / 3; width: 36px; height: 36px; padding: 9px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.adm-kpi b { font-size: 22px; line-height: 1.15; color: var(--ink); }
.adm-kpi:hover { background: var(--hover); }
.adm-duo { display: grid; gap: 16px; align-items: start; }
.adm-card { padding: 16px; }
.adm-card__t { display: flex; align-items: center; gap: 8px; }
.adm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adm-quick__i { min-height: 52px; font-size: 13px; }
@media (min-width: 720px) { .adm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
@media (min-width: 720px) { .adm-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@media (min-width: 1100px) { .adm-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
.adm-attn { margin: 0 0 16px; }
/* section forms: cards of one width, in two columns on a wide screen, the save bar across the bottom */
.adm-form { gap: 16px; }
@media (min-width: 1100px) {
  .adm-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .adm-form > .adm-save, .adm-form > .term-zone, .adm-form > .wide { grid-column: 1 / -1; }}
.adm-sec { padding: 18px; gap: 14px; }
.adm-sec > h3 { padding-bottom: 10px; border-bottom: 1px solid var(--line); }

/* ═══ 1.16 · more air: the pages breathe — wider gaps between blocks, more room under each title, and on a wide screen the content starts a little lower ═══ */
.home { gap: 20px; }
.page-head { margin-bottom: 22px; }
.section-title { margin-top: 30px; margin-bottom: 14px; }
.home .section-title { margin-top: 6px; }
@media (min-width: 720px) { .home { gap: 26px; } .page-head { margin-bottom: 26px; }}
@media (min-width: 960px) {
  .main { padding-top: calc(var(--top) + 26px) !important; padding-bottom: 72px !important; }
  .home { gap: 30px; }
  .page-head { margin-top: 4px; margin-bottom: 30px; }
  .section-title { margin-top: 38px; margin-bottom: 16px; }
  .tlist, .list { gap: 10px; }}
@media (max-width: 719px) { .adm-kpi { padding: 10px 12px; } .adm-kpi b { font-size: 19px; } .adm-kpi .i-s { width: 30px; height: 30px; padding: 7px; }}

/* ═══ 1.17 · «دفاتري» beside the websites and numbers: small covers in the same tiles ═══ */

/* ═══ 1.17 · «على الأبواب»: the course first and in its colour, then what it is as a clear coloured tag, then the title; the time at the foot ═══ */
.soon-card { gap: 7px; border-top: 0; box-shadow: var(--shadow-1); }
.soon-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: inherit; background: var(--c); }
.soon-card { position: relative; overflow: hidden; }
.soon-card__course { font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--c) 72%, var(--ink)); max-width: 100%; }
.soon-card__kind { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--k) 62%, var(--ink)); background: color-mix(in srgb, var(--k) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); }
.soon-card__kind .i-s { width: 13px; height: 13px; }
.soon-card__t { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.soon-card__when > .i { color: color-mix(in srgb, var(--k) 75%, var(--ink)); background: color-mix(in srgb, var(--k) 13%, var(--surface)); }
.soon-card__foot { border-top-color: color-mix(in srgb, var(--k) 30%, var(--line)); }

/* ═══ 1.17 · the schedule as «مسار الأسبوع»: five lanes on one shared clock; every lecture is a capsule at its real time and length,
   today's lane is lit, a needle marks «now», the next lecture is told in one line on top ═══ */
.sched-next { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--c); color: var(--ink); text-decoration: none; }
.sched-next__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.sched-next .grow { display: grid; min-width: 0; }
.sched-next small { font-size: 11.5px; color: var(--ink-3); font-weight: 700; }
.sched-next b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-next__when { display: grid; justify-items: end; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.sched-next__when b { font-size: 13px; }
.sched-next .pill { flex: none; }
@media (max-width: 479px) { .sched-next { flex-wrap: wrap; row-gap: 8px; } .sched-next .grow { flex-basis: calc(100% - 26px); } .sched-next__when { justify-items: start; } .sched-next .pill { margin-inline-start: auto; }}
.track { --dayw: 58px; display: grid; gap: 8px; padding: 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.track__clock { display: grid; grid-template-columns: var(--dayw) minmax(0, 1fr); gap: 8px; height: 18px; }
.track__hours { position: relative; }
.track__hours i { position: absolute; top: 0; translate: 50% 0; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.track__hours i:first-child { translate: 0 0; } .track__hours i:last-child { translate: 100% 0; }
.track__row { display: grid; grid-template-columns: var(--dayw) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.track__day { display: grid; place-content: center; justify-items: center; gap: 0; padding: 6px 0; border-radius: 14px; background: var(--surface-2); line-height: 1.2; }
.track__day span { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.track__day b { font-size: 18px; color: var(--ink); }
.track__row.today .track__day { background: var(--primary); }
.track__row.today .track__day span, .track__row.today .track__day b { color: var(--on-primary); }
.track__row.past { opacity: .62; }
.track__lane { position: relative; min-height: 60px; border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.track__row.today .track__lane { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 30%, transparent); }
.track__tick { position: absolute; inset-block: 8px; width: 1px; background: var(--line); }
.track__now { position: absolute; inset-block: 0; width: 2px; margin-inline-start: -1px; background: #E0566F; z-index: 3; }
.track__now::before { content: ""; position: absolute; top: -1px; inset-inline-start: -4px; width: 10px; height: 10px; border-radius: 50%; background: #E0566F; }
.lane__off, .lane__free { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.lane__off { color: color-mix(in srgb, var(--k-forum, #6DBA9C) 70%, var(--ink)); font-weight: 700; }
.tcap { position: absolute; z-index: 2; top: calc(6px + var(--row) * (100% - 12px) / var(--rows)); height: calc((100% - 12px) / var(--rows) - 2px); min-width: 54px; display: grid; align-content: center; gap: 0; padding: 4px 8px; border-radius: 11px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--ink); text-decoration: none; transition: transform .15s var(--spring); }
.tcap:active { transform: scale(.97); }
.tcap__t { position: relative; font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcap__s { position: relative; font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tcap__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: color-mix(in srgb, var(--c) 30%, transparent); }
.tcap.live { border-width: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.tcap.done { opacity: .55; }
@media (min-width: 720px) {
  .track { --dayw: 76px; gap: 10px; padding: 16px; }
  .track__lane { min-height: 72px; }
  .track__day b { font-size: 21px; }
  .tcap { padding: 6px 12px; border-radius: 13px; }
  .tcap__t { font-size: 13.5px; } .tcap__s { font-size: 11.5px; }
  .track__hours i { font-size: 11.5px; }}
@media (max-width: 719px) {
  .track__lane { min-height: 66px; }
  .tcap { padding: 4px 6px; border-radius: 10px; }
  .tcap__t { font-size: 11px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tcap__s { font-size: 10px; }
  .sched-next b { white-space: normal; }}
/* 1.17 · small phones: the countdown of the next-lecture card drops under the name so the name keeps its width */
@media (max-width: 479px) {
  .alert-card { flex-wrap: wrap; row-gap: 10px; }
  .alert-card > .grow { flex: 1 1 0; min-width: 0; }
  .alert-card__cd { flex-basis: 100%; justify-items: start; padding-inline-start: 56px; }}

/* ═══ 1.18 · home: دفاتري · مواقع تهمك · أرقام تهمك · التقويم الأكاديمي — four buttons in one bar; tiles centred, any number of them ═══ */
.sites-block { margin-top: 6px; }
.sites-seg { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 18px; background: var(--surface-3); }
.sites-seg > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 8px 4px; border-radius: 14px; font-size: 12px; line-height: 1.3; color: var(--ink-2); text-align: center; transition: background .2s, color .2s; }
.sites-seg > .on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-1); }
.sites-seg > * .i { color: var(--primary); }
@media (min-width: 720px) { .sites-seg { max-width: 760px; margin-inline: auto; } .sites-seg > * { flex-direction: row; gap: 7px; font-size: 13.5px; padding: 9px 8px; }}
.home .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.home .links > * { flex: 0 0 calc((100% - 30px) / 4); min-width: 0; }
@media (min-width: 720px) { .home .links > * { flex-basis: 120px; }}
.sites-none { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 14px; border-radius: 16px; background: var(--surface-2); color: var(--ink-3); font-size: 13px; }
.sites-none a { color: var(--primary); font-weight: 700; }
/* «الإعدادات» for the team: two large buttons */
.set-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 6px; }
.set-choice__b { position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px 10px 16px; border-radius: 22px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); text-align: center; color: var(--ink); }
.set-choice__b b { font-size: 15px; }
.set-choice__b .badge { position: absolute; top: 10px; inset-inline-end: 10px; }
.set-choice__b:active { transform: scale(.97); }
/* 1.18 · «المحاضرة القادمة» and its kin: a clear label in a very faint frame */
.ac-label { display: inline-flex; align-items: center; width: fit-content; padding: 1px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c, var(--primary)) 22%, var(--line)); background: color-mix(in srgb, var(--c, var(--primary)) 5%, var(--surface)); color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.7; }
.alert-card .ac-label { margin-bottom: 4px; }
.next-card__h .ac-label { font-size: 13px; }
/* «يومك» on a phone: no instruction line — each card shows its own small arrow, so it reads as something to open */
.brief__go { display: none; }
@media (max-width: 719px) {
  .brief-hint { display: none; }
  .today__t { display: flex; align-items: center; gap: 8px; margin: 2px 2px 8px; font-weight: 700; font-size: 14.5px; }
  .today__t .i { color: var(--primary); }
  .brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .brief__f { justify-content: flex-start; border-radius: 16px; min-height: 46px; padding: 8px 12px; }
  .brief__f > span { flex: 1; min-width: 0; text-align: start; }
  .brief__go { display: block; flex: none; opacity: .55; }}
/* 1.18 · the schedule: the next lecture's day and date above its name; each capsule shows when it starts and when it ends */
.sched-next__date { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); font-weight: 700; margin-bottom: 1px; }
.sched-next__date em { font-style: normal; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 70%, var(--ink)); line-height: 1.7; }
.sched-next__when span { color: var(--ink-3); }
.tcap__s { display: flex; align-items: center; gap: 4px; text-overflow: clip; }
.tcap__s > i { flex: 1; min-width: 6px; max-width: 34px; height: 1px; background: currentColor; opacity: .35; }
.tcap__end { opacity: .8; }
.tcap__n { position: relative; font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 719px) {
  .tcap__s { gap: 0; } .tcap__s > i { display: none; } .tcap__end::before { content: "–"; margin-inline: 2px; } .tcap__end small { display: none; }}
@media (max-width: 719px) { .tcap { padding-inline: 5px; } .tcap__s { font-size: 9.5px; letter-spacing: -.1px; } .tcap__end::before { margin-inline: 1px; }}
/* 1.19 · the welcome breathes: the greeting, the name and the phrase spread over the same height (the card does not grow) */
.welcome { gap: 14px; padding-bottom: 40px; }
.welcome__who { gap: 4px; }
.welcome__hello { line-height: 1.3; }
@media (min-width: 720px) { .welcome { gap: 16px; padding-bottom: 50px; }}
/* 1.19 · her own phrase in a light weight (not bold) */
.mine-line blockquote { font-weight: 400; }
.welcome__quote { font-weight: 400; }
/* 1.19 · the schedule has colour: the next lecture in a light cool wash of its course colour with a clear frame;
   each day's lane and its day tile take a soft tint of that day's course */
.sched-next { background: color-mix(in srgb, var(--c) 9%, var(--surface)); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--c) 70%, transparent); }
:root[data-tone="dark"] .sched-next { background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.track__row.has .track__lane { background: color-mix(in srgb, var(--lc) 7%, var(--surface-2)); }
.track__row.has .track__day { background: color-mix(in srgb, var(--lc) 14%, var(--surface-2)); }
.track__row.has .track__day span { color: color-mix(in srgb, var(--lc) 65%, var(--ink)); }
.track__row.today .track__day { background: var(--primary); }
.track__row.today .track__day span { color: var(--on-primary); }
.tcap { background: color-mix(in srgb, var(--c) 28%, var(--surface)); border-color: color-mix(in srgb, var(--c) 70%, transparent); }
/* 1.20 · دفاتري (three, then «فتح الكل») and التقويم (three, then «عرض الكل»); on a computer the tiles share the whole width */
.links.books .site { padding-top: 12px; }
.links.books .cover-nb.mini, .links.books .cover-file.mini { width: 40px; height: 52px; max-width: none; aspect-ratio: auto; }
.home .links .site.more { border-style: dashed; background: transparent; box-shadow: none; color: var(--ink-2); }
.home .links .site.more .site__mark { background: var(--surface-3); color: var(--primary); box-shadow: none; }
.site__s { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.site__pin { position: absolute; top: 6px; inset-inline-start: 6px; color: var(--primary); }
.links.cal .site__t { font-size: 12px; }
@media (min-width: 720px) {
  .sites-seg { max-width: none; }
  .home .links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .home .links > * { min-width: 0; }
  .home .links .site { padding: 16px 10px 14px; justify-items: center; text-align: center; }}
.pin-row { padding-inline: 0; min-height: 48px; }