/* =====================================================================
   components.css — المكونات القابلة لإعادة الاستخدام
   ===================================================================== */

/* ===================== البطاقة العامة ===================== */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:24px;
}
.card + .card{margin-top:20px}
.card h2,.card h3{font-size:19px;font-weight:700}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}

/* ===================== بطاقة جمل (السوق) ===================== */
/* كثافة الشبكات في الصفحات الداخلية أقل من الصفحة الرئيسية عمدًا (3 بدل 4 أعمدة، و4 بدل 5 للمتجر)
   لأن صفحات القوائم الداخلية تخصص 280px لشريط الفلاتر الجانبي */
.camel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.camel-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.camel-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;
}
.camel-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--gold-tint)}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.fav-btn{
  position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#7A6435;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:transform .15s, color .15s;
}
.fav-btn:hover{transform:scale(1.08);color:var(--danger)}
.fav-btn svg{width:20px;height:20px}
.type-badge{
  position:absolute;bottom:12px;right:12px;
  background:rgba(12,46,29,.85);color:#F0E6CD;font-size:12.5px;font-weight:600;
  padding:5px 14px;border-radius:999px;backdrop-filter:blur(4px);
}
.card-media .status-badge{position:absolute;top:12px;inset-inline-start:12px}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-body h3{font-size:19px;font-weight:700}
.meta-row{display:flex;gap:8px;flex-wrap:wrap}
.meta-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-tint);color:var(--gold-600);
  font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;
}
.meta-chip svg{width:14px;height:14px}
.price-row{display:flex;align-items:baseline;gap:6px;margin-top:auto}
.card-body .btn{margin-top:2px}

/* ===================== بطاقة مزاد ===================== */
.auction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.auction-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.auction-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.auction-card .card-media{aspect-ratio:16/9}
.auction-card.featured{border-color:var(--gold-500);box-shadow:var(--shadow-md)}
.auction-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1;text-align:center}
.auction-body h3{font-size:21px;font-weight:700}
.auction-sub{font-size:13.5px;color:var(--ink-2)}
.state-badge{
  position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;
}
.state-badge.live{background:var(--live);color:#fff}
.state-badge.soon{background:#C89B3C;color:#2B1F04}
.state-badge.ended{background:rgba(36,30,18,.65);color:#F0E6CD}
.pulse{width:8px;height:8px;border-radius:999px;background:#fff;position:relative}
.pulse::after{
  content:"";position:absolute;inset:-4px;border-radius:999px;
  border:2px solid rgba(255,255,255,.7);animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.4);opacity:0}}
@media (prefers-reduced-motion: reduce){.pulse::after{animation:none}}

.top-bid{margin-block:2px}
.top-bid .label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:2px}
.top-bid .amount{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--green-700);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .top-bid .amount{color:#E9C87A}
.top-bid .currency{font-size:15px;color:var(--ink-2);font-weight:600}

.countdown{display:flex;justify-content:center;gap:10px;direction:ltr}
.countdown .unit{
  min-width:64px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:8px 6px 6px;
}
.countdown b{display:block;font-family:var(--font-display);font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.countdown span{font-size:11.5px;color:var(--ink-2)}
.countdown.on-dark .unit{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.14)}
.countdown.on-dark b{color:#fff}
.countdown.on-dark span{color:rgba(255,255,255,.6)}
.count-label{font-size:12.5px;color:var(--ink-2)}
.auction-body .btn{margin-top:auto}

/* مؤشر الحد الأدنى (السعر الاحتياطي) — مؤشر نصي بدون رقم */
.reserve-flag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.reserve-flag svg{width:15px;height:15px}
.reserve-flag.met{color:var(--green-700)}
:root[data-theme="dark"] .reserve-flag.met{color:#9BC7AC}

/* ===================== بطاقة منتج ===================== */
.store-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px 16px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .2s, box-shadow .2s;
  display:flex;flex-direction:column;gap:10px;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.product-media{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--gold-tint);position:relative}
.product-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.product-card:hover .product-media img{transform:scale(1.05)}
.product-card h3{font-size:15.5px;font-weight:600;line-height:1.5}
.product-card .vendor{font-size:12.5px;color:var(--ink-2)}
.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.product-foot .p-price{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--green-700);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .product-foot .p-price{color:var(--gold-600)}
.product-foot .p-price small{font-size:12px;color:var(--ink-2);font-weight:600}
.cart-btn{
  width:42px;height:42px;border-radius:11px;background:var(--green-700);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s, transform .15s;
}
.cart-btn:hover{background:var(--green-600);transform:scale(1.06)}
.cart-btn svg{width:19px;height:19px}
.product-media .oos{
  position:absolute;inset:0;background:rgba(36,30,18,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}

/* ===================== بطاقة خدمة/مزود ===================== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 28px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .2s, box-shadow .2s;display:flex;flex-direction:column;gap:12px;
}
.service-card::before{
  content:"";position:absolute;top:0;right:0;left:0;height:4px;
  background:linear-gradient(90deg,var(--gold-500),var(--green-700));
}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.service-ico{
  width:60px;height:60px;border-radius:16px;background:var(--green-tint);color:var(--green-700);
  display:flex;align-items:center;justify-content:center;
}
:root[data-theme="dark"] .service-ico{color:var(--gold-600)}
.service-ico svg{width:28px;height:28px}
.service-card h3{font-size:20px;font-weight:700}
.service-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.service-card li{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:15px}
.service-card li svg{width:17px;height:17px;color:var(--gold-600);flex-shrink:0}
.service-card .btn{margin-top:auto;align-self:flex-start}
.service-meta{display:flex;gap:8px;flex-wrap:wrap}

/* ===================== البحث والفلاتر ===================== */
.search-input{position:relative;flex:1;min-width:220px}
.search-input input{
  font:inherit;width:100%;min-height:50px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 46px 12px 16px;transition:border-color .15s, box-shadow .15s;
}
.search-input input:focus{outline:none;border-color:var(--green-700);box-shadow:0 0 0 3px var(--green-tint)}
.search-input svg{
  position:absolute;top:50%;right:15px;transform:translateY(-50%);
  width:20px;height:20px;color:var(--ink-2);pointer-events:none;
}

.filter-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:26px;
}
.filter-bar select{
  font:inherit;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;min-height:44px;
}
.sort-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.sort-row .result-count{font-size:14px;color:var(--ink-2)}
.sort-row .sort-select{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.sort-row select{
  font:inherit;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;min-height:42px;
}

/* لوحة الفلاتر الجانبية */
.filter-panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.filter-panel .fp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.filter-panel .fp-head h2{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.filter-panel .fp-head h2 svg{width:18px;height:18px;color:var(--gold-600)}
.filter-panel .fp-head .clear{font-size:13px;color:var(--danger);font-weight:600}
.filter-group{padding:16px 20px;border-bottom:1px solid var(--line)}
.filter-group:last-of-type{border-bottom:none}
.filter-group > .fg-label{display:block;font-weight:700;font-size:14px;margin-bottom:10px}
.filter-group .options{display:flex;flex-direction:column;gap:8px}
.filter-group .options label{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.filter-group .options input{width:18px;height:18px;accent-color:var(--green-700)}
.filter-group .range-row{display:flex;align-items:center;gap:8px}
.filter-group .range-row input{
  font:inherit;width:100%;min-height:42px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;
}
.filter-panel .fp-apply{padding:16px 20px;border-top:1px solid var(--line)}
.filter-toggle-btn{display:none}

/* ===================== تبويبات ===================== */
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:26px;overflow-x:auto;overflow-y:hidden}
.tabs [role="tab"]{
  padding:12px 20px;font-weight:600;font-size:15.5px;color:var(--ink-2);
  border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
}
.tabs [role="tab"]:hover{color:var(--green-700)}
.tabs [role="tab"][aria-selected="true"]{color:var(--green-700);border-bottom-color:var(--gold-500);font-weight:700}
:root[data-theme="dark"] .tabs [role="tab"][aria-selected="true"]{color:var(--gold-600)}
.tabs .tab-count{
  min-width:22px;height:22px;border-radius:999px;background:var(--gold-tint);color:var(--gold-600);
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding-inline:6px;
}
.tab-panel[hidden]{display:none}

/* ===================== ترقيم الصفحات ===================== */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:36px}
.pagination a,.pagination span{
  min-width:42px;height:42px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);font-weight:600;font-size:14.5px;background:var(--card);
  transition:border-color .15s, background .15s;padding-inline:10px;
}
.pagination a:hover{border-color:var(--green-700);background:var(--green-tint)}
.pagination .current{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.pagination .dots{border:none;background:none}

/* ===================== الحالة الفارغة ===================== */
.empty-state{
  text-align:center;padding:56px 24px;border:1.5px dashed var(--line);
  border-radius:var(--radius-lg);background:var(--card);
}
.empty-state .es-ico{
  width:72px;height:72px;border-radius:999px;background:var(--gold-tint);color:var(--gold-600);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.empty-state .es-ico svg{width:34px;height:34px}
.empty-state h3{font-size:19px;font-weight:700;margin-bottom:8px}
.empty-state p{color:var(--ink-2);font-size:14.5px;max-width:44ch;margin:0 auto 20px}

/* ===================== Wizard / Stepper ===================== */
.stepper{display:flex;justify-content:space-between;gap:8px;margin-bottom:34px;list-style:none;padding:0;margin-inline-start:0}
.stepper .step{
  flex:1;text-align:center;position:relative;font-size:13px;font-weight:600;color:var(--ink-2);
}
.stepper .step::before{
  content:"";
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;margin:0 auto 8px;
  background:var(--card);border:2px solid var(--line);
  font-family:var(--font-display);font-weight:700;font-size:15px;
}
.stepper .step:not(:first-child)::after{
  content:"";position:absolute;top:19px;inset-inline-start:calc(-50% + 28px);inset-inline-end:calc(50% + 28px);
  height:2px;background:var(--line);
}
.stepper .step.done{color:var(--green-700)}
.stepper .step.done::before{content:"✓";background:var(--green-700);border-color:var(--green-700);color:#fff}
.stepper .step.done:not(:first-child)::after{background:var(--green-700)}
.stepper .step.current{color:var(--ink)}
.stepper .step.current::before{border-color:var(--gold-500);background:var(--gold-tint);color:var(--gold-600)}
.wizard-pane[hidden]{display:none}
.wizard-actions{display:flex;justify-content:space-between;gap:14px;margin-top:28px;flex-wrap:wrap}
.wizard-actions .side{display:flex;gap:12px;flex-wrap:wrap}

/* ===================== رافع الوسائط (شكلي) ===================== */
.media-uploader{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.media-slot{
  aspect-ratio:4/3;border:2px dashed var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--ink-2);font-size:13.5px;font-weight:600;text-align:center;
  background:var(--paper);transition:border-color .15s, background .15s;cursor:pointer;padding:12px;
}
.media-slot:hover{border-color:var(--gold-500);background:var(--gold-tint)}
.media-slot svg{width:28px;height:28px;color:var(--gold-600)}
.media-slot .req-tag{font-size:11px;color:var(--danger);font-weight:700}
.media-slot.filled{border-style:solid;border-color:var(--green-700);background:var(--green-tint);color:var(--green-700);position:relative;overflow:hidden}
.media-slot.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-slot.filled .ok-tag{
  position:absolute;bottom:8px;right:8px;background:var(--green-700);color:#fff;
  font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;
}

/* ===================== ملخص الدفع ===================== */
.payment-summary{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)}
.payment-summary .ps-head{
  background:linear-gradient(135deg,var(--green-800),var(--green-700));color:#fff;
  padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.payment-summary .ps-head h2{font-size:17px;font-weight:700;color:#fff}
.payment-summary .ps-head .badge{background:rgba(233,200,122,.2);color:#E9D6A6}
.ps-rows{padding:8px 22px}
.ps-row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.ps-row:last-child{border-bottom:none}
.ps-row .k{color:var(--ink-2)}
.ps-row .v{font-weight:600;font-variant-numeric:tabular-nums}
.ps-total{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 22px;background:var(--gold-tint);font-weight:700;
}
.ps-total .amount{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--green-700);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .ps-total .amount{color:var(--gold-600)}

/* وسائل الدفع (شكلية) */
.pay-methods{display:flex;flex-direction:column;gap:12px}
.pay-method{
  display:flex;align-items:center;gap:14px;padding:15px 18px;
  border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;
  transition:border-color .15s, background .15s;
}
.pay-method:hover{border-color:var(--gold-500)}
.pay-method input{width:20px;height:20px;accent-color:var(--green-700)}
.pay-method .pm-ico{
  width:46px;height:46px;border-radius:11px;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--green-700);flex-shrink:0;
}
.pay-method .pm-ico svg{width:22px;height:22px}
.pay-method b{display:block;font-size:15px}
.pay-method span{font-size:12.5px;color:var(--ink-2)}
.pay-method:has(input:checked){border-color:var(--green-700);background:var(--green-tint)}

/* ===================== عنصر إشعار ===================== */
.notification-list{display:flex;flex-direction:column;gap:12px}
.notification-item{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;transition:border-color .15s, box-shadow .15s;position:relative;
}
.notification-item:hover{border-color:var(--gold-500);box-shadow:var(--shadow-sm)}
.notification-item .nt-ico{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--green-tint);color:var(--green-700);
}
.notification-item .nt-ico.gold{background:var(--gold-tint);color:var(--gold-600)}
.notification-item .nt-ico.red{background:var(--danger-tint);color:var(--danger)}
.notification-item .nt-ico svg{width:22px;height:22px}
.notification-item .nt-body{flex:1;min-width:0}
.notification-item .nt-body b{display:block;font-size:15px;margin-bottom:2px}
.notification-item .nt-body p{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.notification-item .nt-meta{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.notification-item .nt-time{font-size:12px;color:var(--ink-2)}
.notification-item.unread{border-inline-start:4px solid var(--gold-500)}
.notification-item.unread::after{
  content:"جديد";position:absolute;top:14px;inset-inline-start:14px;display:none;
}
.unread-pill{background:var(--gold-tint);color:var(--gold-600);font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}

/* ===================== قائمة مواصفات (تفاصيل) ===================== */
.spec-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.spec-list .spec{
  display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px dashed var(--line);font-size:14.5px;
}
.spec-list .spec .k{color:var(--ink-2);display:flex;align-items:center;gap:8px}
.spec-list .spec .k svg{width:16px;height:16px;color:var(--gold-600)}
.spec-list .spec .v{font-weight:600;text-align:start}

/* ===================== معرض صور ===================== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery .main-shot{grid-column:1 / -1;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;background:var(--gold-tint);position:relative}
.gallery .main-shot img{width:100%;height:100%;object-fit:cover}
.gallery .thumb{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--gold-tint);border:2px solid transparent;cursor:pointer}
.gallery .thumb img{width:100%;height:100%;object-fit:cover}
.gallery .thumb.selected{border-color:var(--gold-500)}
.gallery .thumb.more{
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--green-700);
  background:var(--green-tint);font-size:15px;
}

/* ===================== جدول بسيط ===================== */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card)}
table.data{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
table.data th{
  text-align:start;font-weight:700;font-size:13.5px;color:var(--ink-2);
  padding:14px 18px;border-bottom:1.5px solid var(--line);background:var(--paper);white-space:nowrap;
}
table.data td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data .num{font-variant-numeric:tabular-nums;font-weight:600}

/* ===================== شريط دعوة ===================== */
.cta-band{
  background:linear-gradient(135deg,var(--green-800),var(--green-700));
  border-radius:var(--radius-lg);color:#fff;
  padding:48px 48px;display:flex;align-items:center;justify-content:space-between;gap:28px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);
}
.cta-band::after{
  content:"";position:absolute;inset-inline-start:-40px;top:-40px;width:220px;height:220px;
  border-radius:999px;background:rgba(200,155,60,.16);
}
.cta-band h2{font-size:28px;font-weight:800;margin-bottom:8px;color:#fff}
.cta-band p{color:rgba(255,255,255,.78);max-width:56ch}
.cta-band .btn{flex-shrink:0;position:relative;z-index:1}

/* ===================== حالة "قريبًا" (Phase 1B) ===================== */
.phase-banner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--gold-tint);border:1px solid var(--gold-300);border-radius:var(--radius-lg);
  padding:16px 22px;margin-bottom:28px;
}
.phase-banner svg{width:22px;height:22px;color:var(--gold-600);flex-shrink:0}
.phase-banner p{font-size:14.5px;color:#6B4E10;flex:1;min-width:220px}
:root[data-theme="dark"] .phase-banner p{color:#E9D6A6}
.phase-banner .badge{background:var(--gold-500);color:#2B1F04}

/* ===================== نافذة منبثقة (Modal) ===================== */
/* بنية عامة تُستخدم لشاشات من نوع Modal (مثل SCR-CAM-004..008) — نفس لغة الـ Drawer بصريًا */
.modal-backdrop{
  position:fixed;inset:0;z-index:120;background:rgba(12,20,14,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal-backdrop[hidden]{display:none}
.modal{
  background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:460px;max-height:88vh;overflow-y:auto;
  transform:translateY(14px) scale(.98);transition:transform .2s;position:relative;
}
.modal-backdrop.open .modal{transform:none}
.modal.modal-wide{max-width:560px}
.modal-close{
  position:absolute;top:14px;inset-inline-start:14px;width:36px;height:36px;border-radius:9px;
  color:var(--ink-2);display:flex;align-items:center;justify-content:center;z-index:1;
}
.modal-close:hover{background:var(--paper);color:var(--ink)}
.modal-close svg{width:18px;height:18px}
.modal-head{padding:22px 24px 6px}
.modal-head h2{font-size:19px;font-weight:800;padding-inline-end:38px}
.modal-head .modal-sub{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.modal-body{padding:14px 24px 4px;display:flex;flex-direction:column;gap:16px}
.modal-foot{padding:20px 24px 24px;display:flex;gap:12px;flex-wrap:wrap}
.modal-foot .btn{flex:1;min-width:130px}
@media (prefers-reduced-motion: reduce){.modal-backdrop,.modal{transition:none}}

/* ===================== هيكل تحميل (شكلي) ===================== */
.skeleton{position:relative;overflow:hidden;background:var(--line);border-radius:8px;min-height:14px}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{100%{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){.skeleton::after{animation:none}}