:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.login-page{background:radial-gradient(circle at 50% 20%,#175cff57,#0000 34%),radial-gradient(circle at 50% 90%,#00beff42,#0000 38%),linear-gradient(#040914 0%,#071a3d 55%,#063f9d 100%);place-items:center;min-height:100vh;padding:32px 18px;display:grid}.login-wrapper{width:100%;max-width:520px}.login-brand{text-align:center;margin-bottom:28px}.login-logo-wrap{background:0 0;border-radius:50%;width:100px;height:100px;margin:0 auto 18px;overflow:hidden}.login-logo{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.login-brand h1{color:#fff;margin:0;font-size:clamp(28px,5vw,40px);line-height:1.15}.login-brand p{color:#8cddff;max-width:470px;margin:12px auto 0;font-size:16px;line-height:1.5}.login-card{background:linear-gradient(145deg,#0f3574f5,#05183ef7);border:1px solid #44c3ffbf;border-radius:20px;width:100%;padding:30px;box-shadow:0 0 26px #00a6ff5c,0 24px 60px #0006}.login-card h2{color:#fff;text-align:center;margin:0;font-size:28px}.login-card-intro{color:#a7c7e5;text-align:center;margin:8px 0 25px}.login-form{flex-direction:column;gap:18px;display:flex}.login-form .ui-field{text-align:left}.login-form .ui-field span{color:#fff;font-weight:600}.login-form .ui-field input{color:#fff;background:#051a42d1;border:1px solid #4eb7ffbf;min-height:52px}.login-form .ui-button{color:#04213e;background:linear-gradient(90deg,#31e5ee,#2fbcff);width:100%;min-height:52px;margin-top:3px}.login-links{color:#d6e4f2;text-align:center;margin-top:20px}.login-links p{color:#d6e4f2;margin:16px 0 0}.login-links a,.login-footer-link{color:#69e4ff;font-weight:600;text-decoration:none}.login-divider{color:#a9bdd1;align-items:center;gap:12px;margin:24px 0 18px;display:flex}.login-divider:before,.login-divider:after{content:"";background:#78b1e061;flex:1;height:1px}.login-google{color:#fff;cursor:pointer;background:#081e48db;border:1px solid #5fbbffbf;border-radius:10px;width:100%;min-height:48px;font-weight:700}.login-footer-link{text-align:center;margin-top:24px;display:block}@media (width<=560px){.login-page{align-items:start;padding:24px 16px 40px}.login-card{padding:24px 20px}}.client-home{flex-direction:column;gap:24px;padding-bottom:20px;display:flex}.home-stats{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.stat-card{background:linear-gradient(#081f4eeb,#04153bf5);border:1px solid #36a0ff57;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:150px;display:flex;box-shadow:inset 0 0 30px #0065ff14,0 12px 28px #0000002e}.stat-card svg{color:#1bbcff;width:34px;height:34px}.stat-card strong{font-size:30px}.stat-card span{font-size:15px}.stat-card small{color:#44dc83}.stat-card:nth-child(2) svg,.stat-card:nth-child(2) small{color:#c86bff}.stat-card:nth-child(3) svg,.stat-card:nth-child(3) small{color:#20e0cf}.stat-card:nth-child(4) svg,.stat-card:nth-child(4) small{color:#ff8a1f}.home-services{background:#36a0ff2e;border:1px solid #36a0ff57;border-radius:20px;grid-template-columns:repeat(5,1fr);gap:1px;display:grid;overflow:hidden}.service-item{text-align:center;cursor:pointer;background:#051840f5;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:155px;padding:16px 10px;transition:background .2s,transform .2s;display:flex}.service-item:hover{background:#0a3577f5}.service-item svg{color:#1bbcff;width:38px;height:38px}.service-item:first-child svg{color:#49d57c}.service-item:nth-child(2) svg{color:#c86bff}.service-item:nth-child(3) svg{color:#ff9a24}.service-item:nth-child(4) svg{color:#8ba8c9}.service-item:nth-child(5) svg{color:#55e5ff}.service-item strong{color:#fff;font-size:16px}.service-item span{color:#93a9c7;font-size:13px;line-height:1.3}.protection-card{background:#051840d6;border:1px solid #36a0ff57;border-radius:20px;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px;display:grid}.protection-card>svg{color:#66e8ff;width:54px;height:54px}.protection-card div{flex-direction:column;gap:5px;display:flex}.protection-card strong{color:#5fe6ff;font-size:18px}.protection-card span{color:#46d88b}.protection-card small{color:#6bbcff}.protection-card button{color:#69baff;cursor:pointer;background:#06307cb3;border:1px solid #36a0ff42;border-radius:22px;min-height:42px;padding:0 18px}@media (width<=760px){.client-home{gap:16px}.home-stats{grid-template-columns:repeat(2,1fr);gap:10px}.stat-card{border-radius:15px;gap:5px;min-height:125px}.stat-card svg{width:28px;height:28px}.stat-card strong{font-size:26px}.stat-card span{font-size:13px}.stat-card small{font-size:11px}.home-services{border-radius:16px;grid-template-columns:repeat(6,1fr)}.service-item{grid-column:span 2;min-height:125px;padding:12px 6px}.service-item:nth-child(4){grid-column:2/span 2}.service-item:nth-child(5){grid-column:4/span 2}.service-item svg{width:30px;height:30px}.service-item strong{font-size:13px}.service-item span{font-size:10px}.protection-card{grid-template-columns:auto 1fr;gap:12px;padding:16px}.protection-card>svg{width:42px;height:42px}.protection-card strong{font-size:15px}.protection-card span,.protection-card small{font-size:12px}.protection-card button{grid-column:1/-1;width:100%}}.stat-card-link{color:inherit;cursor:pointer;text-decoration:none}.stat-card-link:visited{color:inherit}.stat-card-link:active{transform:scale(.98)}.client-cameras{flex-direction:column;gap:20px;display:flex}.cameras-header h1{margin:0;font-size:28px}.cameras-header p{color:#75d9ff;margin:5px 0 0}.camera-summary{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.camera-summary-card{background:#051840e0;border:1px solid #36a0ff57;border-radius:16px;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;min-height:105px;padding:16px;display:grid}.camera-summary-card svg{color:#27c9ff;grid-row:1/3}.camera-summary-card span{color:#a9bdd3;font-size:13px}.camera-summary-card strong{font-size:26px}.camera-summary-card.online svg{color:#49df88}.camera-summary-card.offline svg{color:#ff5f8d}.camera-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.camera-card{background:#051840e0;border:1px solid #36a0ff57;border-radius:18px;overflow:hidden}.camera-card-header{justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:12px 14px;display:flex}.camera-card-header>div{flex-direction:column;gap:4px;display:flex}.camera-status{font-size:12px}.camera-status.online{color:#46df88}.camera-status.offline{color:#ff668f}.camera-fullscreen-button{color:#72dfff;background:#0a3479c7;border:1px solid #36a0ff57;border-radius:10px;place-items:center;width:38px;height:38px;display:grid}.camera-preview{aspect-ratio:16/9;color:#6fdcff;background:radial-gradient(circle,#0078ff2e,#0000 60%),#030f27eb;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.camera-preview span{color:#91a9c5;font-size:13px}@media (width<=760px){.cameras-header h1{font-size:23px}.cameras-header p{font-size:13px}.camera-summary{gap:8px}.camera-summary-card{flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:90px;padding:10px 6px;display:flex}.camera-summary-card svg{width:23px;height:23px}.camera-summary-card strong{font-size:22px}.camera-list{grid-template-columns:1fr}}.client-shell{color:#fff;background:radial-gradient(circle at 100% 0,#0066ff2e,#0000 34%),linear-gradient(#061121 0%,#0a2d73 100%);min-height:100vh;display:flex}.client-sidebar{background:linear-gradient(#07204dfa,#05368dfa);border-right:1px solid #4cb2ff47;flex-direction:column;width:250px;min-height:100vh;display:flex}.client-sidebar-brand{flex-direction:column;align-items:center;gap:10px;padding:24px 16px;display:flex}.client-sidebar-logo{object-fit:cover;border-radius:50%;width:110px;height:110px}.client-sidebar-subtitle{color:#b8dfff;font-size:14px}.client-sidebar-menu{flex-direction:column;gap:8px;padding:12px;display:flex}.client-menu-link,.client-logout-button{color:#d9edff;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:12px;min-height:48px;padding:0 16px;text-decoration:none;display:flex}.client-menu-link:hover,.client-menu-link.active{color:#fff;background:linear-gradient(90deg,#0e9eff,#2cd9ef)}.client-sidebar-footer{margin-top:auto;padding:16px}.client-main-area{flex:1;min-width:0}.client-topbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#041026c2;border-bottom:1px solid #4cb2ff38;justify-content:space-between;align-items:center;gap:20px;min-height:90px;padding:18px 28px;display:flex}.client-topbar-left{align-items:center;gap:16px;display:flex}.client-topbar h1{margin:0;font-size:28px}.client-topbar p{color:#65d9ff;margin:4px 0 0}.client-menu-button{color:#fff;cursor:pointer;background:0 0;border:0;display:none}.client-profile{align-items:center;gap:10px;display:flex}.client-profile-avatar{background:linear-gradient(145deg,#005eff,#16c8ff);border-radius:50%;place-items:center;width:42px;height:42px;font-weight:700;display:grid}.client-profile-text{flex-direction:column;display:flex}.client-profile-text span{color:#79d8ff;font-size:13px}.client-page-content{padding:24px}.client-bottom-nav{display:none}@media (width<=760px){.client-shell{padding-bottom:76px;display:block}.client-sidebar{display:none}.client-topbar{min-height:72px;padding:12px 16px}.client-menu-button{display:block}.client-topbar h1{font-size:21px}.client-topbar p{font-size:12px}.client-profile-text,.client-profile svg{display:none}.client-page-content{padding:18px 14px}.client-bottom-nav{z-index:100;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#041432f7;border-top:1px solid #4cb2ff52;grid-template-columns:repeat(4,1fr);min-height:68px;display:grid;position:fixed;bottom:0;left:0;right:0}.client-bottom-link{color:#8eacd0;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:11px;text-decoration:none;display:flex}.client-bottom-link.active{color:#39d9ff}}.client-profile-avatar{background:0 0;padding:0;overflow:hidden}.client-profile-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}@media (width<=760px){.client-topbar{grid-template-columns:44px 1fr 44px;align-items:center;display:grid}.client-topbar-left{display:contents}.client-menu-button{grid-column:1;justify-self:start}.client-topbar-left h1{white-space:nowrap;grid-column:2;justify-self:center;font-size:20px}.client-profile{grid-column:3;justify-self:end}.client-profile-avatar{width:42px;height:42px}}.client-topbar{grid-template-columns:48px 1fr 56px;align-items:center;min-height:78px;padding:10px 14px;display:grid;overflow:hidden}.client-menu-button{grid-column:1;justify-content:flex-start;align-items:center;display:flex}.client-welcome{text-align:center;grid-column:2}.client-welcome h1{color:#fff;margin:0;font-size:21px;line-height:1}.client-profile{border-radius:50%;grid-column:3;justify-content:center;align-items:center;width:52px;height:52px;display:flex;overflow:hidden}.client-profile-logo{object-fit:cover;border-radius:50%;display:block;width:52px!important;max-width:52px!important;height:52px!important;max-height:52px!important}:root{--color-background:#061121;--color-surface:#0b1f36;--color-surface-soft:#102a47;--color-border:#1d3d62;--color-primary:#0b78e3;--color-primary-hover:#168cf5;--color-success:#2bd36b;--color-danger:#ff5562;--color-warning:#f7b917;--color-text:#f8fafc;--color-text-muted:#92a4bb;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--shadow-card:0 14px 34px #00000038;color:var(--color-text);background:var(--color-background);font-family:Inter,Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{background:radial-gradient(circle at top right, #0e5cb41f, transparent 34%), var(--color-background);min-width:320px}button,input,select,textarea{font:inherit}.app-shell{background:0 0;width:100%;min-height:100vh}.app-page{width:100%;max-width:1180px;margin:0 auto;padding:24px}.app-page h1{color:var(--color-text);margin:0}.app-page p{color:var(--color-text-muted)}@media (width<=640px){.app-page{padding:18px 16px 96px}}.ui-card{border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(145deg, var(--color-surface), #08182b);box-shadow:var(--shadow-card)}.ui-button{border-radius:var(--radius-sm);color:#fff;cursor:pointer;border:0;min-height:46px;padding:0 18px;font-weight:700}.ui-button-primary{background:var(--color-primary)}.ui-button-primary:hover{background:var(--color-primary-hover)}.ui-button-secondary{color:var(--color-text);border:1px solid var(--color-border);background:var(--color-surface-soft)}.ui-button:disabled{opacity:.6;cursor:not-allowed}.ui-field{flex-direction:column;gap:8px;display:flex}.ui-field span{color:var(--color-text-muted);font-size:13px}.ui-field input{width:100%;min-height:48px;color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#07182a;outline:none;padding:0 14px}.ui-field input:focus{border-color:var(--color-primary)}.status-badge{border-radius:999px;align-items:center;padding:5px 10px;font-size:12px;display:inline-flex}.status-online{color:var(--color-success);background:#2bd36b1f}.status-offline{color:var(--color-danger);background:#ff55621f}.status-default{color:var(--color-text-muted);background:#92a4bb1f}