/* ===========================================================
   لقطة · Laqta — نظام تصميم (Light · Charcoal + Sunset)
   هوية: عدسة كاميرا داكنة + تدرّج برتقالي→أحمر، أبيض ناصع.
   «مزادات بالفيديو. لحظات تصنع صفقات.»
   =========================================================== */
:root{
  /* أساس فاتح دافئ */
  --bg-0:#f6f4f2; --bg-1:#ffffff; --ivory:#fbf8f4;
  /* «navy» يُعاد توظيفه كفحمي داكن للنصوص والأسطح الداكنة */
  --navy:#1c2030; --navy-2:#2a3042; --navy-soft:#444c63;

  /* تدرّج الغروب — هوية لقطة */
  --brand:#ff7a3d; --brand-2:#f5375a;
  --brand-grad:linear-gradient(135deg,#ff8a3d,#f5375a);
  /* «gold» يُعاد توظيفه كبرتقالي دافئ للزينة والعناوين الفرعية */
  --gold:#ff7a3d; --gold-2:#ffb380; --gold-deep:#e0531f;

  --surface:#ffffff;
  --glass: rgba(255,255,255,0.74);
  --glass-strong: rgba(255,255,255,0.90);
  --glass-border: rgba(28,32,48,0.10);
  --line: rgba(28,32,48,0.10);

  --txt:#1b1f2e; --txt-dim:#5a5f70; --txt-faint:#8b909f;

  /* أسماء متغيّرات الإبراز (محافظة على التوافق) */
  --accent:#f5375a;      /* أحمر مرجاني — الروابط والأسعار والأزرار */
  --accent-2:#ff7a3d;    /* برتقالي */
  --danger:#e23a3a; --ok:#1f9d6b; --warn:#e0531f;

  --radius:20px; --radius-sm:14px;
  --shadow: 0 12px 34px rgba(20,33,66,0.10);
  --shadow-sm: 0 6px 18px rgba(20,33,66,0.08);
  /* عمق زجاجي متعدّد الطبقات + توهّج ذهبي للعناصر المهمّة */
  --shadow-deep: 0 1px 0 rgba(255,255,255,.85) inset, 0 18px 44px rgba(20,33,66,.12), 0 4px 12px rgba(20,33,66,.06);
  --glow-gold: 0 0 0 1px rgba(255,122,61,.32), 0 8px 26px rgba(245,55,90,.26);
  --glow-gold-soft: 0 6px 22px rgba(255,122,61,.20);
  --ease-lux: cubic-bezier(.22,.61,.25,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --tap:44px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* عناوين العرض: Tajawal — خطّ عربي هندسي حديث وموثوق بأوزان عرض قويّة */
  --font-head: 'Tajawal', 'IBM Plex Sans Arabic', var(--font);
  --font-num: 'Rubik', var(--font);            /* أرقام لاتينية (المؤقّت) */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
.hide{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--txt);background:var(--bg-0);line-height:1.75;min-height:100vh;min-height:100dvh;overflow-x:hidden;
  font-weight:400;letter-spacing:0;font-feature-settings:"liga" 1,"calt" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent}
/* تمرير سلس بزخم على iOS لأي منطقة قابلة للتمرير */
.feed,.chat,.scroll-x,.decl{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
a{color:inherit}
img,video{max-width:100%}
::selection{background:rgba(245,55,90,.20)}

/* ---- خلفية فاتحة هادئة مع لمسات الهوية ---- */
.bg-aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(circle at 18% 12%, #ffffff, transparent 40%),
  radial-gradient(circle at 85% 8%, #fdeee4, transparent 42%),
  radial-gradient(circle at 50% 100%, #fbe9ea, transparent 55%),
  linear-gradient(180deg,#fbf6f3,#f6f4f2);}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;animation:float 20s ease-in-out infinite}
.blob.b1{width:440px;height:440px;background:#ff7a3d;top:-90px;right:-60px;opacity:.16}
.blob.b2{width:360px;height:360px;background:#f5375a;bottom:-90px;left:-60px;animation-delay:-7s;opacity:.14}
.blob.b3{width:300px;height:300px;background:#ff9a5b;top:42%;left:55%;opacity:.10;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(36px,-26px) scale(1.06)}66%{transform:translate(-26px,22px) scale(.96)}}
/* ذرّات ذهبية طافية بلطف فوق الخلفية (زينة، بلا تأثير على اللمس) */
.bg-aurora::after{content:"";position:absolute;inset:-10% 0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle,rgba(191,157,87,.55) 0,transparent 60%),
    radial-gradient(circle,rgba(191,157,87,.4) 0,transparent 60%),
    radial-gradient(circle,rgba(224,196,137,.5) 0,transparent 60%),
    radial-gradient(circle,rgba(191,157,87,.35) 0,transparent 60%),
    radial-gradient(circle,rgba(224,196,137,.45) 0,transparent 60%);
  background-size:5px 5px,4px 4px,6px 6px,3px 3px,4px 4px;
  background-position:12% 18%,78% 10%,40% 70%,88% 55%,22% 88%;
  background-repeat:no-repeat;animation:motes 18s ease-in-out infinite}
@keyframes motes{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.grain{position:fixed;inset:0;z-index:-1;opacity:.025;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- زجاج فاتح متعدّد الطبقات بعمق وحافّة مضيئة ---- */
.glass{position:relative;background:var(--glass);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow-deep)}
/* حافّة علوية مضيئة دقيقة تمنح إحساس الزجاج الحقيقي */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 38%);
  -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000)}
.glass>*{position:relative;z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 22px}

/* ---- شريط التنقّل ---- */
nav.topnav{position:sticky;top:calc(14px + var(--safe-t));z-index:50;margin:14px auto 0;max-width:1400px;width:calc(100% - 28px);
  display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-radius:18px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:700;font-size:1.15rem;text-decoration:none;color:var(--navy)}
.brand .seal{width:42px;height:42px;flex-shrink:0;border-radius:0;box-shadow:none;font-size:0;
  background:url('../img/logo-mark.png') center/contain no-repeat;filter:drop-shadow(0 3px 6px rgba(20,33,66,.18))}
.brand .en{display:block;font-family:var(--font);font-weight:600;font-size:.66rem;letter-spacing:1.5px;color:var(--gold-deep);margin-top:-2px}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{color:var(--txt-dim);text-decoration:none;font-size:.95rem;font-weight:600;padding:9px 13px;border-radius:11px;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--navy);background:rgba(22,38,79,.06)}
.nav-toggle{display:none;background:none;border:none;color:var(--navy);font-size:1.5rem;cursor:pointer}

/* ---- الأزرار: ضغط زنبركي + لمعان يمرّ + توهّج ---- */
.btn{position:relative;overflow:hidden;cursor:pointer;border:none;font-family:var(--font);font-weight:700;border-radius:13px;padding:13px 22px;font-size:1rem;min-height:var(--tap);
  transition:transform .24s var(--spring), box-shadow .24s var(--ease-lux), background .2s;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center;-webkit-tap-highlight-color:transparent;
  background:var(--brand-grad);box-shadow:0 8px 22px rgba(245,55,90,.28);will-change:transform}
/* لمعان قطري يمرّ عند المرور/اللمس */
.btn::after{content:"";position:absolute;top:0;bottom:0;width:55%;left:-80%;z-index:1;pointer-events:none;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:none}
.btn:hover::after,.btn:active::after{animation:btn-shine .7s var(--ease-lux)}
@keyframes btn-shine{0%{left:-80%}100%{left:140%}}
.btn>*{position:relative;z-index:2}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(245,55,90,.38)}
.btn:active{transform:translateY(0) scale(.95)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 8px 20px rgba(22,38,79,.22)}
.btn:disabled::after{display:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy);box-shadow:var(--glow-gold)}
.btn.gold:hover{box-shadow:0 0 0 1px rgba(191,157,87,.4),0 14px 32px rgba(191,157,87,.4)}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{background:#f6f8fc;border-color:rgba(22,38,79,.18)}
.btn.sm{padding:9px 15px;font-size:.88rem;border-radius:11px;min-height:38px}
.btn.block{width:100%}
.btn.danger{background:linear-gradient(135deg,#e0625d,#cf4b46);color:#fff}

/* ---- نصوص ---- */
.kicker{color:var(--gold-deep);font-weight:700;letter-spacing:0;font-size:.9rem;margin-bottom:8px;display:block}
.hint{font-size:.8rem;color:var(--txt-dim);text-align:center;margin-top:8px;line-height:1.6}
h1,h2,h3{font-family:var(--font-head);color:var(--navy)}
.page-title{font-family:var(--font-head);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.3rem);margin-bottom:6px;color:var(--navy)}
.muted{color:var(--txt-dim)}
.faint{color:var(--txt-faint)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 42px}
.sec-head h2{font-weight:700;font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:12px}
.sec-head p{color:var(--txt-dim)}

/* ---- شارات ---- */
.verified{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:5px;color:var(--navy);font-size:.82rem;font-weight:700;
  background:rgba(191,157,87,.16);padding:3px 10px;border-radius:7px;border:1px solid rgba(191,157,87,.45);box-shadow:var(--glow-gold-soft)}
/* لمعان ذهبي يمرّ على شارة «بائع موثّق» */
.verified::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  background-size:250% 100%;animation:seal-shimmer 4.5s var(--ease-lux) infinite}
/* شارة توثيق الحساب: درع ذهبي صغير بصح أبيض، يوضع بجانب اسم البائع */
.vseal{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.18em;flex-shrink:0;
  background:url('../img/verified.svg') center/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(173,138,68,.55));animation:seal-glow 3.2s ease-in-out infinite}
.vseal.lg{width:1.25em;height:1.25em}
@keyframes seal-shimmer{0%{background-position:200% 0}60%,100%{background-position:-120% 0}}
@keyframes seal-glow{0%,100%{filter:drop-shadow(0 1px 2px rgba(173,138,68,.45))}50%{filter:drop-shadow(0 1px 4px rgba(191,157,87,.85))}}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--txt-dim)}
.badge.live{background:linear-gradient(135deg,#e0625d,#cf4b46);color:#fff;border:none}
.badge.gold{position:relative;overflow:hidden;color:var(--gold-deep);border-color:rgba(191,157,87,.45);background:rgba(191,157,87,.12);box-shadow:var(--glow-gold-soft)}
.badge.gold::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  background-size:260% 100%;animation:seal-shimmer 5s var(--ease-lux) infinite}
.badge.ok{color:var(--ok);border-color:rgba(31,157,107,.4);background:rgba(31,157,107,.1)}
.badge.warn{color:var(--warn);border-color:rgba(192,138,42,.4);background:rgba(192,138,42,.1)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- نماذج ---- */
.field{margin-bottom:16px;text-align:right}
.field label{display:block;font-size:.9rem;color:var(--txt-dim);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{width:100%;font-family:var(--font);font-size:1rem;color:var(--txt);
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 15px;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-2);background:#fff;box-shadow:0 0 0 4px rgba(36,63,122,.12)}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-faint)}
.checkrow{display:flex;gap:11px;align-items:flex-start;margin:12px 0;font-size:.92rem;color:var(--txt-dim);cursor:pointer}
.checkrow input{width:20px;height:20px;accent-color:var(--navy-2);margin-top:3px;flex-shrink:0}

/* ---- بطاقات ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{padding:26px;transition:transform .32s var(--ease-lux),box-shadow .32s var(--ease-lux),background .3s;background:var(--glass)}
.card.hover{will-change:transform}
.card.hover:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 22px 48px rgba(20,33,66,.16);background:var(--glass-strong)}
.card.hover:active{transform:translateY(-2px) scale(.99)}
.ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(36,63,122,.10),rgba(191,157,87,.16));border:1px solid var(--line);color:var(--navy);transition:transform .4s var(--spring)}
.card.hover:hover .ico{transform:translateY(-3px) scale(1.06) rotate(-3deg)}

/* ---- هيكل عظمي لامع للصور أثناء التحميل ---- */
.skeleton{position:relative;overflow:hidden;background:linear-gradient(135deg,#2a2f3d,#181b26)}
.skeleton::before{content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(110deg,transparent 30%,rgba(191,157,87,.18) 50%,transparent 70%);
  background-size:220% 100%;animation:sk-shimmer 1.5s linear infinite}
@keyframes sk-shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* ---- إطار/لمعان ذهبي للبطاقات الموثّقة ---- */
.lux-verified{box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 16px 40px rgba(20,33,66,.12),0 0 0 1px rgba(191,157,87,.35)}
.lux-verified:hover{box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 22px 50px rgba(20,33,66,.16),0 0 0 1px rgba(191,157,87,.5),0 8px 26px rgba(191,157,87,.22)}

/* ---- تكبير لطيف لصورة الغلاف عند المرور/الضغط ---- */
.acard .cimg,.lcard .lthumb img{transition:transform .5s var(--ease-lux)}
.acard:hover .cimg,.lcard:hover .lthumb img{transform:scale(1.06)}
.acard:active .cimg,.lcard:active .lthumb img{transform:scale(1.02)}
.acard,.lcard{transition:transform .3s var(--ease-lux),box-shadow .3s var(--ease-lux);will-change:transform}

/* ---- مربعات إحصائية ---- */
.stats{display:flex;gap:14px;flex-wrap:wrap}
.stat{padding:18px 22px;text-align:center;min-width:140px;flex:1}
.stat .num{font-family:var(--font-head);font-weight:700;font-size:1.7rem;color:var(--navy)}
.stat .lbl{color:var(--txt-dim);font-size:.86rem}

/* ---- جداول ---- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--line)}
.tbl th{color:var(--txt-faint);font-weight:700;font-size:.84rem}
.tbl tr:hover td{background:rgba(22,38,79,.03)}
.tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;font-size:.82rem;color:var(--txt-dim)}

/* ---- التنبيه ---- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);z-index:80;
  padding:13px 22px;font-weight:700;border-radius:14px;transition:.4s;pointer-events:none;color:var(--navy);
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---- تخطيط الدخول ---- */
.auth-wrap{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:40px 20px}
.auth-card{width:100%;max-width:430px;padding:34px}

/* ---- هيكل التطبيق (شريط جانبي) ---- */
.shell{display:grid;grid-template-columns:250px 1fr;gap:22px;max-width:1400px;margin:22px auto 0;padding:0 22px;align-items:start}
.side{padding:18px;position:sticky;top:90px}
.side a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;text-decoration:none;color:var(--txt-dim);font-weight:600;margin-bottom:4px;transition:.18s}
.side a:hover{background:rgba(22,38,79,.06);color:var(--navy)}
.side a.active{background:linear-gradient(135deg,rgba(36,63,122,.12),rgba(191,157,87,.14));color:var(--navy);border:1px solid var(--line)}
.side .sep{height:1px;background:var(--line);margin:12px 4px}
.side .e{font-size:1.15rem}

/* ---- ظهور تدريجي ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-lux),transform .7s var(--ease-lux)}
.reveal.in{opacity:1;transform:none}

/* ظهور متدرّج للبطاقات (stagger) — يُفعَّل عند إضافة .stagger للحاوية */
.stagger>*{opacity:0;transform:translateY(20px) scale(.985);transition:opacity .6s var(--ease-lux),transform .6s var(--ease-lux)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.04s}
.stagger.in>*:nth-child(2){transition-delay:.10s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.22s}
.stagger.in>*:nth-child(5){transition-delay:.28s}
.stagger.in>*:nth-child(6){transition-delay:.34s}
.stagger.in>*:nth-child(7){transition-delay:.40s}
.stagger.in>*:nth-child(8){transition-delay:.46s}
.stagger.in>*:nth-child(n+9){transition-delay:.5s}

/* ---- متفرقات ---- */
.row{display:flex;gap:14px;flex-wrap:wrap}
.between{justify-content:space-between;align-items:center}
.center{align-items:center}
.mt{margin-top:18px}.mt2{margin-top:30px}.mb{margin-bottom:18px}
.pad{padding:24px}
hr.soft{border:none;border-top:1px solid var(--line);margin:18px 0}
.scroll-x{overflow-x:auto}

/* ---- اهتزاز بصري دقيق عند المزايدة (يضاف عبر JS تجميلياً) ---- */
@keyframes bid-flash{0%{box-shadow:0 0 0 0 rgba(191,157,87,.55)}100%{box-shadow:0 0 0 16px rgba(191,157,87,0)}}
.bid-flash{animation:bid-flash .6s var(--ease-lux)}
@keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}}
.nudge{animation:nudge .32s ease}

/* ---- توهّج ذهبي ناعم حول الأسعار البارزة ---- */
.foot .price,.timer .t,.current .amt,.lcard .lp,.amt2{text-shadow:0 1px 1px rgba(255,255,255,.5)}

/* ---- شرائح الفئات: ضغط زنبركي متّسق ---- */
.chip,.tab,.cat,.cov{transition:transform .28s var(--spring),background .2s,color .2s,box-shadow .2s,border-color .2s}
.chip:active,.tab:active{transform:scale(.93)}
.chip.on,.tab.on{box-shadow:0 6px 16px rgba(22,38,79,.26)}

/* ---- تلميع شريط التنقّل العلوي عند التمرير ---- */
nav.topnav{transition:box-shadow .3s var(--ease-lux),background .3s}
nav.topnav.scrolled{box-shadow:0 10px 30px rgba(20,33,66,.16);background:rgba(255,255,255,.92)}

/* ---- انتقال دخول الصفحة (تلاشٍ + رفع لطيف) ---- */
@keyframes page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.page-enter{animation:page-in .55s var(--ease-lux) both}

@media (max-width:920px){ .shell{grid-template-columns:1fr;gap:16px;margin-top:16px} .side{position:static} }

/* ===== تابلت/آيباد: إيقاع أهدأ ومسافات معتدلة ===== */
@media (max-width:1024px){
  :root{--radius:18px;--radius-sm:13px}
  .wrap,.wrap-wide{padding:0 20px}
}

/* ===== جوال: مقياس طباعة ومسافات مضغوط أنيق ===== */
@media (max-width:820px){
  :root{--radius:16px;--radius-sm:12px;
    --shadow:0 8px 24px rgba(20,33,66,.09);--shadow-sm:0 4px 14px rgba(20,33,66,.07)}
  body{line-height:1.7}
  .wrap,.wrap-wide{padding:0 15px}

  /* تنقّل */
  .nav-links{display:none}
  .nav-toggle{display:block}
  .topnav{padding:10px 14px;margin-top:calc(12px + var(--safe-t))}
  .brand{font-size:1.05rem;gap:9px}
  .brand .seal{width:36px;height:36px}
  .nav-links.open{display:flex;position:absolute;top:62px;right:10px;left:10px;flex-direction:column;gap:6px;
    padding:12px;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open a{padding:12px 14px;min-height:46px;display:flex;align-items:center}
  .nav-links.open .btn{width:100%}

  /* طباعة */
  .page-title{font-size:clamp(1.4rem,6vw,1.85rem);line-height:1.3}
  .sec-head{margin-bottom:28px}
  .sec-head h2{font-size:clamp(1.45rem,6.5vw,1.95rem);margin-bottom:8px}
  .kicker{font-size:.82rem;margin-bottom:6px}

  /* بطاقات/حشوات أصغر واتساق */
  .grid{grid-template-columns:1fr;gap:12px}
  .card{padding:18px}
  .ico{width:46px;height:46px;font-size:1.3rem;margin-bottom:12px;border-radius:13px}
  .pad{padding:16px}
  .glass{border-radius:var(--radius)}

  /* إحصائيات: صفّان مرتّبان */
  .stats{gap:10px}
  .stat{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px);padding:14px 12px}
  .stat .num{font-size:1.35rem}
  .stat .lbl{font-size:.78rem}

  /* أزرار أكثر إحكاماً مع هدف لمس آمن */
  .btn{padding:12px 18px;font-size:.96rem;border-radius:12px}
  .btn.sm{padding:9px 14px;font-size:.85rem;min-height:40px}

  /* نماذج */
  .field{margin-bottom:13px}
  .field label{font-size:.85rem;margin-bottom:6px}
  .field input,.field select,.field textarea{padding:12px 14px;font-size:1rem;border-radius:12px}

  /* جداول: حشو أقل وخطّ أنسب */
  .tbl{font-size:.86rem}
  .tbl th,.tbl td{padding:10px 11px}
  .tbl th{font-size:.78rem}

  /* شارات أدقّ */
  .badge,.verified{font-size:.74rem;padding:3px 9px}

  .toast{left:12px;right:12px;transform:translateY(140px);bottom:calc(16px + var(--safe-b));text-align:center;padding:12px 18px;font-size:.95rem}
  .toast.show{transform:translateY(0)}

  /* تخطيط الدخول */
  .auth-wrap{min-height:calc(100dvh - 70px);padding:24px 16px}
  .auth-card{padding:24px}
}
@media (max-width:430px){
  .stat{min-width:100%;flex-basis:100%}
  .row.between{gap:10px}
}
/* احترام المنطقة الآمنة السفلية للنوتش في كل الصفحات */
@supports(padding:max(0px)){
  body{padding-bottom:max(0px,var(--safe-b))}
}
/* ===== شريط التبويب السفلي (موبايل/آيباد) ===== */
.tabbar{display:none}
@media (max-width:900px){
  .tabbar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(8px + var(--safe-b));z-index:60;
    justify-content:space-around;align-items:flex-end;padding:9px 8px;border-radius:20px;
    background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border:1px solid var(--glass-border);box-shadow:0 -2px 24px rgba(20,33,66,.12)}
  .tabbar a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--txt-faint);font-size:.7rem;font-weight:600;padding:4px 0;transition:color .2s var(--ease-lux);-webkit-tap-highlight-color:transparent}
  .tabbar a .ti{font-size:1.25rem;line-height:1;transition:transform .35s var(--spring)}
  .tabbar a:active .ti{transform:scale(.86)}
  .tabbar a.active{color:var(--navy)}
  .tabbar a.active .ti{transform:translateY(-1px) scale(1.08)}
  /* مؤشّر نشط متوهّج ذهبي أعلى التبويب */
  .tabbar a.active::before{content:"";position:absolute;top:-1px;width:22px;height:3px;border-radius:3px;
    background:var(--brand-grad);box-shadow:0 0 10px rgba(245,55,90,.7);animation:tab-pop .35s var(--spring)}
  @keyframes tab-pop{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
  .tabbar a.fab{flex:0 0 auto;margin-top:-26px}
  .tabbar a.fab .ti{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.4rem;
    background:var(--brand-grad);box-shadow:0 8px 20px rgba(245,55,90,.4);border:3px solid #fff}
  .tabbar a.fab.live .ti{background:linear-gradient(135deg,#e0625d,#cf4b46);box-shadow:0 8px 22px rgba(207,75,70,.5);animation:fab-pulse 2.2s ease-in-out infinite}
  .tabbar a.fab.live:active .ti{transform:scale(.92)}
  @keyframes fab-pulse{0%,100%{box-shadow:0 8px 22px rgba(207,75,70,.5)}50%{box-shadow:0 8px 30px rgba(207,75,70,.85),0 0 0 6px rgba(207,75,70,.12)}}
  body.has-tabbar{padding-bottom:calc(86px + var(--safe-b))}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.08s !important}
  html{scroll-behavior:auto}
  /* أوقف الزينة الطافية واللمعان المتكرّر تماماً */
  .blob,.bg-aurora::after,.verified::after,.badge.gold::after,.vseal,.btn::after,.skeleton::before{animation:none !important}
  .bg-aurora::after{opacity:.35}
  /* اضمن ظهور عناصر التدرّج فوراً دون قفزات */
  .stagger>*{opacity:1 !important;transform:none !important;transition-delay:0s !important}
  .reveal{opacity:1 !important;transform:none !important}
  body.page-enter{animation:none !important}
}

/* ===========================================================
   طبقة تنقية بنمط Apple — بساطة، هدوء، اتساق، أحجام منتظمة
   (تأتي أخيراً فتُهذّب الزخارف الغامرة نحو نظافة احترافية)
   =========================================================== */
:root{
  --radius:16px; --radius-sm:12px;
  --shadow:0 6px 20px rgba(20,33,66,.07);
  --shadow-sm:0 3px 10px rgba(20,33,66,.06);
  --shadow-deep:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px rgba(20,33,66,.07);
  --glow-gold:0 0 0 1px rgba(255,122,61,.24), 0 4px 14px rgba(245,55,90,.14);
  --glow-gold-soft:0 3px 12px rgba(255,122,61,.12);
}
/* خلفية أهدأ: أوقف الذرّات الذهبية وخفّف الوهج */
.bg-aurora::after{display:none !important}
.blob{opacity:.08 !important;filter:blur(90px)}
.grain{opacity:.015}
/* زجاج أنظف بحافّة وظلّ ناعمين */
.glass{border-color:rgba(22,38,79,.08);box-shadow:var(--shadow)}
.glass::before{opacity:.5}
.card.hover:hover,.acard:hover,.lcard:hover{box-shadow:0 12px 30px rgba(20,33,66,.10)}
/* أزرار: هدوء Apple — لمعان عند اللمس فقط، حركة خفيفة */
.btn{font-weight:700;letter-spacing:0}
.btn:hover{transform:translateY(-1px)}
.btn:hover::after{animation:none}
.btn:active::after{animation:btn-shine .6s var(--ease-lux)}
/* عنوان الهيرو: ثابت وهادئ بلا تموّج لوني مستمرّ */
h1.hero-h .grad{animation:none !important}
/* شارات وأسعار: توهّج خفيف جداً */
.badge.gold,.verified{box-shadow:none}

/* ===========================================================
   مقياس طباعة موحّد للعناوين (Tajawal) — تباعد سطور ومسافات
   حروف مضبوطة للعربية كي تبدو العناوين مقصودة لا مضخّمة
   =========================================================== */
h1,h2,h3{letter-spacing:-.01em}
.sec-head h2{font-weight:800;line-height:1.25}
.sec-head p{font-size:1.02rem;line-height:1.7}
.kicker{font-weight:700;letter-spacing:.02em;text-transform:none}
.page-title{font-weight:800;letter-spacing:-.01em}

/* ===== إيقاع موبايل منتظم (نمط Apple) ===== */
@media (max-width:820px){
  :root{ --radius:16px; --tap:46px; }
  .wrap,.wrap-wide{padding:0 16px}
  body{font-size:16px;line-height:1.7}
  /* مقياس عناوين منضبط */
  .page-title{font-size:1.45rem;line-height:1.3}
  .sec-head h2,.sec-row h2{font-size:1.3rem}
  .sec-head{margin-bottom:26px}
  /* بطاقات/حشوات موحّدة */
  .glass{border-radius:16px}
  .card,.pad{padding:18px}
  .btn{padding:13px 20px;font-size:.98rem;border-radius:13px}
  .btn.sm{padding:9px 14px;font-size:.86rem;border-radius:11px}
  /* شبكة إحصاءات متناسقة (صفّان مرتّبان) */
  .stats{gap:10px}
  .stat{padding:16px 14px;min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .stat .num{font-size:1.5rem}
  .stat .lbl{font-size:.8rem}
  /* مسافات أقسام متّسقة */
  section{padding:30px 0}
  /* حقول إدخال مريحة للّمس */
  .field input,.field select,.field textarea{padding:14px 15px;border-radius:13px;font-size:16px}
}
@media (max-width:380px){
  .page-title{font-size:1.32rem}
  .stat .num{font-size:1.35rem}
}