/* ══════════════════════════════════════════════════════════════════
   L7N Flow — نظام التصميم v11
   الاتجاه: حبر ونحاس. تحريري ومؤسسي.
   بلا توهّج نيوني، بلا زجاج، بلا تدرّج على النص، بلا إيموجي كأيقونات.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* الأسطح: فحمي دافئ، لا أزرق */
    --ink:        #0E1116;
    --ink-2:      #12161D;
    --surface:    #171C24;
    --surface-2:  #1E242E;
    --surface-3:  #262D39;
    --rule:       #29313D;
    --rule-soft:  #1F2631;

    /* النبرة: نحاس أساسي */
    --brass:      #C8973F;
    --brass-hi:   #E0B45F;
    --brass-dim:  #8A6828;
    --sage:       #4E9585;
    --slate-blue: #5B7FBF;
    --clay:       #B5573F;

    /* النص: أبيض دافئ لا مزرقّ */
    --fg:   #E9E6E0;
    --fg-2: #B9B5AD;
    --fg-3: #8A867E;
    --fg-4: #635F59;

    --up:   #4E9585;
    --down: #B5573F;

    --ff:     'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ff-num: 'IBM Plex Mono', ui-monospace, monospace;

    --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 18px; --r-pill: 999px;
    --pad: clamp(18px, 4vw, 30px);
    --head: 68px;
    --ease: cubic-bezier(.2,.6,.35,1);
    --shadow: 0 18px 44px -22px rgba(0,0,0,.85);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
    background: var(--ink);
    color: var(--fg);
    font-family: var(--ff);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, video, canvas, svg { max-width: 100%; display: block; }
::selection { background: rgba(200,151,63,.28); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 3px solid var(--ink-2); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #333c4a; background-clip: content-box; }

/* ══════════ الطباعة ══════════ */
h1, h2, h3, h4, h5 { font-weight: 500; line-height: 1.28; letter-spacing: -.022em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); letter-spacing: -.034em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.12rem, 1.8vw, 1.3rem); }
h4 { font-size: 1.02rem; }
p { text-wrap: pretty; }

.kicker {
    display: inline-block; font-size: 11.5px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase; color: var(--brass);
    padding-bottom: 13px; position: relative;
}
.kicker::after { content: ''; position: absolute; bottom: 5px; inset-inline-start: 0; width: 26px; height: 1px; background: var(--brass); }
.lead { font-size: clamp(1rem, 1.4vw, 1.14rem); color: var(--fg-2); line-height: 1.9; max-width: 60ch; font-weight: 300; }
.prose { color: var(--fg-2); line-height: 2; font-weight: 300; }
.prose p + p { margin-top: 1.05em; }
.small { font-size: 13.5px; }
.hint { font-size: 12.5px; color: var(--fg-4); line-height: 1.7; }
.num { font-family: var(--ff-num); font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: -.02em; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.dim { color: var(--fg-3); }
.brass { color: var(--brass); }
.center { text-align: center; }

/* ══════════ التخطيط ══════════ */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(18px, 5vw, 40px); }
.narrow { max-width: 780px; }
.band { padding-block: clamp(52px, 8vw, 104px); }
.rule-top { border-top: 1px solid var(--rule-soft); }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.wrapf { flex-wrap: wrap; }
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split-a { align-items: center; }
.hidden { display: none !important; }
.mt1{margin-top:8px}.mt2{margin-top:18px}.mt3{margin-top:30px}.mt4{margin-top:48px}
.mb1{margin-bottom:8px}.mb2{margin-bottom:18px}.mb3{margin-bottom:30px}.mb4{margin-bottom:48px}

/* ══════════ الرأس ══════════ */
.masthead {
    position: sticky; top: 0; z-index: 80; overflow: visible;
    background: rgba(14,17,22,.9);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--rule-soft);
}
/* ⚠️ كان اسمه `bar` — وهو نفس اسم صنف شريط التقدّم أدناه، الذي يحمل
   `overflow: hidden` و`border-radius: 99px`. فكان الرأس يقصّ كل ما
   ينسدل منه: قائمة الحساب ولوحة الإشعارات تُفتحان فعلاً ثم تُقصّان
   فلا يُرى شيء. صار له اسمه الخاص، فلا تصادم بعد اليوم. */
.masthead .topbar { height: var(--head); display: flex; align-items: center; gap: 26px;
                    overflow: visible; border-radius: 0; background: none; }

.wordmark { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.wordmark svg { width: 30px; height: 30px; flex: 0 0 30px; }
.wordmark .wm-t { display: flex; flex-direction: column; line-height: 1.15; }
.wordmark b { font-size: 16.5px; font-weight: 600; letter-spacing: .01em; direction: ltr; }
.wordmark span { font-size: 10.5px; color: var(--fg-4); letter-spacing: .13em; font-weight: 300; }

.mainnav { display: flex; align-items: center; gap: 3px; margin-inline-start: auto; }
.mainnav > a {
    padding: 8px 14px; font-size: 14.5px; font-weight: 300; color: var(--fg-2);
    border-radius: var(--r-2); transition: color .16s, background .16s; white-space: nowrap;
}
.mainnav > a:hover { color: var(--fg); background: rgba(255,255,255,.045); }
.mainnav > a.on { color: var(--brass); }

.tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; position: relative; }
.icon-b {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r-2);
    border: 1px solid var(--rule); background: transparent; color: var(--fg-2);
    display: grid; place-items: center; cursor: pointer; transition: .16s; position: relative;
}
.icon-b:hover { background: var(--surface-2); color: var(--fg); border-color: var(--surface-3); }
.icon-b svg { width: 17px; height: 17px; }
.pip {
    position: absolute; top: -4px; inset-inline-end: -4px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 99px; background: var(--clay); color: #fff; font-size: 10.5px; font-weight: 500;
    display: grid; place-items: center; border: 2px solid var(--ink); font-family: var(--ff-num);
}
.langsel { display: flex; border: 1px solid var(--rule); border-radius: var(--r-2); overflow: hidden; height: 38px; }
.langsel span { padding: 0 11px; display: grid; place-items: center; font-size: 11.5px; font-weight: 500; color: var(--fg-4); letter-spacing: .04em; }
.langsel span.on { background: var(--brass); color: #17120A; }

.acct { position: relative; }
.acct-btn {
    display: flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px; height: 38px;
    border: 1px solid var(--rule); border-radius: var(--r-2); background: transparent; cursor: pointer; transition: .16s;
}
.acct-btn:hover { background: var(--surface-2); border-color: var(--surface-3); }
.chip-av {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: var(--r-1);
    display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: #17120A;
    background: var(--brass); overflow: hidden;
}
.chip-av img { width: 100%; height: 100%; object-fit: cover; }
.acct-btn .nm { font-size: 13.5px; color: var(--fg-2); max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { width: 8px; height: 8px; border-inline-end: 1.5px solid var(--fg-4); border-bottom: 1.5px solid var(--fg-4); transform: rotate(45deg) translateY(-2px); }

.menu {
    position: absolute; top: calc(100% + 9px); inset-inline-end: 0; min-width: 236px; z-index: 90;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3);
    box-shadow: var(--shadow); overflow: hidden; padding: 6px;
}
.menu a, .menu button {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: start;
    padding: 10px 12px; border-radius: var(--r-2); font-size: 14px; font-weight: 300;
    color: var(--fg-2); background: none; border: none; cursor: pointer; transition: .14s;
}
.menu a:hover, .menu button:hover { background: var(--surface-2); color: var(--fg); }
.menu svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .65; }
.menu .sep { height: 1px; background: var(--rule-soft); margin: 6px 4px; }
.menu .hd { padding: 10px 12px 6px; }
.menu .hd b { font-size: 14px; font-weight: 500; display: block; }
.menu .hd span { font-size: 12px; color: var(--fg-4); }
.menu .danger { color: var(--clay); }

.burger { display: none; }

.notes {
    position: absolute; top: calc(100% + 9px); inset-inline-end: 0; width: min(370px, calc(100vw - 32px));
    max-height: 66vh; overflow-y: auto; z-index: 90;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); box-shadow: var(--shadow);
}
.notes-hd { position: sticky; top: 0; background: var(--surface); padding: 14px 17px; border-bottom: 1px solid var(--rule-soft);
            display: flex; justify-content: space-between; align-items: center; }
.notes-hd b { font-size: 14px; font-weight: 500; }
.note { display: block; padding: 13px 17px; border-bottom: 1px solid var(--rule-soft); transition: .14s; }
.note:hover { background: var(--surface-2); }
.note.new { border-inline-start: 2px solid var(--brass); background: rgba(200,151,63,.05); }
.note b { display: block; font-size: 13.8px; font-weight: 400; }
.note span { display: block; font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }
.note time { display: block; font-size: 11px; color: var(--fg-4); margin-top: 4px; font-family: var(--ff-num); }

.strip {
    background: rgba(200,151,63,.09); border-bottom: 1px solid rgba(200,151,63,.22);
    padding: 10px clamp(18px,5vw,40px); font-size: 13.8px; color: var(--fg-2);
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center;
}

/* ══════════ الأزرار ══════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 22px; border-radius: var(--r-2); border: 1px solid transparent;
    background: transparent; color: var(--fg);
    font-size: 14.5px; font-weight: 400; cursor: pointer; white-space: nowrap;
    transition: background .17s, border-color .17s, color .17s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; }
.b-solid { background: var(--brass); color: #17120A; font-weight: 500; }
.b-solid:hover { background: var(--brass-hi); }
.b-line { border-color: var(--rule); color: var(--fg); }
.b-line:hover { background: var(--surface-2); border-color: var(--surface-3); }
.b-quiet { color: var(--fg-2); }
.b-quiet:hover { background: var(--surface-2); color: var(--fg); }
.b-danger { border-color: rgba(181,87,63,.4); color: #D68A72; }
.b-danger:hover { background: rgba(181,87,63,.14); }
.b-sm { padding: 8px 14px; font-size: 13.2px; }
.b-lg { padding: 15px 30px; font-size: 15.5px; }
.b-full { width: 100%; }
.link-arrow { color: var(--brass); font-size: 14.2px; display: inline-flex; align-items: center; gap: 7px; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ══════════ البطاقات ══════════ */
.card { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-3); padding: var(--pad); }
.card-q { background: var(--ink-2); }
.card-hv { transition: border-color .2s, background .2s; }
.card-hv:hover { border-color: var(--rule); background: var(--surface-2); }
.tag {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-1);
    font-size: 11px; font-weight: 400; letter-spacing: .04em; border: 1px solid var(--rule);
    color: var(--fg-3); background: transparent; white-space: nowrap;
}
.tag-brass { border-color: rgba(200,151,63,.4); color: var(--brass); background: rgba(200,151,63,.07); }
.tag-sage  { border-color: rgba(78,149,133,.4); color: var(--sage); background: rgba(78,149,133,.07); }
.tag-clay  { border-color: rgba(181,87,63,.4); color: #D68A72; background: rgba(181,87,63,.07); }
.dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); display: inline-block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    padding: 7px 15px; border-radius: var(--r-pill); border: 1px solid var(--rule);
    background: transparent; font-size: 13.2px; font-weight: 300; color: var(--fg-2);
    cursor: pointer; transition: .15s;
}
.chip:hover { border-color: var(--surface-3); color: var(--fg); background: var(--surface-2); }
.chip.on { background: var(--brass); border-color: var(--brass); color: #17120A; font-weight: 500; }

/* ══════════ الحقول ══════════ */
.in, textarea.in, select.in {
    width: 100%; padding: 12px 14px; border-radius: var(--r-2);
    background: var(--ink-2); border: 1px solid var(--rule); color: var(--fg);
    font-size: 15px; font-weight: 300; transition: border-color .16s, background .16s;
}
.in::placeholder { color: var(--fg-4); }
.in:focus { outline: none; border-color: var(--brass-dim); background: var(--ink); }
textarea.in { min-height: 108px; resize: vertical; line-height: 1.8; }
.fld { display: block; margin-bottom: 16px; }
.fld > span { display: block; font-size: 13px; color: var(--fg-3); margin-bottom: 7px; font-weight: 300; }
.fld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 300; color: var(--fg-2); }
.check input { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 4px; accent-color: var(--brass); }
.err { color: #D68A72; font-size: 13.5px; }
.good { color: var(--sage); font-size: 13.5px; }
.notice { padding: 13px 16px; border-radius: var(--r-2); border: 1px solid var(--rule); background: var(--ink-2); font-size: 14px; color: var(--fg-2); font-weight: 300; }
.notice-good { border-color: rgba(78,149,133,.4); }
.notice-bad { border-color: rgba(181,87,63,.4); }
.notice-warn { border-color: rgba(200,151,63,.4); }
.drop { border: 1px dashed var(--rule); border-radius: var(--r-2); padding: 20px; text-align: center; color: var(--fg-3); cursor: pointer; transition: .16s; font-size: 14px; }
.drop:hover, .drop.over { border-color: var(--brass-dim); color: var(--fg-2); background: var(--ink-2); }
.copyrow { display: flex; gap: 8px; }
.copyrow .in { font-family: var(--ff-num); font-size: 13px; }

/* ══════════ البطل ══════════ */
.hero { padding-block: clamp(44px, 7vw, 92px) clamp(36px, 5vw, 64px); }
.hero-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { margin: 18px 0 22px; }
.hero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 44px; border-top: 1px solid var(--rule-soft); padding-top: 26px; }
.fig-n { font-family: var(--ff-num); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 400; letter-spacing: -.03em; }
.fig-l { font-size: 12px; color: var(--fg-4); margin-top: 2px; display: flex; align-items: center; gap: 6px; }

.board { border: 1px solid var(--rule); border-radius: var(--r-4); overflow: hidden; background: var(--ink-2); }
.board-hd { display: flex; justify-content: space-between; align-items: center; padding: 13px 17px; border-bottom: 1px solid var(--rule-soft); }
.board-hd .t { font-family: var(--ff-num); font-size: 11.5px; letter-spacing: .09em; color: var(--fg-3); }
.board canvas { width: 100%; display: block; }
.dom { padding: 11px 15px; border-top: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 2px; }
.rung { display: grid; grid-template-columns: 1fr 66px 1fr; gap: 8px; align-items: center; }
.rung .px { font-family: var(--ff-num); font-size: 11px; color: var(--fg-3); text-align: center; }
.trk { height: 13px; border-radius: 2px; background: rgba(255,255,255,.035); overflow: hidden; display: flex; }
.trk.l { justify-content: flex-end; }
.fill { height: 100%; transition: width .6s var(--ease); }
.f-bid { background: rgba(78,149,133,.55); }
.f-ask { background: rgba(181,87,63,.55); }
.board-ft { display: flex; justify-content: space-between; align-items: center; padding: 12px 17px; border-top: 1px solid var(--rule-soft); font-size: 12.5px; color: var(--fg-3); }
.delta { font-family: var(--ff-num); font-size: 12.5px; padding: 3px 10px; border-radius: var(--r-1); }
.d-up { color: var(--up); background: rgba(78,149,133,.12); }
.d-dn { color: #D68A72; background: rgba(181,87,63,.12); }

/* ══════════ المسارات ══════════ */
.track {
    display: block; padding: 26px; border: 1px solid var(--rule-soft); border-radius: var(--r-3);
    background: var(--surface); position: relative; overflow: hidden; transition: border-color .2s, background .2s;
}
.track::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--ac, var(--brass)); opacity: .5; }
.track:hover { border-color: var(--rule); background: var(--surface-2); }
.track:hover::before { opacity: 1; }
.track .glyph { font-size: 21px; color: var(--ac, var(--brass)); line-height: 1; margin-bottom: 14px; }
.track h3 { margin-bottom: 7px; }
.track p { font-size: 14.2px; color: var(--fg-3); line-height: 1.75; font-weight: 300; }
.track .foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
               display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--fg-4); }

/* ══════════ قوائم تحريرية ══════════ */
.steps { display: grid; }
.stepr { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--rule-soft); }
.stepr:first-child { border-top: none; padding-top: 0; }
.stepr .n { font-family: var(--ff-num); font-size: 13px; color: var(--brass); padding-top: 4px; }
.stepr b { display: block; font-weight: 500; font-size: 15.5px; margin-bottom: 5px; }
.stepr p { font-size: 14.2px; color: var(--fg-3); font-weight: 300; line-height: 1.8; }

.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { position: relative; padding-inline-start: 26px; font-size: 14.6px; color: var(--fg-2); font-weight: 300; line-height: 1.7; }
.ticks li::before {
    content: ''; position: absolute; inset-inline-start: 2px; top: 10px; width: 9px; height: 5px;
    border-inline-start: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg);
}
.ticks.plain li::before { border-color: var(--fg-4); }

/* ══════════ الباقات ══════════ */
.plan { padding: 28px; border: 1px solid var(--rule-soft); border-radius: var(--r-3); background: var(--surface); position: relative; }
.plan.pick { border-color: var(--brass-dim); background: var(--surface-2); }
.plan .flag { position: absolute; top: -1px; inset-inline-end: 20px; background: var(--brass); color: #17120A;
              font-size: 10.5px; font-weight: 500; letter-spacing: .07em; padding: 4px 11px; border-radius: 0 0 var(--r-1) var(--r-1); }
.plan .dur { font-size: 15px; font-weight: 500; }
.plan .amt { font-family: var(--ff-num); font-size: 2rem; font-weight: 400; letter-spacing: -.04em; margin: 12px 0 4px; }
.plan .sub { font-size: 13.2px; color: var(--fg-3); font-weight: 300; }

/* ══════════ الأكورديون ══════════ */
.acc { border-top: 1px solid var(--rule-soft); }
.acc:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.acc-q {
    width: 100%; text-align: start; padding: 20px 0; background: none; border: none; cursor: pointer;
    font-size: 15.5px; font-weight: 400; color: var(--fg); display: flex; align-items: center; gap: 14px;
}
.acc-q .plus { margin-inline-start: auto; width: 13px; height: 13px; flex: 0 0 13px; position: relative; }
.acc-q .plus::before, .acc-q .plus::after {
    content: ''; position: absolute; background: var(--brass); transition: transform .24s var(--ease);
    inset-inline-start: 0; top: 6px; width: 13px; height: 1.5px;
}
.acc-q .plus::after { transform: rotate(90deg); }
.acc.open .acc-q .plus::after { transform: rotate(0); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.acc.open .acc-a { max-height: 1600px; }
.acc-a > div { padding-bottom: 22px; color: var(--fg-2); line-height: 1.95; font-weight: 300; font-size: 14.8px; white-space: pre-line; }
.acc .gl { color: var(--brass); font-size: 15px; }

/* ══════════ الآراء والأشخاص ══════════ */
.quote { padding: 26px; border: 1px solid var(--rule-soft); border-radius: var(--r-3); background: var(--surface); }
.quote .mark { font-size: 28px; color: var(--brass); line-height: .8; opacity: .5; }
.quote p { font-size: 14.8px; line-height: 1.95; color: var(--fg-2); margin: 14px 0 18px; font-weight: 300; }
.quote .who2 { display: flex; align-items: center; gap: 11px; padding-top: 15px; border-top: 1px solid var(--rule-soft); }
.quote .av2 { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center;
              font-size: 13px; font-weight: 500; color: var(--fg-2); }
.stars { color: var(--brass); letter-spacing: 2px; font-size: 12px; }
.person { display: flex; gap: 22px; align-items: flex-start; }
.person .pic { width: 92px; height: 92px; flex: 0 0 92px; border-radius: var(--r-3); background: var(--surface-2);
               border: 1px solid var(--rule); display: grid; place-items: center; font-size: 26px; color: var(--fg-4); overflow: hidden; }
.person .pic img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════ الأكاديمية ══════════ */
.coursecard { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--surface-2); }
.cover-x { display: grid; place-items: center; font-size: 24px; color: var(--fg-4); background: var(--ink-2); }
.coursecard .meta { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.coursecard h3 { font-size: 1.03rem; line-height: 1.5; }
.facts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.8px; color: var(--fg-4); font-family: var(--ff-num); margin-top: auto; padding-top: 8px; }
.bar { height: 3px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brass); transition: width .5s var(--ease); }
.bar.full i { background: var(--sage); }
.barline { display: flex; align-items: center; gap: 10px; font-size: 11.8px; color: var(--fg-4); }
.barline .bar { flex: 1; }

.study { display: grid; grid-template-columns: 318px 1fr; gap: 22px; align-items: start; }
.toc { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-3);
       overflow: hidden; max-height: 76vh; overflow-y: auto; position: sticky; top: calc(var(--head) + 16px); }
.toc-hd { padding: 15px 18px; border-bottom: 1px solid var(--rule-soft); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.part { padding: 15px 18px 7px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-4); }
.les { display: flex; align-items: center; gap: 11px; padding: 10px 18px; font-size: 14px; font-weight: 300;
       border-inline-start: 2px solid transparent; transition: .14s; color: var(--fg-2); }
.les:hover { background: var(--surface-2); color: var(--fg); }
.les.on { background: var(--surface-2); border-inline-start-color: var(--brass); color: var(--fg); }
.les.did { color: var(--fg-4); }
.les .tk { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 1px solid var(--rule);
           display: grid; place-items: center; font-size: 9px; }
.les.did .tk { border-color: var(--sage); color: var(--sage); }
.les .dr { flex: 0 0 auto; font-family: var(--ff-num); font-size: 10.5px; color: var(--fg-4); }
.lesnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

.player { position: relative; border-radius: var(--r-3); overflow: hidden; background: #000; border: 1px solid var(--rule-soft); }
.player video, .player iframe { width: 100%; display: block; aspect-ratio: 16/9; border: none; }
.player.big { position: fixed; inset: 0; z-index: 200; border-radius: 0; display: grid; place-items: center; background: #000; }
.player.big video, .player.big iframe { max-height: 100vh; }
.wm { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wm span { position: absolute; font-family: var(--ff-num); font-size: 11.5px; color: rgba(255,255,255,.26);
           text-shadow: 0 1px 3px rgba(0,0,0,.9); white-space: nowrap; user-select: none; }
.expand { position: absolute; bottom: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: var(--r-2);
          background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.14); color: #fff; cursor: pointer; z-index: 5; }
.rates { display: flex; gap: 6px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.rates button { padding: 5px 11px; border-radius: var(--r-1); border: 1px solid var(--rule); background: transparent;
                cursor: pointer; font-size: 12px; font-family: var(--ff-num); color: var(--fg-3); }
.rates button.on { background: var(--brass); border-color: var(--brass); color: #17120A; }

/* ══════════ الفعاليات ══════════ */
.event { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid var(--rule-soft); }
.event .when { text-align: center; }
.event .when .d { font-family: var(--ff-num); font-size: 1.8rem; line-height: 1; color: var(--brass); }
.event .when .m { font-size: 11.5px; color: var(--fg-4); letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; }
.event .when .t { font-family: var(--ff-num); font-size: 12px; color: var(--fg-3); margin-top: 7px; }
.event h3 { margin-bottom: 7px; }
.event p { font-size: 14.2px; color: var(--fg-3); font-weight: 300; line-height: 1.8; }
.prize { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 13px;
         border: 1px solid rgba(200,151,63,.35); border-radius: var(--r-1); font-size: 13px; color: var(--brass); }

/* ══════════ لوحة التحكم ══════════ */
.panel { display: grid; grid-template-columns: 226px 1fr; gap: 22px; align-items: start; }
.panel-nav { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-3); padding: 7px;
             position: sticky; top: calc(var(--head) + 16px); max-height: 80vh; overflow-y: auto; }
.panel-nav a { display: block; padding: 9.5px 13px; border-radius: var(--r-2); font-size: 13.8px; font-weight: 300; color: var(--fg-2); transition: .14s; }
.panel-nav a:hover { background: var(--surface-2); color: var(--fg); }
.panel-nav a.on { background: var(--surface-2); color: var(--brass); box-shadow: inset 2px 0 0 var(--brass); }
/* عناوين مجموعات اللوحة — تفصل ٢٧ تبويباً إلى خمس عائلات مفهومة */
.pn-g { display: block; padding: 13px 13px 6px; font-size: 11px; letter-spacing: .09em;
        text-transform: uppercase; color: var(--fg-4); font-weight: 500; }
.pn-g:first-child { padding-top: 5px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule-soft); border-radius: var(--r-2); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 540px; font-weight: 300; }
th, td { padding: 11px 13px; text-align: start; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
th { background: var(--ink-2); font-weight: 400; font-size: 12px; color: var(--fg-3); white-space: nowrap; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
.tile { padding: 17px 19px; border: 1px solid var(--rule-soft); border-radius: var(--r-2); background: var(--surface); }
.tile .v, .tile .n { font-family: var(--ff-num); font-size: 1.5rem; font-weight: 400; letter-spacing: -.03em; }
.tile .k, .tile .l { font-size: 12px; color: var(--fg-4); margin-top: 3px; }

/* ══════════ نافذة المساعدة ══════════ */
.helpfab {
    position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 88; height: 46px; padding: 0 18px;
    border-radius: var(--r-pill); border: 1px solid var(--rule); background: var(--surface); color: var(--fg-2);
    font-size: 14px; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px; transition: .16s;
}
.helpfab:hover { background: var(--surface-2); color: var(--fg); }
.helpfab svg { width: 16px; height: 16px; }
.helppanel {
    position: fixed; inset-inline-end: 22px; bottom: 80px; z-index: 89;
    width: min(380px, calc(100vw - 32px)); max-height: min(580px, calc(100vh - 130px));
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3);
    box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
}
.help-hd { padding: 15px 17px; border-bottom: 1px solid var(--rule-soft); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.help-hd b { font-size: 14.5px; font-weight: 500; display: block; }
.help-hd span { font-size: 12px; color: var(--fg-4); font-weight: 300; }
.help-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hm { max-width: 88%; padding: 10px 14px; border-radius: var(--r-3); font-size: 14.2px; line-height: 1.75; white-space: pre-wrap; font-weight: 300; }
.hm.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--rule-soft); border-start-start-radius: var(--r-1); }
.hm.me { align-self: flex-end; background: rgba(200,151,63,.12); border: 1px solid rgba(200,151,63,.24); border-start-end-radius: var(--r-1); }
.hm.wait { color: var(--fg-4); }
.qchips { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 12px; }
.qchip { padding: 9px 14px; border-radius: var(--r-2); border: 1px solid var(--rule); background: transparent;
         font-size: 13.4px; cursor: pointer; text-align: start; color: var(--fg-2); transition: .15s; font-weight: 300; }
.qchip:hover { background: var(--surface-2); border-color: var(--surface-3); color: var(--fg); }
.help-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--rule-soft); }
.help-ft { display: block; padding: 11px 16px; border-top: 1px solid var(--rule-soft); font-size: 12.5px; color: var(--brass); text-align: center; }
.reset { background: none; border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 4px 11px;
         font-size: 11.5px; cursor: pointer; color: var(--fg-4); }
.li-b { display: block; padding-inline-start: 14px; }

/* ══════════ متفرقات ══════════ */
#toasts { position: fixed; top: 18px; inset-inline: 0; z-index: 300; display: flex; flex-direction: column;
          align-items: center; gap: 8px; pointer-events: none; padding-inline: 14px; }
.toast { background: var(--surface-3); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 11px 20px;
         font-size: 14px; box-shadow: var(--shadow); pointer-events: auto; animation: dp .28s var(--ease); max-width: 92vw; font-weight: 300; }
@keyframes dp { from { transform: translateY(-12px); opacity: 0; } }
.toast.ok { border-color: rgba(78,149,133,.45); }
.toast.err { border-color: rgba(181,87,63,.45); }

.blank { display: grid; place-items: center; gap: 12px; padding: 52px 22px; text-align: center; color: var(--fg-3); }
.blank .gl { font-size: 28px; color: var(--fg-4); }
.blank b { font-weight: 400; font-size: 15.5px; color: var(--fg-2); }
.blank p { font-size: 14px; max-width: 40ch; font-weight: 300; }
.lightbox { position: fixed; inset: 0; z-index: 260; background: rgba(8,10,13,.95); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: var(--r-2); object-fit: contain; }
.skel { background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
        background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: var(--r-2); }
@keyframes sk { to { background-position: -200% 0; } }
.codein { letter-spacing: .45em; text-align: center; font-family: var(--ff-num); font-size: 21px; }
.post { padding: 22px 0; border-top: 1px solid var(--rule-soft); }
.post h3 { margin: 10px 0 8px; }
.post p { color: var(--fg-2); font-weight: 300; line-height: 1.9; font-size: 14.8px; }
.post img { margin-top: 14px; border-radius: var(--r-2); cursor: zoom-in; }
.gal { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gal img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-2); cursor: zoom-in; }
.picker { border: 1px solid var(--rule-soft); border-radius: var(--r-2); max-height: 250px; overflow-y: auto; }
.pick { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; }
.pick:hover { background: var(--surface-2); }
.pick-name { font-size: 13.8px; } .pick-mail { font-size: 11.8px; color: var(--fg-4); }
.filechip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-1);
            background: var(--ink-2); border: 1px solid var(--rule-soft); font-size: 12.8px; }
body.locked { overflow: hidden; }

/* ══════════ التذييل ══════════ */
.foot { border-top: 1px solid var(--rule-soft); padding-block: 52px 40px; margin-top: 40px; background: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 1.05fr 1.55fr; gap: 44px; align-items: start; }
.foot h5 { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 14px; font-weight: 400; }
.foot a { display: block; font-size: 14px; color: var(--fg-2); padding: 5px 0; font-weight: 300; transition: color .14s; }
.foot a:hover { color: var(--brass); }
.foot .risk { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--rule-soft); font-size: 12.5px;
              color: var(--fg-4); line-height: 1.85; max-width: 72ch; font-weight: 300; }
.foot .base { margin-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-4); }

/* ══════════ الاستجابة ══════════ */
@media (max-width: 1080px) {
    .hero-in, .split { grid-template-columns: 1fr; }
    .study { grid-template-columns: 1fr; }
    .toc { position: static; max-height: 380px; }
    .panel { grid-template-columns: 1fr; }
    /* التبويبات كلها ظاهرة ومجمّعة — لا سحب أفقي طويل ولا قائمة مخفية.
       شبكة تلتفّ، وكل مجموعة تحت عنوانها. */
    .panel-nav {
        position: static; max-height: none; padding: 4px 2px 10px;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
        background: none; border: none; overflow: visible;
    }
    .pn-g {
        grid-column: 1 / -1; padding: 14px 2px 3px; font-size: 10.5px;
        letter-spacing: .1em; color: var(--brass); opacity: .72; border: none;
    }
    .pn-g:first-child { padding-top: 2px; }
    .panel-nav a {
        display: flex; align-items: center; justify-content: center; text-align: center;
        min-height: 46px; padding: 9px 11px; font-size: 13px; line-height: 1.25;
        border: 1px solid var(--rule); border-radius: var(--r-2);
        background: var(--surface); box-shadow: none; white-space: normal;
    }
    .panel-nav a.on {
        border-color: var(--brass); color: var(--brass);
        background: rgba(200,151,63,.10); box-shadow: none;
    }
    .comm { grid-template-columns: 250px 1fr; }
    .foot-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 860px) {
    .acct-btn .nm, .acct-btn .caret { display: none; }
    .acct-btn { padding: 5px; }
    .figures { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
    .comm { grid-template-columns: 1fr; height: auto; }
    .side { max-height: 290px; }
    .side.away { display: none; }
    .talk { min-height: 68vh; }
    .msg { max-width: 92%; }
    .helppanel { inset-inline: 12px; width: auto; bottom: 78px; }
    .helpfab { inset-inline-end: 14px; bottom: 14px; }
    .event { grid-template-columns: 68px 1fr; gap: 16px; }
    .person { flex-direction: column; gap: 16px; }
}
@media (max-width: 520px) {
    .foot-grid { grid-template-columns: 1fr; gap: 24px; }
    body { font-size: 15.5px; }
    .notes, .menu { position: fixed; inset-inline: 12px; width: auto; top: calc(var(--head) + 8px); }
}
@media (pointer: coarse) {
    .btn { min-height: 46px; }
    .b-sm { min-height: 40px; }
    .acts { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
    .masthead, .foot, .helpfab, .helppanel, .btn { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ══════════════════════════════════════════════════════════════════
   طبقة توافق — أسماء أصناف بقيت في لوحة التحكم من النسخة السابقة.
   تُترجم إلى رموز v11 بدل إعادة كتابة اللوحة كلها.
   ══════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-1);
    font-size: 11px; letter-spacing: .04em; border: 1px solid var(--rule); color: var(--fg-3);
    background: transparent; white-space: nowrap;
}
.badge-lock  { border-color: rgba(181,87,63,.4); color: #D68A72; background: rgba(181,87,63,.07); }
.badge-vip   { border-color: rgba(200,151,63,.4); color: var(--brass); background: rgba(200,151,63,.07); }
.badge-free  { border-color: rgba(78,149,133,.4); color: var(--sage); background: rgba(78,149,133,.07); }
.badge-admin { border-color: rgba(91,127,191,.4); color: var(--slate-blue); background: rgba(91,127,191,.07); }

.input, textarea.input, select.input {
    width: 100%; padding: 12px 14px; border-radius: var(--r-2); background: var(--ink-2);
    border: 1px solid var(--rule); color: var(--fg); font-size: 15px; font-weight: 300;
    transition: border-color .16s, background .16s;
}
.input::placeholder { color: var(--fg-4); }
.input:focus { outline: none; border-color: var(--brass-dim); background: var(--ink); }
textarea.input { min-height: 106px; resize: vertical; line-height: 1.8; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 13px; color: var(--fg-3); margin-bottom: 7px; font-weight: 300; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }

.muted { color: var(--fg-3); }
.mono  { font-family: var(--ff-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gold-text { color: var(--brass); }
.warn  { color: var(--brass); }
.center { text-align: center; }

.g-2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g-3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }
.g-4 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 640px) { .span-2 { grid-column: span 1; } }

.mt-1{margin-top:8px}.mt-2{margin-top:18px}.mt-3{margin-top:30px}.mt-4{margin-top:48px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:18px}.mb-3{margin-bottom:30px}
.copy-row { display: flex; gap: 8px; }
.copy-row .input, .copy-row .in { font-family: var(--ff-num); font-size: 13px; }

.ann-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ann-imgs img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-2); cursor: zoom-in; }
.ann { padding: 16px 18px; border: 1px solid var(--rule-soft); border-radius: var(--r-2); background: var(--surface); margin-bottom: 10px; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); display: inline-block; }
.stat-n { font-family: var(--ff-num); font-size: 1.5rem; font-weight: 400; letter-spacing: -.03em; }
.stat-l { font-size: 12px; color: var(--fg-4); margin-top: 3px; }
.bar-track { height: 13px; border-radius: 2px; background: rgba(255,255,255,.035); overflow: hidden; display: flex; }
.bar-track.l { justify-content: flex-end; }
.bar-fill { height: 100%; }
.bar-bid { background: rgba(78,149,133,.55); } .bar-ask { background: rgba(181,87,63,.55); }
.pick-name { font-size: 13.8px; } .pick-mail { font-size: 11.8px; color: var(--fg-4); }
.picker-list { max-height: 250px; overflow-y: auto; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-1);
             background: var(--ink-2); border: 1px solid var(--rule-soft); font-size: 12.8px; }
.support-new { background: none; border: 1px solid var(--rule); border-radius: var(--r-pill);
               padding: 4px 11px; font-size: 11.5px; cursor: pointer; color: var(--fg-4); }
.btn-primary { background: var(--brass); color: #17120A; font-weight: 500; }
.btn-primary:hover { background: var(--brass-hi); }
.btn-ghost { border-color: var(--rule); color: var(--fg); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { border-color: rgba(181,87,63,.4); color: #D68A72; }
.btn-vip { background: var(--brass); color: #17120A; }
.btn-sm { padding: 8px 14px; font-size: 13.2px; }
.btn-block { width: 100%; }
.hidden { display: none !important; }


/* ══════════════════════════════════════════════════════════════════
   v11.2 — التنقّل يعمل بـ CSS خالص (لا يتوقّف إن تعطّل JavaScript)
   ══════════════════════════════════════════════════════════════════ */
.navtoggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.burger { display: none; cursor: pointer; }
.burger .ic-close { display: none; }
.navtoggle:checked ~ .masthead .burger .ic-open  { display: none; }
.navtoggle:checked ~ .masthead .burger .ic-close { display: block; }

.drawer {
    display: none;
    position: fixed; inset: var(--head) 0 auto 0; z-index: 90;
    background: var(--ink);                 /* معتمة تماماً — لا يظهر شيء خلفها */
    border-bottom: 1px solid var(--rule);
    max-height: calc(100dvh - var(--head));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 24px 40px -24px rgba(0,0,0,.9);
    animation: drawerIn .26s var(--ease);
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.drawer-in { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.drawer a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 15px; border-radius: var(--r-2);
    font-size: 15.5px; font-weight: 300; color: var(--fg-2);
}
.drawer a:hover, .drawer a:active { background: var(--surface-2); color: var(--fg); }
.drawer a.on { color: var(--brass); background: rgba(200,151,63,.08); }
.drawer a.danger { color: var(--clay); }
.drawer a.btn { justify-content: center; font-weight: 500; }
.drawer a.b-solid { color: #17120A; }
.drawer svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .75; }
.drawer-sep { height: 1px; background: var(--rule-soft); margin: 8px 4px; }
.drawer-veil { display: none; position: fixed; inset: 0; z-index: 88;
               background: rgba(8,10,13,.62); animation: veilIn .26s var(--ease); }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
/* الصفحة لا تتحرّك خلف القائمة المفتوحة */
body:has(.navtoggle:checked) { overflow: hidden; }

.navtoggle:checked ~ .drawer      { display: block; }
.navtoggle:checked ~ .drawer-veil { display: block; }

.signin { flex: 0 0 auto; }

@media (min-width: 861px) {
    .only-m { display: none !important; }
    .drawer, .drawer-veil { display: none !important; }
}
@media (max-width: 860px) {
    .hide-m { display: none !important; }
    .mainnav { display: none; }
    .burger { display: grid; place-items: center; }
    .signin span { display: none; }
    .signin { width: 38px; padding: 0; justify-content: center; }
}

/* ══════════ الأسئلة بعنصر <details> — تعمل بلا JavaScript ══════════ */
details.acc { border-top: 1px solid var(--rule-soft); }
details.acc:last-of-type { border-bottom: 1px solid var(--rule-soft); }
details.acc > summary {
    list-style: none; cursor: pointer; padding: 20px 0;
    display: flex; align-items: center; gap: 14px;
    font-size: 15.5px; font-weight: 400; color: var(--fg);
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc[open] > summary .plus::after { transform: rotate(0); }
details.acc .acc-a { max-height: none; }
details.acc .acc-a > div { padding-bottom: 22px; }

/* ══════════ صدر الترحيب ══════════ */
.welcome {
    padding-block: clamp(56px, 10vw, 116px) clamp(40px, 6vw, 72px);
    text-align: center; position: relative; overflow: hidden;
}
.welcome::before {
    content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
    width: min(760px, 120%); height: 420px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(200,151,63,.10), transparent 68%);
}
.welcome-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.welcome .kicker::after { left: 50%; transform: translateX(-50%); inset-inline-start: auto; }
.welcome-h {
    font-size: clamp(2.1rem, 6vw, 3.7rem); font-weight: 500;
    letter-spacing: -.035em; line-height: 1.2; margin: 20px 0 22px; max-width: 18ch;
}
.welcome-h .ltr { font-weight: 600; }
.welcome-lead {
    font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--fg-2);
    line-height: 1.95; font-weight: 300; max-width: 58ch;
}
.welcome-acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.welcome-note { margin-top: 20px; }
@media (max-width: 560px) {
    .welcome-acts { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
}

/* ══════════ شارات الثقة ══════════ */
.badges {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border: 1px solid var(--rule-soft); border-radius: var(--r-3);
    background: var(--surface); overflow: hidden;
}
.badge-c { display: flex; gap: 13px; padding: 22px 20px; border-inline-start: 1px solid var(--rule-soft); }
.badge-c:first-child { border-inline-start: none; }
.badge-c .bi {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-2);
    display: grid; place-items: center; color: var(--brass);
    background: rgba(200,151,63,.09); border: 1px solid rgba(200,151,63,.2);
}
.badge-c b { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 5px; line-height: 1.4; }
.badge-c p { font-size: 13px; color: var(--fg-3); line-height: 1.65; font-weight: 300; }
@media (max-width: 1000px) { .badges { grid-template-columns: 1fr 1fr; }
    .badge-c:nth-child(3) { border-inline-start: none; }
    .badge-c:nth-child(n+3) { border-top: 1px solid var(--rule-soft); } }
@media (max-width: 620px) { .badges { grid-template-columns: 1fr; }
    .badge-c { border-inline-start: none; }
    .badge-c + .badge-c { border-top: 1px solid var(--rule-soft); } }

/* ══════════ ترويسة قسم ══════════ */
.sec-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sec-hd > div { flex: 1; min-width: 260px; }

/* ══════════ بطاقة مسار — رقم مرتّب ══════════ */
.track-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.track .glyph { margin: 0; }
.track-n { font-family: var(--ff-num); font-size: 12px; color: var(--fg-4); letter-spacing: .06em; }

/* ══════════ بطاقات البداية ══════════ */
.startcard { padding: 26px; border: 1px solid var(--rule-soft); border-radius: var(--r-3);
             background: var(--surface); position: relative; }
.startcard .sn {
    position: absolute; top: 20px; inset-inline-end: 22px;
    font-family: var(--ff-num); font-size: 2.4rem; font-weight: 400;
    color: rgba(200,151,63,.14); line-height: 1;
}
.startcard .si { display: block; color: var(--brass); margin-bottom: 14px; }
.startcard b { display: block; font-size: 15.5px; font-weight: 500; margin-bottom: 7px; }
.startcard p { font-size: 14px; color: var(--fg-3); line-height: 1.8; font-weight: 300; }

/* ══════════ دعوة ختامية ══════════ */
.cta {
    text-align: center; padding: clamp(36px, 6vw, 62px) clamp(22px, 5vw, 52px);
    border: 1px solid var(--rule-soft); border-radius: var(--r-4);
    background: var(--surface); position: relative; overflow: hidden;
}
.cta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(200,151,63,.08), transparent 62%);
}
.cta > * { position: relative; }
.cta .kicker::after { left: 50%; transform: translateX(-50%); inset-inline-start: auto; }
.cta h2 { max-width: 22ch; margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════
   v11.3 — جداول لوحة التحكم على الجوال
   الجدول العريض يتحوّل إلى بطاقات، وكل خلية تحمل عنوان عمودها.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
    .tablewrap { border: none; overflow: visible; }
    .tablewrap table { min-width: 0; display: block; }
    .tablewrap thead { display: none; }
    .tablewrap tbody { display: block; }

    .tablewrap tr {
        display: block; margin-bottom: 12px; padding: 16px;
        border: 1px solid var(--rule-soft); border-radius: var(--r-3);
        background: var(--surface);
    }
    .tablewrap tbody tr:hover { background: var(--surface); }

    .tablewrap td {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 14px; padding: 7px 0; border: none; text-align: start;
    }
    .tablewrap td + td { border-top: 1px solid var(--rule-soft); }
    .tablewrap td::before {
        content: attr(data-l);
        flex: 0 0 34%; font-size: 12px; color: var(--fg-4);
        font-weight: 400; padding-top: 2px;
    }
    .tablewrap td:not([data-l])::before { display: none; }
    .tablewrap td > * { min-width: 0; }

    /* صفّ الإجراءات: أزرار بعرض متساوٍ بدل عمود طويل */
    .tablewrap td.acts-cell { display: block; padding-top: 12px; }
    .tablewrap td.acts-cell::before { display: none; }
    .tablewrap td.acts-cell .row,
    .tablewrap td.acts-cell > div {
        display: grid !important; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        gap: 7px; width: 100%;
    }
    .tablewrap td.acts-cell form { display: contents; }
    .tablewrap td.acts-cell .btn { width: 100%; min-height: 40px; }
}

/* الأزرار داخل الجداول لا تتمدّد على الكمبيوتر */
td .row { flex-wrap: wrap; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════
   المجتمع — ثلاث لوحات على الكمبيوتر، تبويبات على الجوال
   ══════════════════════════════════════════════════════════════════ */
.chatpage { padding-bottom: 26px; }
.chat {
    display: grid; grid-template-columns: 288px minmax(0,1fr) 250px; gap: 14px;
    height: calc(100dvh - var(--head) - 74px); min-height: 520px;
    max-width: 1560px; margin: 0 auto; padding-inline: clamp(12px, 2.4vw, 24px); padding-top: 14px;
}
.pane {
    background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-3);
    display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.pane-hd { padding: 13px 14px; border-bottom: 1px solid var(--rule-soft); }
.pane-scroll { flex: 1; overflow-y: auto; padding: 6px; min-height: 0; }
.pane-ft { padding: 12px 14px; border-top: 1px solid var(--rule-soft); display: grid; gap: 8px; }

.srch { display: flex; align-items: center; gap: 9px; padding: 8px 12px;
        background: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--r-2); color: var(--fg-4); }
.srch input { flex: 1; min-width: 0; border: none; background: transparent; outline: none;
              font-size: 14px; font-weight: 300; color: var(--fg); }
.srch input::placeholder { color: var(--fg-4); }

.grp { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .16em;
       text-transform: uppercase; color: var(--fg-4); padding: 16px 11px 7px; }
.grp span { font-family: var(--ff-num); letter-spacing: 0; opacity: .7; }
.grp::after { content: ''; flex: 1; height: 1px; background: var(--rule-soft); }

.rm { display: flex; gap: 11px; align-items: center; padding: 10px 11px; border-radius: var(--r-2);
      cursor: pointer; transition: background .14s; }
.rm:hover { background: var(--surface-2); }
.rm.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--brass); }
.rm.shut { opacity: .45; }
.rm .gl { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-2); background: var(--ink-2);
          border: 1px solid var(--rule-soft); display: grid; place-items: center;
          font-size: 14px; color: var(--fg-3); font-family: var(--ff-num); }
.rm .bd { min-width: 0; flex: 1; }
.rm .nm { font-size: 14.2px; font-weight: 400; display: flex; align-items: center; gap: 6px; }
.rm .ls { font-size: 12.2px; color: var(--fg-4); white-space: nowrap; overflow: hidden;
          text-overflow: ellipsis; margin-top: 1px; font-weight: 300; }
.lockpip { font-size: 10px; color: var(--brass); font-style: normal; }
.rmr { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.ct-b { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--brass);
        color: #17120A; font-size: 10.5px; font-weight: 600; display: grid; place-items: center;
        font-family: var(--ff-num); }
.here { font-size: 10.5px; color: var(--fg-4); font-family: var(--ff-num);
        display: flex; align-items: center; gap: 4px; }
.here i { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }

.prow { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: var(--r-2); }
.prow:hover { background: var(--surface-2); }
.prow .av { width: 28px; height: 28px; flex: 0 0 28px; font-size: 11px; align-self: center; }
.prow .pn { flex: 1; min-width: 0; font-size: 13.8px; font-weight: 300;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .tag { font-size: 9.5px; padding: 1px 6px; }

/* رأس النقاش */
.talk-hd { padding: 11px 14px; border-bottom: 1px solid var(--rule-soft);
           display: flex; align-items: center; gap: 11px; min-height: 60px; }
.talk-hd .gl { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-2);
               background: var(--ink-2); border: 1px solid var(--rule-soft);
               display: grid; place-items: center; color: var(--fg-3); font-family: var(--ff-num); }
.talk-hd h3 { font-size: 15.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-hd .sub { font-size: 12.2px; color: var(--fg-4); font-weight: 300;
                display: flex; align-items: center; gap: 6px; }
.roundb.sm { width: 34px; height: 34px; flex: 0 0 34px; font-size: 15px; }
.only-t { display: none; }

.findbar { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule-soft);
           background: var(--ink-2); }
.findbar .srch { flex: 1; }
.findhits { max-height: 46%; overflow-y: auto; border-bottom: 1px solid var(--rule-soft); background: var(--ink-2); }
.fhit { padding: 11px 15px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; font-size: 13.4px; }
.fhit:hover { background: var(--surface-2); }
.fhit b { color: var(--brass); font-weight: 400; font-size: 12.5px; display: block; }
.fhit span { display: block; color: var(--fg-2); font-weight: 300;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fhit time { font-size: 11px; color: var(--fg-4); font-family: var(--ff-num); }

.jumpbtn { position: absolute; bottom: 88px; inset-inline: 0; margin: 0 auto; width: max-content;
           z-index: 6; padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid var(--brass-dim);
           background: var(--surface-3); color: var(--brass); font-size: 13px; cursor: pointer;
           box-shadow: var(--shadow); }
.pane-talk { position: relative; }

/* تبويبات الجوال */
.ctabs { display: none; }
.ct { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: 11px 8px; border: none; background: transparent; color: var(--fg-3);
      font-size: 13.5px; cursor: pointer; border-bottom: 2px solid transparent; }
.ct.on { color: var(--brass); border-bottom-color: var(--brass); }

@media (max-width: 1240px) { .chat { grid-template-columns: 260px minmax(0,1fr); } .pane-people { display: none; } }
@media (max-width: 1000px) {
    .ctabs { display: flex; position: sticky; top: var(--head); z-index: 40;
             background: var(--ink); border-bottom: 1px solid var(--rule-soft); }
    .chat { grid-template-columns: 1fr; height: calc(100dvh - var(--head) - 118px);
            padding-top: 10px; gap: 0; }
    .pane { display: none; }
    .pane.on { display: flex; }
    .pane-people { display: none; }
    .pane-people.on { display: flex; }
    .only-t { display: grid; }
    .hide-s { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   صفحة الاشتراك — مسار مرقّم، بطاقات باقات، ملخّص ثابت
   ══════════════════════════════════════════════════════════════════ */
.join-hd { max-width: 62ch; }
.join-hd h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }

.flowbar {
    list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin-top: clamp(28px, 4vw, 44px);
    border: 1px solid var(--rule-soft); border-radius: var(--r-3); overflow: hidden; background: var(--surface);
}
.flowbar li { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
              border-inline-start: 1px solid var(--rule-soft); font-size: 14px;
              color: var(--fg-4); font-weight: 300; }
.flowbar li:first-child { border-inline-start: none; }
.fb-n { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
        border: 1px solid var(--rule); display: grid; place-items: center;
        font-size: 12px; font-family: var(--ff-num); }
.flowbar li.now { color: var(--fg); background: rgba(200,151,63,.06); }
.flowbar li.now .fb-n { background: var(--brass); border-color: var(--brass); color: #17120A; font-weight: 600; }
.flowbar li.done { color: var(--fg-3); }
.flowbar li.done .fb-n { border-color: var(--sage); color: var(--sage); }
@media (max-width: 720px) {
    .flowbar { grid-template-columns: 1fr; }
    .flowbar li { border-inline-start: none; border-top: 1px solid var(--rule-soft); }
    .flowbar li:first-child { border-top: none; }
}

.stephd { margin-bottom: 26px; max-width: 60ch; }
.stephd .sb { display: inline-block; font-family: var(--ff-num); font-size: 11.5px;
              letter-spacing: .14em; color: var(--brass); margin-bottom: 10px; }
.stephd h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-bottom: 8px; }

/* بطاقات الباقات */
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.plancard { display: block; cursor: pointer; position: relative; }
.plancard input { position: absolute; opacity: 0; width: 0; height: 0; }
.pc-in {
    display: flex; flex-direction: column; gap: 3px; position: relative;
    padding: 26px 24px; border: 1px solid var(--rule-soft); border-radius: var(--r-3);
    background: var(--surface); transition: border-color .18s, background .18s;
}
.plancard:hover .pc-in { border-color: var(--rule); background: var(--surface-2); }
.plancard input:checked + .pc-in { border-color: var(--brass); background: rgba(200,151,63,.06); }
.plancard input:focus-visible + .pc-in { outline: 2px solid var(--brass); outline-offset: 3px; }
.pc-flag { position: absolute; top: -1px; inset-inline-end: 20px; background: var(--brass);
           color: #17120A; font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
           padding: 4px 11px; border-radius: 0 0 var(--r-1) var(--r-1); }
.pc-dur { font-size: 15px; font-weight: 500; }
.pc-amt { font-family: var(--ff-num); font-size: 2.1rem; letter-spacing: -.045em; margin: 8px 0 0; }
.pc-per { font-size: 12px; color: var(--fg-4); font-family: var(--ff-num); }
.pc-note { font-size: 13px; color: var(--fg-3); font-weight: 300; line-height: 1.7; margin-top: 10px; }
.pc-tick { position: absolute; top: 20px; inset-inline-start: 22px;
           width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--rule); transition: .18s; }
.plancard input:checked + .pc-in .pc-tick { border-color: var(--brass); background: var(--brass); }
.plancard input:checked + .pc-in .pc-tick::after {
    content: ''; position: absolute; inset-inline-start: 6px; top: 6px;
    width: 8px; height: 4px; border-inline-start: 1.8px solid #17120A;
    border-bottom: 1.8px solid #17120A; transform: rotate(-45deg);
}

.incl { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px);
        padding-top: 34px; border-top: 1px solid var(--rule-soft); }
@media (max-width: 760px) { .incl { grid-template-columns: 1fr; } }

/* طرق الدفع */
.paygrid { display: grid; gap: 10px; }
.paycard { border: 1px solid var(--rule-soft); border-radius: var(--r-3); background: var(--surface); overflow: hidden; }
.paycard[open] { border-color: var(--rule); }
.paycard > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                     gap: 14px; padding: 18px 20px; }
.paycard > summary::-webkit-details-marker { display: none; }
.paycard[open] > summary .plus::after { transform: rotate(0); }
.pm-gl { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-2);
         background: var(--ink-2); border: 1px solid var(--rule-soft);
         display: grid; place-items: center; color: var(--brass); font-size: 16px; }
.pm-t { flex: 1; min-width: 0; }
.pm-t b { display: block; font-size: 15px; font-weight: 500; }
.pm-t span { display: block; font-size: 12.5px; color: var(--fg-4); font-weight: 300; margin-top: 2px; }
.pm-body { padding: 0 20px 20px; }
.pm-details {
    font-family: var(--ff-num); font-size: 13.4px; line-height: 2;
    white-space: pre-wrap; word-break: break-word; color: var(--fg-2);
    background: var(--ink-2); border: 1px solid var(--rule-soft);
    border-radius: var(--r-2); padding: 16px 18px; margin-bottom: 12px;
    user-select: all; -webkit-user-select: all;
}

/* النموذج والملخّص */
.applywrap { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; align-items: start; }
.applyform { background: var(--surface); border: 1px solid var(--rule-soft);
             border-radius: var(--r-3); padding: var(--pad); }
.applyform fieldset { border: none; padding: 0; margin: 0 0 26px; }
.applyform legend { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
                    color: var(--fg-4); padding: 0 0 14px; }
.summary { background: var(--ink-2); border: 1px solid var(--rule-soft); border-radius: var(--r-3);
           padding: 22px; position: sticky; top: calc(var(--head) + 16px); }
.sm-t { display: block; font-size: 14px; font-weight: 500; margin-bottom: 16px; }
.sm-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
          border-top: 1px solid var(--rule-soft); font-size: 13.8px; }
.sm-row span { color: var(--fg-4); font-weight: 300; }
.sm-row b { font-weight: 400; text-align: end; }
.sm-sep { height: 1px; background: var(--rule-soft); margin: 14px 0; }
@media (max-width: 900px) {
    .applywrap { grid-template-columns: 1fr; }
    .summary { position: static; order: -1; }
}

/* صناديق الرفع */
.droprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dropbox {
    display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
    padding: 20px 14px; border: 1px dashed var(--rule); border-radius: var(--r-2);
    background: var(--ink-2); cursor: pointer; transition: .16s; min-height: 118px;
    justify-content: center;
}
.dropbox:hover { border-color: var(--brass-dim); background: var(--ink); }
.dropbox.filled { border-style: solid; border-color: var(--sage); background: rgba(78,149,133,.06); }
.dropbox .db-ic { color: var(--fg-3); }
.dropbox.filled .db-ic { color: var(--sage); }
.dropbox b { font-size: 13.8px; font-weight: 400; }
.dropbox .db-h { font-size: 11.5px; color: var(--fg-4); word-break: break-all; line-height: 1.5; }

/* بطاقات الحالة */
.statecard { background: var(--surface); border: 1px solid var(--rule-soft);
             border-radius: var(--r-4); padding: clamp(28px, 5vw, 46px); max-width: 720px; }
.statecard h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.statecard .tag { display: inline-flex; }
.reqmeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.reqmeta div { padding: 14px 16px; background: var(--ink-2); border: 1px solid var(--rule-soft);
               border-radius: var(--r-2); }
.reqmeta dt { font-size: 11.5px; color: var(--fg-4); margin-bottom: 4px; }
.reqmeta dd { font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════
   لوحة التحكم على الجوال — تنقّل مريح بإبهام واحد
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .panel { grid-template-columns: 1fr; gap: 16px; }

    /* شريط التبويبات: يلتصق أعلى الشاشة ويُسحب أفقياً */
    .panel-nav {
        position: sticky; top: var(--head); z-index: 40;
        display: flex; gap: 6px; padding: 10px 12px; margin-inline: calc(-1 * clamp(18px, 5vw, 40px));
        border-radius: 0; border-inline: none; border-top: none;
        background: rgba(14,17,22,.94);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        overflow-x: auto; overscroll-behavior-x: contain;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .panel-nav::-webkit-scrollbar { display: none; }

    .panel-nav a.on {
        background: var(--brass); border-color: var(--brass);
        color: #17120A; font-weight: 500; box-shadow: none;
    }

    /* النماذج: عمود واحد وحقول يسهل لمسها */
    .panel .fld-grid, .panel .form-grid { grid-template-columns: 1fr; }
    .panel .in, .panel .input { font-size: 16px; padding: 13px 14px; }  /* 16px يمنع تكبير iOS */
    .panel .card { padding: 18px 16px; }
    .panel .btn { min-height: 46px; }
    .panel .span-2 { grid-column: span 1; }

    /* الأزرار المتجاورة تتوزّع بالتساوي */
    .panel .row.wrapf > .btn, .panel .row.wrapf > form > .btn { flex: 1 1 130px; }
}

@media (max-width: 620px) {
    .panel-nav { padding: 9px 10px; }
    .panel-nav a { padding: 9px 14px; font-size: 13.2px; }
    .tile { padding: 14px 15px; }
    .tile .v, .tile .n, .stat-n { font-size: 1.3rem; }
    .grid.g4, .grid.g-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   الرسائل — الفقاعات والتفاعلات والردود
   ══════════════════════════════════════════════════════════════════ */
.feed { flex: 1; overflow-y: auto; padding: 18px clamp(12px, 2vw, 22px);
        display: flex; flex-direction: column; gap: 2px; min-height: 0; }

.daysep { align-self: center; margin: 20px 0 12px; font-size: 11.5px; color: var(--fg-4);
          letter-spacing: .06em; position: relative; padding: 0 14px; }
.daysep::before, .daysep::after { content: ''; position: absolute; top: 50%; width: 38px; height: 1px; background: var(--rule-soft); }
.daysep::before { inset-inline-end: 100%; } .daysep::after { inset-inline-start: 100%; }

.msg { display: flex; gap: 11px; max-width: min(78%, 640px); align-self: flex-start;
       margin-top: 12px; position: relative; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg.run { margin-top: 3px; }
.msg.run .av { visibility: hidden; height: 0; }
.msg.run .who { display: none; }
.msg.pending { opacity: .5; }

.av { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; align-self: flex-end;
      overflow: hidden; display: grid; place-items: center; font-size: 12.5px; font-weight: 600;
      color: #17120A; background: var(--brass); }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.staff { background: var(--slate-blue); color: #fff; }

.bub { background: var(--surface-2); border: 1px solid var(--rule-soft);
       padding: 9px 14px 7px; border-radius: var(--r-3);
       border-start-start-radius: var(--r-1); min-width: 0; }
.msg.run .bub { border-start-start-radius: var(--r-3); }
.msg.mine .bub { background: rgba(200,151,63,.11); border-color: rgba(200,151,63,.22);
                 border-start-start-radius: var(--r-3); border-start-end-radius: var(--r-1); }
.msg.mine.run .bub { border-start-end-radius: var(--r-3); }

.who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; }
.who b { font-size: 13px; font-weight: 500; color: var(--brass); }
.msg.mine .who b { color: var(--fg-2); }
.txt { font-size: 14.8px; line-height: 1.72; word-break: break-word; white-space: pre-wrap; font-weight: 300; }
.txt a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.at { color: var(--brass); font-weight: 400; }
.ts { font-size: 10.5px; color: var(--fg-4); font-family: var(--ff-num);
      float: inline-end; margin-inline-start: 10px; margin-top: 6px; }
.edited { font-style: italic; font-size: 10.5px; color: var(--fg-4); }

.shot { border-radius: var(--r-2); margin-top: 6px; max-height: 330px; width: auto; cursor: zoom-in; }
.doc { display: flex; align-items: center; gap: 9px; padding: 9px 13px; margin-top: 6px;
       background: var(--ink-2); border: 1px solid var(--rule-soft);
       border-radius: var(--r-2); font-size: 13.2px; }
.qt { border-inline-start: 2px solid var(--brass); padding: 4px 10px; margin-bottom: 6px;
      background: rgba(0,0,0,.22); border-radius: var(--r-1); font-size: 12.5px;
      color: var(--fg-3); cursor: pointer; max-height: 46px; overflow: hidden; }
.qt b { display: block; color: var(--brass); font-size: 11.5px; font-weight: 400; }

.flash { animation: fl 1.6s var(--ease); }
@keyframes fl { 0%,100%{background:transparent} 25%{background:rgba(200,151,63,.16)} }

.acts { position: absolute; top: -12px; inset-inline-end: 6px; display: flex; gap: 1px; padding: 2px;
        background: var(--surface-3); border: 1px solid var(--rule); border-radius: var(--r-pill);
        opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 4; box-shadow: var(--shadow); }
.msg:hover .acts { opacity: 1; pointer-events: auto; }
.acts button { width: 26px; height: 26px; border-radius: 50%; border: none;
               background: none; cursor: pointer; font-size: 12px; color: var(--fg-2); }
.acts button:hover { background: rgba(255,255,255,.1); color: var(--fg); }
.rxpick { display: flex; gap: 2px; padding: 3px; }
.rxpick button { width: 28px; height: 28px; font-size: 15px; border-radius: var(--r-1); }

.rx { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rx button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
             border-radius: var(--r-pill); background: var(--ink-2);
             border: 1px solid var(--rule-soft); font-size: 12px; cursor: pointer; color: var(--fg-2); }
.rx button.mine { border-color: var(--brass-dim); background: rgba(200,151,63,.11); }

.pinbar { display: flex; align-items: center; gap: 11px; padding: 9px 18px;
          background: rgba(200,151,63,.07); border-bottom: 1px solid rgba(200,151,63,.18);
          font-size: 13.2px; color: var(--fg-2); }
.repbar { display: flex; align-items: center; gap: 11px; padding: 9px 16px;
          background: var(--ink-2); border-top: 1px solid var(--rule-soft); font-size: 13.2px; }
.typing { padding: 3px 18px 5px; font-size: 12.2px; color: var(--fg-4); min-height: 21px; font-weight: 300; }
.typing i { display: inline-block; width: 3px; height: 3px; border-radius: 50%;
            background: var(--fg-4); margin-inline-start: 2px; animation: bb 1.1s infinite; }
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes bb { 0%,60%,100%{transform:translateY(0);opacity:.35} 30%{transform:translateY(-3px);opacity:1} }

.compose { display: flex; gap: 8px; align-items: flex-end; padding: 12px;
           border-top: 1px solid var(--rule-soft); background: var(--ink-2); }
.compose .in { border-radius: var(--r-3); max-height: 128px; min-height: 44px; font-size: 16px;
               transition: border-color .18s, background .18s, box-shadow .22s; }
.compose .in:focus { box-shadow: 0 0 0 3px rgba(200,151,63,.12); }
.compose { transition: border-color .2s; }
.compose:has(.in:focus) { border-top-color: rgba(200,151,63,.35); }
.compose .btn[type=submit] { transition: transform .16s var(--ease), background .16s; }
.compose:has(.in:not(:placeholder-shown)) .btn[type=submit] {
    background: var(--brass); color: #17120A; transform: scale(1.04);
}
.roundb, .compose .btn { transition: transform .14s var(--ease), background .16s, color .16s; }
.roundb:active, .compose .btn:active { transform: scale(.92); }
.compose .btn { height: 44px; border-radius: var(--r-3); }
.roundb { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; border: 1px solid var(--rule);
          background: transparent; display: grid; place-items: center; cursor: pointer;
          color: var(--fg-3); transition: .15s; }
.roundb:hover { background: var(--surface-2); color: var(--fg); }
.roundb svg { width: 17px; height: 17px; }

.atpop { position: absolute; bottom: 74px; inset-inline-start: 14px; z-index: 8;
         width: min(272px, 76vw); max-height: 222px; overflow-y: auto;
         background: var(--surface-3); border: 1px solid var(--rule);
         border-radius: var(--r-2); box-shadow: var(--shadow); }
.atpop div { padding: 9px 13px; cursor: pointer; font-size: 13.8px; display: flex; align-items: center; gap: 9px; }
.atpop div:hover, .atpop div.on { background: rgba(200,151,63,.13); }
.prev { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px;
        background: var(--ink-2); border-top: 1px solid var(--rule-soft); }
.prev img { width: 36px; height: 36px; border-radius: var(--r-1); object-fit: cover; }

.fb-l { flex: 1; min-width: 0; }
.pane-rooms { min-height: 0; }

@media (max-width: 1000px) { .msg { max-width: 92%; } }
@media (pointer: coarse) { .acts { opacity: 1; pointer-events: auto; } }

/* ══════════════════════════════════════════════════════════════════
   v12 — علامة التعجب الشارحة للإدارة (تعمل بلا JavaScript)
   ══════════════════════════════════════════════════════════════════ */
.tip { position: relative; display: inline-flex; vertical-align: middle; margin-inline-start: 6px; cursor: help; }
.tip > i {
    width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--brass-dim); color: var(--brass); background: rgba(200,151,63,.09);
    font-size: 11px; font-style: normal; font-weight: 500; line-height: 1;
}
.tip > em {
    position: absolute; z-index: 60; bottom: calc(100% + 9px); inset-inline-start: -8px;
    width: max-content; max-width: min(320px, 74vw);
    padding: 12px 14px; border-radius: var(--r-2);
    background: var(--surface-3); border: 1px solid var(--rule); box-shadow: var(--shadow);
    font-size: 13px; font-style: normal; font-weight: 300; line-height: 1.75; color: var(--fg-2);
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .16s, transform .16s, visibility .16s;
    white-space: normal; text-align: start; pointer-events: none;
}
.tip:hover > em, .tip:focus > em, .tip:focus-within > em { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 620px) {
    .tip > em { position: fixed; inset-inline: 14px; bottom: 16px; width: auto; max-width: none; }
}

/* شرح الدفع الخاص بالباقة */
.paynote {
    margin-top: 16px; padding: 16px 18px; border-radius: var(--r-2);
    border: 1px solid rgba(200,151,63,.3); background: rgba(200,151,63,.06);
    font-size: 14.5px; line-height: 1.9; font-weight: 300; color: var(--fg-2); white-space: pre-line;
}
.pc-cur { font-size: .5em; margin-inline-start: 4px; color: var(--fg-3); font-family: var(--ff); }
.pc-feat { display: grid; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.pc-feat i {
    font-style: normal; font-size: 13.2px; color: var(--fg-2); font-weight: 300;
    position: relative; padding-inline-start: 22px; line-height: 1.6;
}
.pc-feat i::before {
    content: ''; position: absolute; inset-inline-start: 2px; top: 7px;
    width: 8px; height: 4px; border-inline-start: 1.5px solid var(--brass);
    border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg);
}

/* الشاشات المتوسطة تأخذ الدرج أيضاً — كان الشريط يتزاحم بين 860 و1024 */
@media (min-width: 861px) and (max-width: 1024px) {
    .mainnav { display: none; }
    .burger { display: grid; place-items: center; }
    .drawer, .drawer-veil { display: none; }
    .navtoggle:checked ~ .drawer, .navtoggle:checked ~ .drawer-veil { display: block !important; }
    .only-m { display: revert !important; }
}

/* ══════════════════════════════════════════════════════════════════
   v13 — ورقة إجراءات الرسائل · المسابقات · الأقسام · ظهور تدريجي
   ══════════════════════════════════════════════════════════════════ */

/* ── ورقة سفلية لا تغطّي المحادثة ── */
.sheet-wrap { position: fixed; inset: 0; z-index: 240; }
.sheet-veil { position: absolute; inset: 0; background: rgba(8,10,13,.62);
              opacity: 0; transition: opacity .22s var(--ease); }
.sheet-wrap.up .sheet-veil { opacity: 1; }
.sheet {
    position: absolute; inset-inline: 0; bottom: 0;
    background: var(--surface); border-top: 1px solid var(--rule);
    border-radius: var(--r-4) var(--r-4) 0 0;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .26s var(--ease);
    max-height: 76vh; overflow-y: auto;
}
.sheet-wrap.up .sheet { transform: translateY(0); }
.sheet-grip { display: block; width: 38px; height: 4px; border-radius: 99px;
              background: var(--surface-3); margin: 2px auto 14px; }
.sheet-quote {
    padding: 11px 14px; margin-bottom: 12px; border-radius: var(--r-2);
    background: var(--ink-2); border: 1px solid var(--rule-soft);
    font-size: 13.4px; color: var(--fg-3); font-weight: 300;
    max-height: 62px; overflow: hidden;
}
.sheet-acts { display: grid; gap: 2px; }
.sheet-acts button {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: start;
    padding: 15px 14px; border: none; background: transparent; border-radius: var(--r-2);
    font-size: 15.5px; font-weight: 300; color: var(--fg); cursor: pointer;
}
.sheet-acts button:active { background: var(--surface-2); }
.sheet-acts button i {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-2);
    display: grid; place-items: center; font-style: normal; font-size: 15px;
    background: var(--ink-2); border: 1px solid var(--rule-soft); color: var(--fg-2);
}
.sheet-acts button.danger { color: #D68A72; }
.sheet-acts button.danger i { border-color: rgba(181,87,63,.35); color: #D68A72; }
.sheet-rx { display: flex; justify-content: space-around; gap: 6px; padding: 6px 0 14px; }
.sheet-rx button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule-soft);
                   background: var(--ink-2); font-size: 24px; cursor: pointer; }
.sheet-rx button:active { background: var(--surface-2); }
.sheet-cancel {
    width: 100%; margin-top: 12px; padding: 14px; border-radius: var(--r-2);
    border: 1px solid var(--rule); background: var(--ink-2);
    color: var(--fg-2); font-size: 15px; cursor: pointer;
}
/* على الجوال نُخفي الأزرار العائمة فوق الفقاعة تماماً */
@media (pointer: coarse) { .acts { display: none !important; } }

/* ── المسابقات ── */
.contest { border: 1px solid var(--rule-soft); border-radius: var(--r-4); background: var(--surface);
           padding: clamp(24px, 4vw, 38px); margin-bottom: 20px; }
.ct-hd h2 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px);
           margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule-soft); }
@media (max-width: 720px) { .ct-grid { grid-template-columns: 1fr; } }
.prizes { display: grid; gap: 9px; }
.prz { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
       border: 1px solid var(--rule-soft); border-radius: var(--r-2); background: var(--ink-2); font-size: 14.2px; }
.pz-n { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center;
        font-family: var(--ff-num); font-size: 12px; background: var(--brass); color: #17120A; font-weight: 600; }
.prz:nth-child(2) .pz-n { background: #B9B5AD; }
.prz:nth-child(3) .pz-n { background: #9A6B3F; color: #fff; }

.lb { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule-soft); }
.lb-row { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: var(--r-2);
          border: 1px solid transparent; font-size: 14.5px; }
.lb-row:nth-child(even) { background: var(--ink-2); }
.lb-row.me { border-color: var(--brass-dim); background: rgba(200,151,63,.08); }
.lb-n { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center;
        font-family: var(--ff-num); font-size: 12.5px; background: var(--surface-2); color: var(--fg-3); }
.lb-n.r1 { background: var(--brass); color: #17120A; font-weight: 600; }
.lb-n.r2 { background: #B9B5AD; color: #17120A; }
.lb-n.r3 { background: #9A6B3F; color: #fff; }
.lb-name { flex: 1; min-width: 0; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name i { color: var(--fg-4); font-style: normal; font-size: 12px; }
.lb-sc { font-size: 15px; color: var(--brass); }
.ct-ft { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule-soft);
         display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── الأقسام والفيديوهات ── */
.vidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.vcard { margin: 0; border: 1px solid var(--rule-soft); border-radius: var(--r-3);
         background: var(--surface); overflow: hidden; transition: border-color .2s, transform .2s; }
.vcard:hover { border-color: var(--rule); transform: translateY(-2px); }
.vframe { position: relative; aspect-ratio: 16/9; background: #000; }
.vframe video, .vframe iframe, .vframe img { width: 100%; height: 100%; object-fit: cover; border: none; display: block; }
.vempty { width: 100%; height: 100%; display: grid; place-items: center; color: var(--fg-4); background: var(--ink-2); }
.vcard figcaption { padding: 16px 18px; display: grid; gap: 6px; }
.vcard figcaption b { font-size: 15px; font-weight: 500; line-height: 1.5; }
.vcard figcaption p { font-size: 13.5px; color: var(--fg-3); font-weight: 300; line-height: 1.7; }
.vimg { width: 100%; aspect-ratio: 16/10; object-fit: cover; cursor: zoom-in; display: block; }

/* ── ظهور تدريجي أثناء النزول ── */
.reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .72s var(--ease) var(--rv-d, 0s), transform .72s var(--ease) var(--rv-d, 0s); }
.reveal.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }
.cms-sec { scroll-margin-top: 92px; }
.rxpop { z-index: 6; }

/* ══════════════════════════════════════════════════════════════════
   v14 — حركة هادئة تخدم القراءة، لا تُشتّتها
   ══════════════════════════════════════════════════════════════════ */

/* خلفية الترحيب: توهّج نحاسي يتنفّس ببطء ويخفت مع النزول */
.welcome::before {
    animation: breathe 14s ease-in-out infinite;
    opacity: calc(1 - var(--scrolled, 0) * .85);
    transition: opacity .1s linear;
}
@keyframes breathe {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 1;   }
    50%      { transform: translateX(-50%) scale(1.09); opacity: .74; }
}
/* شبكة خافتة خلف الترحيب تعطي عمقاً بلا ضجيج */
.welcome::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(200,151,63,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,151,63,.045) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(ellipse 70% 58% at 50% 22%, #000 20%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 22%, #000 20%, transparent 76%);
    opacity: calc(1 - var(--scrolled, 0));
}
.welcome-in { z-index: 1; }

/* دخول متدرّج لعناصر الترحيب */
.welcome .kicker,
.welcome-h,
.welcome-lead,
.welcome-acts,
.welcome-note { animation: riseIn .8s var(--ease) backwards; }
.welcome .kicker  { animation-delay: .04s; }
.welcome-h        { animation-delay: .12s; }
.welcome-lead     { animation-delay: .22s; }
.welcome-acts     { animation-delay: .32s; }
.welcome-note     { animation-delay: .42s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } }

/* ظهور متدرّج لعناصر أي شبكة داخل قسم يدخل الشاشة */
.reveal.rv-in .grid > *,
.reveal.rv-in .vidgrid > *,
.reveal.rv-in .badges > *,
.reveal.rv-in .plangrid > * { animation: riseIn .6s var(--ease) backwards; }
.reveal.rv-in .grid > *:nth-child(1),  .reveal.rv-in .vidgrid > *:nth-child(1),
.reveal.rv-in .badges > *:nth-child(1),.reveal.rv-in .plangrid > *:nth-child(1) { animation-delay: .04s; }
.reveal.rv-in .grid > *:nth-child(2),  .reveal.rv-in .vidgrid > *:nth-child(2),
.reveal.rv-in .badges > *:nth-child(2),.reveal.rv-in .plangrid > *:nth-child(2) { animation-delay: .12s; }
.reveal.rv-in .grid > *:nth-child(3),  .reveal.rv-in .vidgrid > *:nth-child(3),
.reveal.rv-in .badges > *:nth-child(3),.reveal.rv-in .plangrid > *:nth-child(3) { animation-delay: .20s; }
.reveal.rv-in .grid > *:nth-child(4),  .reveal.rv-in .vidgrid > *:nth-child(4),
.reveal.rv-in .badges > *:nth-child(4),.reveal.rv-in .plangrid > *:nth-child(4) { animation-delay: .28s; }
.reveal.rv-in .grid > *:nth-child(n+5),.reveal.rv-in .vidgrid > *:nth-child(n+5) { animation-delay: .34s; }

/* تفاعلات دقيقة */
.btn { position: relative; overflow: hidden; }
.btn.b-solid::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%);
    transform: translateX(-120%); transition: transform .55s var(--ease);
}
.btn.b-solid:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.track, .card-hv, .coursecard, .plancard .pc-in, .startcard, .contest {
    transition: transform .28s var(--ease), border-color .22s, background .22s, box-shadow .28s;
}
.track:hover, .card-hv:hover, .coursecard:hover, .startcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -24px rgba(0,0,0,.8);
}
.plancard:hover .pc-in { transform: translateY(-3px); }

/* الشريط العلوي يتماسك عند النزول */
.masthead { transition: box-shadow .3s, background .3s; }
body:not(:has(.navtoggle:checked)) .masthead { box-shadow: 0 1px 0 rgba(255,255,255,.02); }

/* الأرقام أثناء العدّ لا تقفز */
.fig-n, .tile .v, .stat-n { font-variant-numeric: tabular-nums; }

/* حركة الروابط السهمية */
.link-arrow { transition: gap .2s var(--ease); }
.link-arrow:hover { gap: 11px; }

/* ── انتقال بين الصفحات ── */
html.pt-ready { opacity: 0; transform: translateY(6px); }
html.pt-ready.pt-in {
    opacity: 1; transform: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
}
html.pt-ready.pt-out {
    opacity: 0; transform: translateY(-6px);
    transition: opacity .18s ease-in, transform .18s ease-in;
}
html.pt-ready body { min-height: 100vh; }

/* احترام تفضيل تقليل الحركة — يُلغي كل ما سبق */
@media (prefers-reduced-motion: reduce) {
    .welcome::before, .welcome::after,
    .welcome .kicker, .welcome-h, .welcome-lead, .welcome-acts, .welcome-note,
    .reveal.rv-in .grid > *, .reveal.rv-in .vidgrid > *, .reveal.rv-in .badges > *, .reveal.rv-in .plangrid > * {
        animation: none !important;
    }
    .btn:hover, .track:hover, .card-hv:hover, .coursecard:hover,
    .startcard:hover, .plancard:hover .pc-in { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   v15 — خلفية الترحيب · بنّاء الأكاديمية
   ══════════════════════════════════════════════════════════════════ */

/* خطّ السعر خلف الترحيب */
.hero-bg {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 0;
    width: 100%; height: 62%; pointer-events: none;
    opacity: calc(.9 - var(--scrolled, 0) * .9);
    transition: opacity .12s linear;
}
@media (prefers-reduced-motion: reduce) { .hero-bg { display: none; } }

/* ══════════ بنّاء الأكاديمية ══════════ */
.build { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .build { grid-template-columns: 1fr; } }

.build-side {
    background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-3);
    overflow: hidden; position: sticky; top: calc(var(--head) + 66px); max-height: 78vh; overflow-y: auto;
}
@media (max-width: 980px) { .build-side { position: static; max-height: none; } }
.bs-hd { padding: 14px 16px; border-bottom: 1px solid var(--rule-soft);
         display: flex; align-items: center; gap: 6px; font-size: 14px; }

.bs-part + .bs-part { border-top: 1px solid var(--rule-soft); }
.bs-pt { display: flex; align-items: stretch; gap: 4px; padding: 4px 8px 4px 4px; }
.bs-ptn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
          padding: 11px 10px; border-radius: var(--r-2); font-size: 14px; font-weight: 400; }
.bs-ptn:hover { background: var(--surface-2); }
.bs-part.open .bs-ptn { color: var(--brass); }
.bs-ptn .num { font-family: var(--ff-num); font-size: 11px; color: var(--fg-4); flex: 0 0 auto; }
.bs-ptn > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-ptn em { font-style: normal; font-family: var(--ff-num); font-size: 11px; color: var(--fg-4);
             background: var(--ink-2); border-radius: 99px; padding: 2px 8px; flex: 0 0 auto; }
.bs-ptb { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.bs-ptb button, .bs-lb button {
    width: 26px; height: 26px; border-radius: var(--r-1); border: 1px solid var(--rule-soft);
    background: transparent; color: var(--fg-4); font-size: 12px; cursor: pointer; line-height: 1;
}
.bs-ptb button:hover:not(:disabled), .bs-lb button:hover:not(:disabled) { background: var(--surface-2); color: var(--fg-2); }
.bs-ptb button:disabled, .bs-lb button:disabled { opacity: .3; cursor: default; }
.bs-ptb .dg:hover { color: #D68A72; border-color: rgba(181,87,63,.4); }

.bs-ls { padding: 0 8px 10px; background: var(--ink-2); border-top: 1px solid var(--rule-soft); }
.bs-l { display: flex; align-items: center; gap: 4px; }
.bs-l > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
            padding: 10px 10px; border-radius: var(--r-2); font-size: 13.6px; font-weight: 300; color: var(--fg-2); }
.bs-l > a:hover { background: var(--surface-2); color: var(--fg); }
.bs-l.on > a { background: var(--surface-2); color: var(--fg); box-shadow: inset 2px 0 0 var(--brass); }
.bs-l .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
             background: var(--surface-3); border: 1px solid var(--rule); }
.bs-l .dot.ok { background: var(--sage); border-color: var(--sage); }
.bs-l .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-l .d { font-size: 10.5px; color: var(--fg-4); flex: 0 0 auto; }
.bs-lb { display: flex; gap: 2px; flex: 0 0 auto; padding-inline-end: 4px; }

.bs-add { display: block; margin-top: 6px; padding: 11px; border-radius: var(--r-2);
          border: 1px dashed var(--rule); text-align: center; font-size: 13.4px;
          color: var(--brass); font-weight: 300; }
.bs-add:hover { background: rgba(200,151,63,.06); border-color: var(--brass-dim); }
.bs-newpart { display: flex; gap: 7px; padding: 12px; border-top: 1px solid var(--rule-soft); }
.bs-newpart .in { font-size: 13.5px; padding: 9px 12px; }

/* مصدر الفيديو */
.srcbox { border: none; padding: 0; margin: 0 0 20px; }
.srcbox legend { font-size: 13px; color: var(--fg-3); padding: 0 0 12px;
                 display: flex; align-items: center; gap: 6px; }
.srcopt { display: block; cursor: pointer; margin-bottom: 10px; }
.srcopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.so-in { display: block; padding: 16px 18px; border: 1px solid var(--rule-soft);
         border-radius: var(--r-3); background: var(--ink-2); transition: border-color .18s, background .18s; }
.srcopt:hover .so-in { border-color: var(--rule); }
.srcopt input:checked + .so-in { border-color: var(--brass-dim); background: rgba(200,151,63,.05); }
.so-in b { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 4px; }
.so-in em { display: block; font-style: normal; font-size: 12.8px; color: var(--fg-3);
            font-weight: 300; line-height: 1.7; }
.so-in em.ok { color: var(--sage); }

.certbox { padding: 16px 18px; border: 1px solid rgba(200,151,63,.3);
           background: rgba(200,151,63,.05); border-radius: var(--r-3); margin: 4px 0 18px; }
.certbox em { display: block; font-style: normal; font-size: 12.8px; color: var(--fg-3);
              font-weight: 300; line-height: 1.75; margin-top: 5px; }

/* صفّ الكورس في القائمة */
.crow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        flex-wrap: wrap; padding: 13px 0; border-top: 1px solid var(--rule-soft); }
.crow-a { flex: 1; min-width: 200px; }
.crow-t { display: block; font-size: 15px; font-weight: 400; }
.crow-m { display: block; font-size: 12.5px; color: var(--fg-4); margin-top: 3px; font-family: var(--ff-num); }
.crow:hover .crow-t { color: var(--brass); }

details.card > summary::-webkit-details-marker { display: none; }
.build-main { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════
   v16 — طبقة الاستجابة النهائية
   تُطبَّق بعد كل ما سبق، فتحسم أي تعارض بين نقاط الكسر.
   ثلاث فئات: جوال (≤700) · تابلت (701–1024) · كمبيوتر (≥1025)
   ══════════════════════════════════════════════════════════════════ */

/* ── حماية عامة: لا شيء يتجاوز عرض الشاشة أبداً ── */
html, body { max-width: 100%; overflow-x: clip; }
img, video, canvas, iframe, table, pre, textarea { max-width: 100%; }
pre, .pm-details, .txt, .prose p, .lead, .hint { overflow-wrap: anywhere; }
.wrap, main, section, .card, .grid, .split { min-width: 0; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* ── احترام حواف الشاشة المنحنية والشريط السفلي ── */
body { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.masthead .topbar { padding-inline: max(clamp(18px,5vw,40px), env(safe-area-inset-left)); }
.foot { padding-bottom: max(40px, calc(28px + env(safe-area-inset-bottom))); }
.compose { padding-bottom: max(12px, calc(8px + env(safe-area-inset-bottom))); }
.helpfab { bottom: max(22px, calc(14px + env(safe-area-inset-bottom))); }

/* ══════════════ تابلت: 701 – 1024 ══════════════ */
@media (min-width: 701px) and (max-width: 1024px) {
    /* الدردشة: عمودان — الغرف والنقاش، والحاضرون في تبويب */
    .chat { grid-template-columns: 248px minmax(0, 1fr); gap: 14px;
            height: calc(100dvh - var(--head) - 70px); }
    .ctabs { display: none; }
    .pane { display: flex !important; }
    .pane-people { display: none !important; }
    .only-t { display: none !important; }

    /* بنّاء الأكاديمية يبقى عمودين لكن أضيق */
    .build { grid-template-columns: 290px minmax(0, 1fr); }
    .build-side { max-height: 72vh; }

    /* لوحة التحكم: شريط تبويبات أفقي مريح */
    .panel { grid-template-columns: 1fr; }

    /* شبكات أوسع قليلاً */
    .grid.g3, .vidgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .badges  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plangrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .applywrap { grid-template-columns: minmax(0,1fr) 260px; }
    .study { grid-template-columns: 260px minmax(0, 1fr); }
    .toc { position: sticky; max-height: 70vh; }
}

/* ══════════════ جوال: ≤ 700 ══════════════ */
@media (max-width: 700px) {
    :root { --pad: 18px; --head: 62px; }

    /* الطباعة أوضح على الشاشات الصغيرة */
    body { font-size: 15.5px; line-height: 1.78; }
    h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    h2 { font-size: clamp(1.3rem, 5.6vw, 1.6rem); }
    .lead, .welcome-lead { font-size: 15.2px; line-height: 1.88; }
    .band { padding-block: 44px; }

    /* كل الشبكات عمود واحد */
    .grid.g2, .grid.g3, .grid.g4, .grid.g-2, .grid.g-3, .grid.g-4,
    .vidgrid, .plangrid, .badges, .split, .incl, .ct-grid,
    .droprow, .reqmeta, .foot-grid, .fld-grid, .form-grid,
    .study, .build, .applywrap, .panel, .figures {
        grid-template-columns: 1fr !important;
    }
    .figures { gap: 20px 0; }
    .span-2 { grid-column: span 1 !important; }

    /* الأزرار تملأ العرض حين تكون وحدها في صفّها */
    .welcome-acts .btn, .cta .btn, .statecard .btn { width: 100%; }
    .row.wrapf > .btn { flex: 1 1 auto; }

    /* لمس مريح */
    .btn, .chip, .panel-nav a, .drawer a, .sheet-acts button { min-height: 46px; }
    .icon-b, .roundb { min-width: 42px; min-height: 42px; }
    .in, .input, select.in, textarea.in { font-size: 16px; }   /* يمنع تكبير iOS */

    /* الدردشة تملأ الشاشة */
    .chat { height: calc(100dvh - var(--head) - 106px); }
    .msg { max-width: 94%; }
    .feed { padding-inline: 12px; }

    /* بنّاء الأكاديمية: المنهج أولاً ثم المحرّر */
    .build-side { position: static; max-height: none; margin-bottom: 4px; }

    /* بطاقات ألطف */
    .card, .contest, .statecard, .applyform { padding: 20px 17px; }
    .cta { padding: 32px 20px; }
    .sheet { max-height: 82vh; }

    /* لا نقصّ الجداول */
    .tablewrap { margin-inline: -2px; }

    /* التذييل مضغوط */
    .foot { padding-top: 40px; }
    .foot .base { flex-direction: column; gap: 8px; }
}

/* ══════════════ شاشات صغيرة جداً: ≤ 380 ══════════════ */
@media (max-width: 380px) {
    :root { --pad: 15px; }
    .wrap { padding-inline: 14px; }
    .wordmark span { display: none; }          /* السطر تحت الاسم يزاحم */
    .wordmark b { font-size: 15px; }
    .langsel span { padding: 0 8px; }
    .pc-amt { font-size: 1.7rem; }
    .welcome-h { font-size: 1.62rem; }
    .ct { font-size: 12.5px; gap: 5px; }
    .tag { font-size: 10.5px; padding: 2px 7px; }
}

/* ══════════════ الجوال أفقياً ══════════════ */
@media (max-height: 480px) and (orientation: landscape) {
    .welcome { padding-block: 32px 26px; }
    .hero-bg { height: 74%; }
    .chat { height: calc(100dvh - var(--head) - 60px); min-height: 320px; }
    .sheet { max-height: 88vh; }
    .helppanel { max-height: calc(100vh - 90px); }
}

/* ══════════════ كمبيوتر واسع: ≥ 1500 ══════════════ */
@media (min-width: 1500px) {
    .wrap { max-width: 1280px; }
    .chat { max-width: 1600px; grid-template-columns: 300px minmax(0,1fr) 270px; }
}

/* ── تمرير ناعم داخل كل الحاويات القابلة للتمرير ── */
.feed, .pane-scroll, .toc, .build-side, .panel-nav,
.notes, .menu, .help-body, .findhits, .sheet, .tablewrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── التركيز واضح للوحة المفاتيح، مخفي للفأرة ── */
:focus:not(:focus-visible) { outline: none; }

/* ══════════════════════════════════════════════════════════════════
   v17 — حركة التمرير: كل قسم يستقبلك بشيء، بلا ضجيج
   ══════════════════════════════════════════════════════════════════ */

/* ── خطوط ضوئية رفيعة تفصل الأقسام وتُرسم عند الوصول ── */
.band.rule-top { position: relative; }
.band.rule-top::before {
    content: ''; position: absolute; top: -1px; inset-inline: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
    transform: scaleX(0); transform-origin: center;
    transition: transform .9s var(--ease);
    opacity: .5;
}
.band.rule-top.in::before { transform: scaleX(1); }

/* ── العناوين تصعد قبل محتواها بقليل ── */
.reveal .kicker  { animation: rise .62s var(--ease) backwards; animation-delay: .02s; }
.reveal.rv-in h2,
.reveal.rv-in .stephd h2 { animation: rise .68s var(--ease) backwards; animation-delay: .08s; }
.reveal.rv-in > .wrap > .lead,
.reveal.rv-in .sec-hd .lead { animation: rise .7s var(--ease) backwards; animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

/* ── هالة نحاسية تتبع القسم الذي تقرأه ── */
.band { position: relative; }
.band > .wrap { position: relative; z-index: 1; }
.band.reveal::after {
    content: ''; position: absolute; inset-inline: 0; top: 8%;
    height: 240px; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 46% 100% at 50% 0%, rgba(200,151,63,.055), transparent 70%);
    opacity: 0; transition: opacity 1.1s var(--ease);
}
.band.reveal.rv-in::after { opacity: 1; }

/* ── المسارات: الشريط الجانبي ينمو من الأعلى ── */
.reveal.rv-in .track::before {
    animation: growBar .7s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * .07s + .1s);
}
@keyframes growBar { from { transform: scaleY(0); transform-origin: top; } }

/* ── الأرقام الكبيرة في بطاقات البداية تتلاشى داخلة ── */
.reveal.rv-in .startcard .sn { animation: numIn .9s var(--ease) backwards; animation-delay: .2s; }
@keyframes numIn { from { opacity: 0; transform: translateY(-14px) scale(.85); } }

/* ── صفّ الشارات: خطّ سفلي يمرّ تحته مرة واحدة ── */
.badges { position: relative; overflow: hidden; }
.badges::after {
    content: ''; position: absolute; bottom: 0; inset-inline-start: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
    transform: translateX(-100%); opacity: .55;
}
.reveal.rv-in .badges::after,
.badges.in::after { animation: sweep 1.5s var(--ease) .35s forwards; }
@keyframes sweep { to { transform: translateX(100%); } }

/* ── بطاقات الفيديو: الغلاف يكبر لمسة عند المرور ── */
.vcard .vframe { overflow: hidden; }
.vcard .vframe img, .vcard .vframe video { transition: transform .5s var(--ease); }
.vcard:hover .vframe img { transform: scale(1.04); }

/* ── الاقتباسات: علامة التنصيص تدور قليلاً عند الظهور ── */
.reveal.rv-in .quote .mark { animation: markIn .8s var(--ease) backwards; animation-delay: .15s; }
@keyframes markIn { from { opacity: 0; transform: rotate(-14deg) scale(.7); } }

/* ── الدعوة الختامية: توهّج يتنفّس ── */
.cta::before { animation: ctaGlow 9s ease-in-out infinite; }
@keyframes ctaGlow { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ── الأسئلة: فتح أنعم ── */
details.acc > summary { transition: color .18s; }
details.acc[open] > summary { color: var(--brass); }
details.acc .acc-a > div { animation: fadeDown .32s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } }

/* ── شريط تقدّم القراءة أعلى الصفحة ── */
.readbar {
    position: fixed; top: 0; inset-inline-start: 0; height: 2px; z-index: 95;
    background: linear-gradient(90deg, var(--brass-dim), var(--brass), var(--brass-hi));
    width: var(--read, 0%); transition: width .1s linear; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .band.rule-top::before { transform: scaleX(1) !important; }
    .band.reveal::after { opacity: 1 !important; }
    .reveal .kicker, .reveal.rv-in h2, .reveal.rv-in .lead,
    .reveal.rv-in .track::before, .reveal.rv-in .startcard .sn,
    .badges::after, .reveal.rv-in .quote .mark, .cta::before,
    details.acc .acc-a > div { animation: none !important; }
    .readbar { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   v18 — خلفية الموقع الحيّة + لمسات أخيرة
   ══════════════════════════════════════════════════════════════════ */

/* الطبقة تثبت خلف كل شيء ولا تلتقط أي ضغطة */
.sitebg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: .85;
    mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
}
/* ⚠️ لا تكتب هنا `body > *` — القاعدة العامة كانت تضع الرأس والطبقات
   الثابتة داخل سياق تكديس واحد (z-index:1)، فتُدفن القائمة والتنبيهات
   والأوراق السفلية خلف محتوى الصفحة وتصبح غير قابلة للضغط.
   نرفع المحتوى فوق الخلفية بالأسماء فقط، ونترك الطبقات العائمة حرّة. */
main, .foot, .strip, .crumbs { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sitebg { display: none; } }

/* ══════════ سُلّم الطبقات — مرجع واحد لكل ما يطفو فوق الصفحة ══════════ */
.masthead    { z-index: 80; }
.drawer-veil { z-index: 88; }
.drawer      { z-index: 90; }
.notes, .menu { z-index: 95; }
.sheet-wrap  { z-index: 240; }
.lightbox    { z-index: 260; }
#toasts      { z-index: 300; }

/* الأقسام شبه شفّافة ليظهر ما خلفها بلا أن يُقرأ النص بصعوبة */
.band { background: transparent; }
.card, .track, .contest, .statecard, .applyform, .plancard .pc-in,
.startcard, .vcard, .paycard, .event, .post, .quote {
    backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
}

/* توهّج يتبع مؤشّر الفأرة على البطاقات — لمسة هادئة */
.card-hv, .track, .coursecard, .plancard .pc-in, .vcard {
    position: relative; overflow: hidden;
}
.card-hv::after, .track::after, .coursecard::after, .vcard::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
                rgba(200,151,63,.09), transparent 62%);
    transition: opacity .3s var(--ease);
}
.card-hv:hover::after, .track:hover::after,
.coursecard:hover::after, .vcard:hover::after { opacity: 1; }

/* الشريط العلوي يزداد عتامة عند النزول فيبقى مقروءاً فوق الخلفية */
.masthead { backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }

/* التذييل يفصل نفسه بخط ضوئي */
.foot { position: relative; }
.foot::before {
    content: ''; position: absolute; top: 0; inset-inline: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,151,63,.35), transparent);
}


/* ══════════════════════════════════════════════════════════════════
   v21 — حمايات ولمسات نهائية
   ══════════════════════════════════════════════════════════════════ */

/* لوحة التحكم لا تُخفى أبداً بحركة الظهور. طبقة أمان ثالثة فوق
   الحمايتين في JavaScript — لأن لوحة مخفية تعني موقعاً بلا إدارة. */
.panel, .panel-nav, .panel > div { opacity: 1 !important; transform: none !important; }

/* ── التذييل: شبكة مرتّبة بدل طابور روابط ── */
.foot { padding-block: 56px 34px; }
.foot-brand { max-width: 34ch; }
.foot h5 { color: var(--brass); opacity: .8; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 22px; }
.foot-col a {
    display: block; padding: 7px 0; font-size: 13.6px; color: var(--fg-2);
    position: relative; padding-inline-start: 13px; transition: color .16s, padding .16s;
}
.foot-col a::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 50%;
    width: 5px; height: 1px; background: var(--brass); opacity: 0; transition: opacity .16s;
}
.foot-col a:hover { color: var(--brass); padding-inline-start: 18px; }
.foot-col a:hover::before { opacity: .8; }

.foot-social { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.foot-social a {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
    border: 1px solid var(--rule); border-radius: var(--r-pill);
    font-size: 13px; color: var(--fg-2); background: var(--surface); transition: .16s;
}
.foot-social a:hover { border-color: var(--brass-dim); color: var(--brass); }

@media (max-width: 860px) {
    /* ثلاثة أعمدة ضيّقة تكفي على الجوال — أنظف بكثير من كبسولات
       تلتفّ بأطوال غير متساوية، وأنظف من طابور رأسي طويل. */
    .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
    .foot-col a { font-size: 13.2px; padding: 6px 0 6px 12px; }
    .foot-brand { max-width: none; }
}
@media (max-width: 380px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* التذييل لا يختبئ خلف زرّ المساعدة العائم */
.foot .base { padding-bottom: 54px; }




/* ══════════════════════════════════════════════════════════════════
   v23 — تناسق الشاشة، وفخامة أهدأ
   ══════════════════════════════════════════════════════════════════ */

/* ١) لا تمرير أفقي في أي وضع. كان `overflow-x` على body وحده، ولا
      يكفي حين تتمدّد قائمة منسدلة أو جدول عريض في وضع الإنجليزية. */
html { overflow-x: hidden; }
body { max-width: 100%; }
main, .wrap, .panel, .card { min-width: 0; max-width: 100%; }
.tablewrap { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* القوائم المنسدلة لا تتجاوز الشاشة مهما كان اتجاه الصفحة */
.menu, .notes {
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    inset-inline-start: auto;
}

/* ٢) أزرار الإدارة: شبكة متساوية بدل صفّ يلتفّ بأطوال مختلفة */
.modacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.modacts > form { display: contents; }
.modacts .btn { width: 100%; justify-content: center; padding-inline: 8px; font-size: 12.6px; }

/* ٣) فخامة: نفس الهوية، بحدّة أعلى ومسافات أنقى ــــــــــــــــــ */

/* خطّ نحاسي رفيع أعلى الصفحة — توقيع هادئ يعطي إحساس المنصّة */
body::before {
    content: ''; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brass-dim) 22%, var(--brass) 50%, var(--brass-dim) 78%, transparent);
    opacity: .55;
}

/* البطاقات: حدّ أوضح، عمق أنعم، ولمعة علوية خفيفة */
.card, .panel, .tile, .statecard {
    box-shadow: 0 1px 0 rgba(255,255,255,.028) inset, 0 18px 40px -30px rgba(0,0,0,.85);
}
/* ⚠️ كان هنا `.card { transition: border-color, transform }` — وهو يأتي
   بعد `.reveal` بنفس الأولوية، فيستبدل انتقالها كلّه ويحذف `opacity`
   منه. النتيجة: البطاقات تقفز من الشفافية إلى الظهور بلا تدرّج، أي
   اختفاء الأنيميشن من كل الصفحات. الانتقال هنا يشمل opacity عمداً. */
.card { transition: opacity .55s var(--ease), transform .55s var(--ease), border-color .2s var(--ease); }

/* العناوين: تباعد حروف أدقّ ووزن أهدأ — يقرأ أفخم */
h1, h2, .statecard h2 { letter-spacing: -.015em; }
h5 { letter-spacing: .12em; }

/* الأزرار الممتلئة: تدرّج نحاسي خفيف بدل لون مسطّح */
.btn.b-solid {
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.06));
}
.btn.b-solid:hover { background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.04)); }

/* حلقة تركيز واضحة ومهذّبة على كل عنصر تفاعلي */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 6px;
}

/* الجداول: صفوف أهدأ وحدود أرقّ */
.tbl th { letter-spacing: .06em; font-size: 11.5px; text-transform: uppercase; color: var(--fg-4); }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: rgba(255,255,255,.014); }



/* ══════════════════════════════════════════════════════════════════
   v25 — ثلاثة أشياء: تخطيط لا ينكسر على الجوال، لوحة تحكّم أوضح،
   وظهور متتابع أنيق عند التمرير.
   ══════════════════════════════════════════════════════════════════ */

/* ① الانزياح الأفقي — سبب «الزاوية» المكسورة في لقطات الشاشة.
   عنصر داخل شبكة CSS يأخذ min-width:auto تلقائياً، أي أنه يرفض أن
   يضيق تحت عرض أعرض محتوى بداخله. عمود المحتوى في لوحة التحكّم يضمّ
   بريداً طويلاً بلا مسافات، فكان يفرض عرضه على اللوحة كلها، فتخرج
   البطاقة عن الشاشة وتُقصّ من الطرف. */
.panel > *, .chat > *, .study > *, .build > *, .figures > *, main > * { min-width: 0; }

/* ② الكلمات الطويلة بلا مسافات (بريد، رابط، معرّف) تكسر السطر بدل
   أن تكسر الصفحة. */
.tablewrap td, .tablewrap th, .tablewrap td > *,
td, th, .dim, .muted, .mono, .note, .pm-details, .tag, .badge {
    overflow-wrap: anywhere;
}

/* ③ لا صورة ولا فيديو ولا إطار يتجاوز حاويته */
img, video, iframe { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
.ann-imgs { display: flex; flex-wrap: wrap; gap: 9px; }
.ann-imgs img { width: 132px; height: 132px; object-fit: cover; border-radius: var(--r-2); }

/* ══════ لوحة التحكّم — أوضح وأسهل ══════ */

/* اسم القسم الحالي فوق المحتوى: تعرف أين أنت بلا أن تبحث في الشريط */
.panel-now {
    margin: 0 0 14px; font-size: 1.06rem; font-weight: 400; color: var(--fg);
    padding-bottom: 11px; border-bottom: 1px solid var(--rule-soft);
}
.panel-now::before {
    content: ''; display: inline-block; width: 3px; height: 15px; margin-inline-end: 10px;
    background: var(--brass); border-radius: 2px; vertical-align: -2px;
}

/* منتقي الأقسام على الجوال — من بنية الموقع لا من بنية النظام.
   ⚠️ لا تُعِده <select> أبداً: النظام يرسم قائمته بنفسه، صفوفاً رمادية
   بخطّ النظام لا تقبل أي تنسيق. هذه القائمة تتوسّع تحت الزرّ ولا تطفو
   فوقه — بلا z-index، وبلا قصّ من حاوية أعلى، وبلا JavaScript. */
.pickwrap { display: none; }
.pickwrap > summary { list-style: none; cursor: pointer; }
.pickwrap > summary::-webkit-details-marker { display: none; }

.pick-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 17px; min-height: 56px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.10)), var(--surface);
    border: 1px solid var(--rule); border-radius: var(--r-3);
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
    transition: border-color .18s, background .18s;
}
.pick-btn:active { border-color: rgba(200,151,63,.45); }
.pick-btn .pk-lab {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fg-4); flex: 0 0 auto; padding-inline-end: 12px;
    border-inline-end: 1px solid var(--rule-soft); align-self: stretch;
    display: flex; align-items: center;
}
.pick-btn .pk-now { flex: 1 1 auto; font-size: 15.5px; color: var(--fg); font-weight: 400; min-width: 0; }
.pick-btn .pk-arrow {
    flex: 0 0 auto; width: 9px; height: 9px; margin-inline-start: 4px;
    border-inline-end: 1.6px solid var(--brass); border-bottom: 1.6px solid var(--brass);
    transform: rotate(45deg) translateY(-2px); transition: transform .22s var(--ease);
}
.pickwrap[open] .pick-btn {
    border-color: rgba(200,151,63,.42);
    border-end-start-radius: 0; border-end-end-radius: 0;
}
.pickwrap[open] .pk-arrow { transform: rotate(225deg) translateY(-3px); }

.pick-list {
    border: 1px solid rgba(200,151,63,.42); border-top: none;
    border-end-start-radius: var(--r-3); border-end-end-radius: var(--r-3);
    background: var(--ink-2); overflow: hidden;
    animation: pickOpen .2s var(--ease);
}
@keyframes pickOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.pick-list .pk-g {
    display: block; padding: 13px 17px 7px; font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4);
    background: rgba(0,0,0,.22);
}
.pick-list .pk-i {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 17px; font-size: 14.8px; font-weight: 300;
    color: var(--fg-2); border-top: 1px solid var(--rule-soft);
}
.pick-list .pk-i:active { background: var(--surface-2); }
.pick-list .pk-i.on {
    color: var(--brass); background: rgba(200,151,63,.09);
    box-shadow: inset 3px 0 0 var(--brass);
}
.pick-list .pk-i.on::after { content: '✓'; color: var(--brass); font-size: 13px; }

/* القائمة الجانبية على الكمبيوتر: مجموعات مفصولة بخطّ رفيع */
.panel-nav .pn-g { border-top: 1px solid var(--rule-soft); margin-top: 6px; }
.panel-nav .pn-g:first-child { border-top: none; margin-top: 0; }

@media (max-width: 1080px) {
    /* الشريط الأفقي الطويل كان يُسحب باليد ويُخفي نصف الأقسام.
       المنسدلة الأصلية أسرع ولا تحتاج سحباً. */
    .pickwrap  { display: block; margin-bottom: 18px; }
    .panel-nav { display: none; }
    /* اسم القسم صار على الزرّ نفسه، فلا داعي لتكراره تحته */
    .panel-now { display: none; }
}

/* بطاقة العضو على الجوال: صفّ العنوان والقيمة يبقى مقروءاً مهما طال البريد */
@media (max-width: 780px) {
    .tablewrap td { gap: 10px; }
    .tablewrap td::before { flex: 0 0 30%; }
    .tablewrap td > b, .tablewrap td > div { min-width: 0; }
    /* أزرار الإجراءات: صفّان مرتّبان بدل رصّ عشوائي */
    .tablewrap td.acts-cell .row,
    .tablewrap td.acts-cell > div {
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
    }
    .tablewrap td.acts-cell .btn { font-size: 13px; padding-inline: 6px; }
}

/* زرّ داخل شبكة حقول: العناصر في الشبكة تتمدّد لملء ارتفاع الصفّ،
   فزرّ يجاور كتلة صلاحيات طويلة يصير مستطيلاً ضخماً بحجم جاره. */
.fld-grid > .btn, .fld-grid > button.btn {
    grid-column: 1 / -1;
    justify-self: start; align-self: start;
    min-height: 48px; padding-inline: 30px;
}
@media (max-width: 700px) { .fld-grid > .btn { justify-self: stretch; } }

/* ══════ حركة مختلفة لكل قسم في الصفحة الرئيسية ══════
   كانت كل الأقسام تدخل من الأسفل بالحركة نفسها، فتبدو متكرّرة. الآن
   يتناوب الاتجاه — من الأسفل، ثم من الجانب، ثم اتّساع هادئ — وتُبطأ
   المدّة قليلاً حتى تُرى الحركة لا تُلمح. */
main > .band.reveal:not(.rv-in):nth-of-type(3n+1) { transform: translateY(30px); }
main > .band.reveal:not(.rv-in):nth-of-type(3n+2) { transform: translateY(20px) translateX(26px); }
main > .band.reveal:not(.rv-in):nth-of-type(3n)   { transform: translateY(18px) scale(.982); }
main > .band.reveal { transition-duration: .78s !important; }

/* البطاقات داخل القسم تتتابع بينها أيضاً، لا مع القسم دفعة واحدة */
.reveal.rv-in > .grid > *,
.reveal.rv-in > .cards > * { animation: rvUp .62s var(--ease) backwards; }
.reveal.rv-in > .grid > :nth-child(1), .reveal.rv-in > .cards > :nth-child(1) { animation-delay: .06s }
.reveal.rv-in > .grid > :nth-child(2), .reveal.rv-in > .cards > :nth-child(2) { animation-delay: .14s }
.reveal.rv-in > .grid > :nth-child(3), .reveal.rv-in > .cards > :nth-child(3) { animation-delay: .22s }
.reveal.rv-in > .grid > :nth-child(4), .reveal.rv-in > .cards > :nth-child(4) { animation-delay: .30s }
.reveal.rv-in > .grid > :nth-child(5), .reveal.rv-in > .cards > :nth-child(5) { animation-delay: .38s }
.reveal.rv-in > .grid > :nth-child(6), .reveal.rv-in > .cards > :nth-child(6) { animation-delay: .46s }
@keyframes rvUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
    main > .band.reveal:not(.rv-in) { transform: none !important; }
    .reveal.rv-in > .grid > *, .reveal.rv-in > .cards > * { animation: none !important; }
}

/* ══════ قائمة الأعضاء: بطاقات على كل العروض ══════
   ثمانية أعمدة لا تتّسع لها شاشة، فكان الجدول محبوساً في صندوق يُسحب
   أفقياً — وعجلة الفأرة لا تحرّكه. البطاقة تلغي السحب من أصله. */
.memcards { overflow: visible; border: none; border-radius: 0; }
.memcards table { display: block; min-width: 0; width: 100%; }
.memcards thead { display: none; }
.memcards tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.memcards tr {
    display: block; border: 1px solid var(--rule-soft); border-radius: var(--r-3);
    background: var(--surface); padding: 15px 16px; min-width: 0;
}
.memcards tr:hover { background: var(--surface); border-color: rgba(200,151,63,.28); }
.memcards td {
    display: flex; gap: 12px; align-items: baseline; padding: 7px 0;
    border-bottom: 1px solid var(--rule-soft); font-size: 13.4px; min-width: 0;
}
.memcards td:last-child { border-bottom: none; }
.memcards td::before {
    content: attr(data-l); flex: 0 0 34%; color: var(--fg-4); font-size: 11.5px;
    letter-spacing: .04em; min-width: 0;
}
.memcards td > * { min-width: 0; overflow-wrap: anywhere; }
/* صفّ الإجراءات يأخذ عرض البطاقة كاملاً بلا عنوان جانبي */
.memcards td.acts-cell { display: block; padding-top: 12px; }
.memcards td.acts-cell::before { display: none; }
.memcards td.acts-cell .row,
.memcards td.acts-cell > div:first-child {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px;
}
.memcards td.acts-cell .btn { font-size: 12.6px; padding-inline: 8px; }

/* محرِّر الجمهور — أكثر من فئة معاً */
.audbox { border: 1px solid var(--rule); border-radius: var(--r-3); background: rgba(0,0,0,.14); padding: 15px 16px; }
.audgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.audrow {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    border: 1px solid var(--rule-soft); border-radius: var(--r-2);
    background: var(--surface); cursor: pointer; font-size: 14px; color: var(--fg-2);
}
.audrow input { width: 18px; height: 18px; accent-color: var(--brass); flex: 0 0 auto; }
.audrow:hover { border-color: rgba(200,151,63,.35); }
.audrow:has(input:checked) { border-color: rgba(200,151,63,.5); background: rgba(200,151,63,.07); }

/* شارة المستوى بجانب الاسم */
.tierbadge {
    display: inline-block; font-size: 10.5px; line-height: 1; padding: 3px 7px;
    border: 1px solid currentColor; border-radius: 5px; vertical-align: 1px;
    margin-inline-start: 6px; letter-spacing: .03em; opacity: .95;
}

/* اختيار الأعضاء المسموح لهم بمشاهدة فيديو بعينه */
.pickers {
    border: 1px solid var(--rule); border-radius: var(--r-3);
    background: rgba(0,0,0,.14); padding: 15px 16px;
}
.pick-h { display: block; font-size: 12px; letter-spacing: .06em; color: var(--fg-3); margin-bottom: 6px; }
.memgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
    max-height: 320px; overflow-y: auto; padding-inline-end: 4px;
}
.memrow {
    display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center;
    padding: 9px 11px; border: 1px solid var(--rule-soft); border-radius: var(--r-2);
    background: var(--surface); cursor: pointer; min-width: 0;
}
.memrow:hover { border-color: rgba(200,151,63,.35); }
.memrow input { grid-row: span 2; width: 18px; height: 18px; accent-color: var(--brass); }
.memrow .mem-n { font-size: 14px; color: var(--fg-2); min-width: 0; overflow-wrap: anywhere; }
.memrow .mem-e { font-size: 11.5px; overflow-wrap: anywhere; }
.memrow:has(input:checked) { border-color: rgba(200,151,63,.5); background: rgba(200,151,63,.07); }

/* زرّ تحذيري — للإجراءات التي تسحب شيئاً (سحب VIP مثلاً) */
.btn.b-warn {
    border: 1px solid rgba(200,151,63,.45); background: rgba(200,151,63,.10); color: var(--brass);
}
.btn.b-warn:hover { background: rgba(200,151,63,.17); }


/* ══════════════════════════════════════════════════════════════════
   كتلة محميّة — تبقى آخر شيء في الملف
   وقعتُ في هذا الخطأ أكثر من مرّة: قاعدة عامة تُكتب في نهاية الملف
   فتستبدل انتقال `.reveal` وتُلغي الحركة من الموقع كلّه. إعادة
   تثبيتها هنا، وبـ !important على الانتقال، تجعل ذلك مستحيلاً.
   لا تكتب أي قاعدة بعد هذه الكتلة.
   ══════════════════════════════════════════════════════════════════ */
.reveal {
    transition: opacity .62s cubic-bezier(.22,.68,.32,1), transform .62s cubic-bezier(.22,.68,.32,1) !important;
    /* ⚠️ لا تفصل هذا السطر عن السطر أعلاه: `transition` مختصرة، فأي
       قاعدة تكتبها بعدها تصفّر التأخير. التتابع (بطاقة تلو بطاقة)
       يعتمد على `--rv-d` الذي يضعه app.js لكل عنصر بترتيبه. */
    transition-delay: var(--rv-d, 0s) !important;
}
.reveal:not(.rv-in) { opacity: 0; transform: translateY(22px) scale(.994); }
.reveal.rv-in       { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal:not(.rv-in) { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ══════════ v30 — إصلاحات المراجعة ══════════ */

/* زرّ داخل شبكة حقول كان يتمدّد بحجم أطول جار له، وبعض الأزرار تحمل
   style مضمّناً يتغلّب على القاعدة السابقة — لذلك تُثبَّت هنا صراحةً. */
.fld-grid > .btn, .fld-grid > button.btn, .grid2 > .btn, .grid2 > button.btn {
    grid-column: 1 / -1 !important;
    justify-self: start; align-self: start;
    width: auto; max-width: max-content; height: auto; min-height: 48px;
    padding-inline: 30px;
}
@media (max-width: 700px) {
    .fld-grid > .btn, .grid2 > .btn { justify-self: stretch; max-width: none; width: 100%; }
}

/* وضوح النصّ في اللوحة والجداول — رفع محسوب بلا تضخيم التصميم */
.panel .hint, .hint { font-size: 14px; }
.panel table th { font-size: 14px; }
.panel table td { font-size: 14.8px; }
.fld > span { font-size: 13.8px; }
.check { font-size: 14.8px; }
.btn { font-size: 15px; }
.memcards td.acts-cell .btn { font-size: 13.4px; }

/* الجداول الطويلة داخل اللوحة: تمرير أفقي مضبوط بدل خروجها عن الشاشة */
.panel .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel .tablewrap > table { min-width: 560px; }
.panel code, .panel .mono { word-break: break-all; font-size: 13.4px; }


/* حالات المجتمع: تحميل · فراغ · خطأ — بدل شاشة معلّقة بلا نهاية */
.pane-state { padding: 34px 22px; text-align: center; color: var(--fg-3); font-size: 14.5px; line-height: 1.9; }
.pane-state p { margin: 0 0 14px; }
.pane-state.err { color: var(--fg-2); }
.pane-state.err p::before { content: '⚠ '; color: var(--clay); }
.pane-state.empty p::before { content: '◌ '; color: var(--brass-dim); }
.pane-state .btn { min-height: 42px; }

/* ══════════ الموافقات والصفحات القانونية (v33) ══════════ */
.consent-box { border: 1px solid var(--rule); border-radius: var(--r-3); padding: 14px 16px; margin-top: 14px;
  background: var(--ink-2); }
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 14.5px;
  line-height: 1.75; }
.consent-row:last-of-type { margin-bottom: 0; }
.consent-row input { margin-top: 4px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--brass); }
.consent-row a { color: var(--brass-hi); border-bottom: 1px dotted var(--brass-dim); }
.consent-row .req { color: var(--clay); font-style: normal; }

.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 22px 0; }
.legal-card { display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 18px 20px; }
.legal-card:hover { border-color: var(--brass-dim); }
.legal-card h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--brass-hi); }
.legal-card p { margin: 0 0 10px; color: var(--fg-3); font-size: 14px; line-height: 1.75; }
.legal-v { font-size: 12.5px; color: var(--fg-4); }
.legal-doc { max-width: 760px; }
.legal-doc h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 6px 0 8px; }
.legal-lead { color: var(--fg-2); font-size: 15.5px; margin: 0 0 6px; }
.legal-meta { color: var(--fg-4); font-size: 13.5px; margin: 0 0 22px; }
.legal-back { margin-bottom: 14px; font-size: 14px; }
.legal-back a { color: var(--fg-3); }
.legal-sec { border-top: 1px solid var(--rule-soft); padding: 18px 0; }
.legal-sec h2 { display: flex; gap: 10px; align-items: baseline; font-size: 1.02rem; margin: 0 0 8px; }
.legal-sec h2 span { color: var(--brass-dim); font-family: var(--ff-num); font-size: .86rem; min-width: 22px; }
.legal-sec p { margin: 0; color: var(--fg-2); font-size: 15.2px; line-height: 1.95; }
.legal-consent { margin-top: 22px; border: 1px solid rgba(78,149,133,.35); background: rgba(78,149,133,.06);
  border-radius: var(--r-3); padding: 13px 16px; font-size: 14.5px; color: var(--fg-2); }
.legal-updated { color: var(--fg-4); font-size: 13px; margin-top: 20px; }

/* ══════════ تفاصيل الباقة المختارة (v34) ══════════ */
.plandetails { margin: 18px 0 6px; }
.plandetails .pd { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 20px 22px; }
.plandetails .pd h3 { margin: 0 0 8px; font-size: 1.08rem; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-price { color: var(--brass-hi); font-family: var(--ff-num); font-size: 1.15rem; }
.pd-desc { color: var(--fg-2); margin: 0 0 12px; font-size: 15px; line-height: 1.9; }
.pd-ben { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pd-ben li { position: relative; padding-inline-start: 24px; color: var(--fg-2); font-size: 15px; line-height: 1.8; }
.pd-ben li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--sage); font-weight: 700; }
@media (max-width: 640px) { .plandetails .pd { padding: 16px 17px; } .pd-ben li { font-size: 14.5px; } }

/* ══════════ مركز الإشعارات (v36) ══════════ */
.nc .nc-h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 16px; }
.nc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px; }
.nc-tabs { display: flex; gap: 6px; }
.nc-tabs a { padding: 8px 15px; border-radius: 99px; color: var(--fg-3); font-size: 14.5px;
  border: 1px solid var(--rule); }
.nc-tabs a.on { background: var(--brass); color: var(--ink); font-weight: 600; border-color: var(--brass); }
.nc-tabs a span { opacity: .7; font-family: var(--ff-num); font-size: 13px; }
.nc-list { display: grid; gap: 9px; margin-bottom: 26px; }
.nc-item { display: flex; gap: 13px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-3); padding: 14px 16px; align-items: flex-start; }
.nc-item.new { border-inline-start: 3px solid var(--brass); background: var(--surface-2); }
.nc-kind { flex: 0 0 auto; font-size: 12px; color: var(--fg-3); border: 1px solid var(--rule);
  border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.nc-k-mention, .nc-k-reply { color: var(--brass-hi); border-color: rgba(200,151,63,.4); }
.nc-k-membership, .nc-k-payment { color: var(--sage); border-color: rgba(78,149,133,.4); }
.nc-k-account { color: var(--clay); border-color: rgba(181,87,63,.4); }
.nc-body { min-width: 0; flex: 1; }
.nc-body h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; line-height: 1.6; }
.nc-body p { margin: 0 0 5px; color: var(--fg-3); font-size: 14.5px; line-height: 1.8; }
.nc-body time { color: var(--fg-4); font-size: 12.5px; }
.nc-empty { background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--r-4);
  padding: 34px 22px; text-align: center; color: var(--fg-3); font-size: 15px; }
.nc-table th, .nc-table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--rule-soft); }
.nc-table th { color: var(--fg-3); font-size: 13.5px; font-weight: 500; }
.nc-table td:not(:first-child) { text-align: center; width: 92px; }
.nc-table input { width: 18px; height: 18px; accent-color: var(--brass); }
.nc-master { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 620px) {
  .nc-item { flex-direction: column; gap: 8px; }
  .nc-table td:not(:first-child) { width: 62px; }
  .nc-table th, .nc-table td { padding: 9px 6px; font-size: 13.5px; }
}
.notes-all { display: block; padding: 10px 14px; text-align: center; font-size: 13.5px;
  color: var(--brass-hi); border-bottom: 1px solid var(--rule-soft); }
.notes-all:hover { background: var(--surface-3); }

/* ══════════ سجلّ المدفوعات (v37) ══════════ */
.pl-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.pl-filters input, .pl-filters select { background: var(--ink-2); border: 1px solid var(--rule);
  border-radius: var(--r-2); padding: 9px 12px; color: var(--fg); font: inherit; font-size: 14px; }
.pl-filters input { flex: 1 1 220px; min-width: 0; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pl-table th, .pl-table td { padding: 11px 12px; text-align: start; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; }
.pl-table th { color: var(--fg-3); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.pl-table tbody tr:hover { background: var(--ink-2); }
.pl-sub { color: var(--fg-4); font-size: 12.5px; }
.pl-amt { font-family: var(--ff-num); font-weight: 600; white-space: nowrap; }
.pl-note { color: var(--fg-3); font-size: 13.5px; max-width: 240px; }
.pl-pages { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 14px; }
@media (max-width: 760px) {
  .pl-table { min-width: 620px; }
  .pl-filters input, .pl-filters select { flex: 1 1 100%; }
}

/* ══════════ الشعار في صفحات الحساب (v39) ══════════ */
.auth-mark { display: inline-flex; margin-bottom: 12px; }
.auth-mark svg { filter: drop-shadow(0 4px 14px rgba(200,151,63,.22)); }
.l7n-mark { display: block; flex: 0 0 auto; }

/* ══════════ صفحة الأعضاء (v40) ══════════ */
.mem-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin-bottom: 16px; }
.mem-stats > div { background: var(--ink-2); border: 1px solid var(--rule-soft); border-radius: var(--r-3);
  padding: 13px 15px; }
.mem-stats span { display: block; color: var(--fg-3); font-size: 13px; margin-bottom: 4px; }
.mem-stats b { font-family: var(--ff-num); font-size: 1.5rem; color: var(--brass-hi); }
.mem-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.mem-filters input, .mem-filters select { background: var(--ink-2); border: 1px solid var(--rule);
  border-radius: var(--r-2); padding: 9px 12px; color: var(--fg); font: inherit; font-size: 14px; }
.mem-filters input { flex: 1 1 240px; min-width: 0; }
.mem-count { margin: 0 0 12px; }
.mem-pages { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 14px; }
@media (max-width: 700px) {
  .mem-filters input, .mem-filters select { flex: 1 1 100%; }
  .mem-stats b { font-size: 1.3rem; }
}

/* ══════════ تحسينات التصميم العامّة (v49) ══════════ */

/* عناوين أوضح تسلسلاً: الحجم وحده لا يكفي — الوزن والتباعد يكمّلانه */
h1, .h1 { letter-spacing: -.02em; font-weight: 700; }
h2, h3 { letter-spacing: -.012em; }
.panel h3 { font-weight: 650; }

/* البطاقات: عمق خفيف بدل حدود صارخة */
.card { position: relative; }
.card::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,151,63,.22), transparent); }

/* الأزرار: استجابة محسوسة عند اللمس */
.btn { transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.b-gold, .b-solid { box-shadow: 0 2px 14px rgba(200,151,63,.22); }

/* الحقول: تركيز واضح بلا إزعاج */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--brass-dim);
  box-shadow: 0 0 0 3px rgba(200,151,63,.12); }

/* الجداول في اللوحة: صفوف أوسع قليلاً لراحة القراءة */
.panel table td { padding-block: 11px; }
.panel table tbody tr:hover { background: var(--ink-2); }

/* الروابط داخل النصّ */
.hint a, p a { border-bottom: 1px solid rgba(200,151,63,.3); transition: border-color .2s var(--ease); }
.hint a:hover, p a:hover { border-bottom-color: var(--brass); }

/* تمرير أنعم للصفحة كلها */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ══════════ شاشات الحساب: بطاقة زجاجية وخلفية متدفّقة (v53) ══════════
   مستوحاة من مرجع بصري، لكن بهوية L7N النحاسية لا بالأصفر الصارخ:
   حوافّ مقصوصة · زجاج مضبَّب · شريطان يتدفّقان ببطء خلف البطاقة. */

.authwrap { position: relative; isolation: isolate; padding-bottom: 60px; }

/* الأشرطة المتدفّقة — طبقتان تتحرّكان بسرعتين مختلفتين */
.authwrap::before, .authwrap::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset-inline: -20%; height: 460px; filter: blur(60px); opacity: .5;
}
.authwrap::before {
  top: -60px;
  background:
    radial-gradient(60% 100% at 20% 50%, rgba(200,151,63,.42), transparent 70%),
    radial-gradient(50% 100% at 70% 40%, rgba(224,180,95,.26), transparent 70%);
  animation: auth-flow-a 22s ease-in-out infinite alternate;
}
.authwrap::after {
  bottom: -40px;
  background:
    radial-gradient(55% 100% at 75% 50%, rgba(143,102,32,.38), transparent 72%),
    radial-gradient(45% 100% at 25% 60%, rgba(78,149,133,.16), transparent 70%);
  animation: auth-flow-b 28s ease-in-out infinite alternate;
}
@keyframes auth-flow-a {
  from { transform: translate3d(-6%, 0, 0) scale(1); }
  to   { transform: translate3d(8%, 26px, 0) scale(1.12); }
}
@keyframes auth-flow-b {
  from { transform: translate3d(7%, 0, 0) scale(1.08); }
  to   { transform: translate3d(-8%, -22px, 0) scale(1); }
}

/* البطاقة الزجاجية بحوافّ مقصوصة */
.authwrap .narrow > .card,
.authwrap .narrow > form,
.authwrap .authcard {
  position: relative;
  background: linear-gradient(155deg, rgba(23,28,36,.82), rgba(14,17,22,.72));
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(200,151,63,.18);
  border-radius: 26px;
  padding: 30px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  /* الحافّتان المقصوصتان: أعلى اليسار وأسفل اليمين */
  clip-path: polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px);
  animation: auth-in .6s var(--ease) both;
}
@keyframes auth-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* خطّ نحاسي يمرّ على الحافّة العليا */
.authwrap .narrow > .card::after,
.authwrap .authcard::after {
  content: ''; position: absolute; top: 0; inset-inline: 34px 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,180,95,.55), transparent);
}

/* الحقول: تركيز نحاسي واضح */
.authwrap input[type="text"], .authwrap input[type="email"],
.authwrap input[type="password"], .authwrap input:not([type]) {
  background: rgba(18,22,29,.7);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 13px 15px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.authwrap input:focus {
  outline: none; background: rgba(18,22,29,.92);
  border-color: rgba(200,151,63,.6);
  box-shadow: 0 0 0 3px rgba(200,151,63,.14), 0 6px 20px rgba(0,0,0,.3);
}

/* الزرّ الأساسي: تدرّج نحاسي مع وميض عند المرور */
.authwrap .b-solid, .authwrap .b-gold {
  position: relative; overflow: hidden; border-radius: 14px; min-height: 50px;
  background: linear-gradient(135deg, var(--brass-hi), var(--brass));
  color: var(--ink); font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 8px 24px rgba(200,151,63,.28);
}
.authwrap .b-solid::after, .authwrap .b-gold::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
}
.authwrap .b-solid:hover::after, .authwrap .b-gold:hover::after { animation: auth-sheen .7s var(--ease); }
@keyframes auth-sheen { to { transform: translateX(120%); } }

.authwrap .auth-mark svg { animation: auth-mark-in .7s var(--ease) both; }
@keyframes auth-mark-in { from { opacity: 0; transform: scale(.85) rotate(-6deg); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .authwrap .narrow > .card, .authwrap .authcard { padding: 22px 18px; border-radius: 20px;
    clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px); }
  .authwrap::before, .authwrap::after { height: 320px; filter: blur(46px); opacity: .42; }
}
@media (prefers-reduced-motion: reduce) {
  .authwrap::before, .authwrap::after { animation: none; }
  .authwrap .narrow > .card, .authwrap .authcard, .authwrap .auth-mark svg { animation: none; }
  .authwrap .b-solid:hover::after { animation: none; }
}

/* ══════════ رمز التأكيد: حركة التحقّق (v54) ══════════
   أربع مراحل: كتابة · تفكّك · اندماج · نجاح. */

.otp-label span { display: block; text-align: center; margin-bottom: 10px; }
.otp { position: relative; display: flex; gap: 10px; justify-content: center;
  direction: ltr; padding: 18px 0 8px; min-height: 96px; }

.otp-cell {
  width: 52px; height: 62px; text-align: center; font: 700 1.55rem/1 var(--ff-num);
  color: var(--fg); background: rgba(18,22,29,.85);
  border: 1px solid var(--rule); border-radius: 15px; caret-color: var(--brass-hi);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  transform: translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0deg)) scale(var(--sc,1));
}
.otp-cell:focus { outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(200,151,63,.16), 0 0 22px rgba(200,151,63,.28); background: rgba(22,27,35,.95); }
.otp-cell.filled { border-color: rgba(200,151,63,.55); }

/* الخيوط بين الخانات — تظهر أثناء التحقّق فقط */
.otp-links { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  transition: opacity .3s var(--ease); pointer-events: none; }
.otp-links line { stroke: rgba(200,151,63,.42); stroke-width: .5; stroke-dasharray: 2 2; }

/* علامة الاندماج — مخفيّة حتى النهاية */
.otp-merge { position: absolute; inset-inline-start: 50%; top: 50%;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  display: grid; place-items: center; border-radius: 17px;
  background: rgba(18,22,29,.95); border: 2px solid var(--sage); color: var(--sage);
  opacity: 0; transform: scale(.4) rotate(-25deg); pointer-events: none; }
.otp-merge svg { width: 28px; height: 28px; stroke-dasharray: 26; stroke-dashoffset: 26; }

/* ── المرحلة ٢: التفكّك — كل خانة تدور إلى موضعها وتظلّ تتنفّس ── */
.otp.verifying .otp-links { opacity: 1; }
.otp.verifying .otp-cell { animation: otp-orbit 1.5s var(--ease) infinite alternate;
  border-color: rgba(200,151,63,.5); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.otp.verifying .otp-cell:nth-child(2) { --tx: -86px; --ty: -22px; --rot: -14deg; animation-delay: 0s; }
.otp.verifying .otp-cell:nth-child(3) { --tx: -30px; --ty: 20px;  --rot: 11deg;  animation-delay: .08s; }
.otp.verifying .otp-cell:nth-child(4) { --tx: 26px;  --ty: -24px; --rot: -9deg;  animation-delay: .16s; }
.otp.verifying .otp-cell:nth-child(5) { --tx: 82px;  --ty: 18px;  --rot: 13deg;  animation-delay: .24s; }
.otp.verifying .otp-cell:nth-child(6) { --tx: 44px;  --ty: -6px;  --rot: -6deg;  animation-delay: .32s; }
.otp.verifying .otp-cell:nth-child(7) { --tx: -60px; --ty: 4px;   --rot: 8deg;   animation-delay: .4s; }
@keyframes otp-orbit {
  from { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); }
  to   { transform: translate(calc(var(--tx) * .82), calc(var(--ty) * -.75))
                    rotate(calc(var(--rot) * -1)) scale(1.04); }
}

/* ── المرحلة ٣: الاندماج — الخانات تنجذب إلى المركز وتتلاشى ── */
.otp.merging .otp-links { opacity: 0; }
.otp.merging .otp-cell { animation: none;
  transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .4s var(--ease) .15s;
  --tx: 0; --ty: 0; --rot: 0deg; --sc: .25; opacity: 0; }
.otp.merging .otp-merge { opacity: 1; transform: scale(1) rotate(0deg);
  transition: opacity .35s var(--ease) .35s, transform .5s cubic-bezier(.34,1.56,.64,1) .35s; }
.otp.merging .otp-merge svg { animation: otp-check .45s var(--ease) .7s forwards; }
@keyframes otp-check { to { stroke-dashoffset: 0; } }

/* ── المرحلة ٤: النجاح — البطاقة كلها تتحوّل ── */
#verify-card.ok { --brass: var(--sage); --brass-hi: #6FBCA9; }
#verify-card.ok .b-solid, #verify-card.ok .b-gold {
  background: linear-gradient(135deg, #6FBCA9, var(--sage)); color: #071310;
  box-shadow: 0 8px 26px rgba(78,149,133,.34); }
#verify-card.ok h1, #verify-card.ok .kicker { color: var(--sage); }
#verify-card.ok::after { content: ''; position: absolute; inset: -30px; z-index: -1; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(78,149,133,.20), transparent 70%);
  animation: otp-glow .8s var(--ease) both; }
@keyframes otp-glow { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ── الخطأ: رجّة قصيرة بلا عدوانية ── */
.otp.bad .otp-cell { border-color: var(--clay); animation: otp-shake .4s var(--ease); }
@keyframes otp-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (max-width: 480px) {
  .otp { gap: 7px; }
  .otp-cell { width: 44px; height: 54px; font-size: 1.3rem; border-radius: 13px; }
  .otp.verifying .otp-cell:nth-child(2) { --tx: -66px; } .otp.verifying .otp-cell:nth-child(3) { --tx: -24px; }
  .otp.verifying .otp-cell:nth-child(4) { --tx: 20px; }  .otp.verifying .otp-cell:nth-child(5) { --tx: 62px; }
  .otp.verifying .otp-cell:nth-child(6) { --tx: 34px; }  .otp.verifying .otp-cell:nth-child(7) { --tx: -46px; }
}
@media (prefers-reduced-motion: reduce) {
  .otp-cell, .otp.verifying .otp-cell, .otp.merging .otp-cell { animation: none !important; transition: opacity .2s; }
  .otp.verifying .otp-cell { --tx: 0; --ty: 0; --rot: 0deg; }
  .otp.merging .otp-merge { transition: opacity .2s; transform: none; }
  .otp.merging .otp-merge svg { stroke-dashoffset: 0; animation: none; }
  #verify-card.ok::after { animation: none; }
}
.spin { display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }

/* ══════════ لغة الحركة: توقيع مختلف لكل قسم (v55) ══════════
   منحنيات وتوقيتات موحّدة، وتوقيع بصري مختلف في كل مكان:
   الحساب يدخل سطراً سطراً · الباقات تُقلَب · الأسهم أرقامها تعدّ ·
   الغرف تنزلق · اللوحة تظهر بهدوء بلا إلهاء. */

:root { --mo: cubic-bezier(.22,1,.36,1); --mo-back: cubic-bezier(.34,1.56,.64,1); }

/* ── ١) الحساب: الحقول تدخل واحداً بعد الآخر ── */
.authwrap .fld, .authwrap .check, .authwrap .btn, .authwrap .consent-box, .authwrap .notice {
  animation: f-in .5s var(--mo) both;
}
.authwrap .fld:nth-of-type(1) { animation-delay: .10s }
.authwrap .fld:nth-of-type(2) { animation-delay: .17s }
.authwrap .fld:nth-of-type(3) { animation-delay: .24s }
.authwrap .consent-box { animation-delay: .30s }
.authwrap .check { animation-delay: .32s }
.authwrap .btn   { animation-delay: .38s }
@keyframes f-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* إرسال النموذج: الزرّ يُعلن أنه يعمل بدل أن يتجمّد */
.authwrap form.sending { pointer-events: none; }
.authwrap form.sending .b-solid, .authwrap form.sending .b-gold { opacity: .92; }
.authwrap form.sending .b-solid::before, .authwrap form.sending .b-gold::before {
  content: ''; position: absolute; inset: 0; background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: sweep 1.1s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
.authwrap form.bad { animation: shake .4s var(--mo); }
@keyframes shake { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

/* ── ٢) الباقات: البطاقة تُقلَب قليلاً عند دخولها، وتُطوَّق عند اختيارها ── */
body[data-page="join"] .plancard { animation: card-tilt .55s var(--mo) both; }
body[data-page="join"] .plancard:nth-child(1) { animation-delay: .06s }
body[data-page="join"] .plancard:nth-child(2) { animation-delay: .14s }
body[data-page="join"] .plancard:nth-child(3) { animation-delay: .22s }
body[data-page="join"] .plancard:nth-child(4) { animation-delay: .30s }
@keyframes card-tilt {
  from { opacity: 0; transform: perspective(900px) rotateX(9deg) translateY(16px); }
  to   { opacity: 1; transform: none; }
}
body[data-page="join"] .plancard input:checked + .pc-in,
body[data-page="join"] input:checked + .pc-in { animation: ring .5s var(--mo-back); }
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(200,151,63,.45); }
  100% { box-shadow: 0 0 0 12px rgba(200,151,63,0); }
}
body[data-page="join"] .pd { animation: f-in .45s var(--mo) both; }

/* ── ٣) الغرف والقوائم: انزلاق من جهة النصّ ── */
body[data-page="community"] #rooms > * { animation: slide-in .45s var(--mo) both; }
body[data-page="community"] #rooms > :nth-child(1) { animation-delay: .04s }
body[data-page="community"] #rooms > :nth-child(2) { animation-delay: .09s }
body[data-page="community"] #rooms > :nth-child(3) { animation-delay: .14s }
body[data-page="community"] #rooms > :nth-child(4) { animation-delay: .19s }
body[data-page="community"] #rooms > :nth-child(n+5) { animation-delay: .24s }
@keyframes slide-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
html[dir="ltr"] body[data-page="community"] #rooms > * { animation-name: slide-in-ltr; }
@keyframes slide-in-ltr { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ── ٤) اللوحة: ظهور هادئ بلا إلهاء — المشرف يعمل لا يتفرّج ── */
body[data-page="admin"] .card { animation: f-in .32s var(--mo) both; }
body[data-page="admin"] .card:nth-of-type(2) { animation-delay: .05s }
body[data-page="admin"] .card:nth-of-type(3) { animation-delay: .09s }
body[data-page="admin"] .card:nth-of-type(n+4) { animation-delay: .12s }

/* ── ٥) الإشعارات والصفحات القانونية: الأسطر تتتابع ── */
body[data-page="notifications"] .nc-item { animation: f-in .4s var(--mo) both; }
body[data-page="notifications"] .nc-item:nth-child(1) { animation-delay: .04s }
body[data-page="notifications"] .nc-item:nth-child(2) { animation-delay: .09s }
body[data-page="notifications"] .nc-item:nth-child(3) { animation-delay: .14s }
body[data-page="notifications"] .nc-item:nth-child(n+4) { animation-delay: .18s }
body[data-page="legal"] .legal-sec { animation: f-in .42s var(--mo) both; }
body[data-page="legal"] .legal-sec:nth-of-type(2) { animation-delay: .05s }
body[data-page="legal"] .legal-sec:nth-of-type(3) { animation-delay: .1s }
body[data-page="legal"] .legal-sec:nth-of-type(n+4) { animation-delay: .14s }

@media (prefers-reduced-motion: reduce) {
  .authwrap .fld, .authwrap .check, .authwrap .btn, .authwrap .consent-box, .authwrap .notice,
  body[data-page="join"] .plancard, body[data-page="join"] .pd,
  body[data-page="community"] #rooms > *, body[data-page="admin"] .card,
  body[data-page="notifications"] .nc-item, body[data-page="legal"] .legal-sec {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .authwrap form.sending .b-solid::before { animation: none; }
}

/* ═══ v56 — admin: stock data sources + model parameters (rebuilt for phones) ═══ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.src-form { display: grid; gap: 12px; }
.src-row { border: 1px solid var(--rule-soft); border-radius: var(--r-1); padding: 14px 16px; background: var(--surface-2); min-width: 0; }
.src-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.src-head b { font-size: 15.5px; letter-spacing: .01em; }
.src-toggle { margin: 0; }
.src-badge, .src-state { font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 99px; border: 1px solid var(--rule); color: var(--fg-3); white-space: nowrap; }
.src-official   { color: var(--sage);       border-color: color-mix(in srgb, var(--sage) 45%, transparent); }
.src-licensed   { color: var(--slate-blue); border-color: color-mix(in srgb, var(--slate-blue) 45%, transparent); }
.src-unofficial { color: var(--brass);      border-color: color-mix(in srgb, var(--brass) 45%, transparent); }
.src-off        { color: var(--fg-4); }
.src-state { margin-inline-start: auto; }
.src-state.is-on  { color: var(--up); }
.src-state.is-off { color: var(--fg-4); }
.src-role { margin: 8px 0 10px; font-size: 13.5px; color: var(--fg-3); }
.src-row .fld { margin-bottom: 10px; }
.src-row .fld .in { width: 100%; }
.src-more summary, .sk-about summary { cursor: pointer; font-size: 13px; color: var(--brass); list-style: none; padding: 6px 0; }
.src-more summary::-webkit-details-marker, .sk-about summary::-webkit-details-marker { display: none; }
.src-more summary::before, .sk-about summary::before { content: '+'; display: inline-block; width: 1.2em; font-weight: 600; }
.src-more[open] summary::before, .sk-about[open] summary::before { content: '–'; }
dl.kv { margin: 6px 0 0; display: grid; gap: 10px; }
dl.kv > div { display: grid; gap: 3px; }
dl.kv dt { font-size: 12.5px; color: var(--fg-3); }
dl.kv dd { margin: 0; font-size: 14px; line-height: 1.85; color: var(--fg-2); overflow-wrap: anywhere; }
.param-list > div { border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.param-list dt { font-size: 14px; color: var(--fg); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.param-list dt em { font-style: normal; font-family: var(--ff-num); color: var(--brass-hi); }
.src-now { margin: 4px 0 8px; }
@media (max-width: 640px) {
  .src-row { padding: 12px; }
  .src-state { margin-inline-start: 0; }
}