:root{--brand: #1f3a2d;--brand-deep: #162a21;--brand-soft: #e6efe9;--accent: #c88f2a;--accent-soft: #f6ead2;--cream: #faf6ee;--cream-2: #f3ecdf;--text: #1c2a22;--text-muted: #6b776f;--text-faint: #9aa49d;--surface: #ffffff;--border: #ece4d5;--divider: #f1ebe0;--success: #2e7d52;--success-soft: #e2f0e7;--warning: #b07a1f;--warning-soft: #f7ecd4;--danger: #c0392b;--danger-soft: #f9e5e1;--info: #3a6b8a;--info-soft: #e4eef4;--font: "Tajawal", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;--fs-xs: .72rem;--fs-sm: .85rem;--fs-base: 1rem;--fs-md: 1.15rem;--fs-lg: 1.4rem;--fs-xl: 1.8rem;--fs-2xl: 2.4rem;--fs-hero: 3rem;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 20px;--s6: 24px;--s8: 32px;--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--r-pill: 999px;--touch: 44px;--shadow-sm: 0 1px 2px rgba(22, 42, 33, .05);--shadow-md: 0 4px 14px rgba(22, 42, 33, .08);--shadow-lg: 0 12px 32px rgba(22, 42, 33, .14);--shell-height: 60px;--nav-height: 66px;--content-max: 720px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;font-family:var(--font);color:var(--text);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,input,button,textarea,select{font-variant-numeric:lining-nums;font-feature-settings:"tnum" 1}h1,h2,h3,h4,p{margin:0}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}img,svg{display:block;max-width:100%}ul{margin:0;padding:0;list-style:none}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream)}.app-main{flex:1;width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--s4) var(--s4) calc(var(--nav-height) + var(--s6))}.shell-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--s3);height:var(--shell-height);padding:0 var(--s4);padding-top:env(safe-area-inset-top);background:var(--brand-deep);color:#fff}.shell-topbar__brand{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:var(--fs-md);color:#fff}.shell-topbar__brand-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);background:var(--accent);color:var(--brand-deep);font-weight:700;font-size:var(--fs-md)}.shell-topbar__tagline{font-size:var(--fs-xs);color:#fff9;font-weight:400}.shell-topbar__spacer{flex:1}.shell-topbar__user{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:#ffffffe6}.shell-topbar__avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--brand-deep);font-weight:700;font-size:var(--fs-sm)}.icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch);min-height:var(--touch);border:none;border-radius:var(--r-md);background:transparent;color:inherit}.icon-button:active{background:#ffffff24}.icon-button .badge-dot{position:absolute;top:7px;inset-inline-end:7px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--accent);color:var(--brand-deep);font-size:.62rem;font-weight:700;line-height:16px;text-align:center}.shell-nav{position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 20px #162a210f;padding-bottom:env(safe-area-inset-bottom)}.shell-nav__inner{display:flex;max-width:var(--content-max);margin:0 auto;height:var(--nav-height)}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--text-faint);font-size:.62rem;font-weight:500;position:relative;transition:color .15s ease;white-space:nowrap}.nav-item svg{width:22px;height:22px}.nav-item--active{color:var(--brand);font-weight:700}.nav-item--active:before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}.screen-header{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4)}.screen-header__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}.screen-header__title{font-size:var(--fs-xl);font-weight:700;color:var(--brand)}.screen-header__subtitle{font-size:var(--fs-sm);color:var(--text-muted)}.screen-header__meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}.screen-header__actions{display:flex;align-items:center;gap:var(--s2)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm)}.card--flush{padding:0}.card__title{font-size:var(--fs-md);font-weight:700;color:var(--brand);margin-bottom:var(--s3)}.card__subtitle{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s3)}.section-stack{display:flex;flex-direction:column;gap:var(--s4)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}.hero{border-radius:var(--r-lg);padding:var(--s6);background:linear-gradient(150deg,var(--brand) 0%,var(--brand-deep) 100%);color:#fff;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--s4)}.hero__label{font-size:var(--fs-sm);color:#ffffffb8}.hero__value{font-size:var(--fs-hero);font-weight:700;line-height:1;color:#fff}.hero__value .hero__unit{font-size:var(--fs-md);font-weight:400;color:#ffffffb8}.hero__row{display:flex;gap:var(--s4);flex-wrap:wrap}.hero__stat{display:flex;flex-direction:column;gap:2px}.hero__stat .hero__stat-value{font-size:var(--fs-lg);font-weight:700}.hero__stat .hero__stat-label{font-size:var(--fs-xs);color:#ffffffb8}.stat{display:flex;flex-direction:column;gap:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--shadow-sm);min-height:104px}.stat__label{font-size:var(--fs-sm);color:var(--text-muted);font-weight:500}.stat__value{font-size:var(--fs-xl);font-weight:700;color:var(--brand);line-height:1.1}.stat__unit{font-size:var(--fs-xs);color:var(--text-faint)}.stat--accent .stat__value{color:var(--accent)}.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:500;background:var(--cream-2);color:var(--text-muted);white-space:nowrap}.pill--success{background:var(--success-soft);color:var(--success)}.pill--warning{background:var(--warning-soft);color:var(--warning)}.pill--danger{background:var(--danger-soft);color:var(--danger)}.pill--info{background:var(--info-soft);color:var(--info)}.pill--brand{background:var(--brand-soft);color:var(--brand)}.pill__dot{width:7px;height:7px;border-radius:50%;background:currentColor}.list__row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--divider)}.list__row:last-child{border-bottom:none}.list__row-body{flex:1;min-width:0}.list__row-title{font-size:var(--fs-base);font-weight:600;color:var(--text)}.list__row-sub{font-size:var(--fs-sm);color:var(--text-muted);overflow-wrap:anywhere}.list__row-meta{font-size:var(--fs-xs);color:var(--text-faint)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--touch);padding:0 var(--s5);border:1px solid transparent;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:500;transition:transform .05s ease,background .15s ease,border-color .15s ease}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--brand);color:#fff}.btn--primary:active{background:var(--brand-deep)}.btn--accent{background:var(--accent);color:var(--brand-deep)}.btn--accent:active{background:#b97e1f}.btn--ghost{background:transparent;border-color:var(--border);color:var(--brand)}.btn--danger{background:transparent;border-color:var(--danger);color:var(--danger)}.btn--block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--sm{min-height:34px;padding:0 var(--s3);font-size:var(--fs-sm)}.field{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s4)}.field__label{font-size:var(--fs-sm);font-weight:500;color:var(--brand)}.input,.select,.textarea{width:100%;min-height:var(--touch);padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-base)}.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.textarea{min-height:96px;resize:vertical}.alert{display:flex;gap:var(--s2);padding:var(--s3);border-radius:var(--r-md);font-size:var(--fs-sm);margin-bottom:var(--s4)}.alert--error{background:var(--danger-soft);color:var(--danger)}.alert--info{background:var(--info-soft);color:var(--info)}.alert--success{background:var(--success-soft);color:var(--success)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);text-align:center;padding:var(--s8) var(--s4);color:var(--text-muted)}.empty-state__icon{width:56px;height:56px;border-radius:50%;background:var(--cream-2);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg)}.empty-state__title{font-size:var(--fs-md);font-weight:700;color:var(--brand)}.empty-state__body{font-size:var(--fs-sm);max-width:320px}.loading{padding:var(--s8);text-align:center;color:var(--text-muted)}.chart{direction:ltr}.chart .recharts-cartesian-axis-tick text{font-family:var(--font);font-size:var(--fs-xs)}.chart .recharts-legend-item-text{font-family:var(--font);font-size:var(--fs-sm)}.heatmap{display:grid;gap:3px}.heatmap__cell{aspect-ratio:1;border-radius:4px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--text-faint)}.heatmap__legend{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--s3)}.heatmap__swatch{width:14px;height:14px;border-radius:3px;background:var(--brand)}.camera-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:500;background:var(--cream-2);color:var(--text-muted)}.camera-chip__dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint)}.camera-chip--online .camera-chip__dot{background:var(--success)}.camera-chip--offline .camera-chip__dot{background:var(--danger)}.camera-chip--degraded .camera-chip__dot{background:var(--warning)}.login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--s5);background:var(--brand-deep);background-image:radial-gradient(circle at 50% 18%,var(--brand) 0%,var(--brand-deep) 68%)}.login__card{width:100%;max-width:400px;background:var(--surface);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--shadow-lg)}.login__brand{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-bottom:var(--s2);font-size:var(--fs-2xl);font-weight:700;color:var(--brand)}.login__brand-mark{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--r-md);background:var(--accent);color:var(--brand-deep);font-weight:700}.login__subtitle{text-align:center;color:var(--text-muted);font-size:var(--fs-sm);margin-bottom:var(--s6)}.display{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--s6);background:var(--brand-deep);color:#fff}.display__panel{width:100%;max-width:480px;text-align:center;display:flex;flex-direction:column;gap:var(--s4);align-items:center}.display__wait{font-size:var(--fs-lg);color:#ffffffb3}.display__value{font-size:4rem;font-weight:700;color:var(--accent);line-height:1}.display__unit{font-size:var(--fs-md);color:#ffffffb3}.display__queue{font-size:var(--fs-md);color:#fff}.muted{color:var(--text-muted)}.faint{color:var(--text-faint)}.row{display:flex;align-items:center;gap:var(--s2)}.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}.nowrap{white-space:nowrap}.dir-ltr{direction:ltr}.text-center{text-align:center}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mb-3{margin-bottom:var(--s3)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media (min-width: 768px){.app-main{padding:var(--s6) var(--s6) calc(var(--nav-height) + var(--s8))}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.hero{padding:var(--s8)}}