/* ═══════════════════════════════════════════════════════════════
   Parsbaan — Parsbaan Design System
   کنسولِ امنیتی: جسورانه ولی صیقلی — دارکِ عمیق، سیگنالِ فیروزه‌ای،
   shell مشترکِ مشتری/ادمین، هیروِ وضعیت، حالت‌های امن/توجه/هشدار.
   منطق و ID پنل‌ها دست‌نخورده می‌ماند؛ این فقط لایهٔ ظاهر است.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1) توکن‌ها: بازتعریفِ پالتِ هر دو پنل با !important ── */
:root, html {
  /* پس‌زمینه و سطوح */
  --bg:        #080c16 !important;
  --surface:   #0f1626 !important;
  --surface2:  #151d30 !important;
  --surface3:  #1b2540 !important;
  --border:    rgba(132,162,214,0.12) !important;
  --border2:   rgba(132,162,214,0.22) !important;
  /* اکسنت‌ها */
  --accent:    #16e0c0 !important;   /* سیگنالِ نگهبان */
  --accent2:   #4b9cff !important;   /* پرتو */
  --accent3:   #a855f7 !important;   /* چهره/بنفش */
  --danger:    #ff5a6e !important;
  --warning:   #fbbf24 !important;
  --success:   #22d3a6 !important;
  /* متن */
  --text:      #eaf1fb !important;
  --text2:     #9db0cc !important;
  --text3:     #5a6b85 !important;

  /* توکن‌های اختصاصیِ Sentinel (بدون تداخل) */
  --s-bg0: #05080f;
  --s-bg1: #0a0f1c;
  --s-panel: rgba(17, 25, 43, 0.72);
  --s-panel-solid: #0f1626;
  --s-line: rgba(132,162,214,0.12);
  --s-line-2: rgba(132,162,214,0.22);
  --s-signal: #16e0c0;
  --s-beam: #4b9cff;
  --s-grad: linear-gradient(135deg, #16e0c0 0%, #4b9cff 100%);
  --s-grad-soft: linear-gradient(135deg, rgba(22,224,192,0.14), rgba(75,156,255,0.08));
  --s-danger: #ff5a6e;
  --s-warn: #fbbf24;
  --s-radius: 16px;
  --s-radius-sm: 11px;
  --s-shadow: 0 18px 50px rgba(0,0,0,0.45);
  --s-shadow-lift: 0 24px 60px rgba(0,0,0,0.55);
  --s-glow: 0 0 0 1px rgba(22,224,192,0.14), 0 10px 30px rgba(22,224,192,0.10);
  --s-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --s-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* ── 2) پس‌زمینهٔ محیطی (آرام، نه شلوغ) ── */
html { overflow-x: hidden; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(1100px 620px at 100% -8%, rgba(22,224,192,0.055), transparent 55%),
    radial-gradient(900px 560px at -6% 8%, rgba(75,156,255,0.06), transparent 52%),
    var(--s-bg0) !important;
  color: var(--text) !important;
}
.bg-grid {
  background-image:
    linear-gradient(rgba(132,162,214,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132,162,214,0.035) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  -webkit-mask: radial-gradient(120% 100% at 100% 0%, #000 30%, transparent 78%);
  mask: radial-gradient(120% 100% at 100% 0%, #000 30%, transparent 78%);
}
.bg-glow {
  background: radial-gradient(circle, rgba(75,156,255,0.10) 0%, transparent 70%) !important;
}

/* ═══════════════ 3) APP SHELL (مشترکِ مشتری/ادمین) ═══════════════ */
.sidebar {
  position: fixed !important;
  right: 0; top: 0;
  width: 252px !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, rgba(13,19,33,0.96), rgba(9,13,24,0.96)) !important;
  border-left: 1px solid var(--s-line) !important;
  box-shadow: -14px 0 44px rgba(0,0,0,0.38) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 100 !important;
}
.sidebar::before {  /* هاله‌ی نازک بالای سایدبار */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 160px;
  background: radial-gradient(200px 120px at 80% 0%, rgba(22,224,192,0.10), transparent 70%);
  pointer-events: none;
}
.logo {
  padding: 22px 20px 18px !important;
  border-bottom: 1px solid var(--s-line) !important;
  position: relative;
}
.logo-icon, .logo-mark .logo-icon {
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
  /* نشانِ Parsbaan خودش رنگ دارد — قابِ خنثی تا رنگ‌ها با هم نجنگند */
  background: rgba(75,156,255,0.10) !important;
  border: 1px solid rgba(75,156,255,0.22) !important;
  box-shadow: 0 8px 22px rgba(11,87,208,0.22) !important;
  display: grid !important; place-items: center !important;
  padding: 4px !important;
  overflow: hidden;
}
.logo-icon img, .logo-mark .logo-icon img,
.brand-mark img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; display: block !important;
}
.brand-mark { background: rgba(75,156,255,0.10) !important; padding: 5px; }
.logo h1 { font-weight: 900 !important; letter-spacing: -0.01em !important; }
.logo p  { color: var(--text3) !important; }

.nav { padding: 14px 12px !important; gap: 3px !important; }
.nav-section {
  font-family: var(--s-mono);
  color: var(--text3) !important;
  letter-spacing: 0.12em !important;
}
.nav-item {
  display: flex !important; align-items: center; gap: 11px !important;
  width: 100% !important; text-align: right !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: none !important;
  color: var(--text2) !important;
  font-family: 'Vazirmatn', sans-serif !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  cursor: pointer;
  transition: transform 0.16s var(--s-ease), background 0.16s ease, color 0.16s ease !important;
  position: relative;
}
.nav-item:hover {
  background: rgba(132,162,214,0.06) !important;
  color: var(--text) !important;
  transform: translateX(-2px);
}
.nav-item.active {
  background: var(--s-grad-soft) !important;
  color: #eafff8 !important;
  border-color: rgba(22,224,192,0.24) !important;
  box-shadow: inset 0 0 0 1px rgba(22,224,192,0.08) !important;
}
.nav-item.active::before {
  content: ''; position: absolute;
  right: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px;
  background: var(--s-signal); border-radius: 3px 0 0 3px;
  box-shadow: 0 0 12px rgba(22,224,192,0.7);
}
.nav-item .nav-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.sidebar-footer {
  padding: 14px 16px !important;
  border-top: 1px solid var(--s-line) !important;
  color: var(--text3) !important;
  font-size: 11px;
}

/* پنل مشتری: shell باید تمام‌عرض باشد (اورایدِ max-width:900px قدیمی) */
#dashboard-page {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.main {
  margin-right: 252px !important;
  padding: 26px 30px 48px !important;
  min-height: 100vh;
  position: relative; z-index: 1;
}
/* محتوای داخلِ main روی نمایشگرِ خیلی پهن، برای خوانایی وسط‌چین و محدود */
.main > .page { max-width: 1180px; margin-inline: auto; }
.page { display: none; }
.page.active { display: block; animation: sFade 0.28s var(--s-ease); }
@keyframes sFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-header-text h2 {
  font-weight: 900 !important; letter-spacing: -0.02em !important;
}
.page-header-text h2, #dashboard-page h2 {
  background: linear-gradient(120deg, #ffffff 18%, #bfe9ff 52%, #16e0c0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══════════════ 4) SURFACES / CARDS ═══════════════ */
.card, .dash-section, .table-wrap, .cam-card, .lic-card,
.days-bar-wrap, .zone-box, .face-box, .modal, .s-card {
  background: var(--s-panel) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--s-shadow), inset 0 1px 0 rgba(255,255,255,0.035) !important;
}
.card, .dash-section, .cam-card, .table-wrap, .s-card {
  transition: transform 0.3s var(--s-ease), box-shadow 0.3s var(--s-ease), border-color 0.25s ease !important;
}
.card:hover, .dash-section:hover, .cam-card:hover, .s-card:hover {
  transform: translateY(-3px);
  border-color: rgba(22,224,192,0.26) !important;
  box-shadow: var(--s-shadow-lift), var(--s-glow) !important;
}
.card::after { background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 45%) !important; }
.card-value { font-weight: 900 !important; letter-spacing: -0.02em; }
.dash-section-title, .table-header h3 { letter-spacing: -0.01em; }

/* ═══════════════ 5) STATUS HERO (امضای طراحی) ═══════════════ */
.s-hero {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  padding: 24px 26px;
  border-radius: var(--s-radius);
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 88% -40%, rgba(22,224,192,0.14), transparent 62%),
    var(--s-panel) !important;
  border: 1px solid rgba(22,224,192,0.22);
  box-shadow: var(--s-shadow), inset 0 1px 0 rgba(255,255,255,0.05);
  margin-bottom: 22px;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.s-hero.state-warn {
  border-color: rgba(251,191,36,0.30);
  background: radial-gradient(600px 300px at 88% -40%, rgba(251,191,36,0.14), transparent 62%), var(--s-panel) !important;
}
.s-hero.state-alert {
  border-color: rgba(255,90,110,0.34);
  background: radial-gradient(600px 300px at 88% -40%, rgba(255,90,110,0.16), transparent 62%), var(--s-panel) !important;
}
.s-hero-text { flex: 1; min-width: 0; }
.s-hero-eyebrow {
  font-family: var(--s-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--text3); text-transform: uppercase; margin-bottom: 8px;
}
.s-hero-title {
  font-size: clamp(22px, 3.4vw, 30px); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--text);
}
.s-hero.state-safe  .s-hero-title { color: #d7fff5; }
.s-hero.state-warn  .s-hero-title { color: #fff2d1; }
.s-hero.state-alert .s-hero-title { color: #ffd9df; }
.s-hero-sub { margin-top: 8px; font-size: 13.5px; color: var(--text2); line-height: 1.7; }

/* ── نشانِ اسکنِ زندهٔ نگهبان (رینگِ چرخان) ── */
.s-sentinel {
  position: relative; flex-shrink: 0;
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
}
.s-sentinel::before, .s-sentinel::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
}
.s-sentinel::before {
  border: 1px solid rgba(22,224,192,0.28);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 0);
}
.s-sentinel::after {
  background: conic-gradient(from 0deg, transparent 0 300deg, rgba(22,224,192,0.55) 348deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation: sSweep 3.4s linear infinite;
}
.s-sentinel-core {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #17324a, #050b16 72%);
  border: 1px solid rgba(22,224,192,0.4);
  box-shadow: 0 0 26px rgba(22,224,192,0.35), inset 0 0 18px rgba(0,0,0,0.8);
  display: grid; place-items: center;
  position: relative; z-index: 1;
}
.s-sentinel-core::after {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #7dffe6, #16e0c0 55%, #0a8f78);
  box-shadow: 0 0 14px rgba(22,224,192,0.9);
  animation: sPulse 3s ease-in-out infinite;
}
.s-hero.state-warn  .s-sentinel-core { border-color: rgba(251,191,36,0.5); box-shadow: 0 0 26px rgba(251,191,36,0.35), inset 0 0 18px rgba(0,0,0,0.8); }
.s-hero.state-warn  .s-sentinel-core::after { background: radial-gradient(circle at 40% 35%, #ffe9ad, #fbbf24 55%, #b7860a); box-shadow: 0 0 14px rgba(251,191,36,0.9); }
.s-hero.state-warn  .s-sentinel::after { background: conic-gradient(from 0deg, transparent 0 300deg, rgba(251,191,36,0.55) 348deg, transparent 360deg); }
.s-hero.state-alert .s-sentinel-core { border-color: rgba(255,90,110,0.55); box-shadow: 0 0 26px rgba(255,90,110,0.4), inset 0 0 18px rgba(0,0,0,0.8); }
.s-hero.state-alert .s-sentinel-core::after { background: radial-gradient(circle at 40% 35%, #ffc2cc, #ff5a6e 55%, #a81f30); box-shadow: 0 0 16px rgba(255,90,110,0.95); animation-duration: 1.4s; }
.s-hero.state-alert .s-sentinel::after { background: conic-gradient(from 0deg, transparent 0 300deg, rgba(255,90,110,0.6) 348deg, transparent 360deg); animation-duration: 2s; }
@keyframes sSweep { to { transform: rotate(360deg); } }
@keyframes sPulse { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.18); opacity: 1; } }

/* ── ردیفِ آمارِ سریع ── */
.s-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin-bottom: 22px; }
.s-stat {
  background: var(--s-panel) !important;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  transition: transform 0.25s var(--s-ease), border-color 0.25s ease;
}
.s-stat:hover { transform: translateY(-2px); border-color: rgba(22,224,192,0.22); }
.s-stat-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; background: var(--s-grad-soft); }
.s-stat-ic.warn { background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(251,191,36,0.05)); }
.s-stat-ic.beam { background: linear-gradient(135deg, rgba(75,156,255,0.16), rgba(75,156,255,0.05)); }
.s-stat-v { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.s-stat-l { font-size: 12px; color: var(--text2); margin-top: 5px; }

/* ═══════════════ 6) BUTTONS ═══════════════ */
.btn-primary, .zb-green, .fbtn-green, .btn-enter {
  border: none !important;
  color: #04120f !important;
  background: var(--s-grad) !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(0,0,0,0.16) inset, 0 10px 22px rgba(22,224,192,0.26) !important;
  transition: transform 0.16s var(--s-ease), box-shadow 0.16s var(--s-ease), filter 0.16s ease !important;
}
.btn-primary:hover, .zb-green:hover, .fbtn-green:hover, .btn-enter:hover {
  transform: translateY(-2px) !important; filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -2px 0 rgba(0,0,0,0.2) inset, 0 16px 30px rgba(22,224,192,0.34) !important;
}
.btn-primary:active, .btn-enter:active { transform: translateY(1px) !important; }

/* دکمه‌های ماژولِ دوربین: شکلِ یکدست، رنگِ کدگذاری‌شدهٔ inline حفظ می‌شود */
.zone-setup-btn {
  border: none !important;
  color: #04120f !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 6px 16px rgba(0,0,0,0.30) !important;
  transition: transform 0.16s var(--s-ease), filter 0.16s ease, box-shadow 0.16s ease !important;
}
.zone-setup-btn:hover { transform: translateY(-2px) !important; filter: brightness(1.08) saturate(1.05); }
.zone-setup-btn:active { transform: translateY(1px) !important; }

.refresh-btn, .logout-btn, .btn-ghost, .zb-ghost, .copy-btn, .fbtn-gray {
  background: rgba(21,29,48,0.85) !important;
  border: 1px solid var(--s-line-2) !important;
  color: var(--text2) !important;
  transition: transform 0.16s var(--s-ease), border-color 0.16s ease, color 0.16s ease !important;
}
.refresh-btn:hover, .btn-ghost:hover, .zb-ghost:hover, .copy-btn:hover, .fbtn-gray:hover {
  transform: translateY(-1px);
  border-color: rgba(22,224,192,0.45) !important; color: var(--s-signal) !important;
}
.logout-btn:hover { border-color: rgba(255,90,110,0.5) !important; color: var(--s-danger) !important; }

/* ═══════════════ 7) TABLES / BADGES ═══════════════ */
.table-header { background: var(--s-grad-soft) !important; border-bottom: 1px solid var(--s-line) !important; }
th { background: rgba(10,15,26,0.6) !important; color: var(--text3) !important; border-bottom: 1px solid var(--s-line) !important; letter-spacing: 0.04em; }
td { border-bottom: 1px solid var(--s-line) !important; }
tr:hover td { background: rgba(132,162,214,0.04) !important; }
.td-mono, .hwid-box, .license-key, #diag-log { font-family: var(--s-mono) !important; }
.badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: 0.01em; }
.badge.safe { background: rgba(16,185,129,0.14) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.28) !important; }
/* رَپِری که ui-kit.js دورِ جدول‌ها می‌سازد؛ اسکرول افقی در صفحهٔ کوچک */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═══════════════ 8) INPUTS / CONTROLS ═══════════════ */
.form-group input, .form-group select, .form-group textarea,
.zone-box input, .zone-box select, .face-box input, .face-box select,
#event-filters input, #event-filters select,
#behavior-modal input, #behavior-modal select,
#sound-modal input, .modal input, .modal select {
  background: rgba(9,13,24,0.85) !important;
  border: 1px solid var(--s-line-2) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.zone-box input:focus, .zone-box select:focus, .face-box input:focus, .face-box select:focus,
#event-filters input:focus, #event-filters select:focus, .modal input:focus, .modal select:focus,
#license-input:focus {
  border-color: rgba(22,224,192,0.55) !important;
  box-shadow: 0 0 0 4px rgba(22,224,192,0.12) !important; outline: none !important;
}
#license-input {
  background: rgba(9,13,24,0.9) !important;
  border: 1px solid var(--s-line-2) !important;
  border-radius: 14px !important;
  font-family: var(--s-mono) !important;
}
.switch.on { background: var(--s-signal) !important; }
.mod-chk:has(input:checked) { border-color: rgba(22,224,192,0.45) !important; background: rgba(22,224,192,0.08) !important; }
input[type=range] { accent-color: var(--s-signal); }
.days-bar-fill { background: var(--s-grad) !important; box-shadow: 0 0 16px rgba(22,224,192,0.45) !important; }

/* ═══════════════ 9) MODALS ═══════════════ */
.zone-modal, .modal-overlay { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; background: rgba(4,7,14,0.72) !important; }
.zone-box, .face-box, .modal { animation: sModalIn 0.34s var(--s-ease); box-shadow: var(--s-shadow-lift) !important; }
@keyframes sModalIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ═══════════════ 10) LOGIN — آرام‌تر و صیقلی‌تر ═══════════════ */
#login-page { max-width: 460px !important; }
.tagline h1 {
  background: linear-gradient(120deg, #ffffff 12%, #bfe9ff 48%, #16e0c0 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 0 44px rgba(22,224,192,0.18);
}
.btn-enter { border-radius: 14px !important; background: var(--s-grad) !important; }
/* چشمِ ورود: آرام‌تر، کم‌فرکانس‌تر (نه حذف، فقط مهار) */
.eye-scan { animation-duration: 5s !important; opacity: 0.7 !important; }
.eye-radar { animation-duration: 6s !important; }
.eye-outer-ring { animation-duration: 20s !important; }
.eye-outer-ring-rev { animation-duration: 16s !important; }
.eye-iris-inner-ring { animation-duration: 12s !important; }
.eye-pulse-ring { animation-duration: 5s !important; }
.eye-flank { animation-duration: 3.4s !important; }
.eye-label { animation: none !important; opacity: 0.55 !important; }
.eye { border-color: rgba(22,224,192,0.32) !important; box-shadow: 0 0 0 3px rgba(22,224,192,0.06), 0 0 44px rgba(22,224,192,0.16), inset 0 0 40px rgba(0,0,0,0.9) !important; }

/* ═══════════════ 11) MOBILE — drawer + burger ═══════════════ */
.ui-burger {
  display: none; position: fixed; top: 12px; right: 12px; z-index: 160;
  width: 46px; height: 46px; border-radius: 13px;
  border: 1px solid var(--s-line-2); background: rgba(13,19,33,0.92);
  color: var(--text); font-size: 20px; cursor: pointer;
  backdrop-filter: blur(12px); box-shadow: var(--s-shadow);
  align-items: center; justify-content: center;
}
.ui-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 140; backdrop-filter: blur(3px); }
body.ui-nav-open .ui-sidebar-overlay { display: block; }

@media (max-width: 860px) {
  .ui-burger { display: inline-flex; }
  .sidebar {
    width: min(280px, 86vw) !important;
    transform: translateX(105%);
    transition: transform 0.32s var(--s-ease);
    z-index: 150 !important;
  }
  body.ui-nav-open .sidebar { transform: translateX(0); }
  .main { margin-right: 0 !important; padding: 66px 16px 32px !important; }
  #dashboard-page { max-width: 100% !important; padding: 0 !important; }
  .cards, .s-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dash-grid-2 { grid-template-columns: 1fr !important; }
  .s-hero { flex-direction: column; text-align: center; align-items: center; }
  .zone-box, .face-box, .modal { max-width: 100% !important; }
  .zone-modal, .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
}
@media (max-width: 460px) {
  .cards, .s-stats { grid-template-columns: 1fr !important; }
  .page-header-text h2 { font-size: 20px !important; }
}

/* ═══════════════ 12) Reduced motion ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  *, .s-sentinel::after, .s-sentinel-core::after,
  .eye-scan, .eye-radar, .eye-outer-ring, .eye-outer-ring-rev {
    animation: none !important;
    transition: none !important;
  }
  .card:hover, .dash-section:hover, .cam-card:hover, .s-card:hover, .nav-item:hover { transform: none; }
}