:root{--bg:#09111f;--panel:#101b2f;--panel2:#14243e;--line:#263c5e;--text:#f1f5fb;--muted:#91a5c1;--accent:#e83d43;--accent2:#c52c32;--ok:#2dcc79;--warn:#e6ad42;--danger:#ff6a70;--shadow:0 22px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}body{background:radial-gradient(circle at 86% 7%,rgba(232,61,67,.10),transparent 28%),var(--bg)}button,input,select,summary{font:inherit}a{color:inherit;text-decoration:none}.hidden{display:none!important}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#bb282f);display:grid;place-items:center;font-size:12px;font-weight:900;letter-spacing:.05em;box-shadow:0 10px 28px rgba(232,61,67,.24)}.brand strong{font-size:17px;letter-spacing:.075em}.brand small{display:block;color:#8296b3;font-size:10px;letter-spacing:.13em;margin-top:2px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.17em;color:#d9e4f4}.eyebrow.dark{color:#8398b7}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.12fr .88fr}.login-hero{position:relative;min-height:660px;background:linear-gradient(180deg,rgba(4,9,17,.18),rgba(4,9,17,.9)),url("https://images.unsplash.com/photo-1722553260455-b30e381ed96b?auto=format&fit=crop&q=88&w=1900") center/cover}.brand-absolute{position:absolute;left:48px;top:40px}.hero-copy{position:absolute;left:48px;right:48px;bottom:54px;max-width:830px}.hero-copy h1{font-size:clamp(44px,5vw,76px);line-height:.97;margin:14px 0 18px}.hero-copy p{font-size:18px;line-height:1.55;color:#c6d3e6;max-width:700px}.hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.hero-pills span{padding:11px 14px;border-radius:15px;background:rgba(8,17,31,.55);border:1px solid rgba(255,255,255,.14);font-size:13px;backdrop-filter:blur(10px)}
.login-side{display:grid;place-items:center;padding:46px;background:linear-gradient(180deg,#0d1728,#09101d)}.auth-card{width:min(470px,100%);padding:38px;border:1px solid var(--line);background:rgba(16,27,47,.95);border-radius:27px;box-shadow:var(--shadow)}.auth-card h2{font-size:32px;margin:12px 0 9px}.auth-card>p{margin:0 0 25px;color:var(--muted);line-height:1.55}.auth-card label,.dialog-form label{display:block;font-size:13px;color:#c9d6e8;margin:17px 0 8px}input,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #304769;background:#0b1526;color:var(--text);outline:none}input:focus,select:focus{border-color:#6786ae;box-shadow:0 0 0 4px rgba(103,134,174,.11)}.password-row{position:relative}.password-row input{padding-right:90px}.text-button{position:absolute;right:11px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#9eb1cc;cursor:pointer}.primary{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;padding:12px 16px;border-radius:12px;cursor:pointer;box-shadow:0 10px 26px rgba(232,61,67,.18)}.primary:hover{filter:brightness(1.05)}.full{width:100%}.auth-card .primary{margin-top:23px}.auth-note{font-size:11px;line-height:1.5;color:#6f85a5;margin-top:17px}
.flash-stack{position:fixed;right:20px;top:20px;z-index:1000;display:grid;gap:8px}.flash{max-width:390px;padding:12px 15px;border-radius:12px;background:#172841;border:1px solid #385579;box-shadow:var(--shadow);font-size:13px}.flash.success{border-color:rgba(45,204,121,.4)}.flash.error{border-color:rgba(255,106,112,.5)}
.app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:26px 20px;background:#0a1423;border-right:1px solid var(--line)}.side-nav{display:grid;gap:6px;margin-top:29px}.side-nav a{padding:11px 13px;border-radius:11px;color:#98abc6;font-size:14px}.side-nav a:hover{background:#15243c;color:#fff}.side-user{position:absolute;left:20px;right:20px;bottom:20px;padding:13px;border-radius:15px;background:#101d31;border:1px solid #253a5a}.side-user strong{display:block}.side-user small{display:block;color:#8195b2;overflow:hidden;text-overflow:ellipsis;margin:3px 0 10px}.ghost{border:1px solid #2e4568;background:transparent;color:#a9bbd2;border-radius:10px;padding:9px 11px;cursor:pointer}.ghost:hover{background:#15243b;color:#fff}
.page{padding:30px 34px 60px;max-width:1500px;width:100%;margin:0 auto}.page-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.page-head h1,.client-title h1{font-size:32px;margin:6px 0}.page-head p,.client-title p,.panel-head p{margin:0;color:var(--muted)}.link-button{display:inline-flex;align-items:center;justify-content:center}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}.stat-card{padding:20px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(145deg,#101c30,#0e192b)}.stat-card strong{display:block;font-size:30px}.stat-card span{color:var(--muted);font-size:12px}
.panel{scroll-margin-top:20px;border:1px solid var(--line);background:rgba(15,27,47,.82);border-radius:21px;margin:18px 0;padding:20px;box-shadow:0 12px 34px rgba(0,0,0,.12)}.panel-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.panel h2{margin:0 0 5px;font-size:21px}.editor{border:1px solid #2b4162;background:#0c1728;border-radius:14px;margin:13px 0 18px}.editor summary{padding:12px 14px;cursor:pointer;color:#cad7e8;font-weight:700;font-size:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:3px 14px 15px}.form-grid label{font-size:12px;color:#91a5c0}.form-grid label input,.form-grid label select{margin-top:7px}.form-grid .wide{grid-column:1/-1}.check-field{border:1px solid #2c4263;border-radius:12px;padding:10px 12px}.check-field legend{padding:0 6px;color:#96a9c4;font-size:12px}.check{display:flex!important;align-items:center;gap:8px!important;margin:7px 0!important}.check input{width:auto;accent-color:var(--accent)}
.table-wrap{overflow:auto;border:1px solid #243a59;border-radius:14px}table{width:100%;border-collapse:collapse;min-width:800px}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid #203553;font-size:13px}th{color:#8095b2;font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:#0c1728}td strong{display:block}td small{display:block;color:#8195b1;margin-top:3px}.status-pill{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800;border:1px solid}.status-pill.on{color:#79e7ae;border-color:rgba(45,204,121,.35);background:rgba(45,204,121,.07)}.status-pill.off{color:#e3ba69;border-color:rgba(230,173,66,.35);background:rgba(230,173,66,.07)}.actions{display:flex;align-items:center;gap:6px}.actions form{margin:0}.mini{border:1px solid #314969;background:#101d31;color:#aebed2;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:11px;white-space:nowrap}.mini:hover{background:#1a2b46;color:#fff}.mini.danger{border-color:rgba(255,106,112,.35);color:#ff9ba0}.primary-mini{background:#1a2e48}.empty-cell{text-align:center;color:#7c91af;padding:25px}
dialog{width:min(520px,calc(100% - 32px));border:1px solid #354e72;background:#0d182a;color:var(--text);border-radius:18px;padding:0;box-shadow:var(--shadow)}dialog::backdrop{background:rgba(2,7,13,.75);backdrop-filter:blur(4px)}.dialog-form{padding:20px}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h3{margin:0}.x{border:0;background:transparent;color:#91a4be;font-size:27px;cursor:pointer}.dialog-form .primary{margin-top:16px}
.client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.client-card{padding:16px;border-radius:15px;border:1px solid #29405f;background:#0c1728}.client-top{display:flex;justify-content:space-between;gap:12px}.client-top small{display:block;color:#8296b1;margin-top:4px}.client-projects{margin:13px 0;color:#9eb0c7;font-size:12px;min-height:18px}.client-card details{border-top:1px solid #203553;padding-top:9px;margin-top:9px}.client-card summary{font-size:12px;color:#a6b7cc;cursor:pointer}.stack-form{display:grid;gap:4px;padding-top:7px}.inline-form{display:flex;gap:7px;padding-top:9px}.inline-form input{padding:8px 10px}.client-actions{margin-top:11px}.empty-card{padding:24px;border:1px dashed #304867;background:#0d182a;color:#8296b2;border-radius:15px}.empty-card.large{margin-top:22px;text-align:center;padding:45px}
.client-shell{min-height:100vh}.client-header{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 32px;border-bottom:1px solid var(--line);background:rgba(9,17,31,.93);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.client-user{display:flex;align-items:center;gap:10px}.client-user>div{text-align:right}.client-user strong{display:block;font-size:13px}.client-user small{display:block;color:#8194af;font-size:11px;margin-top:2px}.client-user form{margin:0}.client-main{padding:32px;max-width:1450px;margin:0 auto}.client-title{margin-bottom:22px}.project-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:25px}.project-tab{position:relative;min-height:126px;text-align:left;border:1px solid #29405f;background:#111d31;color:#fff;border-radius:17px;overflow:hidden;padding:0;cursor:pointer}.project-tab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}.project-tab:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,20,.05),rgba(5,11,20,.87))}.project-tab span{position:absolute;z-index:2;left:14px;right:14px;bottom:13px}.project-tab strong,.project-tab small{display:block}.project-tab small{font-size:10px;color:#b7c5d8;margin-top:4px}.project-tab.active{border-color:#6983a9;box-shadow:0 0 0 2px rgba(105,131,169,.15)}.project-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:13px}.project-heading h2{margin:0 0 5px}.project-heading p{margin:0;color:var(--muted)}
.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.camera-card{border:1px solid var(--line);background:#101c30;border-radius:18px;overflow:hidden}.camera-feed{position:relative;aspect-ratio:16/9;background:#03070c;overflow:hidden}.camera-feed img,.camera-feed video{width:100%;height:100%;object-fit:cover}.camera-feed:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(255,255,255,.012) 50%,rgba(0,0,0,.035) 50%);background-size:100% 4px}.feed-top,.feed-bottom{position:absolute;z-index:3;left:12px;right:12px;display:flex;justify-content:space-between;font-size:10px;font-weight:800;text-shadow:0 2px 7px #000}.feed-top{top:10px}.feed-bottom{bottom:10px}.rec-dot{color:#fff}.camera-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 14px}.camera-meta strong,.camera-meta small{display:block}.camera-meta strong{font-size:13px}.camera-meta small{font-size:10px;color:#8498b4;margin-top:3px}
@media(max-width:1050px){.login-shell{grid-template-columns:1fr}.login-hero{min-height:440px}.app-shell{grid-template-columns:88px 1fr}.sidebar{padding:20px 12px}.sidebar .brand>div:last-child,.side-nav a{font-size:0}.side-nav a::first-letter{font-size:14px}.side-user strong,.side-user small{display:none}.side-user{left:12px;right:12px}.stats-grid,.project-tabs{grid-template-columns:1fr 1fr}.client-grid{grid-template-columns:1fr}}
@media(max-width:720px){.brand-absolute,.hero-copy{left:24px;right:24px}.hero-copy{bottom:28px}.login-side{padding:20px}.auth-card{padding:26px}.app-shell{display:block}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.sidebar .brand>div:last-child{display:block}.side-nav,.side-user{display:none}.page{padding:22px 15px 40px}.page-head{align-items:flex-start}.page-head .link-button{display:none}.stats-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.client-header{padding:0 15px}.client-user>div{display:none}.client-main{padding:22px 15px}.project-tabs,.camera-grid{grid-template-columns:1fr}.project-heading{align-items:flex-start}.flash-stack{left:12px;right:12px;top:12px}.flash{max-width:none}}