:root { --navy:#0b1739; --blue:#2563eb; --bg:#f4f7fb; --line:#e4e9f2; --text:#172033; --muted:#718096; --green:#0e9f6e; --red:#e5484d; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--blue); text-decoration:none; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:245px; background:var(--navy); color:#fff; padding:28px 18px; position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; }
.brand { display:flex; gap:12px; align-items:center; font-size:20px; font-weight:800; padding:0 10px 28px; }
.brand-mark { color:#4f8cff; font-size:28px; }.brand small { display:block; color:#8fa1c7; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.sidebar nav { display:grid; gap:7px; }.sidebar nav a { color:#aebbd7; padding:12px 14px; border-radius:9px; font-weight:650; }.sidebar nav a:hover,.sidebar nav a.active { background:#172855; color:#fff; }
.sidebar-footer { margin-top:auto; padding:16px 10px 0; border-top:1px solid #23335c; font-size:13px; }.sidebar-footer small { display:block; color:#7385aa; margin-top:6px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }.dot.online { background:#25c58a; box-shadow:0 0 0 4px #25c58a22; }
.main-content { margin-left:245px; width:calc(100% - 245px); padding:0 36px 48px; }
.topbar { height:72px; margin:0 -36px 34px; padding:0 36px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.topbar div:first-child { text-align:right; }.topbar strong,.topbar span { display:block; }.topbar span { color:var(--muted); font-size:12px; }
.avatar { width:38px; height:38px; border-radius:50%; background:#e8efff; color:var(--blue); display:grid; place-items:center; font-weight:800; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }.page-head h1 { font-size:30px; margin:3px 0 6px; }.page-head p { margin:0; color:var(--muted); }
.eyebrow { color:var(--blue)!important; font-size:11px; font-weight:800; letter-spacing:.14em; }.breadcrumbs { font-size:13px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat,.panel,.device-card,.hero-status { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 8px #17203308; }
.stat { padding:20px; }.stat span,.stat small { display:block; color:var(--muted); }.stat strong { display:block; font-size:26px; margin:10px 0 5px; }.stat small { font-size:12px; }.success-text { color:var(--green)!important; }
.panel { padding:22px; margin-bottom:20px; }.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }.panel h2,.panel p { margin:0; }.panel h2 { font-size:17px; }.panel p { color:var(--muted); font-size:13px; margin-top:4px; }
.device-row,.release-row { display:flex; align-items:center; gap:16px; padding:15px 4px; border-top:1px solid var(--line); color:var(--text); }.device-row:first-child,.release-row:first-child { border-top:0; }
.device-icon,.version-icon { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:#eaf2ff; }.device-icon.large { width:50px; height:50px; }
.grow { flex:1; min-width:0; }.grow strong,.grow span { display:block; }.grow span { color:var(--muted); font-size:12px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; }.badge.green { background:#e7f8f1; color:#087a54; }.badge.gray { background:#eef1f5; color:#667085; }.badge.blue { background:#e9f0ff; color:#245ec9; }.badge.big { padding:9px 14px; }
.metric { min-width:90px; }.metric small,.metric b { display:block; }.metric small { color:var(--muted); font-size:10px; }.metric b { font-size:12px; margin-top:3px; }.chevron { color:#9aa7ba; font-size:25px; }
.timeline-row { display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); padding:14px 2px; }.timeline-row:first-child { border-top:0; }.event-dot { width:9px; height:9px; background:#4d83f3; border-radius:50%; }.timeline-row div { flex:1; }.timeline-row strong,.timeline-row span { display:block; }.timeline-row span { color:var(--muted); font-size:12px; margin-top:3px; }.timeline-row time,.release-row time { color:var(--muted); font-size:11px; }
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.device-card { padding:22px; color:var(--text); }.device-card:hover { border-color:#bfd0f5; transform:translateY(-1px); }.card-top { display:flex; justify-content:space-between; }.device-card h2 { margin:20px 0 5px; font-size:18px; }.device-card>p { color:var(--muted); font-size:13px; }.card-details { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px solid var(--line); margin-top:20px; padding-top:15px; }.card-details small,.card-details b { display:block; }.card-details small { color:var(--muted); font-size:10px; }.card-details b { font-size:12px; margin-top:4px; }
.hero-status { padding:24px; display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }.hero-status>div:first-child { display:flex; align-items:center; gap:16px; }.status-icon { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:#e8f8f1; font-size:24px; }.hero-status small { color:var(--green); font-weight:800; }.hero-status h2 { margin:3px 0; }.hero-status p { color:var(--muted); margin:0; font-size:13px; }.actions { display:flex; gap:10px; }.actions form { margin:0; }
.button { appearance:none; border:0; border-radius:9px; padding:10px 15px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; display:inline-block; }.button.primary { background:var(--blue); color:#fff; }.button.secondary { background:#eef2f7; color:#3e4b61; }.button.success { background:#e4f8ef; color:#087a54; }.button.danger { background:#feecee; color:#c62d35; }
.two-cols { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; }.schedule-line { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.schedule-line small,.schedule-line b { display:block; }.schedule-line small { color:var(--muted); font-size:11px; }.schedule-line b { margin-top:5px; }
.kv { margin:0; }.kv div { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:11px 0; }.kv div:first-child { border-top:0; }.kv dt { color:var(--muted); }.kv dd { margin:0; font-weight:650; text-align:right; }.mono { font-family:ui-monospace,SFMono-Regular,monospace; font-size:11px; overflow-wrap:anywhere; }
.form-panel { max-width:760px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.form-grid label { font-size:12px; font-weight:700; }.form-grid input { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid #ccd5e3; border-radius:8px; font:inherit; }.switch-row { display:flex; gap:10px; align-items:center; margin:20px 0; }.form-actions { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding-top:18px; }
.ota-warning { margin-top:20px; background:#eef5ff; border:1px solid #d6e5ff; border-radius:10px; padding:16px; }.ota-warning p { margin:5px 0 0; }.flash { background:#e9f8f1; color:#087a54; padding:12px 16px; border-radius:9px; margin:-14px 0 20px; font-size:13px; font-weight:650; }
.flash.alert { background:#feecee; color:#c62d35; }
@media (max-width:900px) { .sidebar { width:76px; padding:25px 10px; }.brand div,.sidebar nav a { font-size:0; }.brand { padding-left:13px; }.sidebar nav a::first-letter { font-size:18px; }.sidebar-footer { display:none; }.main-content { margin-left:76px; width:calc(100% - 76px); padding:0 18px 35px; }.topbar { margin:0 -18px 28px; padding:0 18px; }.stats-grid { grid-template-columns:1fr 1fr; }.cards-grid { grid-template-columns:1fr; }.two-cols { grid-template-columns:1fr; } }
@media (max-width:600px) { .main-content { margin-left:0; width:100%; }.sidebar { display:none; }.stats-grid,.form-grid { grid-template-columns:1fr; }.device-row .metric { display:none; }.hero-status { align-items:flex-start; gap:20px; flex-direction:column; }.page-head { align-items:flex-start; flex-direction:column; }.schedule-line { grid-template-columns:1fr; } }
.logout-button { appearance:none; border:1px solid var(--line); background:#fff; color:#667085; border-radius:8px; padding:8px 11px; font:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.logout-button:hover { background:#f7f9fc; color:var(--text); }
.topbar form { margin:0; }
.auth-body { min-height:100vh; background:#f1f5fb; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 20% 10%,#e8f0ff 0,transparent 32%),linear-gradient(135deg,#f7f9fd 0%,#eef3fa 100%); }
.login-card { width:min(100%,430px); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 60px #0b173918; padding:36px; }
.login-brand { display:flex; gap:11px; align-items:center; color:var(--navy); font-size:19px; font-weight:850; margin-bottom:38px; }
.login-brand small { display:block; color:#8391aa; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.login-copy h1 { margin:7px 0 8px; font-size:29px; }
.login-copy p { margin:0 0 27px; color:var(--muted); line-height:1.55; font-size:13px; }
.login-card .flash { margin:0 0 18px; }
.login-form { display:grid; gap:18px; }
.login-form label { color:#344054; font-size:12px; font-weight:750; }
.login-form input { display:block; width:100%; margin-top:8px; padding:13px 14px; border:1px solid #ccd5e3; border-radius:9px; background:#fff; font:inherit; outline:none; }
.login-form input:focus { border-color:#7da4f7; box-shadow:0 0 0 3px #2563eb12; }
.login-submit { width:100%; padding:13px; margin-top:3px; }
.login-security { margin-top:25px; padding-top:20px; border-top:1px solid var(--line); text-align:center; color:#8995a8; font-size:10px; }
@media (max-width:520px) { .login-page { padding:16px; }.login-card { padding:28px 22px; border-radius:14px; } }