:root {
  --ink: #10233f;
  --muted: #68778e;
  --line: #e4eaf2;
  --soft: #f4f7fb;
  --white: #fff;
  --navy: #07172e;
  --navy-2: #0d2343;
  --blue: #146ef5;
  --blue-2: #0a55cb;
  --cyan: #21c7e8;
  --green: #1bb978;
  --amber: #f2a93b;
  --red: #e65f65;
  --shadow: 0 18px 50px rgba(15, 37, 68, .09);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--soft); font-size: 16px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.04em; font-size: 21px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, var(--blue), var(--cyan)); border-radius: 12px; box-shadow: 0 9px 24px rgba(20,110,245,.28); }
.brand-mark svg { width: 22px; height: 22px; }
.brand small { display: block; color: #8fa4c3; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-top: 1px; }

.landing { background: #07172e; color: white; min-height: 100vh; overflow: hidden; }
.landing-nav { width: min(1160px, calc(100% - 40px)); margin: auto; height: 86px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.landing-nav-links { display: flex; align-items: center; gap: 30px; color: #b8c6d9; font-size: 14px; font-weight: 600; }
.landing-nav-links a:hover { color: white; }
.landing-hero { width: min(1160px, calc(100% - 40px)); min-height: 690px; margin: auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px; position: relative; }
.landing-hero::before { content:""; position:absolute; width:600px; height:600px; border-radius:50%; right:-320px; top:-180px; background:rgba(33,199,232,.13); filter:blur(25px); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); border-radius: 100px; color: #bcecf7; font-size: 13px; font-weight: 700; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(33,199,232,.12); }
.hero-title { max-width: 680px; margin: 24px 0 18px; font-size: clamp(44px, 6vw, 72px); line-height: 1.02; letter-spacing: -.055em; }
.hero-title span { background: linear-gradient(90deg,#68dcf1,#5b93ff); -webkit-background-clip:text; color:transparent; }
.hero-copy { max-width: 600px; color: #acbdd3; line-height: 1.75; font-size: 18px; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.button { min-height: 46px; border: 0; border-radius: 12px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 750; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg,var(--blue),#3189ff); color: white; box-shadow: 0 14px 32px rgba(20,110,245,.28); }
.button-secondary { background: rgba(255,255,255,.07); color: white; border: 1px solid rgba(255,255,255,.15); }
.button-light { background: white; color: var(--ink); }
.hero-proof { display:flex; gap:28px; margin-top:42px; color:#9eb0c8; font-size:13px; }
.hero-proof strong { display:block; color:white; font-size:21px; margin-bottom:4px; }
.product-window { position: relative; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 12px; background: rgba(255,255,255,.055); box-shadow: 0 42px 110px rgba(0,0,0,.38); transform: perspective(1100px) rotateY(-5deg) rotateX(2deg); }
.window-top { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.window-top i { width: 7px; height: 7px; background:#61738f; border-radius:50%; }
.window-body { background:#f6f8fc; color:var(--ink); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:128px 1fr; min-height:420px; }
.window-side { background:#0b1d38; padding:22px 13px; }
.window-side span { display:block; height:9px; border-radius:9px; background:#27405f; margin-bottom:18px; }
.window-side span:first-child { width:72%; background:#2d7bfb; }
.window-content { padding:22px; }
.mini-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-weight:800; }
.mini-pill { color:var(--green); background:#e8f8f1; border-radius:20px; font-size:10px; padding:6px 9px; }
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mini-card { background:white; border:1px solid #e8edf4; border-radius:12px; padding:13px; box-shadow:0 6px 15px rgba(15,35,65,.04); }
.mini-card small { display:block; color:#8793a5; font-size:9px; }
.mini-card strong { display:block; margin-top:7px; font-size:20px; }
.mini-chart { height:160px; margin-top:14px; background:white; border:1px solid #e8edf4; border-radius:12px; padding:15px; display:flex; align-items:flex-end; gap:8px; }
.mini-chart i { flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(#39c4e8,#2675f2); opacity:.9; }
.landing-features { width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:60px 0 100px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.landing-feature { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.045); border-radius:18px; padding:24px; }
.landing-feature b { display:block; margin:17px 0 8px; }
.landing-feature p { color:#96aac4; line-height:1.6; margin:0; font-size:14px; }
.feature-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(33,199,232,.13); color:#65e2f6; font-size:18px; }

.login-page { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:white; }
.login-brand-side { padding:48px clamp(30px,7vw,100px); color:white; background:linear-gradient(145deg,#06152b,#0b2a51); display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.login-brand-side::after { content:""; width:520px; height:520px; position:absolute; right:-240px; bottom:-210px; border-radius:50%; border:90px solid rgba(33,199,232,.11); }
.login-message { position:relative; z-index:1; max-width:550px; }
.login-message h1 { font-size:clamp(40px,5vw,68px); letter-spacing:-.055em; line-height:1.04; margin:0 0 20px; }
.login-message p { color:#a9bbd3; line-height:1.7; font-size:17px; }
.login-form-side { display:grid; place-items:center; padding:34px; }
.login-card { width:min(430px,100%); }
.login-card h2 { font-size:31px; letter-spacing:-.035em; margin:0 0 8px; }
.login-card > p { color:var(--muted); margin:0 0 30px; }
.field { margin-bottom:17px; }
.field label { display:block; font-size:13px; font-weight:750; margin-bottom:8px; }
.input { width:100%; min-height:49px; border:1px solid #dce3ed; background:white; border-radius:12px; padding:0 14px; color:var(--ink); outline:none; transition:.18s; }
textarea.input { min-height:110px; padding-top:12px; resize:vertical; }
.input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(20,110,245,.1); }
.alert { border-radius:12px; padding:12px 14px; margin-bottom:18px; font-size:14px; }
.alert-error { background:#fff0f1; color:#a8343a; border:1px solid #ffd5d7; }
.demo-box { margin-top:22px; background:#f3f7fd; border-radius:12px; padding:14px; font-size:13px; color:#4f6078; line-height:1.7; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; background:var(--navy); color:white; padding:22px 16px; display:flex; flex-direction:column; z-index:40; }
.sidebar .brand { padding:0 8px 24px; border-bottom:1px solid rgba(255,255,255,.09); }
.nav-label { color:#657d9d; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; margin:26px 11px 9px; }
.nav-link { min-height:44px; display:flex; align-items:center; gap:12px; padding:0 12px; border-radius:11px; color:#aebed3; font-size:14px; font-weight:650; margin:3px 0; }
.nav-link:hover { color:white; background:rgba(255,255,255,.055); }
.nav-link.active { color:white; background:linear-gradient(90deg,rgba(20,110,245,.28),rgba(20,110,245,.08)); box-shadow:inset 3px 0 #2c80ff; }
.nav-icon { width:21px; text-align:center; font-size:16px; }
.sidebar-foot { margin-top:auto; padding:15px 11px; border-top:1px solid rgba(255,255,255,.09); color:#8298b4; font-size:12px; line-height:1.5; }
.main { min-width:0; }
.topbar { height:76px; padding:0 30px; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; backdrop-filter:blur(14px); }
.topbar-left { display:flex; align-items:center; gap:14px; }
.mobile-menu { display:none; width:42px; height:42px; border:1px solid var(--line); background:white; border-radius:11px; }
.page-heading h1 { font-size:20px; margin:0; letter-spacing:-.02em; }
.page-heading span { color:var(--muted); font-size:12px; }
.top-actions { display:flex; align-items:center; gap:12px; }
.icon-button { width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:white; color:#526178; position:relative; }
.icon-button .dot { position:absolute; width:7px; height:7px; background:var(--red); border-radius:50%; top:9px; right:9px; border:2px solid white; }
.user-chip { display:flex; align-items:center; gap:10px; padding-left:5px; }
.avatar { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; background:#e9f1ff; color:var(--blue); font-weight:800; }
.user-meta strong { display:block; font-size:13px; }.user-meta span { color:var(--muted); font-size:11px; }
.content { padding:28px 30px 50px; }
.content-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.content-intro h2 { margin:0 0 5px; font-size:26px; letter-spacing:-.035em; }.content-intro p { margin:0; color:var(--muted); font-size:14px; }
.status-chip { display:inline-flex; align-items:center; gap:7px; min-height:29px; padding:0 10px; border-radius:30px; background:#eaf8f2; color:#147a50; font-weight:750; font-size:12px; }
.status-chip::before { content:""; width:7px; height:7px; background:var(--green); border-radius:50%; }
.status-chip.warning { background:#fff7e7; color:#956313; }.status-chip.warning::before { background:var(--amber); }
.status-chip.info { background:#eef4ff; color:#2262c4; }.status-chip.info::before { background:var(--blue); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat-card { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 8px 25px rgba(15,35,65,.035); }
.stat-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px; font-weight:650; }
.stat-icon { width:37px; height:37px; display:grid; place-items:center; border-radius:11px; background:#edf4ff; color:var(--blue); }
.stat-value { font-size:31px; letter-spacing:-.04em; font-weight:820; margin:18px 0 5px; }
.stat-foot { font-size:12px; color:var(--muted); }.positive { color:var(--green); font-weight:750; }
.grid-2 { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; margin-bottom:20px; }
.panel { background:white; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 25px rgba(15,35,65,.035); overflow:hidden; }
.panel-head { padding:18px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.panel-head h3 { margin:0; font-size:15px; }.panel-head a { color:var(--blue); font-size:12px; font-weight:750; }
.chart-area { height:250px; padding:24px 20px 18px; display:flex; align-items:flex-end; gap:13px; position:relative; background:linear-gradient(180deg,#fff,#fbfdff); }
.chart-area::before,.chart-area::after { content:""; position:absolute; left:20px; right:20px; border-top:1px dashed #e5eaf1; }.chart-area::before { top:35%; }.chart-area::after { top:66%; }
.bar-group { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:9px; z-index:1; }
.bar { width:min(30px,70%); background:linear-gradient(180deg,#26c4e5,#176cf1); border-radius:8px 8px 3px 3px; box-shadow:0 7px 18px rgba(20,110,245,.15); }.bar-group span { color:#8a97a9; font-size:10px; }
.health-list { padding:8px 20px 18px; }
.health-row { display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid #edf1f6; }.health-row:last-child { border:0; }
.health-row strong { display:block; font-size:13px; }.health-row small { color:var(--muted); }
.health-number { font-weight:800; color:var(--green); }
.table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; min-width:760px; }
.data-table th { text-align:left; padding:12px 18px; background:#f8fafc; color:#748298; font-size:11px; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.data-table td { padding:14px 18px; border-top:1px solid #edf1f5; font-size:13px; white-space:nowrap; }
.data-table tr:hover td { background:#fbfdff; }
.device-name { display:flex; align-items:center; gap:11px; }.device-badge { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#edf4ff; color:var(--blue); font-size:15px; }
.toolbar { display:flex; align-items:center; gap:10px; }
.search { width:260px; min-height:40px; border:1px solid var(--line); background:white; border-radius:10px; padding:0 13px; outline:none; }
.button-sm { min-height:40px; padding:0 14px; border-radius:10px; font-size:13px; }
.empty-note { color:var(--muted); font-size:13px; padding:20px; }
.alert-success { background:#eaf8f2; color:#147a50; border:1px solid #bfe8d5; padding:13px 15px; border-radius:11px; margin-bottom:18px; }
.inline-admin-form { padding:18px; margin-bottom:18px; display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:13px; align-items:end; }
.installer-page { min-height:100vh; background:#071a31; padding:35px 18px; }
.installer-shell { width:min(850px,100%); margin:auto; }.dark-brand { color:white; margin-bottom:22px; }.installer-card { background:white; border-radius:22px; padding:30px; }.installer-card h1 { margin-top:0; }.installer-card h3 { margin:22px 0 8px; }
.portal-editor-grid { display:grid; grid-template-columns:minmax(380px,.8fr) minmax(360px,1.2fr); gap:20px; align-items:start; }
.form-panel { padding:22px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.color-input { width:100%; height:46px; padding:5px; border:1px solid var(--line); border-radius:10px; background:white; }
.phone-preview { min-height:650px; background:linear-gradient(145deg,#0a1c36,#0b3764); border-radius:24px; padding:45px 24px; display:grid; place-items:center; position:relative; overflow:hidden; }
.phone-preview::before { content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(33,199,232,.13); top:-150px; right:-130px; }
.portal-card { position:relative; z-index:1; width:min(390px,100%); background:white; border-radius:23px; padding:32px; box-shadow:0 28px 80px rgba(0,0,0,.28); text-align:center; }
.portal-logo { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 17px; border-radius:19px; background:linear-gradient(145deg,var(--blue),var(--cyan)); color:white; font-size:28px; }
.portal-card h2 { margin:0 0 8px; font-size:25px; letter-spacing:-.035em; }.portal-card p { color:var(--muted); line-height:1.55; font-size:13px; margin:0 0 20px; }
.portal-legal { display:flex; align-items:flex-start; gap:8px; text-align:left; font-size:11px; color:#6f7d91; margin:13px 0; }.portal-legal input { margin-top:2px; }
.portal-note { text-align:left; font-size:11px !important; color:#6f7d91 !important; margin:-3px 0 13px !important; }.portal-note a { color:var(--blue); }
.full { width:100%; }
.page-card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.site-card { background:white; border:1px solid var(--line); border-radius:16px; padding:18px; }.site-card-head { display:flex; justify-content:space-between; gap:16px; }.site-card h3 { margin:0 0 4px; font-size:16px; }.site-card p { margin:0; color:var(--muted); font-size:12px; }.site-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }.site-metric { background:#f7f9fc; border-radius:11px; padding:11px; }.site-metric small { display:block; color:var(--muted); font-size:10px; }.site-metric strong { display:block; margin-top:4px; font-size:13px; }

.hotspot-page { min-height:100vh; display:grid; place-items:center; padding:28px; color:white; background:radial-gradient(circle at 10% 10%,rgba(28,154,237,.35),transparent 35%),linear-gradient(145deg,#06152b,#0c3158); }
.hotspot-shell { width:min(460px,100%); }.hotspot-brand { justify-content:center; width:100%; margin-bottom:24px; }.hotspot-card { color:var(--ink); background:white; border-radius:25px; padding:32px; box-shadow:0 28px 90px rgba(0,0,0,.33); }.hotspot-card h1 { margin:0 0 8px; font-size:29px; letter-spacing:-.04em; }.hotspot-card > p { color:var(--muted); margin:0 0 25px; line-height:1.6; font-size:14px; }.hotspot-footer { text-align:center; margin-top:17px; color:#9db1c9; font-size:11px; }.otp-inputs { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin:18px 0; }.otp-inputs input { min-width:0; height:48px; border:1px solid var(--line); border-radius:10px; text-align:center; font-size:20px; font-weight:800; outline:none; }.otp-inputs input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(20,110,245,.1); }.success-state { text-align:center; }.success-icon { width:74px; height:74px; margin:0 auto 19px; display:grid; place-items:center; background:#e8f9f1; color:var(--green); border-radius:50%; font-size:32px; }

@media (max-width:1050px) {
  .landing-hero { grid-template-columns:1fr; padding:70px 0; }.product-window { max-width:650px; transform:none; }.landing-features { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }.grid-2 { grid-template-columns:1fr; }.portal-editor-grid { grid-template-columns:1fr; }
}
@media (max-width:780px) {
  .landing-nav-links a:not(.button) { display:none; }.landing-hero { min-height:auto; }.hero-proof { flex-wrap:wrap; }.landing-features { grid-template-columns:1fr; }.window-body { grid-template-columns:80px 1fr; }.mini-grid { grid-template-columns:1fr; }.mini-card:nth-child(n+2) { display:none; }
  .login-page { grid-template-columns:1fr; }.login-brand-side { min-height:280px; padding:32px; }.login-message h1 { font-size:40px; }.login-form-side { padding:36px 22px; }
  .app-shell { display:block; }.sidebar { position:fixed; left:-280px; width:260px; transition:.24s; box-shadow:15px 0 50px rgba(0,0,0,.25); }.sidebar.open { left:0; }.mobile-menu { display:block; }.topbar { height:68px; padding:0 16px; }.content { padding:22px 15px 90px; }.top-actions .icon-button { display:none; }.user-meta { display:none; }.stats-grid { grid-template-columns:1fr 1fr; gap:10px; }.stat-card { padding:15px; }.stat-value { font-size:25px; }.content-intro { align-items:flex-start; flex-direction:column; }.page-card-grid { grid-template-columns:1fr; }.toolbar { width:100%; flex-wrap:wrap; }.search { flex:1; min-width:180px; }.form-row { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .landing-nav { width:calc(100% - 28px); }.landing-hero,.landing-features { width:calc(100% - 28px); }.hero-title { font-size:42px; }.hero-copy { font-size:16px; }.window-content { padding:14px; }.stats-grid { grid-template-columns:1fr; }.hotspot-page { padding:16px; }.hotspot-card,.portal-card { padding:24px 19px; }.otp-inputs { gap:4px; }.otp-inputs input { height:43px; }.phone-preview { padding:24px 13px; min-height:580px; }
}
@media (max-width:780px) { .inline-admin-form { grid-template-columns:1fr; } .installer-card { padding:22px 17px; } }