/* ── مكوّنات مشتركة: Select2، النوافذ، التأكيد، الرفع، التبويبات، الرسوم البيانية ──
   بنفس الهوية: مسطّح، حدود رفيعة، أخضر للتفاعل وذهبي للإبراز فقط. */

/* ── Select2 ─────────────────────────────────────────────── */
.select2-container { font: inherit; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 48px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--white);
  display: flex; align-items: center; transition: border-color var(--t-fast);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4; padding-inline: 14px 36px; color: var(--ink); width: 100%;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-inline: 14px 36px; padding-left: 36px; padding-right: 14px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; width: 32px; }
/* نفس ارتفاع الحقول المجاورة في كل سياق: 48 في النماذج، 42 في شريط التصفية، 44 في محرر الصفوف. */
.filters .select2-container--default .select2-selection--single { min-height: 42px; }
.filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.row-item .select2-container--default .select2-selection--single { min-height: 44px; }
.row-item .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--muted) transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--muted); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--green-900); outline: none; }
.select2-container--default .select2-selection--multiple { padding: 4px 8px; flex-wrap: wrap; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 0; border: 1px solid var(--green-900); background: var(--green-50); color: var(--green-900);
  border-radius: 999px; padding: 2px 10px 2px 26px; font-size: .85rem; font-weight: 500; position: relative;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { padding: 2px 26px 2px 10px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border: 0; background: none; color: var(--green-900); position: absolute; inset-block: 0; left: 6px; padding: 0 4px; font-size: 1rem;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { left: auto; right: 6px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background: none; color: var(--danger); }
.select2-container--default .select2-search--inline .select2-search__field { margin: 0; height: 28px; font: inherit; }
.select2-dropdown { border: 1px solid var(--green-900); border-radius: var(--r-md); background: var(--white); overflow: hidden; z-index: 1100; }
.select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--green-900); }
.select2-results__option { padding: 9px 14px; font-size: .95rem; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--green-900); color: var(--white); }
.select2-container--default .select2-results__option--selected { background: var(--green-50); color: var(--green-900); font-weight: 700; }
.select2-container--default .select2-results__group { padding: 8px 14px 4px; font-size: .76rem; color: var(--muted); letter-spacing: .04em; }
.select2-results__message { color: var(--muted); }
.toolbar .select2-container { width: auto !important; min-width: 180px; }

/* ── النوافذ: بطاقة في منتصف الشاشة فوق خلفية معتمة (ملء الشاشة على الهاتف) ─────────
   الرأس: أيقونة + عنوان + زر إغلاق صغير. الجسم يتمرّر وحده. الأزرار ملاصقة للحقول في أسفل البطاقة،
   والأساسي أولًا (يمينًا في العربية) كما في نماذج الصفحات. */
html.has-modal { overflow: hidden; }
dialog.modal {
  width: min(640px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 64px); margin: auto;
  padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); overflow: hidden;
}
dialog.modal.modal-wide { width: min(880px, calc(100vw - 48px)); }
dialog.modal::backdrop { background: rgba(6, 45, 36, .55); }
dialog.modal[open] { display: flex; flex-direction: column; }
.modal-bar {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.modal-bar h2 { font-size: 1.12rem; color: var(--green-900); display: flex; gap: 12px; align-items: center; min-width: 0; }
.modal-bar h2 .icon { width: 20px; height: 20px; color: var(--gold-600); padding: 8px; box-sizing: content-box; border-radius: 10px; background: var(--gold-100); flex: none; }
.modal-bar .modal-x {
  margin-inline-start: auto; width: 38px; min-height: 38px; padding: 0; justify-content: center;
  border-color: transparent; color: var(--muted); background: transparent;
}
.modal-bar .modal-x:hover { background: var(--cream); color: var(--ink); border-color: var(--line); }
.modal-bar .modal-x span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; }
.modal-inner { display: grid; gap: 18px; }
.modal-inner > .hint:first-child { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--cream); border: 1px solid var(--line); color: var(--ink-2); }
.modal-foot { flex: none; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--cream); }
.modal-foot .modal-foot-inner { display: flex; gap: 10px; align-items: center; justify-content: flex-start; }
.modal-foot .btn-primary { min-width: 150px; }
.motion-on dialog.modal[open] { animation: modal-in .26s var(--ease-out); }
.motion-on dialog.modal[open]::backdrop { animation: backdrop-in .26s var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes backdrop-in { from { opacity: 0; } }
@media (max-width: 640px) {
  dialog.modal, dialog.modal.modal-wide { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .modal-bar { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .modal-foot .modal-foot-inner > .btn { flex: 1; }
}

/* ── التأكيد ─────────────────────────────────────────────── */
dialog.confirm-box {
  width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink);
}
dialog.confirm-box::backdrop { background: rgba(6, 45, 36, .45); }
.confirm-body { display: flex; gap: 14px; align-items: flex-start; padding: 22px 22px 8px; }
.confirm-body p { margin: 6px 0 0; font-weight: 500; line-height: 1.6; }
.confirm-body .ico-box { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-start; padding: 14px 22px 18px; }
.motion-on dialog.confirm-box[open] { animation: modal-in .22s var(--ease-out); }

/* ── الرفع ───────────────────────────────────────────────── */
.dropzone {
  display: grid; place-items: center; min-height: 150px; padding: 20px; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: var(--white);
  transition: border-color var(--t-fast), background var(--t-fast); position: relative;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--green-900); background: var(--green-50); }
.dropzone.has-file { border-style: solid; border-color: var(--green-900); cursor: default; }
.dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dz-empty { display: grid; gap: 6px; justify-items: center; color: var(--ink-2); }
.dz-empty .icon { width: 30px; height: 30px; color: var(--gold-600); }
.dz-empty small { color: var(--muted); }
.dz-picked { display: flex; gap: 16px; align-items: center; width: 100%; text-align: start; }
.dz-preview { flex: none; width: 120px; display: grid; place-items: center; }
.dz-preview img, .dz-preview video { max-width: 120px; max-height: 90px; border-radius: var(--r-md); border: 1px solid var(--line); object-fit: cover; }
.dz-preview audio { width: 220px; max-width: 100%; }
.dz-file-ic .icon { width: 42px; height: 42px; color: var(--green-900); }
.dz-meta { display: grid; gap: 2px; min-width: 0; }
.dz-name { overflow-wrap: anywhere; }
.dz-size { color: var(--muted); }
.dz-change { color: var(--green-700); font-weight: 700; font-size: .88rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dropzone.has-file .dz-change { pointer-events: auto; }
.upload-progress { display: grid; gap: 6px; }
.upload-progress i { display: block; height: 6px; border-radius: 3px; background: var(--green-100); position: relative; overflow: hidden; }
.upload-progress i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p, 0%); background: var(--green-900); transition: width .2s linear; }
.upload-progress small { color: var(--muted); }
.upload-progress.is-bad small { color: var(--danger); }
.upload-progress.is-bad i::after { background: var(--danger); }

/* ── التبويبات ───────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button {
  flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 12px 14px 10px;
  border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-weight: 500;
  color: var(--muted); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.tabs a .icon, .tabs button .icon { width: 17px; height: 17px; }
.tabs a:hover, .tabs button:hover { color: var(--green-900); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--green-900); border-bottom-color: var(--gold-500); font-weight: 700; }
.tabs .count { font-size: .75rem; padding: 0 7px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); }

/* ── الرسوم البيانية (SVG من الخادم) ───────────────────────── */
.chart { width: 100%; height: auto; display: block; overflow: visible; max-height: 260px; }
.chart text { font-family: var(--font-sans); fill: var(--muted); font-size: 11px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-2); }
.chart .area { fill: var(--green-100); }
.chart .line { fill: none; stroke: var(--green-900); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--white); stroke: var(--green-900); stroke-width: 2; }
.chart .dot.last { fill: var(--gold-500); stroke: var(--green-950); }
.chart .ch-bar { fill: var(--green-900); }
.chart .ch-bar.alt { fill: var(--gold-500); }
.chart .ch-bar:hover, .chart .hit:hover + .dot { fill: var(--green-700); }
.chart .value { fill: var(--ink-2); font-weight: 700; }
.chart .hbar-label { fill: var(--ink-2); font-size: 12px; }
.donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; }
.donut .track { fill: none; stroke: var(--cream); }
.donut text { font-family: var(--font-display); fill: var(--green-900); }
.legend { display: grid; gap: 8px; font-size: .9rem; flex: 1; min-width: 160px; }
.legend li { display: flex; gap: 8px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; background: var(--c); }
.legend b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.motion-on .chart .ch-bar, .motion-on .chart .area { animation: chart-in .9s var(--ease-out) both; transform-box: fill-box; transform-origin: bottom; }
.motion-on .chart .hbar { animation-name: chart-grow; transform-origin: left; }
.motion-on .chart .hbar.rtl { transform-origin: right; }
.motion-on .chart .line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: chart-draw 1.4s var(--ease-out) forwards; }
@keyframes chart-in { from { transform: scaleY(0); } }
@keyframes chart-grow { from { transform: scaleX(0); } }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }

/* Select2 داخل حقل بأيقونة (.input-wrap) */
.input-wrap .select2-container { flex: 1; }
.input-wrap .select2-selection--single .select2-selection__rendered { padding-inline-start: 42px !important; }
.input-wrap > .icon { z-index: 2; pointer-events: none; }

/* ── المسجّل (الواجبات) ───────────────────────────────────── */
.recorder {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center;
  padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--white);
}
.recorder audio { grid-column: 1 / -1; width: 100%; height: 40px; }
.rec-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--green-900); color: var(--white); position: relative; transition: background var(--t-fast), transform var(--t-fast);
}
.rec-btn:hover { background: var(--green-700); }
.rec-btn:active { transform: scale(.96); }
.rec-btn .icon { width: 24px; height: 24px; }
.rec-btn.is-stop { background: var(--danger); }
.rec-btn.is-stop i { width: 18px; height: 18px; border-radius: 3px; background: var(--white); }
.recorder.is-rec { border-color: var(--danger); }
.motion-on .recorder.is-rec .rec-btn.is-stop::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--danger); animation: rec-ring 1.4s ease-out infinite;
}
@keyframes rec-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.recorder.has-take { border-color: var(--green-900); }
.rec-info { display: grid; gap: 2px; }
.rec-info b { color: var(--ink); }
.rec-time { font-size: 1.3rem; font-weight: 700; color: var(--green-900); letter-spacing: .04em; }
.recorder.is-rec .rec-time { color: var(--danger); }

/* ── صفحة الوسائط ─────────────────────────────────────────── */
.media-code { display: inline-flex; gap: 8px; align-items: center; }
.media-code .icon { width: 17px; height: 17px; color: var(--gold-600); }
.media-preview audio { height: 36px; max-width: 260px; }
.media-preview img, .media-preview video { max-width: 120px; max-height: 70px; border-radius: var(--r-sm); border: 1px solid var(--line); object-fit: cover; display: block; }

/* ── تبويبات حسابي ────────────────────────────────────────── */
.profile-tabs { margin-top: -4px; }

/* ── تثبيت التطبيق (PWA) ─────────────────────────────────────── */
.btn-install .icon { color: var(--gold-600); }
.install-help { max-width: 560px; }
.install-hero { display: flex; gap: 16px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.install-hero img { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--line); flex: none; }
.install-hero b { display: block; font-size: 1.15rem; color: var(--green-900); font-family: var(--font-brand); letter-spacing: .04em; direction: ltr; text-align: start; }
.install-hero p { margin: 4px 0 0; color: var(--ink-2); font-size: .95rem; }
.install-os { display: grid; gap: 12px; }
.install-os h3 { font-size: 1rem; color: var(--green-900); }
.install-steps { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); counter-reset: step; }
.install-steps li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); counter-increment: step; }
.install-steps li:first-child { border-top: 0; }
.install-steps li::before { content: counter(step); flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--green-900); color: var(--green-900); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.install-steps .step-ico { flex: none; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--cream); display: grid; place-items: center; color: var(--green-900); }
.install-steps .step-ico .icon { width: 20px; height: 20px; }

/* ── قائمة الحساب (الصورة في الترويسة) ───────────────────────── */
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu[open] > summary { border-color: var(--gold-500); }
.account-pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px; padding: 6px;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-md); animation: menu-in .18s var(--ease-out);
}
.account-who { display: grid; gap: 2px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.account-who b { font-size: .95rem; color: var(--ink); }
.account-who small { font-size: .8rem; color: var(--muted); text-align: start; }
.account-pop a, .account-logout {
  display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px; border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: .92rem; color: var(--ink); text-decoration: none; cursor: pointer; text-align: start;
}
.account-pop a:hover { background: var(--green-50); color: var(--green-900); }
.account-pop .icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.account-pop form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.account-logout { color: var(--danger); font-weight: 700; }
.account-logout .icon { color: var(--danger) !important; }
.account-logout:hover { background: var(--danger-bg); }

/* زر الخروج في أسفل الشريط الجانبي للوحة التحكم */
.side-foot form { margin: 0; }
.side-logout {
  display: flex; width: 100%; gap: 8px; align-items: center; padding: 8px 12px; border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: .88rem; font-weight: 700; color: #F0B8AE; cursor: pointer; text-align: start;
}
.side-logout .icon { width: 16px; height: 16px; }
.side-logout:hover { background: rgba(240, 184, 174, .1); color: #FFD5CD; }

/* شريط معاينة المحرر (المسودات كما يراها الطالب) */
.preview-bar { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px var(--gutter); background: #FBF1DE; border-bottom: 1px solid #EACB9A; color: #7A4D0B; font-size: .9rem; font-weight: 700; text-align: center; }
.preview-bar .icon { width: 18px; height: 18px; flex: none; }
.s2-person { display: grid; gap: 1px; } .s2-person small { font-size: .78rem; opacity: .75; text-align: start; }

/* ── شبكة الحقول ومفتاح التشغيل (مشتركة بين المنصة ولوحة التحكم) ── */
.form-grid { display: grid; gap: 20px 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.form-grid.cols-1 { grid-template-columns: 1fr; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 900px) { .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; } }
/* الحقول داخل الشبكة متحاذية: لا هامش علوي إضافي (كان يُنزل الحقل الثاني في كل صف). */
/* تخصيص أعلى من «.field + .field» في site.css (0,2,0)، وإلا بقي الهامش ونزل الحقل الثاني عن صفّه. */
.form-grid > .field + .field, .form-grid > * + *, .grid-2 > .field + .field, .modal-inner .field + .field { margin-top: 0; }
/* مفتاح تشغيل (بدل مربع الاختيار للحالات) */
.switch { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; margin: 1px 0 0; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background var(--t-fast); }
.switch input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: inset-inline-start var(--t-fast); }
.switch input:checked { background: var(--green-900); }
.switch input:checked::after { inset-inline-start: 19px; }
.switch input:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.switch b { display: block; font-size: .92rem; color: var(--ink); }
.switch small { display: block; font-size: .8rem; color: var(--muted); }
.switch:has(input:checked) { border-color: var(--green-100); background: var(--green-50); }
.switches { display: grid; gap: 8px; }


/* ── حسابي ────────────────────────────────────────────────── */
.pf-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding: 32px var(--gutter) 64px; display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .pf-wrap { grid-template-columns: 290px minmax(0, 1fr); } .pf-aside { position: sticky; top: calc(var(--header-h) + 20px); } }
.pf-aside { display: grid; gap: 12px; }
.pf-me { display: grid; justify-items: center; gap: 6px; padding: 24px 18px; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pf-avatar { width: 84px; height: 84px; font-size: 2rem; font-family: var(--font-display); margin-bottom: 6px; border-width: 3px; border-color: var(--gold-200); }
.pf-me b { font-size: 1.1rem; color: var(--green-900); }
.pf-me small { color: var(--muted); font-size: .85rem; word-break: break-all; }
.pf-me .chip { margin-top: 4px; }
.pf-me-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; font-size: .85rem; color: var(--ink-2); }
.pf-me-meta span { display: inline-flex; gap: 6px; align-items: center; }
.pf-me-meta .icon { width: 15px; height: 15px; color: var(--gold-600); }
.pf-nav { display: grid; gap: 2px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pf-nav a { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.pf-nav a .icon { width: 18px; height: 18px; color: var(--muted); }
.pf-nav a:hover { background: var(--white); color: var(--green-900); }
.pf-nav a[aria-current="page"] { background: var(--green-900); color: var(--cream); }
.pf-nav a[aria-current="page"] .icon { color: var(--gold-500); }
@media (max-width: 899px) {
  .pf-me { grid-template-columns: auto 1fr; justify-items: start; text-align: start; column-gap: 14px; padding: 16px; }
  .pf-avatar { grid-row: span 3; width: 64px; height: 64px; font-size: 1.5rem; margin: 0; }
  .pf-me-meta { grid-column: 1 / -1; justify-content: flex-start; }
  .pf-nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .pf-nav a { flex: none; }
}
.pf-main { display: grid; gap: 20px; min-width: 0; }
.pf-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pf-card-head { display: grid; gap: 4px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.pf-card-head h2 { display: flex; gap: 10px; align-items: center; font-size: 1.1rem; color: var(--green-900); }
.pf-card-head h2 .icon { width: 20px; height: 20px; color: var(--gold-600); }
.pf-card-head p { margin: 0; font-size: .9rem; color: var(--muted); }
.pf-card-body { padding: 22px 24px; display: grid; gap: 20px; }
.pf-card-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--cream); }
.pf-card-foot .btn-primary { min-width: 180px; }
.pf-card .profile-links { border-top: 0; padding-inline: 24px; }
.pf-readonly { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--cream); }
.pf-readonly > .icon { width: 20px; height: 20px; color: var(--gold-600); }
.pf-readonly small { display: block; font-size: .78rem; color: var(--muted); }
.pf-readonly b { font-size: .95rem; }
.pf-readonly .hint { margin-inline-start: auto; font-size: .8rem; }
.chip-ok { border-color: #C5DCCB; background: var(--success-bg); color: var(--success); }
.pf-card-foot .danger { border-color: #E8C6C0; }

/* ── التحميل: شريط أعلى الشاشة + مؤشر على الزر المضغوط (site.js) ─────────── */
html.is-busy::after {
  content: ""; position: fixed; top: 0; left: 0; z-index: 10000; width: 35%; height: 3px;
  background: var(--gold-500); animation: busy-bar 1.1s ease-in-out infinite;
}
@keyframes busy-bar { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
html.is-busy, html.is-busy * { cursor: progress; }
.btn[aria-disabled="true"], button[aria-disabled="true"] { pointer-events: none; opacity: .75; }
.btn.is-loading { position: relative; color: transparent !important; opacity: 1; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--green-900); border-inline-end-color: transparent; animation: spin .7s linear infinite;
}
.btn-primary.is-loading::after, .btn-gold.is-loading::after { border-color: var(--cream); border-inline-end-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.is-busy::after { animation-duration: 2.5s; } .btn.is-loading::after { animation-duration: 1.4s; } }