/* ═══════════════════════════════════════════════════════════
   KARDO UI v12 — نظام التصميم الجديد (نهاري + ليلي)
   شبكة 8px · خطّان (Readex Pro للعناوين والأرقام، IBM Plex للنص)
   لون مميز واحد: ذهبي الشعار. يُحمَّل بعد كل الملفات ويتقدّم عليها.
   ═══════════════════════════════════════════════════════════ */
:root, html[data-theme="light"] {
  --u-bg: #EDEFEE; --u-s1: #FFFFFF; --u-s2: #F5F6F5; --u-s3: #E9ECEB; --u-line: #DDE1E0; --u-line-2: #CBD1CF;
  --u-ink: #15191A; --u-ink-2: #566064; --u-ink-3: #8A9396;
  --u-gold: #C47A17; --u-gold-fill: #E8962E; --u-gold-soft: #FBEFDD; --u-on-gold: #1B1206;
  --u-ok: #1F8A57; --u-ok-soft: #E3F3EA; --u-err: #C8432F; --u-err-soft: #FBE7E3; --u-warn: #A8650C; --u-warn-soft: #FCF1DE;
  --u-shadow: 0 1px 2px rgba(21, 25, 26, .06), 0 8px 24px -12px rgba(21, 25, 26, .18);
  --u-nav: rgba(255, 255, 255, .92); --u-dim: rgba(8, 10, 11, .45);
  color-scheme: light;
}
html[data-theme="dark"] {
  --u-bg: #101314; --u-s1: #181C1E; --u-s2: #20262A; --u-s3: #283035; --u-line: #2B3236; --u-line-2: #3A4348;
  --u-ink: #F1F2F0; --u-ink-2: #A3ACAF; --u-ink-3: #6F797D;
  --u-gold: #F0A443; --u-gold-fill: #E8962E; --u-gold-soft: rgba(232, 150, 46, .12); --u-on-gold: #1B1206;
  --u-ok: #4CC38A; --u-ok-soft: rgba(76, 195, 138, .12); --u-err: #F07A66; --u-err-soft: rgba(240, 122, 102, .12); --u-warn: #F2B33D; --u-warn-soft: rgba(242, 179, 61, .12);
  --u-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --u-nav: rgba(24, 28, 30, .92); --u-dim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root {
  --u-r-lg: 24px; --u-r: 20px; --u-r-md: 16px; --u-r-sm: 14px; --u-r-xs: 12px;
  --u-grad: linear-gradient(180deg, #F2AE52, #E8962E);
  --u-display: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  --u-text: 'IBM Plex Sans Arabic', 'Readex Pro', sans-serif;

  /* ربط كل أنظمة التصميم القديمة بالرموز الجديدة */
  --k-bg: var(--u-bg); --k-surface: var(--u-s1); --k-border: var(--u-line);
  --k-t1: var(--u-ink); --k-t2: var(--u-ink-2); --k-t3: var(--u-ink-3); --k-gold: var(--u-gold-fill);
  --k-success: var(--u-ok); --k-error: var(--u-err); --k-warning: var(--u-warn); --k-font: var(--u-text);
  --bg: var(--u-bg); --surface: var(--u-s1); --surface-2: var(--u-s2); --surface-3: var(--u-s3);
  --text: var(--u-ink); --text-2: var(--u-ink-2); --text-3: var(--u-ink-3); --text-inverse: var(--u-s1);
  --border: var(--u-line); --border-2: var(--u-line-2); --border-3: var(--u-line-2);
  --brand: var(--u-gold); --brand-hover: var(--u-gold-fill); --brand-dark: var(--u-gold); --brand-light: var(--u-gold-soft); --brand-50: var(--u-gold-soft);
  --sand: var(--u-gold); --sand-2: var(--u-gold); --sand-light: var(--u-gold-soft); --sand-bg: var(--u-gold-soft);
  --gold-grad: var(--u-grad); --gold-text: var(--u-grad);
  --ds-gold-1: #F2AE52; --ds-gold-2: var(--u-gold-fill); --ds-gold-3: var(--u-gold); --ds-ink: var(--u-on-gold);
  --ds-text: var(--u-ink); --ds-text-2: var(--u-ink-2); --ds-text-3: var(--u-ink-3);
  --ds-surface: var(--u-s1); --ds-surface-2: var(--u-s2); --ds-line: var(--u-line); --ds-line-2: var(--u-line-2);
  --success: var(--u-ok); --success-bg: var(--u-ok-soft); --success-border: transparent;
  --error: var(--u-err); --error-bg: var(--u-err-soft); --error-border: transparent;
  --warning: var(--u-warn); --warning-bg: var(--u-warn-soft); --warning-border: transparent;
  --info: var(--u-ink-2); --info-bg: var(--u-s2); --info-border: transparent;
  --shadow-focus: 0 0 0 3px rgba(232, 150, 46, .28);
  --font: var(--u-text); --font-display: var(--u-display); --font-latin-display: var(--u-display);
  --k-hair: var(--u-line); --k-gold-line: var(--u-line); --k-shadow: var(--u-shadow);
}

/* ── الأساس ── */
html, body { background: var(--u-bg) !important; color: var(--u-ink) !important; }
body, button, input, select, textarea { font-family: var(--u-text) !important; }
body::before, body::after { display: none !important; }
.h1, .h2, .h3, .h4, h1, h2, h3, .display, .modal-title, .tabular, .list-amount { font-family: var(--u-display) !important; }
.h2 { font-size: 26px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.3 !important; }
.h3 { font-size: 20px !important; font-weight: 600 !important; }
.h4 { font-size: 17px !important; font-weight: 600 !important; }
.body-sm.text-2, .text-2 { color: var(--u-ink-2) !important; }
.caption { color: var(--u-ink-3) !important; font-size: 12.5px !important; }
.tabular { font-variant-numeric: tabular-nums; }
a { color: inherit; }
::selection { background: var(--u-gold-soft); }
:focus-visible { outline: 2px solid var(--u-gold-fill) !important; outline-offset: 2px; }

/* ── الهيكل ── */
.app-content { padding: 8px 20px 120px !important; max-width: 640px; margin: 0 auto; }
.page-enter { animation: u-in .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes u-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mb-3 { margin-bottom: 12px !important; } .mb-4 { margin-bottom: 16px !important; } .mb-5 { margin-bottom: 24px !important; } .mb-6 { margin-bottom: 32px !important; }

/* الشريط العلوي */
.app-main > .bar { position: sticky; top: 0; z-index: 30; height: 64px !important; padding: 0 20px !important; background: var(--u-bg) !important;
  border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.app-main > .bar::after { display: none !important; }
.bar-logo { gap: 10px !important; }
.bar-logo span { font: 600 19px var(--u-display) !important; color: var(--u-ink) !important; }
.k-mark { height: 30px !important; width: auto; filter: none !important; }
.icon-btn { width: 40px !important; height: 40px !important; border-radius: var(--u-r-xs) !important; background: var(--u-s1) !important;
  border: 1px solid var(--u-line) !important; color: var(--u-ink) !important; display: grid !important; place-items: center; }
.icon-btn svg { width: 21px; height: 21px; }
#barBalance, #balDock, .bal-dock { display: none !important; }
.sidebar { background: var(--u-s1) !important; border-color: var(--u-line) !important; }
.sidebar-item { color: var(--u-ink-2) !important; border-radius: var(--u-r-xs) !important; }
.sidebar-item.active { background: var(--u-gold-soft) !important; color: var(--u-ink) !important; }
.sidebar-item.active svg { color: var(--u-gold) !important; }
.sidebar-label { display: none !important; }

/* ── البطاقات والقوائم ── */
.card, .list, .service-card, .prow, .quick-tile, .cat-tile, .home-card-cta, .ref-strip, .st-card, .balance-card {
  background: var(--u-s1) !important; background-image: none !important; border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r) !important; box-shadow: var(--u-shadow) !important; color: var(--u-ink) !important; }
.card-sm { border-radius: var(--u-r-md) !important; }
.card[style*="surface-2"], .card-sm[style*="surface-2"] { background: var(--u-s2) !important; box-shadow: none !important; }
.list { overflow: hidden; padding: 0 !important; }
.list-row { padding: 14px 16px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; gap: 12px !important; }
.list-row + .list-row { border-top: 1px solid var(--u-line) !important; }
.list > .list-row:only-child { border: 0 !important; }
.list-icon { width: 40px !important; height: 40px !important; border-radius: var(--u-r-xs) !important; background: var(--u-gold-soft) !important; color: var(--u-gold) !important; font-size: 18px; }
.list-title { font: 500 14px var(--u-text) !important; color: var(--u-ink) !important; }
.list-meta { font-size: 12px !important; color: var(--u-ink-3) !important; }
.list-amount { font-weight: 600 !important; font-size: 14px !important; color: var(--u-ink) !important; }
.divider { background: var(--u-line) !important; }

/* ── الأزرار ── */
.btn { height: 48px !important; min-height: 48px !important; border-radius: var(--u-r-sm) !important; font: 600 15px var(--u-text) !important;
  padding: 0 20px !important; gap: 8px; box-shadow: none !important; letter-spacing: 0 !important; }
.btn-sm { height: 38px !important; min-height: 38px !important; font-size: 13.5px !important; padding: 0 14px !important; border-radius: var(--u-r-xs) !important; }
.btn-lg { height: 54px !important; min-height: 54px !important; font-size: 16px !important; border-radius: var(--u-r-md) !important; }
.btn-primary, .btn.btn-primary { background: var(--u-grad) !important; color: var(--u-on-gold) !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -12px rgba(232, 150, 46, .9) !important; }
.btn-secondary, .btn.btn-secondary, .btn-outline { background: var(--u-s1) !important; color: var(--u-ink) !important; border: 1px solid var(--u-line) !important; }
.btn-ghost { background: transparent !important; color: var(--u-gold) !important; border: 0 !important; }
.btn-outline-danger { background: transparent !important; color: var(--u-err) !important; border: 1px solid var(--u-err-soft) !important; }
.btn:disabled { opacity: .45 !important; }
.btn:active:not(:disabled) { transform: scale(.98); }
.prow-add { color: var(--u-gold) !important; }

/* ── الحقول ── */
.input, input.input, textarea.input, select.input { height: 50px; border-radius: var(--u-r-sm) !important; background: var(--u-s2) !important;
  border: 1px solid var(--u-line) !important; color: var(--u-ink) !important; font: 500 15px var(--u-text) !important; box-shadow: none !important; }
textarea.input { height: auto; }
.input::placeholder { color: var(--u-ink-3) !important; }
.input:focus { border-color: var(--u-gold-fill) !important; box-shadow: var(--shadow-focus) !important; background: var(--u-s1) !important; }
.field-label { font: 500 13px var(--u-text) !important; color: var(--u-ink-2) !important; margin-bottom: 8px !important; }
.input-wrap .input { padding-inline-start: 44px !important; background: var(--u-s1) !important; }
.input-icon { color: var(--u-ink-3) !important; }
.copy-box { background: var(--u-s2) !important; border: 1px solid var(--u-line) !important; border-radius: var(--u-r-sm) !important; }
.copy-value { color: var(--u-ink) !important; font-family: var(--u-display) !important; }
.copy-btn { color: var(--u-gold) !important; background: transparent !important; }

/* ── التبويبات (شكل مقسّم) ── */
.pills { display: flex !important; gap: 0 !important; background: var(--u-s2) !important; border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r-sm) !important; padding: 4px !important; overflow-x: auto; }
.pill { flex: 1; height: 36px !important; border-radius: 10px !important; background: transparent !important; border: 0 !important;
  color: var(--u-ink-2) !important; font: 500 13px var(--u-text) !important; padding: 0 12px !important; white-space: nowrap; box-shadow: none !important; }
.pill.active { background: var(--u-s1) !important; color: var(--u-ink) !important; font-weight: 600 !important; box-shadow: var(--u-shadow) !important; }

/* ── الشارات والتنبيهات ── */
.badge { border-radius: 999px !important; font: 500 11px var(--u-text) !important; padding: 2px 8px !important; border: 0 !important; }
.badge-success { background: var(--u-ok-soft) !important; color: var(--u-ok) !important; }
.badge-warning { background: var(--u-gold-soft) !important; color: var(--u-gold) !important; }
.badge-error { background: var(--u-err-soft) !important; color: var(--u-err) !important; }
.badge-neutral { background: var(--u-s2) !important; color: var(--u-ink-2) !important; }
.alert { border-radius: var(--u-r-sm) !important; border: 0 !important; font-size: 13px !important; line-height: 1.8; padding: 12px 14px !important; gap: 10px; }
.alert-warning { background: var(--u-warn-soft) !important; color: var(--u-warn) !important; }
.alert-error { background: var(--u-err-soft) !important; color: var(--u-err) !important; }
.alert-success { background: var(--u-ok-soft) !important; color: var(--u-ok) !important; }
.alert-info { background: var(--u-s2) !important; color: var(--u-ink-2) !important; }
.alert svg { flex: none; }

/* ── النوافذ: ورقة من الأسفل على الهاتف ── */
.overlay.open { background: var(--u-dim) !important; backdrop-filter: none !important; }
.modal { background: var(--u-s1) !important; color: var(--u-ink) !important; border: 0 !important; box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .35) !important; }
@media (max-width: 640px) {
  .overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal { width: 100% !important; max-width: 100% !important; border-radius: 28px 28px 0 0 !important; padding: 10px 20px 28px !important; max-height: 92vh; }
  .modal::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--u-line-2); margin: 0 auto 14px; }
  .overlay.open .modal { animation: u-sheet .3s cubic-bezier(.2, .8, .2, 1) both !important; }
}
@keyframes u-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { margin-bottom: 16px !important; }
.modal-title { font-size: 18px !important; font-weight: 600 !important; color: var(--u-ink) !important; }
.modal-close { background: var(--u-s2) !important; color: var(--u-ink-2) !important; border-radius: 10px !important; border: 0 !important; }

/* ── الإشعارات المنبثقة ── */
#toasts .toast { background: var(--u-ink) !important; color: var(--u-s1) !important; border: 0 !important; border-radius: var(--u-r-sm) !important; font: 500 14px var(--u-text) !important; }

/* ── الشريط السفلي ── */
.bottom-nav { height: 80px !important; padding: 8px 8px 18px !important; background: var(--u-nav) !important; border-top: 1px solid var(--u-line) !important;
  backdrop-filter: blur(14px); box-shadow: none !important; display: grid !important; grid-template-columns: repeat(5, 1fr); }
.bottom-nav .nav-item { color: var(--u-ink-3) !important; font: 500 11px var(--u-text) !important; gap: 4px !important; background: none !important; }
.bottom-nav .nav-item::before { display: none !important; }
.bottom-nav .nav-item svg { width: 23px; height: 23px; }
.bottom-nav .nav-item.active { color: var(--u-ink) !important; }
.bottom-nav .nav-item.active svg { color: var(--u-gold) !important; }
.bottom-nav .nav-item.active svg .nv-fill { fill: none !important; }
.bottom-nav .nav-center b { width: 50px; height: 50px; margin-top: -22px; border-radius: 16px; display: grid; place-items: center; background: var(--u-grad);
  color: var(--u-on-gold); box-shadow: 0 8px 18px -8px rgba(232, 150, 46, .9); }
.bottom-nav .nav-center b svg { width: 24px; height: 24px; color: var(--u-on-gold) !important; }

/* ═══ مكوّنات الواجهة الجديدة ═══ */
/* بطاقة المحفظة — العنصر المميز */
.kw { position: relative; border-radius: var(--u-r-lg); padding: 20px 20px 26px; color: #F6EBD9; overflow: hidden; isolation: isolate; margin-bottom: 24px;
  background: radial-gradient(120% 90% at 100% 0%, #2B2117 0%, #17120D 55%, #0F0C09 100%); box-shadow: 0 18px 40px -20px rgba(40, 22, 4, .65); }
.kw::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-radial-gradient(circle at -5% 120%, transparent 0 9px, rgba(232, 150, 46, .10) 9px 10px); }
.kw::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; opacity: .55;
  background: linear-gradient(135deg, #E8962E 25%, transparent 25%) -5px 0/10px 10px, linear-gradient(225deg, #E8962E 25%, transparent 25%) -5px 0/10px 10px; }
.kw-fox { position: absolute; left: -26px; top: -10px; height: 190px; opacity: .15; z-index: -1; pointer-events: none; }
.kw-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kw-label { font: 500 13px var(--u-text); color: #C9B79A; }
.kw-chip { font: 500 12px var(--u-text); color: #F0C688; background: rgba(232, 150, 46, .14); border: 1px solid rgba(232, 150, 46, .3); padding: 3px 10px; border-radius: 999px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-amount { font: 600 40px/1.15 var(--u-display); letter-spacing: -.5px; margin: 14px 0 2px; color: #FFF4E2; }
.kw-amount small { font-size: 18px; font-weight: 500; color: #E8B572; margin-right: 8px; }
.kw-sub { font: 500 13px var(--u-display); color: #A99779; }
.kw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.kw-btn { height: 46px; border-radius: var(--u-r-sm); display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--u-text); border: 0; cursor: pointer; }
.kw-btn svg { width: 20px; height: 20px; }
.kw-btn.p { background: var(--u-grad); color: #1B1206; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.kw-btn.s { background: rgba(255, 244, 226, .07); color: #F6EBD9; border: 1px solid rgba(255, 244, 226, .12); }

/* اختصارات */
.kq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 32px; }
.kq button { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 12.5px var(--u-text); color: var(--u-ink-2); background: none; border: 0; cursor: pointer; padding: 0; }
.kq-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--u-s1); border: 1px solid var(--u-line); display: grid; place-items: center; color: var(--u-gold); box-shadow: var(--u-shadow); }
.kq-ic svg { width: 22px; height: 22px; }

/* عنوان قسم */
.ksh { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.ksh h2 { font: 600 18px var(--u-display); margin: 0; color: var(--u-ink); }
.ksh button { font: 500 13px var(--u-text); color: var(--u-gold); background: none; border: 0; cursor: pointer; padding: 0; }
.kpage-title { font: 600 26px var(--u-display); margin: 4px 0 4px; color: var(--u-ink); }
.kpage-sub { font: 400 14px var(--u-text); color: var(--u-ink-2); margin-bottom: 20px; }

/* بلاطات المتجر */
.rsc-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
@media (min-width: 640px) { .rsc-grid { grid-template-columns: repeat(3, 1fr) !important; } }
.rsc-tile { display: flex; flex-direction: column; text-align: right; padding: 0; overflow: hidden; cursor: pointer; background: var(--u-s1) !important;
  border: 1px solid var(--u-line) !important; border-radius: var(--u-r) !important; box-shadow: var(--u-shadow); color: var(--u-ink) !important; }
.rsc-tile:active { transform: scale(.98); }
.rsc-tile-img { display: block; aspect-ratio: 16 / 9; position: relative; background: radial-gradient(90% 120% at 100% 0%, #F2B04B, #B5651A 70%) !important; }
.rsc-tile[data-kind="gift"] .rsc-tile-img { background: radial-gradient(90% 120% at 100% 0%, #5B6470, #23272D 70%) !important; }
.rsc-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rsc-tile-ph { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; color: #fff; font-size: 0; }
.rsc-tile-ph svg { width: 17px; height: 17px; }
.rsc-tile-name { padding: 10px 12px 0; font: 500 13.5px var(--u-text) !important; line-height: 1.45; color: var(--u-ink); }
.rsc-tile-from { padding: 2px 12px 12px; font: 600 13px var(--u-display) !important; color: var(--u-gold) !important; }
.rsc-head-main { display: flex; gap: 14px; align-items: center; }
.rsc-head-img { width: 64px; height: 64px; border-radius: var(--u-r-md); object-fit: cover; border: 1px solid var(--u-line); }
.rsc-offer { width: 100%; text-align: right; cursor: pointer; }
.rsc-offer .list-amount { color: var(--u-ink) !important; }
.rsc-buy-head { display: flex; gap: 14px; align-items: center; }
.rsc-buy-head img { width: 64px; height: 64px; border-radius: var(--u-r-md); object-fit: cover; }
.trust-row { display: flex; gap: 8px; flex-wrap: wrap; }
.trust-row span { font: 500 12px var(--u-text); padding: 5px 10px; border-radius: 999px; background: var(--u-s1); border: 1px solid var(--u-line); color: var(--u-ink-2); }

/* خيارات الباقة في نافذة الشراء */
.kopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.kopt { border: 1px solid var(--u-line); border-radius: var(--u-r-sm); padding: 10px 6px; text-align: center; background: var(--u-s2); cursor: pointer; color: var(--u-ink); font: inherit; }
.kopt b { display: block; font: 600 14px var(--u-display); }
.kopt small { font: 500 12px var(--u-display); color: var(--u-ink-3); }
.kopt.on { border: 1.5px solid var(--u-gold-fill); background: var(--u-gold-soft); }
.kopt.on small { color: var(--u-gold); }
.ksum { border-top: 1px dashed var(--u-line-2); padding-top: 14px; margin-bottom: 16px; }
.ksum div { display: flex; justify-content: space-between; font: 400 14px var(--u-text); color: var(--u-ink-2); padding: 3px 0; }
.ksum b { font: 600 14px var(--u-display); color: var(--u-ink); }
.ksum .tot { color: var(--u-ink); font-weight: 600; }
.ksum .tot b { font-size: 20px; }

/* بطاقة كاردو الافتراضية */
.kc { position: relative; border-radius: 22px; aspect-ratio: 1.586; padding: 18px 20px; color: #F6EBD9; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #2A2017, #120E0A 70%); box-shadow: 0 18px 40px -20px rgba(40, 22, 4, .65); display: flex; flex-direction: column; }
.kc::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background: repeating-radial-gradient(circle at 110% -10%, transparent 0 9px, rgba(232, 150, 46, .10) 9px 10px); }
.kc .kc-fox { position: absolute; left: -20px; bottom: -30px; height: 170px; opacity: .14; z-index: -1; }
.kc.frozen { filter: grayscale(.8); opacity: .8; }
.kc-top { display: flex; justify-content: space-between; align-items: center; font: 600 15px var(--u-display); }
.kc-brand { font: 700 14px var(--u-display); letter-spacing: 2px; color: #F0C688; direction: ltr; }
.kc-chip { width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #F6D08C, #C98A2B); margin: auto 0 14px; }
.kc-num { font: 500 19px var(--u-display); letter-spacing: 2px; direction: ltr; text-align: left; color: #FFF4E2; }
.kc-bot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; direction: ltr; gap: 10px; }
.kc-bot small { display: block; font: 400 10px var(--u-text); color: #A99779; letter-spacing: .5px; }
.kc-bot b { font: 600 13.5px var(--u-display); color: #FFF4E2; }
.kstat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.kstat > div { background: var(--u-s1); border: 1px solid var(--u-line); border-radius: 18px; padding: 14px 16px; box-shadow: var(--u-shadow); }
.kstat small { font: 400 12px var(--u-text); color: var(--u-ink-3); }
.kstat b { display: block; font: 600 20px var(--u-display); margin-top: 2px; color: var(--u-ink); }
.kacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.kacts button { background: var(--u-s1); border: 1px solid var(--u-line); border-radius: var(--u-r-md); padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 500 12.5px var(--u-text); color: var(--u-ink-2); box-shadow: var(--u-shadow); cursor: pointer; }
.kacts button svg { color: var(--u-gold); width: 22px; height: 22px; }
.kacts button:disabled { opacity: .45; cursor: not-allowed; }
.knew { width: 100%; border: 1.5px dashed var(--u-line-2); border-radius: 18px; padding: 16px; display: flex; align-items: center; gap: 12px; color: var(--u-ink-2);
  font: 500 14px var(--u-text); background: none; cursor: pointer; text-align: right; }
.knew span { width: 40px; height: 40px; border-radius: var(--u-r-xs); background: var(--u-gold-soft); color: var(--u-gold); display: grid; place-items: center; }
.kcards-switch { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px; }
.kcards-switch button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--u-line); background: var(--u-s1); color: var(--u-ink-2); font: 500 13px var(--u-text); cursor: pointer; }
.kcards-switch button.on { background: var(--u-ink); color: var(--u-s1); border-color: var(--u-ink); }

/* حالة فارغة / نتيجة */
.kstate { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin: 4px auto 14px; background: var(--u-gold-soft); color: var(--u-gold); }
.kstate svg { width: 32px; height: 32px; }
.kstate.ok { background: var(--u-ok-soft); color: var(--u-ok); }
.kstate.bad { background: var(--u-err-soft); color: var(--u-err); }
.kstate img { width: 44px; height: auto; }

/* اختيار المظهر */
.ktheme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ktheme button { height: 44px; border-radius: var(--u-r-xs); border: 1px solid var(--u-line); background: var(--u-s2); color: var(--u-ink-2); font: 500 13px var(--u-text); cursor: pointer; }
.ktheme button.on { border: 1.5px solid var(--u-gold-fill); background: var(--u-gold-soft); color: var(--u-ink); font-weight: 600; }

/* صفحة الهبوط */
.hero-vcard-wrap { display: flex; justify-content: center; }
.hero-vcard-wrap > .vcard { display: none !important; }
.hero-logo { width: min(240px, 60vw); height: auto; }
.hero-title-ar, .hero-title-en { color: var(--u-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-family: var(--u-display) !important; font-style: normal !important; }
.hero-title-en { color: var(--u-gold) !important; }
#public > .bar { background: var(--u-bg) !important; border-color: var(--u-line) !important; }
@media (max-width: 640px) { #public > .bar nav { display: none !important; } #public > .bar .bar-actions { margin-inline-start: auto; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* مقاس افتراضي موحّد للأيقونات داخل الصفحات والنوافذ */
:where(.app-content, .modal, #toasts) svg { width: 20px; height: 20px; flex: none; }
:where(.caption, .field-hint) svg { width: 15px; height: 15px; }
.alert svg { width: 18px; height: 18px; }

/* تحييد ألوان داكنة مثبّتة في الملفات القديمة (حتى يعمل الوضع النهاري) */
.ql { background: var(--u-s1) !important; border: 1px solid var(--u-line) !important; color: var(--u-ink-2) !important; box-shadow: var(--u-shadow) !important; border-radius: var(--u-r-md) !important; }
.ql-ic, .use-ic, .empty-icon { background: var(--u-gold-soft) !important; border: 0 !important; color: var(--u-gold) !important; border-radius: var(--u-r-xs) !important; }
.btn[disabled], .btn:disabled { background: var(--u-s3) !important; color: var(--u-ink-3) !important; border-color: transparent !important; box-shadow: none !important; opacity: 1 !important; }
.neon-warn { background: var(--u-err-soft) !important; border: 0 !important; color: var(--u-err) !important; border-radius: var(--u-r-sm) !important; }
.neon-warn p, .neon-warn-title { color: var(--u-err) !important; }
.skeleton { background: linear-gradient(270deg, var(--u-s2) 0%, var(--u-s3) 45%, var(--u-s2) 90%) !important; background-size: 220% 100% !important; border: 0 !important; }
.vcard { background: linear-gradient(135deg, #2A2017, #120E0A 70%) !important; }
.balance-card { background: radial-gradient(120% 90% at 100% 0%, #2B2117 0%, #17120D 55%, #0F0C09 100%) !important; color: #F6EBD9 !important; border: 0 !important; }
.balance-card * { color: inherit; }
.home-head, .greet { color: var(--u-ink) !important; }
:focus-visible { outline: 2px solid rgba(232, 150, 46, .55) !important; outline-offset: 2px; }
.btn:focus:not(:focus-visible) { outline: none !important; }
.balance-card { position: relative; overflow: hidden; border-radius: var(--u-r-lg) !important; padding: 22px 20px !important; text-align: right !important; }
.balance-card .balance-label { color: #C9B79A !important; font: 500 13px var(--u-text) !important; letter-spacing: 0 !important; text-transform: none !important; }
.balance-card .balance-value { color: #FFF4E2 !important; -webkit-text-fill-color: #FFF4E2 !important; background: none !important; font: 600 38px/1.2 var(--u-display) !important; letter-spacing: -.5px !important; margin: 8px 0 2px !important; }
.balance-card .balance-secondary { color: #A99779 !important; font: 500 13px var(--u-display) !important; }
.balance-actions { gap: 10px !important; margin-top: 18px !important; }
.balance-action { height: 46px !important; border-radius: var(--u-r-sm) !important; background: rgba(255, 244, 226, .07) !important; color: #F6EBD9 !important; border: 1px solid rgba(255, 244, 226, .12) !important; font: 600 14px var(--u-text) !important; }
.balance-action[data-action="deposit"] { background: var(--u-grad) !important; color: #1B1206 !important; border: 0 !important; }
.list-meta, .caption, .field-hint, [class*="-label"] { letter-spacing: 0 !important; text-transform: none !important; }
.list-meta { font-family: var(--u-text) !important; }

/* ═══ حسابي ═══ */
.kme { display: flex; gap: 16px; align-items: center; padding: 8px 0 24px; }
.kme-av { width: 68px; height: 68px; border-radius: 22px; flex: none; display: grid; place-items: center; font: 600 28px var(--u-display);
  color: #FFF4E2; background: radial-gradient(120% 120% at 100% 0%, #2B2117, #0F0C09); box-shadow: inset 0 0 0 1.5px rgba(232, 150, 46, .55), 0 10px 24px -14px rgba(40, 22, 4, .8); }
.kme-main { min-width: 0; }
.kme-name { font: 600 21px var(--u-display); color: var(--u-ink); line-height: 1.3; }
.kme-mail { font: 400 13px var(--u-text); color: var(--u-ink-3); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kme-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kme-tag { font: 500 11.5px var(--u-text); padding: 3px 10px; border-radius: 999px; background: var(--u-s2); color: var(--u-ink-2); }
.kme-tag.gold { background: var(--u-gold-soft); color: var(--u-gold); }
.kme-tag.ok { background: var(--u-ok-soft); color: var(--u-ok); }
.kset-label { font: 500 13px var(--u-text); color: var(--u-ink-3); margin: 0 4px 8px; }
.kset { background: var(--u-s1); border: 1px solid var(--u-line); border-radius: var(--u-r); box-shadow: var(--u-shadow); margin-bottom: 24px; overflow: hidden; }
.kset-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 56px; background: none; border: 0; color: var(--u-ink);
  font: 500 14.5px var(--u-text); text-align: right; cursor: pointer; text-decoration: none; }
.kset-row + .kset-row { border-top: 1px solid var(--u-line); }
.kset-row.static { cursor: default; }
label.kset-row.static { cursor: pointer; }
.kset-row:active:not(.static) { background: var(--u-s2); }
.kset-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--u-gold-soft); color: var(--u-gold); }
.kset-ic svg { width: 18px !important; height: 18px !important; }
.kset-t { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 0; }
.kset-t small { font: 400 12px var(--u-text); color: var(--u-ink-3); margin-top: 2px; }
.kset-v { font: 500 13.5px var(--u-display); color: var(--u-ink-3); }
.kset-ch { color: var(--u-ink-3); display: grid; transform: scaleX(-1); }
.kset-ch svg { width: 16px !important; height: 16px !important; }
.kset-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--u-gold-fill); }
.kset-row.danger { color: var(--u-err); }
.kset-row.danger .kset-ic { background: var(--u-err-soft); color: var(--u-err); }
.kseg { display: flex; background: var(--u-s2); border-radius: 10px; padding: 3px; gap: 2px; }
.kseg button { height: 30px; padding: 0 10px; border-radius: 8px; border: 0; background: none; color: var(--u-ink-2); font: 500 12.5px var(--u-text); cursor: pointer; }
.kseg button.on { background: var(--u-s1); color: var(--u-ink); font-weight: 600; box-shadow: var(--u-shadow); }
.kswitch { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--u-s3); position: relative; flex: none; cursor: pointer; transition: background .2s; margin: 0; }
.kswitch::after { content: ''; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.kswitch:checked { background: var(--u-gold-fill); }
.kswitch:checked::after { transform: translateX(-18px); }
.kset-form { padding: 16px; }
.kset-inline { display: flex; gap: 8px; }
.kset-inline .input { flex: 1; }
.kme-foot { text-align: center; font: 400 12px var(--u-display); color: var(--u-ink-3); margin-top: -8px; }
.kav-sm { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 600 14px var(--u-display); color: #FFF4E2;
  background: radial-gradient(120% 120% at 100% 0%, #2B2117, #0F0C09); box-shadow: inset 0 0 0 1px rgba(232, 150, 46, .55); }

/* ═══ v47: شريطان أكبر وأوضح ═══ */
.app-main > .bar { height: 72px !important; }
.k-mark { height: 38px !important; }
.bar-logo span { font-size: 21px !important; }
.bar-actions { gap: 10px !important; }
.icon-btn { width: 46px !important; height: 46px !important; border-radius: 14px !important; }
.icon-btn svg { width: 24px !important; height: 24px !important; }
#avatarBtn { padding: 0 !important; overflow: hidden; border-color: rgba(232, 150, 46, .55) !important; }
#avatarBtn .kav-sm { width: 100%; height: 100%; border-radius: 0; box-shadow: none; font-size: 20px; }
.bottom-nav { height: 92px !important; padding: 8px 8px 24px !important; }
.bottom-nav .nav-item { font-size: 12.5px !important; gap: 5px !important; }
.bottom-nav .nav-item.active { font-weight: 600 !important; }
.bottom-nav .nav-item svg { width: 27px !important; height: 27px !important; }
.bottom-nav .nav-center b { width: 58px; height: 58px; margin-top: -26px; border-radius: 19px; }
.bottom-nav .nav-center b svg { width: 28px !important; height: 28px !important; }
.app-content { padding-bottom: 130px !important; }

/* موافقة الإصدار */
.kagree { display: flex; gap: 10px; align-items: center; font: 500 14px var(--u-text); color: var(--u-ink-2); cursor: pointer; margin-bottom: 8px; }
.kcheck { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; border-radius: 8px; border: 1.5px solid var(--u-line-2); background: var(--u-s2); cursor: pointer; margin: 0; display: grid; place-items: center; }
.kcheck:checked { background: var(--u-gold-fill); border-color: var(--u-gold-fill); }
.kcheck:checked::after { content: ''; width: 6px; height: 11px; border: solid #1B1206; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.klink { background: none; border: 0; padding: 0; color: var(--u-gold); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kterms { background: var(--u-s2); border-radius: var(--u-r-sm); padding: 14px 16px; margin: 8px 0 4px; font: 400 13px/1.9 var(--u-text); color: var(--u-ink-2); max-height: 260px; overflow: auto; }
.kterms p { margin: 0 0 8px; }
.kterms ul { margin: 0 0 8px; padding-inline-start: 18px; }
.bottom-nav { align-items: start !important; padding: 10px 8px calc(14px + env(safe-area-inset-bottom)) !important; height: auto !important; min-height: 88px; }
.bottom-nav .nav-item { height: auto !important; min-height: 0 !important; padding: 0 !important; justify-content: flex-start !important; }

/* ═══ v49 — الشحن والفواتير ═══ */
.kdep-amt { background: var(--u-s2); border: 1px solid var(--u-line); border-radius: var(--u-r-md); padding: 14px 16px 12px; margin-bottom: 10px; }
.kdep-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kdep-row label { font: 500 13px var(--u-text); color: var(--u-ink-3); }
.kdep-in { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.kdep-in input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--u-ink); font: 600 34px var(--u-display); padding: 0; direction: ltr; text-align: right; }
.kdep-in span { font: 600 20px var(--u-display); color: var(--u-ink-3); }
.kchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.kchips button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--u-line); background: var(--u-s1); color: var(--u-ink-2); font: 500 13px var(--u-text); cursor: pointer; }
.kchips button.on { border-color: var(--u-gold); background: var(--u-gold-soft); color: var(--u-gold); font-weight: 600; }
.kpm { width: 100%; text-align: right; border: 1.5px solid transparent !important; cursor: pointer; }
.kpm.sel { border-color: var(--u-gold) !important; background: var(--u-gold-soft) !important; }
.kpm:disabled { opacity: .5; cursor: not-allowed; }
.kpm-logo { font: 700 13px var(--u-display); color: var(--u-gold); overflow: hidden; }
.kpm-logo img { width: 100%; height: 100%; object-fit: cover; }
.kpm-tag { display: inline-block; vertical-align: middle; margin-inline-start: 4px; padding: 1px 7px; border-radius: 6px; font: 500 10.5px var(--u-text); background: var(--u-s3); color: var(--u-ink-2); }
.kpm-tag.auto, .kpm-tag.fast { background: var(--u-ok-soft); color: var(--u-ok); }
.kpm-tag.off { background: var(--u-err-soft); color: var(--u-err); }
.kpm-pay { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kpm-pay b { font: 600 14px var(--u-display); color: var(--u-ink); white-space: nowrap; }
.kpm-pay small { font: 400 11px var(--u-text); color: var(--u-ink-3); }
.kinv-top { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; }
.kinv-top .kinv-no { flex: 1; }
.kinv-top .modal-close { flex: none; }
.kinv-no { font: 600 15px var(--u-display); color: var(--u-ink); letter-spacing: .02em; direction: ltr; }
.kinv-st { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font: 500 12px var(--u-text); white-space: nowrap; }
.kinv-st.st-w { background: var(--u-warn-soft); color: var(--u-warn); }
.kinv-st.st-p { background: var(--u-ok-soft); color: var(--u-ok); }
.kinv-st.st-x { background: var(--u-s3); color: var(--u-ink-2); }
.kinv-st span { font-variant-numeric: tabular-nums; direction: ltr; }
.kprog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kprog i { height: 4px; border-radius: 4px; background: var(--u-s3); }
.kprog i.d { background: var(--u-ok); }
.kprog i.a { background: var(--u-gold-fill); animation: kpulseb 1.6s ease-in-out infinite; }
@keyframes kpulseb { 50% { opacity: .45; } }
.kprog-l { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 12px; font: 400 11px var(--u-text); color: var(--u-ink-3); }
.kprog-l span:nth-child(2) { text-align: center; } .kprog-l span:nth-child(3) { text-align: left; }
.kinv-big { font: 700 32px var(--u-display); color: var(--u-ink); direction: ltr; margin: 4px 0; letter-spacing: -.01em; }
.kinv-big small { font-size: 15px; color: var(--u-ink-3); font-weight: 600; }
.kqr { width: 176px; height: 176px; margin: 0 auto 14px; background: #fff; border-radius: 16px; padding: 8px; border: 1px solid var(--u-line); }
.kqr svg, .kqr img { width: 100%; height: 100%; display: block; object-fit: contain; }
.kbnb { background: #F0B90B !important; color: #1E2026 !important; font-weight: 600 !important; border: 0 !important; }
.klive { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--u-r-sm); background: var(--u-s2); border: 1px dashed var(--u-line-2); margin-bottom: 12px; }
.klive b { display: block; font: 600 13.5px var(--u-text); color: var(--u-ink); }
.klive span:not(.kpulse) { display: block; font: 400 12px var(--u-text); color: var(--u-ink-3); margin-top: 2px; }
.kpulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--u-gold-fill); box-shadow: 0 0 0 0 rgba(232, 150, 46, .5); animation: kping 1.6s infinite; }
@keyframes kping { 70% { box-shadow: 0 0 0 9px rgba(232, 150, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 150, 46, 0); } }
.kinv-acts { display: flex; flex-direction: column; gap: 8px; }
.kinv-acts:empty { display: none; }
.kreceipt { background: var(--u-s2); border-radius: var(--u-r-md); padding: 6px 16px; }
.kreceipt > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--u-line); font: 400 13px var(--u-text); color: var(--u-ink-3); }
.kreceipt > div:last-child { border-bottom: 0; }
.kreceipt b { color: var(--u-ink); font-weight: 600; text-align: left; }
.kpend { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--u-r-md); border: 1px solid var(--u-gold); background: var(--u-gold-soft); color: var(--u-ink); text-align: right; cursor: pointer; font-family: var(--u-text); }
.kpend > div { flex: 1; min-width: 0; }
.kpend b { display: block; font-size: 13.5px; font-weight: 600; }
.kpend span.tabular { display: block; font-size: 12px; color: var(--u-ink-2); direction: ltr; text-align: right; }
.kpend-go { flex: none; padding: 7px 12px; border-radius: 10px; background: var(--u-gold-fill); color: var(--u-on-gold); font: 600 12.5px var(--u-text); }
.kco { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--u-r-sm); background: var(--u-gold-soft); color: var(--u-gold); }
.kco svg { width: 22px; height: 22px; flex: none; }
.kco b { display: block; font: 600 13.5px var(--u-text); color: var(--u-ink); }
.kco span { display: block; font: 400 12px var(--u-text); color: var(--u-ink-2); margin-top: 2px; }
.kinv-acts .btn svg { width: 18px; height: 18px; }

/* ═══ v51 — تثبيت التطبيق ═══ */
.kinst { text-align: center; padding-top: 4px; }
.kinst-logo { width: 76px; height: 76px; border-radius: 20px; display: block; margin: 0 auto 14px; box-shadow: 0 14px 30px -14px rgba(232, 150, 46, .8); animation: kpop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes kpop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.kinst-pts { display: grid; gap: 8px; margin-bottom: 18px; text-align: right; }
.kinst-pts div { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--u-r-sm); background: var(--u-s2); font: 500 13.5px var(--u-text); color: var(--u-ink); }
.kinst-pts svg { width: 20px; height: 20px; color: var(--u-gold); flex: none; }
.kinst-steps { display: grid; gap: 8px; text-align: right; margin-bottom: 8px; }
.kinst-steps div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--u-r-sm); border: 1px solid var(--u-line); font: 500 13.5px var(--u-text); color: var(--u-ink); }
.kinst-steps b { width: 26px; height: 26px; border-radius: 50%; background: var(--u-gold-soft); color: var(--u-gold); display: grid; place-items: center; font: 600 13px var(--u-display); flex: none; }
.kinst-steps span svg { display: inline-block !important; width: 17px; height: 17px; vertical-align: -3px; color: var(--u-gold); margin: 0 2px; }

/* ═══ v51 — حركات دخول متدرّجة للصفحات ═══ */
.page-enter { animation: none !important; }
.page-enter > * { animation: u-rise .46s cubic-bezier(.2, .8, .2, 1) both; }
.page-enter > *:nth-child(2) { animation-delay: .05s; } .page-enter > *:nth-child(3) { animation-delay: .1s; } .page-enter > *:nth-child(4) { animation-delay: .15s; }
.page-enter > *:nth-child(5) { animation-delay: .2s; } .page-enter > *:nth-child(6) { animation-delay: .24s; } .page-enter > *:nth-child(n+7) { animation-delay: .28s; }
@keyframes u-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.kq > button { animation: u-pop .42s cubic-bezier(.2, 1.3, .4, 1) both; }
.kq > button:nth-child(2) { animation-delay: .06s; } .kq > button:nth-child(3) { animation-delay: .12s; } .kq > button:nth-child(4) { animation-delay: .18s; }
@keyframes u-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.rsc-tile, .list-row, .kset-row { transition: transform .12s ease; }
.rsc-tile:active, .kset-row:active, button.list-row:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .page-enter > *, .kq > button, .kinst-logo { animation: none !important; } }

/* ═══ v52 — خزنة البطاقة ═══ */
.kvault { text-align: center; padding-top: 4px; }
.kv-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--u-gold-soft); color: var(--u-gold); display: grid; place-items: center; margin: 0 auto 12px; }
.kv-ic svg { width: 26px; height: 26px; }
.kv-err { min-height: 22px; margin-top: 10px; font: 500 13px var(--u-text); color: var(--u-err); }
.kv-err.shake { animation: kshake .35s; }
@keyframes kshake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.kpin { display: flex; gap: 12px; justify-content: center; margin: 8px 0 20px; }
.kpin i { width: 54px; height: 62px; border-radius: 16px; border: 1.5px solid var(--u-line); background: var(--u-s2); display: grid; place-items: center; font: 600 28px var(--u-display); font-style: normal; color: var(--u-ink); transition: border-color .15s, transform .15s; }
.kpin i.f { border-color: var(--u-gold-fill); background: var(--u-s1); transform: scale(1.04); }
.kpin i.cur { border-color: var(--u-gold-fill); box-shadow: var(--shadow-focus); }
.kpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 340px; margin: 0 auto; }
.kpad button { height: 56px; border-radius: 16px; border: 0; background: var(--u-s2); color: var(--u-ink); font: 600 23px var(--u-display); cursor: pointer; }
.kpad button:active { background: var(--u-s3); transform: scale(.96); }
.kpad button:disabled { opacity: .5; }
.kvc { position: relative; border-radius: 20px; padding: 18px; color: #F6EBD9; overflow: hidden; isolation: isolate; aspect-ratio: 1.586; max-width: 360px; margin: 0 auto 12px;
  background: radial-gradient(120% 90% at 100% 0%, #2B2117 0%, #17120D 55%, #0F0C09 100%); box-shadow: 0 18px 40px -20px rgba(40, 22, 4, .65); text-align: left; }
.kvc::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .45; background: repeating-radial-gradient(circle at -5% 120%, transparent 0 9px, rgba(232, 150, 46, .10) 9px 10px); }
.kvc-fox { position: absolute; right: -20px; top: -14px; height: 150px; opacity: .14; z-index: -1; }
.kvc-top { display: flex; justify-content: space-between; font: 500 12.5px var(--u-text); color: #C9B79A; direction: rtl; }
.kvc-top span:last-child { font: 600 12px var(--u-display); letter-spacing: 2px; color: #E8B572; }
.kvc-chip { width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #E8C27A, #B8862E); margin: 16px 0 12px; }
.kvc-num { font: 600 clamp(17px, 5.4vw, 22px) var(--u-display); letter-spacing: 1.5px; color: #FFF4E2; }
.kvc-b { display: flex; gap: 28px; margin-top: 12px; }
.kvc-b small { display: block; font: 400 10px var(--u-text); color: #A99779; letter-spacing: .5px; }
.kvc-b b { font: 600 15px var(--u-display); color: #FFF4E2; }
.kv-timer { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--u-r-sm); background: var(--u-gold-soft); color: var(--u-gold); font: 600 13px var(--u-text); margin-bottom: 12px; }
.kv-timer svg { width: 18px; height: 18px; flex: none; }
.kv-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(232, 150, 46, .2); overflow: hidden; }
.kv-bar i { display: block; height: 100%; width: 100%; background: var(--u-gold-fill); transition: width 1s linear; }

/* ═══ v52 — كيف أدفع؟ ═══ */
.kpm.off { opacity: .5; cursor: not-allowed; }
.kpm-how { margin-inline-start: 6px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--u-line); background: var(--u-s1); color: var(--u-gold); font: 600 10.5px var(--u-text); cursor: pointer; vertical-align: middle; }
.kinv-how { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; padding: 8px; margin: -4px 0 12px; border: 0; background: none; color: var(--u-gold); font: 600 13px var(--u-text); cursor: pointer; }
.kinv-how svg { width: 17px; height: 17px; }
.ht-steps { display: grid; gap: 14px; margin-bottom: 16px; }
.ht-step { display: grid; grid-template-columns: 108px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: var(--u-r-md); background: var(--u-s2); }
.ht-pic { border-radius: 14px; overflow: hidden; background: var(--u-s1); aspect-ratio: 220 / 300; display: grid; place-items: center; }
.ht-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ht-art { width: 100%; height: 100%; display: block; }
.ht-txt { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.75 var(--u-text); color: var(--u-ink); }
.ht-txt b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--u-gold-fill); color: var(--u-on-gold); display: grid; place-items: center; font: 600 13px var(--u-display); margin-top: 2px; }
@media (min-width: 560px) { .ht-step { grid-template-columns: 150px 1fr; } }

/* ═══ v52 — عرض أول شحنة ═══ */
.kpromo { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--u-r-md); border: 1px dashed var(--u-gold-fill);
  background: linear-gradient(90deg, var(--u-gold-soft), transparent); color: var(--u-ink); text-align: right; cursor: pointer; font-family: var(--u-text); }
.kpromo-ic { font-size: 26px; flex: none; animation: kwig 2.4s ease-in-out infinite; }
@keyframes kwig { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
.kpromo b { display: block; font: 600 14px var(--u-text); }
.kpromo span:not(.kpromo-ic) { display: block; font: 400 12px var(--u-text); color: var(--u-ink-2); margin-top: 2px; }
.kpm .list-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

/* ═══ v53 — المتجر الجديد ═══ */
.ksearch { height: 50px; border-radius: 16px; background: var(--u-s1); border: 1px solid var(--u-line); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--u-ink-3); box-shadow: var(--u-shadow); margin-bottom: 12px; }
.ksearch svg { width: 20px; height: 20px; flex: none; }
.ksearch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--u-ink); font: 500 15px var(--u-text); height: 100%; }
.ksearch:focus-within { border-color: var(--u-gold-fill); box-shadow: var(--shadow-focus); }
.kchipsx { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 6px; padding: 0 20px 4px; }
.kchipsx::-webkit-scrollbar, .krow::-webkit-scrollbar, .kheros::-webkit-scrollbar { display: none; }
.kchipsx button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: 999px; background: var(--u-s1); border: 1px solid var(--u-line); color: var(--u-ink); font: 500 13.5px var(--u-text); cursor: pointer; }
.kchipsx button em { font-style: normal; font-size: 15px; }
.kchipsx button.on { background: var(--u-ink); color: var(--u-bg); border-color: var(--u-ink); }
.kheros { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.khero { flex: none; width: min(320px, 82vw); height: 168px; scroll-snap-align: start; border-radius: 22px; position: relative; overflow: hidden; border: 0; padding: 0; cursor: pointer; text-align: right; color: #fff; background: #1a1410; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55); }
.khero-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.4); transform: scale(1.1); opacity: .9; }
.khero-bg.ph, .kp-bg.ph, .kgift-bg.ph { background: var(--u-grad); filter: none; }
.khero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .05) 65%); }
.khero-img { position: absolute; left: 16px; top: 18px; width: 92px; height: 92px; border-radius: 22px; overflow: hidden; z-index: 1; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); transform: rotate(-6deg); }
.khero-img img, .khero-img .rsc-ph { width: 100%; height: 100%; object-fit: cover; }
.khero-tag { position: absolute; top: 14px; right: 14px; z-index: 1; font: 600 11px var(--u-text); font-style: normal; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); }
.khero-txt { position: absolute; right: 16px; left: 120px; bottom: 14px; z-index: 1; }
.khero-txt b { display: block; font: 700 20px/1.25 var(--u-display); text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.khero-txt span { display: block; font: 500 12.5px var(--u-text); opacity: .92; margin-top: 2px; }
.kdots { display: flex; gap: 5px; justify-content: center; margin: 10px 0 2px; }
.kdots i { width: 6px; height: 6px; border-radius: 3px; background: var(--u-line-2); transition: width .3s, background .3s; }
.kdots i.on { width: 18px; background: var(--u-gold-fill); }
.krow { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 4px; padding: 2px 20px 8px; }
.kagain { flex: none; width: 210px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--u-s1); border: 1px solid var(--u-line); cursor: pointer; text-align: right; color: var(--u-ink); font-family: var(--u-text); }
.kagain-ic { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; flex: none; background: var(--u-s2); display: grid; place-items: center; }
.kagain-ic img { width: 100%; height: 100%; object-fit: cover; }
.kagain-t { flex: 1; min-width: 0; } .kagain-t b { display: block; font: 600 13px var(--u-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kagain-t span { display: block; font: 400 11.5px var(--u-text); color: var(--u-ink-3); }
.kagain-go { width: 32px; height: 32px; border-radius: 10px; background: var(--u-gold-soft); color: var(--u-gold); display: grid; place-items: center; font: 700 16px var(--u-display); flex: none; }
.ktall { flex: none; width: 118px; border: 0; background: none; padding: 0; text-align: right; cursor: pointer; color: var(--u-ink); font-family: var(--u-text); }
.ktall-cv { display: block; height: 156px; border-radius: 18px; position: relative; overflow: hidden; background: var(--u-s3); box-shadow: var(--u-shadow); }
.ktall-bg { position: absolute; inset: -16px; background-size: cover; background-position: center; filter: blur(14px) saturate(1.3); transform: scale(1.1); opacity: .85; }
.ktall-img { position: absolute; left: 50%; top: 42%; width: 76px; height: 76px; border-radius: 18px; transform: translate(-50%, -50%); object-fit: cover; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5); display: grid; place-items: center; background: var(--u-s2); color: var(--u-gold); }
.ktall-img svg { width: 30px; height: 30px; }
.ktag { position: absolute; bottom: 8px; right: 8px; font: 600 10px var(--u-text); font-style: normal; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktag.hot { background: var(--u-err); }
.ktall-nm { display: block; font: 600 13px var(--u-text); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktall-pr { display: block; font: 500 12px var(--u-text); color: var(--u-ink-3); } .ktall-pr em { font-style: normal; color: var(--u-gold); font-weight: 600; }
.kgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; margin-bottom: 8px; }
.kgrid3 .ktall { width: auto; }
.kgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.kgift { position: relative; aspect-ratio: 1.6; border-radius: 16px; overflow: hidden; border: 0; padding: 12px; cursor: pointer; color: #fff; text-align: right; display: flex; flex-direction: column; justify-content: space-between; background: #222; box-shadow: var(--u-shadow); font-family: var(--u-text); }
.kgift.inrow { flex: none; width: 200px; }
.kgift-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.kgift::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .5)); }
.kgift-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kgift-top b { font: 700 15px var(--u-display); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kgift-chip { width: 26px; height: 19px; border-radius: 4px; background: linear-gradient(135deg, #F5D78E, #C9973D); flex: none; }
.kgift-from { position: relative; z-index: 1; font: 600 12px var(--u-text); align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.rsc-ph { display: grid; place-items: center; background: var(--u-s2); color: var(--u-gold); }
/* صفحة المنتج */
.kprod { padding-bottom: 96px; }
.kp-hero { position: relative; height: 210px; margin: -8px -20px 0; overflow: hidden; }
.kp-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(22px) saturate(1.4); transform: scale(1.15); }
.kp-fade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--u-bg) 4%, transparent 75%); }
.kp-back { position: absolute; top: 12px; right: 20px; width: 42px; height: 42px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .28); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; cursor: pointer; }
.kp-back svg { width: 20px; height: 20px; }
.kp-info { position: relative; margin-top: -78px; display: flex; align-items: flex-end; gap: 14px; }
.kp-ic { width: 88px; height: 88px; border-radius: 24px; overflow: hidden; flex: none; border: 3px solid var(--u-bg); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45); background: var(--u-s2); }
.kp-ic img, .kp-ic .rsc-ph { width: 100%; height: 100%; object-fit: cover; }
.kp-info h1 { font: 700 22px/1.3 var(--u-display); margin: 0; color: var(--u-ink); }
.kp-info span { font: 500 12.5px var(--u-text); color: var(--u-ink-2); }
.kp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 6px; }
.kp-badges span { font: 500 11.5px var(--u-text); padding: 4px 10px; border-radius: 999px; background: var(--u-s2); color: var(--u-ink-2); }
.kp-badges .g { background: var(--u-ok-soft); color: var(--u-ok); }
.kp-lbl { font: 600 14px var(--u-text); color: var(--u-ink); margin: 18px 2px 10px; }
.kpk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpkc { border-radius: 16px; background: var(--u-s1); border: 1.5px solid var(--u-line); padding: 12px; text-align: right; cursor: pointer; color: var(--u-ink); font-family: var(--u-text); transition: border-color .15s, transform .12s; }
.kpkc:active { transform: scale(.98); }
.kpkc.on { border-color: var(--u-gold-fill); background: var(--u-gold-soft); }
.kpkc b { display: block; font: 700 15px/1.35 var(--u-display); }
.kpkc .p { display: block; font: 600 14px var(--u-display); color: var(--u-gold); margin-top: 6px; }
.kpkc .u { display: block; font: 400 11px var(--u-text); color: var(--u-ink-3); }
.kp-in { height: 52px !important; font-size: 16px !important; letter-spacing: .5px; }
.kqty { display: flex; align-items: center; gap: 16px; }
.kqty button { width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--u-line); background: var(--u-s1); color: var(--u-ink); font: 600 22px var(--u-display); cursor: pointer; }
.kqty button:disabled { opacity: .4; }
.kqty b { font: 700 22px var(--u-display); min-width: 30px; text-align: center; }
.kbuy { position: fixed; left: 0; right: 0; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 35; display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--u-nav); backdrop-filter: blur(14px); border-top: 1px solid var(--u-line); max-width: 640px; margin: 0 auto; animation: u-rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.kbuy-t span { display: block; font: 400 11.5px var(--u-text); color: var(--u-ink-3); }
.kbuy-t b { font: 700 19px var(--u-display); color: var(--u-ink); white-space: nowrap; }
.kbuy-b { flex: 1; height: 52px; border-radius: 16px; border: 0; background: var(--u-grad); color: var(--u-on-gold); display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--u-text); cursor: pointer; box-shadow: 0 8px 18px -10px rgba(232, 150, 46, .9); }
.kbuy-b svg { width: 19px; height: 19px; }
.kbuy-b:disabled { opacity: .55; }
@media (min-width: 1024px) { .kbuy { bottom: 16px; border-radius: 18px; border: 1px solid var(--u-line); } }

/* ═══ v54 — خاتمة الصفحات ═══ */
.kfoot { margin: 44px 0 8px; padding-top: 24px; border-top: 1px solid var(--u-line); animation: none !important; }
.kfoot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kfoot h4 { font: 600 13px var(--u-text); color: var(--u-ink-3); margin: 0 0 8px; }
.kfoot-cols a, .kfoot-cols button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 0; border: 0; background: none; color: var(--u-ink); font: 500 13.5px var(--u-text); text-decoration: none; text-align: right; cursor: pointer; min-width: 0; }
.kfoot-cols a span, .kfoot-cols button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfoot-cols svg { width: 17px; height: 17px; color: var(--u-ink-3); flex: none; }
.kfoot-soc { display: flex; gap: 8px; margin-top: 18px; }
.kfoot-soc a { width: 40px; height: 40px; border-radius: 12px; background: var(--u-s1); border: 1px solid var(--u-line); display: grid; place-items: center; color: var(--u-ink-2); }
.kfoot-soc svg { width: 19px; height: 19px; }
.kfoot-cp { margin-top: 20px; display: flex; align-items: center; gap: 8px; font: 400 12px var(--u-text); color: var(--u-ink-3); }
.kfoot-cp img { height: 20px; opacity: .8; }
/* الأسئلة الشائعة */
.kfaq { background: var(--u-s1); border: 1px solid var(--u-line); border-radius: var(--u-r-md); overflow: hidden; margin-bottom: 8px; }
.kfaq details + details { border-top: 1px solid var(--u-line); }
.kfaq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; font: 600 14px var(--u-text); color: var(--u-ink); cursor: pointer; }
.kfaq summary::-webkit-details-marker { display: none; }
.kfaq summary i { font-style: normal; color: var(--u-gold); font: 600 18px var(--u-display); transition: transform .2s; }
.kfaq details[open] summary i { transform: rotate(45deg); }
.kfaq p { margin: 0; padding: 0 16px 14px; font: 400 13.5px/1.8 var(--u-text); color: var(--u-ink-2); }
/* آراء العملاء */
.krev-sum { display: flex; align-items: center; gap: 14px; background: var(--u-s1); border: 1px solid var(--u-line); border-radius: var(--u-r-md); padding: 14px 16px; margin-bottom: 10px; }
.krev-sum > b { font: 700 34px var(--u-display); color: var(--u-ink); }
.krev-sum span { font: 400 12px var(--u-text); color: var(--u-ink-3); }
.kst { color: #F5B400; letter-spacing: 2px; font-size: 15px; } .kst.sm { font-size: 11px; letter-spacing: 1px; }
.krev { flex: none; width: 250px; background: var(--u-s1); border: 1px solid var(--u-line); border-radius: 16px; padding: 12px 14px; }
.krev-h { display: flex; align-items: center; gap: 10px; }
.krev-av { width: 36px; height: 36px; border-radius: 12px; background: var(--u-gold-soft); color: var(--u-gold); display: grid; place-items: center; font: 600 14px var(--u-display); flex: none; }
.krev-h b { font: 600 13px var(--u-text); color: var(--u-ink); }
.krev-vf { margin-inline-start: auto; font: 500 10.5px var(--u-text); color: var(--u-ok); background: var(--u-ok-soft); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.krev p { font: 400 13px/1.7 var(--u-text); color: var(--u-ink); margin: 8px 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.krev-it { font: 400 11px var(--u-text); color: var(--u-ink-3); }
/* التقييم */
.krate { text-align: center; padding: 12px; border-radius: var(--u-r-md); background: var(--u-s2); margin-bottom: 12px; position: relative; }
.krate > b { display: block; font: 600 14px var(--u-text); color: var(--u-ink); margin-bottom: 6px; padding: 0 28px; }
.krate-st { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.krate-st button { border: 0; background: none; font-size: 32px; color: var(--u-line-2); cursor: pointer; padding: 0 2px; transition: transform .15s, color .15s; }
.krate-st button.on { color: #F5B400; transform: scale(1.08); }
.krate textarea { margin-bottom: 8px; }
.krate-card { padding: 4px !important; }
.krate-card .krate { margin: 0; background: transparent; }
.krate-x { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 10px; border: 0; background: var(--u-s2); color: var(--u-ink-3); display: grid; place-items: center; cursor: pointer; }
.krate-x svg { width: 15px; height: 15px; }

/* ═══ v55 — الصيانة وصفوف الرئيسية ═══ */
.ksh-ic { font-style: normal; margin-inline-end: 6px; }
.kmaint { cursor: not-allowed; }
.kmaint .ktall-cv, .kmaint.kgift { filter: grayscale(1); opacity: .6; }
.kmaint .ktall-nm { color: var(--u-ink-3); }
.kmb { position: absolute; inset: auto 6px 6px 6px; z-index: 3; background: rgba(20,22,24,.85); color: #fff; font: 600 10.5px var(--u-text); font-style: normal; text-align: center; padding: 4px; border-radius: 9px; }
.ksec { text-align: center; padding: 48px 6px 8px; }
.ksec-ic { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 30px; background: var(--u-warn-soft, #FCF1DE); display: grid; place-items: center; font-size: 44px; }
.ksec h1 { font: 700 22px var(--u-display); color: var(--u-ink); margin: 0 0 8px; }
.ksec p { font: 400 14.5px/1.8 var(--u-text); color: var(--u-ink-2); margin: 0 0 18px; }
.ksec-msg { background: var(--u-s1); border: 1px solid var(--u-line); border-radius: 16px; padding: 14px; font: 500 14px/1.8 var(--u-text); color: var(--u-ink); text-align: right; margin-bottom: 18px; white-space: pre-wrap; }
.ksec-msg small { display: block; color: var(--u-ink-3); font-size: 12px; }
.ksec-note { display: flex; gap: 12px; align-items: center; background: var(--u-warn-soft, #FCF1DE); border-radius: var(--u-r-md); padding: 14px 16px; margin: 18px 0; }
.ksec-note svg { width: 22px; height: 22px; color: var(--u-warn, #A8650C); flex: none; }
.ksec-note b { display: block; font: 600 14px var(--u-text); color: var(--u-ink); }
.ksec-note span { font: 400 12.5px var(--u-text); color: var(--u-ink-2); }

/* ═══ v56 — جودة المتجر ═══ */
.kgrid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kgrid3 > *, .kgrid2 > *, .kgift, .ktall { min-width: 0; }
.kgift-top { min-width: 0; } .kgift-top b { min-width: 0; flex: 1; }
.ktall-nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.kgrid3 .ktall, .kgrid2 .kgift { content-visibility: auto; contain-intrinsic-size: auto 190px; }
/* الخلفية الضبابية تظهر بنعومة لما تتحمّل */
.ktall-bg[data-bg], .kgift-bg[data-bg] { background: linear-gradient(100deg, var(--u-s3) 30%, var(--u-s2) 50%, var(--u-s3) 70%); background-size: 200% 100%; animation: kshim 1.2s linear infinite; filter: none; }
.ktall-bg.in, .kgift-bg.in { animation: kbgin .35s ease-out; }
.ktall-bg.now, .kgift-bg.now { animation: none; }
@keyframes kshim { to { background-position: -200% 0; } }
@keyframes kbgin { from { opacity: 0; } }
/* أيقونات الأنواع */
.ksh h2 { display: flex; align-items: center; gap: 8px; }
.ksh-ic { width: 30px; height: 30px; border-radius: 10px; background: var(--u-gold-soft); color: var(--u-gold); display: grid; place-items: center; margin: 0 !important; flex: none; }
.ksh-ic svg { width: 17px; height: 17px; }
.ksh-n { font: 500 13px var(--u-text); color: var(--u-ink-3); }
.kchipsx .kci { font-style: normal; display: grid; place-items: center; color: var(--u-gold); }
.kchipsx .kci svg { width: 16px; height: 16px; }
.kchipsx button.on .kci { color: var(--u-gold-fill); }
.khero-tag { display: inline-flex; align-items: center; gap: 4px; }
.khero-tag svg { width: 13px; height: 13px; }
.kmore { display: block; width: 100%; height: 48px; margin: 14px 0 6px; border-radius: 14px; border: 1px dashed var(--u-line-2, var(--u-line)); background: transparent; color: var(--u-ink-2); font: 600 14px var(--u-text); cursor: pointer; }
/* زر الرجوع: واضح وثابت فوق وأنت تنزل */
.kp-bk { position: sticky; top: 64px; height: 0; z-index: 29; }
.kprod .kp-back { position: absolute; top: 10px; right: 0; width: auto; height: 42px; padding: 0 12px 0 14px; gap: 4px; display: inline-flex; align-items: center; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .94); color: #15191A; font: 600 14px var(--u-text); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); backdrop-filter: none; }
.kprod .kp-back svg { width: 20px; height: 20px; }
/* شرح «ادفع الفرق» */
.kbuy { flex-wrap: wrap; row-gap: 6px; }
.kbuy-x { flex-basis: 100%; display: flex; gap: 6px; align-items: center; font: 400 11.5px/1.5 var(--u-text); color: var(--u-ink-2); }
.kbuy-x i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--u-gold-soft); color: var(--u-gold); display: grid; place-items: center; font-size: 11px; flex: none; }
.kprod { padding-bottom: 130px; }
.kp-info > div { min-width: 0; }
.kp-info h1 { font-size: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* v58: خانة البحث — خط واحد بس عند الضغط */
.ksearch input:focus, .ksearch input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; background: none !important; }
.ksearch:focus-within { border-color: var(--u-gold-fill); box-shadow: 0 0 0 3px rgba(232, 150, 46, .18); }

/* ═══ v62 — المحافظ ═══ */
.kwal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.kwal { position: relative; overflow: hidden; border-radius: var(--u-r, 20px); padding: 14px; min-height: 124px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; color: #fff;
  background: linear-gradient(135deg, var(--wc, #566064), color-mix(in srgb, var(--wc, #566064) 62%, #000)); box-shadow: var(--u-shadow); }
.kwal::after { content: ''; position: absolute; inset: auto -34px -44px auto; width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.kwal.on { outline: 3px solid var(--u-gold-fill, #E8962E); outline-offset: 2px; }
.kwal-n { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.kwal-lg { width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: 11px; font-weight: 800; overflow: hidden; flex: none; }
.kwal-lg img { width: 100%; height: 100%; object-fit: cover; }
.kwal-b { font-family: var(--u-display); font-size: 23px; font-weight: 700; text-align: right; line-height: 1.1; }
.kwal-b small { font-size: 12px; opacity: .85; font-weight: 600; }
.kwal-def { position: absolute; top: 9px; left: 9px; background: #fff; color: #1B1206; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 20px; z-index: 1; }
.kwal-set { position: relative; z-index: 1; align-self: flex-start; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, .2); color: #fff; border: 0; border-radius: 10px; padding: 6px 9px; cursor: pointer; }
.kwal-set:active { transform: scale(.97); }
.kw-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.kw-switch { background: none; border: 0; color: inherit; font: inherit; opacity: .85; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 360px) { .kwal-b { font-size: 19px; } .kwal { min-height: 112px; padding: 12px; } }
/* v64 — المحافظ كبطاقات تنسحب + اختيار المحفظة في الشحن */
.kwal-car { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 4px 2px 6px; margin-inline: -2px; scrollbar-width: none; }
.kwal-car::-webkit-scrollbar { display: none; }
.kwal-car .kwal { flex: 0 0 82%; scroll-snap-align: center; min-height: 150px; }
.kwal-car .kwal-b { font-size: 30px; }
.kwal-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.kwal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--u-line-2); transition: width .2s; }
.kwal-dots i.on { width: 18px; border-radius: 4px; background: var(--u-gold-fill); }
.kwsel { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.kwsel::-webkit-scrollbar { display: none; }
.kwsel button { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border-radius: 14px; border: 1.5px solid var(--u-line); background: var(--u-s1); color: var(--u-ink); font-weight: 700; font-size: 13px; cursor: pointer; }
.kwsel button i { width: 18px; height: 4px; border-radius: 3px; background: var(--wc); }
.kwsel button small { font-weight: 500; color: var(--u-ink-3); font-size: 11px; direction: ltr; }
.kwsel button.on { border-color: var(--wc); background: color-mix(in srgb, var(--wc) 10%, var(--u-s1)); }
/* v65 — بطاقات الأقسام أكبر بشكل بطاقة */
.kgrid2 { gap: 12px; }
.kgift { aspect-ratio: 1.45; border-radius: 18px; padding: 14px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55); }
.kgift.inrow { width: 236px; }
.kgift-top b { font-size: 16px; }
.kgift-chip { width: 30px; height: 22px; }
@media (max-width: 360px) { .kgrid2 { grid-template-columns: 1fr; } .kgift { aspect-ratio: 1.6; } }

/* v71 — اطلب بالرابط (SHEIN بالدينار) */
.lo-tile{display:flex;align-items:center;gap:12px;width:100%;margin:-14px 0 24px;padding:14px;border-radius:var(--u-r-md,16px);border:1px solid var(--u-line);background:var(--u-s1);color:var(--u-ink);text-align:start;font:inherit;cursor:pointer}
.lo-tile-ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--u-gold-soft)}
.lo-tile-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lo-tile-tx b{font-size:15px}.lo-tile-tx span{font-size:12.5px;color:var(--u-ink-2)}
.lo-tile-go{color:var(--u-gold);font-weight:700}
.lo-eye{color:var(--u-err);font-size:13px;font-weight:700}
.lo-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--u-s2);border:1px solid var(--u-line)}
.lo-seg button{border:0;background:transparent;border-radius:999px;padding:10px 6px;font:inherit;font-weight:700;color:var(--u-ink-2);cursor:pointer}
.lo-seg button.on{background:var(--u-s1);color:var(--u-ink);box-shadow:var(--u-shadow)}
.lo-seg i{font-style:normal;font-size:11px;background:var(--u-gold);color:var(--u-on-gold);border-radius:999px;padding:1px 7px;margin-inline-start:4px}
.lo-card{padding:16px}
.lo-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:-4px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--u-line)}
.lo-steps span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--u-ink-3);text-align:center}
.lo-steps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--u-s2);color:var(--u-ink-2)}
.lo-steps .on{color:var(--u-ink);font-weight:700}.lo-steps .on b{background:var(--u-ink);color:var(--u-bg)}
.lo-steps .done b{background:var(--u-ok);color:#fff}
.lo-urlrow{display:flex;gap:8px;align-items:center}.lo-urlrow .input{flex:1;min-width:0}
.lo-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lo-facts span{font-size:11.5px;padding:4px 9px;border-radius:999px;background:var(--u-s2);color:var(--u-ink-2)}
.lo-wait{display:flex;gap:12px;align-items:center;padding:6px 0}
.lo-wait div{display:flex;flex-direction:column;gap:3px}.lo-wait b{font-size:16px}.lo-wait span{font-size:13px;color:var(--u-ink-2)}
.lo-spin{width:42px;height:42px;flex:0 0 42px;border-radius:50%;border:4px solid var(--u-line);border-top-color:var(--u-err);animation:lospin .9s linear infinite}
.lo-clock{font-size:30px;flex:0 0 42px;text-align:center}
@keyframes lospin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lo-spin{animation-duration:3s}}
.lo-items{display:flex;flex-direction:column;margin-top:6px}
.lo-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--u-line)}
.lo-item:last-child{border-bottom:0}
.lo-img{width:64px;height:64px;flex:0 0 64px;border-radius:12px;overflow:hidden;background:var(--u-s2);display:grid;place-items:center;color:var(--u-ink-3)}
.lo-img img{width:100%;height:100%;object-fit:cover}
.lo-it{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lo-name{font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lo-attr{font-size:12px;color:var(--u-ink-3)}.lo-price{font-weight:700;font-size:14px}
.lo-qty{font-weight:700;color:var(--u-ink-2);font-size:13px;padding:4px 10px;border-radius:999px;border:1px solid var(--u-line)}
.lo-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.lo-sum div{background:var(--u-s2);border-radius:12px;padding:9px 6px;text-align:center;display:flex;flex-direction:column;gap:3px}
.lo-sum span{font-size:11.5px;color:var(--u-ink-3)}.lo-sum b{font-size:13px}
.lo-total{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.lo-total>div{display:flex;flex-direction:column}.lo-total b{font-size:24px;font-weight:800}
.lo-timer,.lo-exp{font-size:12.5px;padding:6px 10px;border-radius:999px;background:var(--u-err-soft);color:var(--u-err)}
.lo-timer b{font-size:13px}
.lo-track{display:flex;flex-direction:column;gap:0;margin:4px 0 10px}
.lo-track>div{display:flex;gap:10px;align-items:flex-start;position:relative;padding:0 0 14px}
.lo-track>div:not(:last-child)::before{content:"";position:absolute;inset-inline-start:7px;top:16px;bottom:0;width:2px;background:var(--u-line)}
.lo-track i{width:16px;height:16px;flex:0 0 16px;border-radius:50%;border:2px solid var(--u-line);background:var(--u-s1);margin-top:2px;z-index:1}
.lo-track .done i{background:var(--u-ok);border-color:var(--u-ok)}.lo-track .done::before{background:var(--u-ok)!important}
.lo-track .on i{border-color:var(--u-ok);box-shadow:0 0 0 4px var(--u-ok-soft)}
.lo-track span{display:flex;flex-direction:column;font-size:14px;color:var(--u-ink-3)}
.lo-track .done span,.lo-track .on span{color:var(--u-ink)}.lo-track small{font-size:11.5px;color:var(--u-ink-3)}
.lo-trk{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--u-s2);margin-bottom:8px}
.lo-trk b{flex:1}
.lo-list{display:flex;flex-direction:column;gap:8px}
.lo-list .list-row{width:100%;font:inherit;text-align:start;border:1px solid var(--u-line);background:var(--u-s1);color:inherit;cursor:pointer}