:root {
  /* MAB primary palette (50 → 950) */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;

  --primary: #2563eb;        /* primary-600 */
  --primary-dark: #1d4ed8;   /* primary-700 */
  --primary-darker: #1e3a8a; /* primary-900 */

  --bg: #f8fafc;             /* slate-50 */
  --card: #ffffff;
  --text: #111827;           /* gray-900 */
  --muted: #6b7280;          /* gray-500 */
  --border: #e5e7eb;         /* gray-200 */
  --border-soft: #f1f5f9;    /* gray-100 */

  --success: #059669;        /* emerald-600 */
  --danger: #ef4444;         /* red-500 */
  --warning: #d97706;        /* amber-600 */

  --radius: 0.75rem;         /* xl */
  --radius-lg: 0.5rem;       /* lg */
  --radius-2xl: 1rem;        /* 2xl */
  /* Tailwind-equivalent shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow: var(--shadow-sm);
  --header-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: 'Cairo', "Segoe UI", Tahoma, system-ui, sans-serif;
  color: var(--text); line-height: 1.6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Custom scrollbar (MAB) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

/* ===== Login ===== */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.auth-card {
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  width: 100%; max-width: 420px; border-radius: 22px; padding: 36px 32px;
  box-shadow: 0 24px 70px rgba(15, 68, 112, .22); border: 1px solid #fff; animation: pop .3s ease;
}
@keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.auth-logo { height: 54px; width: auto; display: block; margin: 0 auto 18px; }
.auth-card h1 { font-size: 23px; color: var(--primary-darker); }
.auth-card .sub { color: var(--muted); margin-bottom: 24px; font-size: 14px; }

/* ===== Login — تصميم زجاجي مستقبلي (MAB × Qiddiya) ===== */
#auth.auth-wrap { display: flex; flex-direction: column; padding: 0; position: relative; overflow: hidden; }
/* خلفية المنظر مع حركة كين-بيرنز الناعمة */
#auth::before { content: ''; position: absolute; inset: -4%; z-index: 0;
  background: #0a1622 url('/assets/login-bg.png') center/cover no-repeat;
  animation: kenburns 34s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.16) translate(-2%, -1.6%); } }

/* طبقة المؤثرات المتحركة (سيارات + جزيئات) */
.auth-fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fx-dot { position: absolute; bottom: -12px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(160,235,255,.95), rgba(160,235,255,0)); opacity: 0;
  animation: rise var(--rd, 16s) linear infinite; will-change: transform, opacity; }
@keyframes rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .9; }
  88% { opacity: .7; } 100% { transform: translateY(-104vh) translateX(26px); opacity: 0; } }

/* سيارات تحمل شعار MAB تمرّ في الأسفل */
.fx-car { position: absolute; left: 0; width: 108px; height: 42px; transform: translateX(-160px);
  animation: drive var(--d, 22s) linear infinite; will-change: transform; }
.fx-car .body { position: absolute; bottom: 7px; left: 0; width: 100%; height: 24px; border-radius: 7px 13px 5px 5px;
  background: linear-gradient(180deg, #2f74b6, #1c4f86); box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28); }
.fx-car .cab { position: absolute; bottom: 19px; right: 16px; width: 44px; height: 15px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #5aa6e0, #2f6aa6); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.fx-car .badge { position: absolute; top: 4px; left: 11px; background: #fff; border-radius: 3px; padding: 2px 3px; line-height: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.fx-car .badge img { height: 11px; width: auto; display: block; }
.fx-car .w { position: absolute; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: #15181c; border: 3px solid #aab3bd; }
.fx-car .w1 { left: 16px; } .fx-car .w2 { right: 20px; }
.fx-car.c1 { bottom: 7%;  --d: 21s; animation-delay: -1s;  transform: scale(1); }
.fx-car.c2 { bottom: 3%;  --d: 29s; animation-delay: -11s; opacity: .92; }
.fx-car.c3 { bottom: 12%; --d: 36s; animation-delay: -19s; transform: scale(.82); opacity: .8; }
@keyframes drive { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 160px)); } }
@media (prefers-reduced-motion: reduce) { #auth::before, .fx-dot, .fx-car { animation: none; } .auth-fx { display: none; } }

.auth-topbar { position: relative; z-index: 2; direction: ltr; display: flex; align-items: center; justify-content: center; gap: 18px;
  width: 100%; padding: 13px 20px; background: linear-gradient(180deg, rgba(8,18,28,.72), rgba(8,18,28,.22));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(120,220,255,.28); box-shadow: 0 2px 22px rgba(0,0,0,.4); }
.auth-topbar img { height: 40px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.auth-topbar-div { width: 1px; height: 30px; background: linear-gradient(180deg, transparent, rgba(150,230,255,.75), transparent); }
.auth-topbar-q { font-size: 26px; font-weight: 700; letter-spacing: .5px; color: #dbeefc; text-shadow: 0 2px 12px rgba(40,120,180,.55); }
/* شعار Qiddiya (SVG شفّاف بلون أزرق مثل MAB) */
.auth-topbar img.auth-topbar-q-img { height: 96px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
/* لا تلتقط النقر إلا البطاقة — حتى تصل النقرات للعناصر التفاعلية في الخلفية */
.auth-main { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; width: 100%; padding: 24px 16px; pointer-events: none; }
#auth .auth-card.glass { pointer-events: auto; }
.auth-foot { text-align: center; color: rgba(228,242,255,.9); font-size: 13px; padding: 14px;
  text-shadow: 0 1px 8px rgba(0,0,0,.7); }

/* ===== Login — بوابة تفاعلية (إضاءة/غبار/درون/رافعة/مركبة) ===== */
.fx-ambient { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 42% at 78% 16%, rgba(255,214,150,.22), transparent 70%),
              radial-gradient(55% 45% at 18% 32%, rgba(90,180,240,.15), transparent 72%);
  animation: ambient 9s ease-in-out infinite alternate; }
@keyframes ambient { from { opacity: .68; } to { opacity: 1; } }
.fx-dust { position: absolute; top: 0; left: -20%; width: 140%; height: 100%; pointer-events: none;
  background-image: radial-gradient(rgba(231,214,180,.5) 1px, transparent 1.7px); background-size: 120px 120px; will-change: transform; }
.fx-dust.d-a { opacity: .32; animation: dust 60s linear infinite; }
.fx-dust.d-b { opacity: .2; background-size: 210px 210px; animation: dust 95s linear infinite reverse; }
@keyframes dust { from { transform: translate3d(0,0,0); } to { transform: translate3d(13%, -6%, 0); } }

/* درون */
.fx-drone { position: absolute; top: 23%; left: 0; width: 96px; z-index: 1; cursor: pointer; pointer-events: auto;
  animation: drone-fly 26s linear infinite; will-change: transform; }
.drone-inner { position: relative; animation: drone-bob 3.2s ease-in-out infinite;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s; }
.fx-drone svg { display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.rotor { transform-box: fill-box; transform-origin: center; animation: spin .25s linear infinite; }
.rotor.r2 { animation-duration: .2s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drone-fly { from { transform: translateX(-130px); } to { transform: translateX(calc(100vw + 130px)); } }
@keyframes drone-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.drone-beam { position: absolute; left: 50%; top: 36px; width: 46px; height: 120px; margin-left: -23px;
  background: linear-gradient(180deg, rgba(120,230,255,.5), rgba(120,230,255,0));
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); opacity: 0; transform-origin: top center; pointer-events: none; }
.drone-ring { position: absolute; left: 50%; top: 120px; width: 60px; height: 18px; margin-left: -30px;
  border: 2px solid rgba(130,235,255,.85); border-radius: 50%; opacity: 0; pointer-events: none; }
.fx-drone.active { z-index: 3; }
.fx-drone.active .drone-inner { animation: none; transform: scale(1.7); filter: drop-shadow(0 0 14px rgba(120,230,255,.95)); }
.fx-drone.active .drone-beam { animation: beam 1.1s ease-in-out 2; }
.fx-drone.active .drone-ring { animation: scanring 1.1s ease-out 2; }
@keyframes beam { 0% { opacity: 0; transform: scaleY(.3); } 30% { opacity: .85; } 100% { opacity: 0; transform: scaleY(1.1); } }
@keyframes scanring { 0% { opacity: .9; transform: translateY(0) scale(.4); } 100% { opacity: 0; transform: translateY(42px) scale(1.3); } }

/* رافعة */
.fx-crane { position: absolute; bottom: 13%; left: 5%; width: 170px; z-index: 1; cursor: pointer; pointer-events: auto;
  transform-origin: bottom center; animation: crane-sway 7s ease-in-out infinite; }
.fx-crane svg { display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
@keyframes crane-sway { 0%,100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
.crane-hook { transform-box: view-box; transform-origin: 140px 42px; animation: hook-sway 4s ease-in-out infinite; }
@keyframes hook-sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.crane-light { position: absolute; top: 12px; left: 49%; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: #ff5a5a; box-shadow: 0 0 8px 3px rgba(255,70,70,.85); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: .15; } }
.fx-crane.ping { animation: crane-sway 7s ease-in-out infinite, craneping .7s ease; }
@keyframes craneping { 0% { filter: drop-shadow(0 0 0 rgba(255,200,120,0)); } 45% { filter: drop-shadow(0 0 14px rgba(255,205,130,.95)); } 100% { filter: none; } }

/* مركبة خدمة MAB */
.fx-vehicle { pointer-events: auto; cursor: pointer; z-index: 1; }
.fx-vehicle .body { background: linear-gradient(180deg, #f0a52e, #cf7c12) !important; }
.fx-vehicle .cab { background: linear-gradient(180deg, #ffd27a, #e0902a) !important; }
.fx-vehicle .beacon { position: absolute; top: -6px; right: 18px; width: 7px; height: 7px; border-radius: 50%;
  background: #ffe27a; box-shadow: 0 0 8px 3px rgba(255,180,40,.9); animation: blink .7s steps(1) infinite; }
/* إضاءة خفيفة عند المرور (بدون تغيير السرعة حتى لا تقفز المركبة) */
.fx-vehicle:hover .body { filter: brightness(1.18) drop-shadow(0 0 8px rgba(255,200,90,.55)); }
.fx-vehicle.stopped { animation-play-state: paused; }

/* شعار MAB — لمعة دورية + نبضة عند النقر */
.auth-logo-wrap { position: relative; display: inline-flex; align-items: center; overflow: hidden; border-radius: 7px; padding: 2px; cursor: pointer; }
.logo-sweep { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
  transform: translateX(-130%); animation: sweep 10s ease-in-out infinite; }
@keyframes sweep { 0%,82% { transform: translateX(-130%); } 90% { transform: translateX(130%); } 100% { transform: translateX(130%); } }
.auth-logo-wrap.pulse { animation: logopulse .95s ease; }
@keyframes logopulse { 0% { box-shadow: 0 0 0 0 rgba(120,225,255,0); } 30% { box-shadow: 0 0 18px 4px rgba(120,225,255,.85); } 100% { box-shadow: 0 0 0 0 rgba(120,225,255,0); } }

/* بطاقة الدخول — توهّج/زوايا/خط مسح/انعكاس هولوغرافي/إمالة */
#auth .auth-card.glass { overflow: hidden; transform-style: preserve-3d; transition: transform .25s ease;
  animation: pop .35s ease, cardglow 5s ease-in-out .35s infinite; }
@keyframes cardglow {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(120,220,255,.12), inset 0 0 22px rgba(60,170,230,.12), 0 0 22px rgba(60,180,240,.22), 0 24px 60px rgba(0,0,0,.55); }
  50% { box-shadow: inset 0 0 0 1px rgba(120,220,255,.22), inset 0 0 26px rgba(60,170,230,.2), 0 0 42px rgba(70,195,255,.5), 0 24px 60px rgba(0,0,0,.55); } }
#auth .corner { z-index: 2; animation: cornerpulse 2.8s ease-in-out infinite; }
#auth .corner.tr { animation-delay: .4s; } #auth .corner.bl { animation-delay: .8s; } #auth .corner.br { animation-delay: 1.2s; }
@keyframes cornerpulse { 0%,100% { opacity: .55; filter: drop-shadow(0 0 2px rgba(90,200,255,.5)); } 50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(120,230,255,.95)); } }
.card-holo { position: absolute; inset: -30% -10%; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(180,240,255,.1) 45%, rgba(255,255,255,.18) 50%, rgba(180,240,255,.1) 55%, transparent 70%);
  transform: translateX(-45%); animation: holo 8s ease-in-out infinite; }
@keyframes holo { 0%,100% { transform: translateX(-45%); } 50% { transform: translateX(45%); } }
.card-scan { position: absolute; left: 0; right: 0; top: -4%; height: 2px; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(120,230,255,.85), transparent); box-shadow: 0 0 12px rgba(120,230,255,.7);
  animation: cardscan 5.5s ease-in-out infinite; }
@keyframes cardscan { 0% { top: -4%; opacity: 0; } 12% { opacity: .9; } 50% { top: 104%; opacity: .6; } 60% { opacity: 0; } 100% { top: 104%; opacity: 0; } }
#auth .auth-card h1, #auth .auth-card form, #auth .auth-card .sub { position: relative; z-index: 1; }

/* رسالة HUD */
.fx-hud { position: absolute; z-index: 5; transform: translate(-50%, -50%) scale(.9); pointer-events: none;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; color: #eafcff;
  background: rgba(8,22,34,.82); border: 1px solid rgba(120,225,255,.7);
  box-shadow: 0 0 18px rgba(70,190,255,.5), inset 0 0 10px rgba(70,190,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s, transform .25s; }
.fx-hud::before { content: '▣ '; color: #7fe3ff; }
.fx-hud.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* تسلسل الإقلاع */
#auth.booting .auth-topbar, #auth.booting .auth-main { opacity: 0; }
#auth.ready .auth-topbar { animation: fadeDown .5s ease both; }
#auth.ready .auth-main { animation: fadeUp .6s ease .1s both; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fx-boot { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #0b2036, #06101c 82%); }
.fx-boot.out { animation: bootout .5s ease forwards; }
@keyframes bootout { to { opacity: 0; visibility: hidden; } }
.boot-box { width: min(90%, 380px); color: #bfe9ff; font-family: ui-monospace, Menlo, Consolas, monospace; }
.boot-title { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 1px; color: #eafaff; text-shadow: 0 0 18px rgba(90,200,255,.6); margin-bottom: 18px; }
.boot-title span { color: #7fe3ff; }
.boot-lines { list-style: none; padding: 0; margin: 0 0 16px; font-size: 13.5px; line-height: 1.95; }
.boot-lines li { opacity: 0; transform: translateX(-8px); white-space: nowrap; }
.boot-lines li::before { content: '> '; color: #5fc6ef; }
.boot-lines li.ok { color: #46e0a0; font-weight: 700; }
.boot-lines li.ok::before { content: '✓ '; color: #46e0a0; }
.boot-lines li:nth-child(1) { animation: bootline .4s ease forwards .1s; }
.boot-lines li:nth-child(2) { animation: bootline .4s ease forwards .55s; }
.boot-lines li:nth-child(3) { animation: bootline .4s ease forwards 1s; }
.boot-lines li:nth-child(4) { animation: bootline .4s ease forwards 1.5s; }
@keyframes bootline { to { opacity: 1; transform: translateX(0); } }
.boot-bar { height: 4px; border-radius: 3px; background: rgba(120,200,235,.18); overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #3aa0e0, #7fe3ff); box-shadow: 0 0 10px rgba(120,225,255,.8); animation: bootbar 1.9s ease forwards .1s; }
@keyframes bootbar { to { width: 100%; } }

/* ومضة نور عند اقتراب الدرون */
.fx-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(150,230,255,.6), rgba(150,230,255,0) 60%);
  animation: fxflash .95s ease forwards; }
@keyframes fxflash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* بطاقة الترحيب عند النقر على مركبة الخدمة */
.fx-welcome { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px;
  background: rgba(4,12,20,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.fx-welcome.show { opacity: 1; visibility: visible; pointer-events: auto; }
.fxw-card { position: relative; width: min(92%, 430px); max-height: 86vh; overflow-y: auto; border-radius: 16px; padding: 28px 24px 24px; text-align: center;
  background: rgba(12,28,42,.92); border: 1px solid rgba(120,220,255,.55); color: #eaf6ff;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 32px rgba(70,190,255,.35), 0 24px 60px rgba(0,0,0,.6);
  transform: translateY(16px) scale(.95); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.fx-welcome.show .fxw-card { transform: none; }
.fxw-close { position: absolute; top: 10px; left: 12px; background: transparent; border: 0; color: #9fd6ef; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; }
.fxw-close:hover { color: #eafcff; }
.fxw-icon { font-size: 42px; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.fxw-card h3 { font-size: 20px; color: #f2fbff; margin-bottom: 4px; text-shadow: 0 2px 12px rgba(40,140,200,.45); }
.fxw-sub { color: #ffd27a; font-weight: 700; font-size: 13px; margin-bottom: 18px; }
.fxw-list { list-style: none; padding: 0; margin: 0 0 16px; text-align: right; display: grid; gap: 10px; }
.fxw-list li { background: rgba(6,18,28,.5); border: 1px solid rgba(120,200,235,.25); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; line-height: 1.6; }
.fxw-num { counter-reset: step; }
.fxw-num li { counter-increment: step; }
.fxw-num li::before { content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px;
  border-radius: 50%; background: rgba(120,225,255,.18); border: 1px solid rgba(120,225,255,.6); color: #7fe3ff; font-weight: 800; font-size: 12px; vertical-align: middle; }
.fxw-text { text-align: right; font-size: 13.5px; line-height: 1.85; color: #d4e8f4; margin-bottom: 12px; }
.fxw-text b { color: #eafcff; }
.fxw-foot { color: #9fd6ef; font-size: 12.5px; letter-spacing: .3px; }

@media (prefers-reduced-motion: reduce) { .auth-fx { display: none; } #auth .auth-card.glass { animation: pop .35s ease; } .card-scan, .card-holo, #auth .corner { animation: none; } }

#auth .auth-card.glass { position: relative; width: 100%; max-width: 380px; border-radius: 16px; padding: 26px;
  background: rgba(12, 28, 42, .52);
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(120, 220, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(120,220,255,.12), inset 0 0 22px rgba(60,170,230,.12),
              0 0 28px rgba(60,180,240,.28), 0 24px 60px rgba(0,0,0,.55);
  color: #eaf6ff; animation: pop .35s ease; }
#auth .corner { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(140,230,255,.9);
  filter: drop-shadow(0 0 4px rgba(90,200,255,.7)); pointer-events: none; }
#auth .corner.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
#auth .corner.tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
#auth .corner.bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
#auth .corner.br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
#auth .auth-card h1 { font-size: 24px; color: #f2fbff; text-align: center; margin-bottom: 22px; text-shadow: 0 2px 12px rgba(40,140,200,.45); }
#auth .auth-card .sub { color: #9fd6ef; text-align: center; margin-bottom: 22px; font-size: 13px; letter-spacing: .3px; }
#auth .field label { color: #bfe2f3; font-size: 12.5px; font-weight: 600; }
#auth .input-icon { position: relative; direction: ltr; }
#auth .input-icon .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #84c9e8; display: flex; pointer-events: none; }
#auth .input-icon input { width: 100%; padding: 12px 14px 12px 38px; border-radius: 10px;
  background: rgba(6, 18, 28, .55); border: 1px solid rgba(120,200,235,.32); color: #eaf6ff; font-size: 15px; transition: border .2s, box-shadow .2s; }
#auth .input-icon input::placeholder { color: rgba(190,220,235,.45); }
#auth .input-icon input:focus { outline: none; border-color: rgba(120,225,255,.85); box-shadow: 0 0 0 2px rgba(90,200,255,.25), 0 0 14px rgba(80,200,255,.35); }
#auth .input-icon .pw-eye { position: absolute; right: 8px; left: auto; top: 50%; transform: translateY(-50%); color: #84c9e8; font-size: 16px; }
#auth .btn.neon { margin-top: 6px; width: 100%; padding: 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(40,140,190,.35), rgba(20,90,140,.35));
  border: 1px solid rgba(120,225,255,.8); color: #eaffff; font-weight: 700; letter-spacing: .5px;
  box-shadow: inset 0 0 12px rgba(90,210,255,.25), 0 0 16px rgba(70,190,255,.4); transition: .2s; position: relative; }
#auth .btn.neon:hover { background: linear-gradient(180deg, rgba(60,170,220,.55), rgba(30,110,160,.55));
  box-shadow: inset 0 0 16px rgba(120,225,255,.4), 0 0 24px rgba(90,210,255,.6); transform: translateY(-1px); }
#auth .btn.neon::before, #auth .btn.neon::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 7px; height: 58%; border: 2px solid rgba(140,230,255,.7); }
#auth .btn.neon::before { left: 9px; border-right: 0; }
#auth .btn.neon::after { right: 9px; border-left: 0; }
@media (max-width: 560px) { .auth-topbar-q { font-size: 21px; } .auth-topbar img { height: 32px; } #auth .auth-card.glass { max-width: 340px; } }
.creds { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.9;
  background: #f3f8fd; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--border); }
.tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.tabs button { flex: 1; padding: 11px; border: 1px solid var(--border); background: #f3f8fd;
  border-radius: 10px; color: var(--muted); font-weight: 700; transition: .15s; }
.tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 12px rgba(27,117,188,.3); }

/* ===== Forms ===== */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #2a4256; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: var(--radius-lg);
  font-size: 15px; font-family: inherit; background: #fff; color: var(--text); transition: border .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 2px rgba(59,130,246,.5);
}
.field input[readonly] { background: #eef4fb; color: var(--muted); cursor: not-allowed; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.field .ok { color: var(--success); font-weight: 600; }
.field .err { color: var(--danger); font-weight: 600; }
textarea { resize: vertical; min-height: 90px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-left: 44px; }
.pw-eye { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); background: transparent;
  border: 0; font-size: 18px; padding: 4px 6px; cursor: pointer; line-height: 1; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
input[type=file] { padding: 9px; background: #f8fbfe; cursor: pointer; }

.btn { background: var(--primary-600); color: #fff; padding: 10px 18px; border-radius: var(--radius-lg);
  font-size: 15px; font-weight: 600; box-shadow: var(--shadow-md);
  transition: background .15s, transform .12s, box-shadow .15s; }
.btn:hover { background: var(--primary-700); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.5); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.block { width: 100%; }
.btn.ghost { background: #f1f5f9; color: var(--text); box-shadow: none; } .btn.ghost:hover { background: #e2e8f0; box-shadow: none; }
.btn.success { background: var(--success); } .btn.success:hover { background: #047857; }
.btn.danger { background: var(--danger); } .btn.danger:hover { background: #dc2626; }
.btn.warning { background: var(--warning); } .btn.warning:hover { background: #b45309; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: var(--radius-lg); box-shadow: none; }
.btn.sm:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ===== App layout ===== */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; min-height: 100dvh; align-items: start; }
.sidebar { background: linear-gradient(180deg, var(--primary-900), var(--primary-950));
  color: #e7eff8; padding: 20px 16px; display: flex; flex-direction: column;
  position: sticky; top: 52px; height: calc(100dvh - 104px); margin: 52px 16px 52px 0;
  border-radius: 22px; box-shadow: var(--shadow-lg); z-index: 40; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.brand-logo { height: 46px; width: auto; max-width: 170px; background: #fff; padding: 8px 14px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 20px; font-weight: 800; color: #fff; }
.brand small { font-size: 11px; color: #b9d3ec; }
.nav { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.nav a { color: #cfe0f1; padding: 11px 14px; border-radius: 11px; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 10px; transition: background .15s; }
.nav a:hover { background: rgba(255,255,255,.1); }
.nav a.active { background: var(--primary-600); color: #fff; box-shadow: var(--shadow-md); }
.sidebar .user { border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; font-size: 13px; }
.sidebar .user .name { color: #fff; font-weight: 700; }
.sidebar .user .role { color: #9fc0e0; }

.main { padding: 0 28px; overflow-x: hidden; min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; }
/* الترويسة والمحتوى في عمود واحد متمركز وملتصق */
.topbar, #banner, #content { max-width: 1180px; margin-inline: auto; width: 100%; }
#banner { margin-top: 14px; }
#content { margin-top: 18px; flex: 1 0 auto; }
/* توسيط نموذج تقديم طلب جديد */
#req-form { margin-inline: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  position: sticky; top: 0; background: transparent; padding: 30px 0 6px; margin-bottom: 0; z-index: 30; }
.topbar h2 { color: var(--primary-900); }
.topbar-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h2 { font-size: 21px; }
.page-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.topbar .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hamburger { display: none; background: #fff; border: 1px solid var(--border); width: 42px; height: 42px;
  border-radius: 10px; font-size: 20px; color: var(--primary); }
.backdrop { display: none; position: fixed; inset: 0; background: rgba(15,34,54,.45); z-index: 35; }

/* ===== Header toolbar tools (font size) ===== */
.fontsize { display: flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px 6px; height: 44px; }
.fontsize button { background: transparent; color: var(--text); font-weight: 800; font-size: 14px;
  width: 30px; height: 32px; border-radius: 8px; }
.fontsize button:hover { background: var(--border-soft); }
.fontsize #fs-label { font-size: 12px; color: var(--muted); min-width: 38px; text-align: center; }

/* ===== Status tabs (filter) ===== */
.tabs-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { background: var(--border-soft); color: var(--muted); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 10px; font-weight: 700; font-size: 13px; transition: .15s; }
.tab:hover { background: var(--border); }
.tab.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-md); }

/* ===== Footer ===== */
.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 18px 0;
  margin-top: 24px; border-top: 1px solid var(--border-soft); width: 100%; }

/* ===== Cards / KPI ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.kpi .v { font-size: 32px; font-weight: 800; color: var(--text); line-height: 1; }
.kpi .l { color: var(--muted); font-size: 13px; }
.card { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft); margin-bottom: 20px; }
.card h3 { margin-bottom: 16px; font-size: 17px; }

/* ===== Table (responsive) ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: right; padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--muted); font-weight: 700; font-size: 12px; background: #f3f8fd; white-space: nowrap; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f3f8fd; cursor: pointer; }

/* ===== Badges ===== */
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.s-new { background: #dbeafe; color: #1e40af; }
.s-under_review { background: #fef3c7; color: #92400e; }
.s-info_required { background: #fed7aa; color: #9a3412; }
.s-approved { background: #dcfce7; color: #166534; }
.s-rejected { background: #fee2e2; color: #991b1b; }
.s-expired { background: #f1f5f9; color: #475569; }
.s-cancelled { background: #f3e8ff; color: #6b21a8; }
.s-active { background: #dcfce7; color: #166534; }

/* ===== Filters ===== */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filters .field { margin: 0; flex: 1 1 160px; min-width: 140px; }

/* ===== Modal ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,34,54,.55); display: grid; place-items: center;
  z-index: 100; padding: 16px; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: #fff; border-radius: 18px; max-width: 820px; width: 100%; max-height: 92vh; max-height: 92dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: pop .25s; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 2; }
.modal-head h3 { font-size: 18px; }
.modal-head .x { background: none; font-size: 26px; color: var(--muted); line-height: 1; padding: 0 6px; }
.modal-body { padding: 22px; }

/* ===== Detail ===== */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-bottom: 18px; }
.detail-grid .k { color: var(--muted); font-size: 12px; }
.detail-grid .vv { font-weight: 600; }
.timeline { border-right: 2px solid var(--border); padding-right: 18px; margin-right: 6px; }
.timeline .item { position: relative; padding-bottom: 16px; }
.timeline .item::before { content: ''; position: absolute; right: -25px; top: 4px; width: 12px; height: 12px;
  background: var(--primary); border-radius: 50%; border: 2px solid #fff; }
.timeline .when { font-size: 12px; color: var(--muted); }

/* ===== Inline attachment preview ===== */
.attach-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.attach-chip { background: #eef4fb; padding: 9px 14px; border-radius: 10px; font-size: 13px; border: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px; transition: .12s; }
.attach-chip:hover { background: #dbe6f1; }
.attach-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.preview-pane { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #f3f8fd; margin-bottom: 8px; }
.preview-pane img { width: 100%; height: auto; max-height: 460px; object-fit: contain; }
.preview-pane iframe { width: 100%; height: 480px; border: 0; }
.preview-empty { padding: 30px; text-align: center; color: var(--muted); }

/* ===== Toast ===== */
#toasts { position: fixed; top: 18px; left: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 90vw; }
.toast { background: #0f2236; color: #fff; padding: 13px 18px; border-radius: 11px; box-shadow: 0 10px 28px rgba(0,0,0,.28);
  font-size: 14px; min-width: 240px; animation: slidein .25s; }
.toast.success { background: var(--success); } .toast.error { background: var(--danger); }
@keyframes slidein { from { transform: translateX(-20px); opacity: 0; } }

/* ===== Bell ===== */
.bell { position: relative; background: #fff; border: 1px solid var(--border); width: 44px; height: 44px;
  border-radius: 12px; font-size: 19px; transition: .15s; }
.bell:hover { background: #f3f8fd; }
.bell-badge { position: absolute; top: -6px; left: -6px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; }

/* ===== Renewal banner ===== */
.banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; font-weight: 600; }
.banner.warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }

/* ===== Red note (Absher) ===== */
.note-red { color: var(--danger); font-weight: 800; font-size: 12px; background: #fef2f2;
  padding: 2px 8px; border-radius: 6px; border: 1px solid #fecaca; margin-right: 6px; display: inline-block; }

/* ===== Radio box ===== */
.radio-box { display: flex; gap: 10px; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 11px; cursor: pointer; flex: 1 1 200px; background: #fff; font-weight: 600; transition: .12s; }
.radio:hover { background: #f3f8fd; }
.radio input { width: auto; accent-color: var(--primary); }

/* ===== Notifications list ===== */
.notif-list { padding: 4px 0; }
.notif { display: flex; gap: 12px; padding: 14px 8px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.notif:last-child { border-bottom: 0; }
.notif-dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; margin-top: 7px; flex-shrink: 0; }
.notif.unread { background: #f3f8fd; border-radius: 10px; }
.notif.unread .notif-dot { background: var(--primary); }
.notif-title { font-weight: 700; }
.notif-text { color: #5b7186; font-size: 13px; }
.notif-time { color: #9fb4c8; font-size: 11px; margin-top: 2px; }

.empty { text-align: center; color: var(--muted); padding: 40px; }
.bars { display: flex; gap: 14px; align-items: flex-end; min-height: 210px; margin-top: 10px;
  padding: 8px 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  flex: 0 0 auto; min-width: 46px; max-width: 64px; }
.bar { width: 100%; background: linear-gradient(180deg, var(--primary-500), var(--primary-700));
  border-radius: 8px 8px 0 0; min-height: 6px; transition: height .35s ease; }
.bar-val { font-size: 12px; font-weight: 800; color: var(--primary-dark); margin-bottom: 5px; }
.bar-x { font-size: 11px; color: var(--muted); margin-top: 7px; white-space: nowrap; }
.preview-bar { display: flex; gap: 8px; margin-bottom: 8px; }
.sel-bar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--primary-dark); }
.sel-row, #sel-all, .req-sel-row, #req-sel-all { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.sel-cell { text-align: center; }
tbody tr:hover { cursor: default; }
.statwrap { display: flex; gap: 10px; flex-wrap: wrap; }
.statbox { text-align: center; padding: 14px 18px; background: #f3f8fd; border-radius: 12px; border: 1px solid var(--border); flex: 1 1 120px; }
.statbox .n { font-size: 26px; font-weight: 800; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar { position: fixed; top: 0; right: 0; width: 270px; max-width: 84vw; height: 100vh; height: 100dvh;
    margin: 0; border-radius: 0;
    transform: translateX(100%); transition: transform .25s ease; box-shadow: -10px 0 40px rgba(0,0,0,.3); }
  #content { margin-top: 14px; }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open .backdrop { display: block; }
  .main { padding: 0 16px 28px; }
  .row, .detail-grid { grid-template-columns: 1fr; }
  .topbar h2 { font-size: 18px; }
}
@media (max-width: 480px) {
  .auth-card { padding: 26px 20px; }
  .modal-body, .modal-head { padding: 16px; }
}

/* ===== Dark Mode (داكن ناعم مريح للعين) ===== */
body.dark {
  --bg: #202a3c; --card: #2a3650; --text: #e6eaf2; --muted: #9fb0c8;
  --border: #3a4763; --border-soft: #313e58;
  background: #202a3c;
}
body.dark .topbar h2 { color: #eaf0fa; }
body.dark .field input, body.dark .field select, body.dark .field textarea { background: #243049; border-color: #3a4763; color: #e6eaf2; }
body.dark .field input[readonly] { background: #1f2a3e; color: #9fb0c8; }
body.dark input[type=file] { background: #243049; color: #cbd5e1; }
body.dark th { background: #2f3b54; color: #b6c4da; }
body.dark tbody tr:hover { background: #313e58; }
body.dark .modal { background: #2a3650; }
body.dark .modal-head { background: #2a3650; }
body.dark .btn.ghost { background: #34415c; color: #e6eaf2; }
body.dark .btn.ghost:hover { background: #3d4c6b; }
body.dark .bell { background: #2a3650; border-color: #3a4763; }
/* صفحة الدخول تبقى فاتحة دائماً مهما كان الوضع */
body.dark #auth { --bg: #eef4fb; --card: #ffffff; --text: #111827; --muted: #6b7280;
  --border: #e5e7eb; --border-soft: #f1f5f9; background: #0a1622; }
body.dark .statbox, body.dark .radio,
body.dark .preview-pane, body.dark .attach-chip { background: #243049; border-color: #3a4763; }
body.dark .tabs button { background: #243049; border-color: #3a4763; color: #9fb0c8; }
body.dark .hamburger { background: #2a3650; border-color: #3a4763; color: #cbd5e1; }
body.dark .fontsize { background: #2a3650; border-color: #3a4763; }
body.dark .note-red { background: #4a2020; border-color: #7f1d1d; }
body.dark .hint.ok { color: #34d399; }
/* صناديق ملوّنة تتكيّف مع الوضع الداكن */
.box-green { background: #f0fdf4; border-color: #bbf7d0; }
.box-amber { background: #fff7ed; border-color: #fed7aa; }
body.dark .box-green { background: #18271f; border-color: #1f3d2e; }
body.dark .box-green h3, body.dark .box-green .vv, body.dark .box-green .k { color: #d7f5e3; }
body.dark .box-amber { background: #2a2113; border-color: #4a3a1a; }
body.dark .box-amber h3, body.dark .box-amber label, body.dark .box-amber p, body.dark .box-amber .hint { color: #f3e2c0; }
/* وضوح النصوص في الوضع الداكن */
body.dark .field label { color: #d6e0f0; }
body.dark td { color: #eef2f8; }
body.dark .detail-grid .vv, body.dark .card h3, body.dark .modal-head h3, body.dark .vv { color: #f1f5f9; }
body.dark .detail-grid .k, body.dark .field .hint { color: #aab9cf; }
.pw-mask { font-family: monospace; letter-spacing: 1px; }

/* ===== Notifications clarity + clickable ===== */
body.dark .notif.unread { background: #1c2b46; border-radius: 10px; }
.notif.clickable { cursor: pointer; transition: background .12s; }
.notif.clickable:hover { background: var(--border-soft); }

/* ===== Pagination ===== */
.pager { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 14px 4px 4px; }
.pager-info { color: var(--muted); font-size: 12px; margin-right: auto; }
.pager-dots { color: var(--muted); padding: 0 4px; }

/* ===== Renewal banner list ===== */
.renew-list { display: flex; flex-wrap: wrap; gap: 8px; }
.renew-list.collapsed { display: none; }

/* ===== Expiry note under valid_to ===== */
.exp-note { font-size: 11px; font-weight: 700; margin-top: 3px; }
.exp-note.ok { color: #16a34a; }
.exp-note.warn { color: var(--warning); }
.exp-note.danger { color: var(--danger); }
.exp-note.s-cancelled { color: #9333ea; }

/* ===== Notifications groups ===== */
.notif-group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; }
.notif-list.collapsed { display: none; }

/* ===== Refresh button spin ===== */
#refresh-btn { font-size: 20px; transition: transform .5s ease; }
#refresh-btn.spin { transform: rotate(360deg); }

/* ===== Request-info chips (أزرار مرتبة) ===== */
.ri-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ri-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  cursor: pointer; font-weight: 600; font-size: 14px; transition: .12s; user-select: none; }
.ri-chip:hover { background: var(--border-soft); }
.ri-chip input { width: auto; accent-color: var(--primary); }
.ri-chip:has(input:checked) { background: var(--primary); color: #fff; border-color: var(--primary); }
.ri-all-chip { margin-bottom: 12px; font-weight: 800; }
.banner.warn { color: #92400e; }
body.dark .banner.warn { background: #2a2113; border-color: #4a3a1a; color: #f3e2c0; }

/* ============================================================
   تجميل الصفحات الداخلية — محافظ وأنيق (تجميل بصري فقط)
   مقصور على #app حتى لا يتأثّر تسجيل الدخول، ودون لمس أي منطق
   ============================================================ */
body.dark { --accent: #7fb8d6; --accent-soft: rgba(110,180,220,.09); --accent-line: rgba(120,185,220,.3); }
/* خلفية أعمق بتدرّج هادئ يعطي إحساساً مميّزاً */
body.dark { background: radial-gradient(1100px 560px at 82% -8%, #1f2a44, #18202e 60%) fixed; }

/* البطاقات: لمسة زجاجية + حدّ خفيف + توهّج لطيف عند المرور (بدون قفز) */
body.dark #app .card {
  background: linear-gradient(180deg, rgba(54,68,99,.6), rgba(40,52,78,.66));
  border: 1px solid rgba(125,165,215,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.26);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.dark #app .card:hover { border-color: var(--accent-line); box-shadow: 0 12px 32px rgba(0,0,0,.32), 0 0 0 1px var(--accent-soft); }
/* شريط عنوان صغير سماوي قبل عناوين البطاقات */
body.dark #app .card h3 { display: flex; align-items: center; gap: 9px; }
body.dark #app .card h3::before { content: ''; width: 4px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, #6ea7c6, #3f6f8c); flex: none; }

/* صناديق الإحصائيات: زجاجية + رقم بلون هادئ */
body.dark #app .statbox { background: linear-gradient(180deg, rgba(44,58,88,.55), rgba(34,45,70,.6)); border: 1px solid rgba(125,165,215,.14); transition: transform .18s ease, border-color .18s ease; }
body.dark #app .statbox:hover { transform: translateY(-2px); border-color: var(--accent-line); }
body.dark #app .statbox .n { color: #aecbdc; }

/* الشريط الجانبي: مؤشّر سماوي للعنصر النشِط + توهّج */
body.dark .sidebar { background: linear-gradient(180deg, #16244a, #0f1a36); border-left: 1px solid rgba(120,200,255,.1); }
body.dark .nav a { position: relative; transition: background .15s ease, color .15s ease; }
body.dark .nav a.active { background: linear-gradient(90deg, rgba(110,180,220,.12), rgba(110,180,220,.03)); color: #eef5fb; box-shadow: none; }
body.dark .nav a.active::before { content: ''; position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%; width: 3px;
  border-radius: 3px; background: #6fb0d2; }
body.dark .nav a:hover { background: rgba(255,255,255,.08); }
body.dark .brand-logo { box-shadow: 0 0 0 1px rgba(120,210,255,.25), 0 6px 18px rgba(0,0,0,.35); }

/* حقول النماذج: حلقة تركيز سماوية متناسقة مع صفحة الدخول */
body.dark #app .field input:focus, body.dark #app .field select:focus, body.dark #app .field textarea:focus {
  border-color: rgba(120,185,220,.7); box-shadow: 0 0 0 2px rgba(110,175,215,.16); }

/* الجداول: ترويسة أنعم + تظليل سماوي عند المرور */
body.dark #app th { background: linear-gradient(180deg, #2c3a58, #26324c); color: #bcd0ea; letter-spacing: .2px; }
body.dark #app tbody tr { transition: background .14s ease; }
body.dark #app tbody tr:hover { background: rgba(90,180,235,.12); }

/* الأزرار الرئيسية: تدرّج خفيف + حلقة تركيز سماوية */
body.dark #app .btn { background: linear-gradient(180deg, #2f74b6, #245d92); box-shadow: 0 4px 14px rgba(20,60,100,.4); }
body.dark #app .btn:hover { background: linear-gradient(180deg, #3a86c9, #2a6aa6); box-shadow: 0 6px 18px rgba(30,110,160,.5); transform: translateY(-1px); }
body.dark #app .btn:focus-visible { box-shadow: 0 0 0 2px rgba(120,225,255,.55); }
body.dark #app .btn.ghost { background: #34415c; } body.dark #app .btn.ghost:hover { background: #3d4c6b; }
body.dark #app .btn.success { background: linear-gradient(180deg, #0a9d6e, #067a55); }
body.dark #app .btn.danger { background: linear-gradient(180deg, #e25555, #c33b3b); }
body.dark #app .btn.warning { background: linear-gradient(180deg, #e0902a, #b9701a); }

/* أزرار علوية (تحديث/إشعارات/قائمة) بلمسة سماوية */
body.dark #app .bell, body.dark #app .hamburger, body.dark #app .fontsize { background: #243049; border-color: #3a4763; }
body.dark #app .bell:hover, body.dark #app .hamburger:hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-soft); }

/* شارات الحالة: حدّ متوهّج خفيف */
body.dark #app .badge { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* شريط تمرير سماوي في الوضع الداكن */
body.dark ::-webkit-scrollbar-thumb { background: #3a567a; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #4d7fae; }

/* ظهور لطيف لمنطقة المحتوى عند فتح التطبيق (مرّة واحدة، بلا وميض على التحديث) */
body.dark .main { animation: appIn .4s ease both; }
@keyframes appIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { body.dark .main { animation: none; } body.dark #app .statbox:hover, body.dark #app .btn:hover { transform: none; } }
/* وضوح النصوص في الوضع الداكن */
body.dark .field label { color: #d6e0f0; }
body.dark td { color: #eef2f8; }
body.dark .detail-grid .vv, body.dark .card h3, body.dark .modal-head h3, body.dark .vv { color: #f1f5f9; }
body.dark .detail-grid .k, body.dark .field .hint { color: #aab9cf; }
.pw-mask { font-family: monospace; letter-spacing: 1px; }

/* ============================================================
   مشهد صفحة الدخول الحيّ (ليل/نهار + عناصر متحركة) — #auth فقط
   ============================================================ */
#auth .auth-fx span, #auth .auth-fx i { pointer-events: none; }

/* السماء + ليل/نهار */
.sky-overlay { position: absolute; inset: 0; transition: background 2s ease; }
#auth.tod-day .sky-overlay { background: linear-gradient(180deg, rgba(255,242,205,.10), rgba(255,255,255,0) 40%); }
#auth.tod-dusk .sky-overlay { background: linear-gradient(180deg, rgba(255,150,70,.18), rgba(120,60,90,.12) 50%, transparent); }
#auth.tod-night .sky-overlay { background: linear-gradient(180deg, rgba(6,14,32,.66), rgba(8,16,34,.42) 55%, rgba(8,16,34,.2)); }
#auth.tod-dusk::before { filter: brightness(.84) saturate(1.05); }
#auth.tod-night::before { filter: brightness(.5) saturate(.85); }

/* شمس / قمر / نجوم */
.sun, .moon { position: absolute; top: 9%; inset-inline-end: 16%; width: 64px; height: 64px; border-radius: 50%; opacity: 0; transition: opacity 2s ease; }
.sun { background: radial-gradient(circle, #fff3c4, #ffd35a 60%, rgba(255,200,70,0) 72%); box-shadow: 0 0 60px 20px rgba(255,210,90,.45); }
.moon { background: radial-gradient(circle at 38% 35%, #eef3ff, #c9d6ea 70%); box-shadow: 0 0 26px 6px rgba(200,220,255,.4); }
#auth.tod-day .sun, #auth.tod-dusk .sun { opacity: 1; }
#auth.tod-night .moon { opacity: 1; }
.stars { position: absolute; inset: 0 0 45% 0; opacity: 0; transition: opacity 2s ease; }
#auth.tod-night .stars { opacity: 1; }
.stars i { position: absolute; background: #fff; border-radius: 50%; opacity: .5; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* تلفريك */
.cable { position: absolute; top: 50%; inset-inline-start: 6%; width: 42%; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); transform: rotate(-9deg); transform-origin: left center; }
.cable .cabin { position: absolute; top: -4px; left: 0; width: 12px; height: 9px; border-radius: 2px; background: #cf3b3b; box-shadow: 0 0 0 1px rgba(0,0,0,.3); animation: cable 16s ease-in-out infinite; }
.cable .cabin.b { animation-delay: -8s; background: #2f74b6; }
@keyframes cable { 0% { left: 0; } 50% { left: calc(100% - 12px); } 100% { left: 0; } }

/* مونوريل */
.rail { position: absolute; top: 46%; inset-inline-start: 8%; width: 60%; height: 3px; background: rgba(255,255,255,.16); border-radius: 3px; }
.monorail { position: absolute; top: calc(46% - 9px); inset-inline-start: 8%; display: flex; gap: 1px; animation: mono 20s linear infinite; }
.monorail i { width: 22px; height: 11px; border-radius: 4px; background: linear-gradient(180deg, #cdd9e6, #8aa0b8); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
@keyframes mono { 0% { transform: translateX(-90px); opacity: 0; } 6% { opacity: 1; } 58% { transform: translateX(56vw); opacity: 1; } 64%,100% { transform: translateX(56vw); opacity: 0; } }

/* أفعوانية */
.coaster { position: absolute; top: 30%; inset-inline-end: 7%; width: 240px; height: 96px; }
.coaster .ctrack { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.coaster .car { position: absolute; width: 12px; height: 8px; border-radius: 2px; background: #ffcf4a; box-shadow: 0 0 6px rgba(255,200,80,.7);
  offset-path: path("M2,70 C46,8 92,8 120,52 S196,92 238,26"); offset-rotate: auto; animation: coast 6.5s ease-in-out infinite; }
@keyframes coast { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* منطاد */
.balloon { position: absolute; inset-inline-start: 12%; bottom: 24%; animation: floatup 24s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
@keyframes floatup { 0% { transform: translate(0,0); } 50% { transform: translate(26px,-92px); } 100% { transform: translate(0,0); } }

/* برج قيد البناء + عمّال */
.build { position: absolute; bottom: 16%; inset-inline-end: 21%; width: 46px; height: 92px; }
.build .rise { position: absolute; bottom: 0; left: 0; width: 100%; height: 16%;
  background: linear-gradient(180deg, rgba(120,140,170,.85), rgba(70,86,112,.85)); border: 1px solid rgba(180,200,230,.4);
  background-image: repeating-linear-gradient(180deg, transparent 0 9px, rgba(0,0,0,.18) 9px 11px), repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.14) 9px 11px);
  animation: rise 18s ease-in-out infinite; }
@keyframes rise { 0% { height: 16%; } 70% { height: 80%; } 100% { height: 80%; } }
.build .rise::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease;
  background-image: radial-gradient(rgba(255,220,120,.9) 1px, transparent 2px); background-size: 11px 11px; background-position: 3px 3px; }
#auth.tod-night .build .rise::after { opacity: .8; }
.build .cranetip { position: absolute; top: -6px; left: 50%; width: 40px; height: 3px; background: #e0b04a; transform-origin: left; animation: tipsway 5s ease-in-out infinite; }
@keyframes tipsway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.workers { position: absolute; bottom: 15%; inset-inline-end: 17%; display: flex; gap: 10px; }
.workers i { width: 5px; height: 11px; border-radius: 2px 2px 0 0; background: #f0a52e; animation: work 1.1s ease-in-out infinite; }
.workers i:nth-child(2) { animation-delay: .3s; } .workers i:nth-child(3) { animation-delay: .6s; }
@keyframes work { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(.92); } }
#auth.tod-night .drone-eye { filter: drop-shadow(0 0 4px #7fe3ff); }

/* طائرة بلافتة MAB */
.fx-plane { position: absolute; top: 15%; inset-inline-start: -30%; display: flex; align-items: center; gap: 6px; opacity: 0; }
.fx-plane.go { animation: planefly 12s linear 1; }
.fx-plane .pb { font-size: 24px; color: #e9f2fb; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); transform: scaleX(-1); }
.fx-plane .banner { padding: 3px 12px; font-weight: 800; font-size: 13px; letter-spacing: 1px; color: #fff;
  background: linear-gradient(180deg, #2f74b6, #1c4f86); border: 1px solid rgba(255,255,255,.5); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
@keyframes planefly { 0% { inset-inline-start: -30%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { inset-inline-start: 116%; opacity: 0; } }

/* ساعة حيّة */
.fx-clock { position: absolute; top: 14px; inset-inline-start: 18px; z-index: 3; text-align: center; color: #eaf6ff; pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.fx-clock .c-time { font-size: 26px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.fx-clock .c-date { font-size: 12px; color: #bcd9ec; margin-top: 2px; }

/* زرّ الصوت */
.fx-sound { position: absolute; top: 16px; inset-inline-end: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(12,28,42,.6); border: 1px solid rgba(120,200,235,.4); color: #cfe6f5; font-size: 18px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fx-sound .snd-on { display: none; } .fx-sound .snd-off { display: inline; }
.fx-sound.on .snd-on { display: inline; } .fx-sound.on .snd-off { display: none; }
.fx-sound.on { border-color: rgba(120,225,255,.8); box-shadow: 0 0 14px rgba(90,200,255,.4); }

@media (prefers-reduced-motion: reduce) { .cable .cabin, .monorail, .coaster .car, .balloon, .build .rise, .build .cranetip, .workers i, .stars i, .fx-plane { animation: none !important; } }
@media (max-width: 560px) { .coaster, .cable, .rail, .monorail, .build, .workers { display: none; } .fx-clock .c-time { font-size: 20px; } .fx-clock, .fx-sound { top: 10px; } }

/* ============================================================
   MAB Enterprise V2
   ============================================================ */
body.dark, body.light {
  --v2-bg: #f6f8fb;
  --v2-surface: rgba(255,255,255,.82);
  --v2-surface-strong: #ffffff;
  --v2-text: #111827;
  --v2-muted: #667085;
  --v2-line: rgba(20,31,50,.1);
  --v2-brand: #2563eb;
  --v2-cyan: #0891b2;
  --v2-green: #059669;
  --v2-amber: #d97706;
  --v2-rose: #e11d48;
  --v2-shadow: 0 18px 44px rgba(16,24,40,.08);
  --v2-soft: 0 1px 2px rgba(16,24,40,.06);
  background: linear-gradient(180deg, #f8fafc, #eef4f8 58%, #f9fbff) fixed;
  color: var(--v2-text);
}
body.dark {
  --v2-bg: #101418;
  --v2-surface: rgba(27,33,40,.76);
  --v2-surface-strong: #1b2128;
  --v2-text: #f2f6fb;
  --v2-muted: #a7b2c0;
  --v2-line: rgba(214,226,240,.13);
  --v2-brand: #78a7ff;
  --v2-cyan: #67e8f9;
  --v2-green: #34d399;
  --v2-amber: #fbbf24;
  --v2-rose: #fb7185;
  --v2-shadow: 0 18px 44px rgba(0,0,0,.28);
  background: linear-gradient(180deg, #12171c, #171d24 58%, #101418) fixed;
}
#app.app { grid-template-columns: 292px minmax(0,1fr); background: transparent; }
#app .sidebar {
  position: sticky; top: 0; min-height: 100dvh; padding: 18px 14px;
  background: color-mix(in srgb, var(--v2-surface-strong) 86%, transparent);
  border-inline-start: 1px solid var(--v2-line); border-inline-end: 1px solid var(--v2-line);
  box-shadow: var(--v2-shadow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
#app .brand { padding: 10px 10px 18px; border-bottom: 1px solid var(--v2-line); margin-bottom: 12px; }
#app .brand-name, #app .brand-text small { color: var(--v2-text); }
#app .brand-logo { background: #fff; border-radius: 8px; padding: 4px; box-shadow: var(--v2-soft); }
#app .nav { gap: 5px; }
#app .nav a {
  display: flex; align-items: center; gap: 10px; min-height: 42px; color: var(--v2-muted);
  border-radius: 8px; padding: 9px 11px; border: 1px solid transparent; font-weight: 700;
}
#app .nav a:hover { background: rgba(37,99,235,.08); color: var(--v2-text); }
#app .nav a.active {
  color: var(--v2-text); background: linear-gradient(90deg, rgba(37,99,235,.16), rgba(8,145,178,.08));
  border-color: var(--v2-line); box-shadow: var(--v2-soft);
}
.nav-ico {
  width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center;
  background: rgba(37,99,235,.1); color: var(--v2-brand); font-size: 13px; line-height: 1;
}
#app .sidebar .user { color: var(--v2-muted); border-top-color: var(--v2-line); margin-top: auto; }
#app .sidebar .user .name { color: var(--v2-text); }
#app .sidebar .user .role { color: var(--v2-muted); }
#app .main { padding: 0 clamp(16px, 3vw, 38px); }
#app .topbar {
  position: sticky; top: 0; z-index: 20; max-width: 1360px; padding: 18px 0 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--v2-bg) 94%, transparent), color-mix(in srgb, var(--v2-bg) 72%, transparent));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#app .topbar h2 { color: var(--v2-text); font-size: 24px; letter-spacing: 0; }
#app .page-sub { color: var(--v2-muted); }
#app #banner, #app #content, #app .topbar { max-width: 1360px; }
#app .card, #app .kpi, #app .metric-card, .health-card {
  background: var(--v2-surface); color: var(--v2-text); border: 1px solid var(--v2-line);
  border-radius: 8px; box-shadow: var(--v2-soft); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#app .card { padding: 22px; }
#app .card:hover, #app .metric-card:hover { box-shadow: var(--v2-shadow); border-color: rgba(37,99,235,.22); }
#app .btn { border-radius: 8px; background: linear-gradient(180deg, #2f6ff2, #245bd7); box-shadow: 0 8px 18px rgba(37,99,235,.2); }
#app .btn.ghost, #app .bell, #app .hamburger, #app .fontsize {
  background: var(--v2-surface); color: var(--v2-text); border: 1px solid var(--v2-line); box-shadow: var(--v2-soft);
}
#app .field input, #app .field select, #app .field textarea {
  background: var(--v2-surface-strong); color: var(--v2-text); border: 1px solid var(--v2-line); border-radius: 8px;
}
#app table { border-collapse: separate; border-spacing: 0; }
#app th { background: color-mix(in srgb, var(--v2-surface-strong) 92%, var(--v2-brand)); color: var(--v2-muted); }
#app td, #app th { border-bottom: 1px solid var(--v2-line); padding: 12px 10px; }
#app tbody tr:hover { background: rgba(37,99,235,.06); }
.v2-hero {
  display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px;
  padding: 26px; border: 1px solid var(--v2-line); border-radius: 8px; background: var(--v2-surface);
  box-shadow: var(--v2-soft); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.v2-hero h2 { margin: 4px 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.2; color: var(--v2-text); }
.v2-hero p, .metric-hint, .eyebrow { color: var(--v2-muted); }
.eyebrow { font-weight: 800; letter-spacing: 0; text-transform: uppercase; font-size: 12px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--v2-line); border-radius: 999px; padding: 8px 12px; color: var(--v2-green); background: rgba(5,150,105,.08); white-space: nowrap; }
.live-pill span { width: 8px; height: 8px; background: var(--v2-green); border-radius: 50%; animation: pulse 1.4s infinite; }
.metric-grid, .leader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { padding: 18px; min-height: 116px; }
.metric-label { color: var(--v2-muted); font-size: 13px; font-weight: 700; }
.metric-value { color: var(--v2-text); font-size: 29px; line-height: 1.25; font-weight: 900; margin: 8px 0 4px; overflow-wrap: anywhere; }
.v2-grid { display: grid; gap: 16px; margin-bottom: 18px; }
.v2-grid.two { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr); }
.v2-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.chart-card { min-height: 260px; }
.v2-bars { display: flex; align-items: end; gap: 9px; min-height: 170px; overflow-x: auto; padding: 10px 0 2px; }
.v2-bars.compact { gap: 5px; }
.v2-bar { min-width: 42px; display: grid; justify-items: center; gap: 5px; color: var(--v2-muted); font-size: 11px; }
.v2-bar span { width: 100%; max-width: 28px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--v2-cyan), var(--v2-brand)); box-shadow: 0 8px 18px rgba(8,145,178,.18); }
.v2-bar b { color: var(--v2-text); font-size: 12px; }
.donut-wrap { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 20px; }
.donut { width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--v2-green) calc(var(--p) * 1%), rgba(225,29,72,.75) 0); position: relative; }
.donut::after { content: ''; position: absolute; inset: 18px; border-radius: 50%; background: var(--v2-surface-strong); }
.donut span { position: relative; z-index: 1; color: var(--v2-text); font-weight: 900; font-size: 28px; }
.destination-map { display: grid; gap: 12px; padding-top: 8px; }
.destination-step { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--v2-line); border-radius: 8px; background: rgba(37,99,235,.06); }
.destination-step.top { background: linear-gradient(90deg, rgba(52,211,153,.16), rgba(37,99,235,.08)); border-color: rgba(52,211,153,.32); }
.destination-rank { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--v2-surface-strong); color: var(--v2-brand); font-weight: 900; }
.destination-body { display: grid; gap: 4px; min-width: 0; }
.destination-body b { color: var(--v2-text); overflow-wrap: anywhere; }
.destination-body span { color: var(--v2-muted); font-size: 12px; }
.destination-track { height: 7px; border-radius: 999px; background: rgba(148,163,184,.18); overflow: hidden; }
.destination-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--v2-green), var(--v2-cyan)); }
.destination-step strong { color: var(--v2-text); direction: ltr; }
.status-flow { display: grid; gap: 10px; padding-top: 8px; }
.status-flow div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid var(--v2-line); border-radius: 8px; background: var(--v2-surface-strong); }
.status-flow span { color: var(--v2-muted); font-weight: 800; }
.status-flow b { color: var(--v2-text); font-size: 24px; }
.banner.intake { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--v2-line); background: var(--v2-surface); }
.banner.intake.open { border-color: rgba(5,150,105,.35); }
.banner.intake.closed { border-color: rgba(225,29,72,.35); }
.countdown { font-weight: 900; font-size: 22px; color: var(--v2-brand); direction: ltr; }
.app.undertaking-only { grid-template-columns: 1fr !important; }
.app.undertaking-only .sidebar, .app.undertaking-only .topbar, .app.undertaking-only .footer, .app.undertaking-only #banner { display: none !important; }
.app.undertaking-only .main { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.app.undertaking-only #content { max-width: 1120px !important; }
.undertaking-shell { display: grid; grid-template-columns: minmax(0,1.2fr) 420px; gap: 18px; align-items: start; }
.undertaking-doc { background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 8px; padding: 30px; box-shadow: var(--v2-soft); }
.undertaking-kicker { color: var(--v2-brand); font-weight: 900; margin-bottom: 8px; }
.undertaking-doc h2 { margin-bottom: 12px; color: var(--v2-text); }
.undertaking-doc p { margin-bottom: 14px; color: var(--v2-muted); font-size: 16px; }
.undertaking-doc b { color: var(--v2-text); }
.undertaking-form { display: grid; gap: 12px; }
.signature-head { display: flex; align-items: center; gap: 10px; color: var(--v2-text); }
.signature-head span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(37,99,235,.16); color: var(--v2-brand); font-size: 22px; }
.signature-pad { width: 100%; height: 230px; border-radius: 8px; border: 1px dashed rgba(120,167,255,.5); background: color-mix(in srgb, var(--v2-surface-strong) 86%, #fff); touch-action: none; cursor: crosshair; }
.signature-actions { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.checkline { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--v2-text); }
.tour-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(4,9,18,.48); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tour-card { width: min(430px, calc(100vw - 32px)); background: var(--v2-surface-strong); border: 1px solid var(--v2-line); border-radius: 8px; box-shadow: var(--v2-shadow); padding: 22px; color: var(--v2-text); }
.tour-step { color: var(--v2-brand); font-weight: 900; margin-bottom: 8px; }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.tour-guide { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.tour-dim { position: absolute; inset: 0; background: rgba(2,6,12,.55); }
/* أثناء الجولة: امنع الكتابة والتمرير (مع إبقاء النقر على العنصر المحدّد والتلميحة) */
body.tour-active, body.tour-active .main { overflow: hidden !important; }
body.tour-active #content { pointer-events: none; }
.tour-ring { position: fixed; z-index: 82; border: 3px solid #7aa7ff; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(2,6,12,.55), 0 0 0 4px rgba(122,167,255,.95), 0 0 28px rgba(122,167,255,.75); pointer-events: none; }
.tour-tip { position: fixed; z-index: 83; width: min(390px, calc(100vw - 32px)); background: #0f1a33; color: #fff; border: 1px solid rgba(122,167,255,.55); border-radius: 14px; box-shadow: 0 26px 64px rgba(0,0,0,.65); padding: 20px 22px; pointer-events: auto; }
.tour-tip h3, .tour-card h3 { margin-bottom: 8px; color: #fff; font-size: 18px; font-weight: 800; }
.tour-tip p, .tour-card p { color: #d6e0f5; font-size: 15px; line-height: 1.9; }
.tour-step { color: #93c5fd; font-weight: 900; margin-bottom: 8px; font-size: 13px; letter-spacing: .5px; }
.tour-hint { margin-top: 14px; color: #93c5fd; font-weight: 800; font-size: 13.5px; }
.tour-target { position: relative; z-index: 84; border-radius: 10px; box-shadow: 0 0 0 3px rgba(122,167,255,.95), 0 0 26px rgba(122,167,255,.6); }
.workflow-lane { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.flow-node { width: 100%; min-height: 130px; display: grid; align-content: start; gap: 8px; text-align: start; padding: 16px; border-radius: 8px; border: 1px solid var(--v2-line); background: var(--v2-surface); color: var(--v2-text); box-shadow: var(--v2-soft); }
.flow-node span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgba(37,99,235,.12); color: var(--v2-brand); font-weight: 900; }
.flow-node small { color: var(--v2-muted); line-height: 1.7; }
.flow-node.active { border-color: rgba(37,99,235,.45); box-shadow: var(--v2-shadow); }
.flow-arrow { color: var(--v2-muted); font-size: 20px; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.health-card { padding: 18px; min-height: 145px; }
.health-card span { width: 11px; height: 11px; display: inline-block; border-radius: 50%; background: var(--v2-green); margin-bottom: 12px; }
.health-card.attention span, .health-card.not_configured span { background: var(--v2-amber); }
.health-card h3 { margin: 0 0 8px; color: var(--v2-text); }
.health-card b { color: var(--v2-brand); }
.health-card p { color: var(--v2-muted); margin-top: 8px; overflow-wrap: anywhere; }
.permission-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 16px; }
.perm-users { display: grid; gap: 8px; }
.perm-users button, .cmd-item { text-align: start; border: 1px solid var(--v2-line); background: var(--v2-surface-strong); color: var(--v2-text); border-radius: 8px; padding: 11px 12px; }
.perm-users small { display: block; color: var(--v2-muted); margin-top: 3px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 16px 0; }
.perm-grid label { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 12px; border: 1px solid var(--v2-line); border-radius: 8px; background: var(--v2-surface-strong); }
.perm-grid small { grid-column: 2; color: var(--v2-muted); }
.cmd-list { display: grid; gap: 8px; }
.cmd-item { display: flex; align-items: center; gap: 10px; width: 100%; }
.skeleton-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.skeleton-grid div { height: 130px; border-radius: 8px; background: linear-gradient(90deg, rgba(148,163,184,.13), rgba(148,163,184,.28), rgba(148,163,184,.13)); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
@keyframes pulse { 50% { opacity: .35; transform: scale(1.45); } }
@media (max-width: 980px) {
  #app.app { grid-template-columns: 1fr; }
  #app .sidebar { position: fixed; transform: translateX(110%); transition: transform .2s ease; }
  #app.nav-open .sidebar { transform: translateX(0); }
  .v2-grid.two, .v2-grid.three, .undertaking-shell, .permission-layout { grid-template-columns: 1fr; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 560px) {
  #app .main { padding: 0 12px; }
  .v2-hero, .banner.intake { align-items: stretch; flex-direction: column; }
  .metric-grid, .leader-grid { grid-template-columns: 1fr; }
}