:root{--font-ui:"Fira Sans", system-ui, -apple-system, sans-serif;--font-mono:"Fira Code", "JetBrains Mono", ui-monospace, monospace;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px}:root[data-theme=light]{--bg:#f4f6f9;--bg-sunken:#eceef3;--surface:#fff;--surface-2:#f8fafc;--surface-elev:#fff;--border:#0f172a14;--border-strong:#0f172a24;--text:#0f172a;--text-muted:#475569;--text-dim:#94a3b8;--text-faint:#cbd5e1;--brand-stroke:#08264a;--brand-surface:#fff;--brand-surface-soft:#f8fafc;--grid-ok:#16a34a;--grid-ok-bg:#16a34a14;--grid-warn:#d97706;--grid-warn-bg:#d9770614;--grid-fail:#dc2626;--grid-fail-bg:#dc262614;--batt:#6366f1;--batt-bg:#6366f114;--batt-discharge:#ea580c;--batt-discharge-bg:#ea580c1a;--dc:#0284c7;--dc-bg:#0284c714;--rect:#0891b2;--rect-bg:#0891b214;--accent:var(--grid-ok);--shadow-sm:0 1px 2px #0f172a0a, 0 1px 1px #0f172a08;--shadow-md:0 2px 8px #0f172a0f, 0 4px 16px #0f172a08;--shadow-lg:0 12px 28px #0f172a1a, 0 2px 8px #0f172a0a;--hairline:#0f172a0f;--scan-grid:#0f172a0a}:root[data-theme=dark]{--bg:#07090e;--bg-sunken:#04060a;--surface:#0e1117;--surface-2:#131822;--surface-elev:#161c26;--border:#ffffff0f;--border-strong:#ffffff1f;--text:#f1f5f9;--text-muted:#94a3b8;--text-dim:#64748b;--text-faint:#475569;--brand-stroke:#08264a;--brand-surface:#fff;--brand-surface-soft:#f8fafc;--grid-ok:#22d3a0;--grid-ok-bg:#22d3a01a;--grid-warn:#f5b544;--grid-warn-bg:#f5b5441a;--grid-fail:#f87171;--grid-fail-bg:#f871711a;--batt:#818cf8;--batt-bg:#818cf81f;--batt-discharge:#fb923c;--batt-discharge-bg:#fb923c1f;--dc:#38bdf8;--dc-bg:#38bdf81a;--rect:#22d3ee;--rect-bg:#22d3ee1a;--accent:var(--grid-ok);--shadow-sm:0 1px 0 #ffffff08 inset;--shadow-md:0 0 0 1px #ffffff05 inset, 0 8px 24px #00000080;--shadow-lg:0 0 0 1px #ffffff08 inset, 0 24px 60px #000000b3;--hairline:#ffffff0d;--scan-grid:#ffffff06}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-size:14px;line-height:1.5;transition:background-color .2s,color .2s}.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1, "ss01" 1}.tnum{font-variant-numeric:tabular-nums}button{cursor:pointer;font-family:inherit}.app-bg{background-image:linear-gradient(var(--scan-grid) 1px, transparent 1px), linear-gradient(90deg, var(--scan-grid) 1px, transparent 1px);background-position:-1px -1px;background-size:32px 32px;min-height:100vh;position:relative}.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}.surface-2{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)}.hairline{background:var(--hairline)}@keyframes flow-particle{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}to{offset-distance:100%;opacity:0}}@keyframes pulse-ring{0%{opacity:.55;transform:scale(.8)}to{opacity:0;transform:scale(2.4)}}@keyframes status-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.92)}}@keyframes alarm-blink{0%,to{background-color:var(--grid-fail-bg)}50%{background-color:#dc26262e}}@keyframes spark-draw{0%{stroke-dashoffset:100%}to{stroke-dashoffset:0}}@keyframes tick-shift{0%{opacity:0;transform:translateY(20%)}to{opacity:1;transform:translateY(0)}}@keyframes battery-charge{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sine-pan{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes glow-soft{0%,to{opacity:.55}50%{opacity:1}}@keyframes batt-wave{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes batt-flow{0%{background-position:0 0}to{background-position:200px 0}}@keyframes batt-bubble{0%{opacity:0;transform:translateY(0)scale(.6)}20%{opacity:.8}to{opacity:0;transform:translateY(-160px)scale(1)}}.flow-line{background:var(--border);border-radius:2px;height:2px;position:relative;overflow:hidden}.flow-line[data-state=grid]{background:linear-gradient(90deg, transparent, var(--grid-ok-bg) 30%, var(--grid-ok-bg) 70%, transparent)}.flow-line[data-state=grid]:after{content:"";background:linear-gradient(90deg, transparent 0 30%, var(--grid-ok) 50%, transparent 70% 100%);background-size:60px 100%;animation:1.6s linear infinite reverse sine-pan;position:absolute;inset:0}.flow-line[data-state=battery]{background:linear-gradient(90deg, transparent, var(--batt-discharge-bg) 30%, var(--batt-discharge-bg) 70%, transparent)}.flow-line[data-state=battery]:after{content:"";background:linear-gradient(90deg, transparent 0 30%, var(--batt-discharge) 50%, transparent 70% 100%);background-size:60px 100%;animation:1.2s linear infinite reverse sine-pan;position:absolute;inset:0}.flow-line[data-state=idle]{background:var(--border);opacity:.5}.flow-line-v{background:var(--border);border-radius:2px;width:2px;position:relative;overflow:hidden}.flow-line-v[data-state=grid]:after,.flow-line-v[data-state=battery]:after{content:"";background-size:100% 60px;animation:1.6s linear infinite sine-pan-v;position:absolute;inset:0}.flow-line-v[data-state=grid]{background:linear-gradient(180deg, transparent, var(--grid-ok-bg) 30%, var(--grid-ok-bg) 70%, transparent)}.flow-line-v[data-state=grid]:after{background:linear-gradient(180deg, transparent 0 30%, var(--grid-ok) 50%, transparent 70% 100%);animation-direction:reverse}.flow-line-v[data-state=battery]{background:linear-gradient(180deg, transparent, var(--batt-discharge-bg) 30%, var(--batt-discharge-bg) 70%, transparent)}.flow-line-v[data-state=battery]:after{background:linear-gradient(180deg, transparent 0 30%, var(--batt-discharge) 50%, transparent 70% 100%)}@keyframes sine-pan-v{0%{transform:translateY(0)}to{transform:translateY(-50%)}}.node{border-radius:var(--r-sm);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);align-items:center;gap:6px;padding:6px 10px;font-size:10px;font-weight:600;display:inline-flex}.node[data-tone=grid]{color:var(--grid-ok);border-color:var(--grid-ok);background:var(--grid-ok-bg)}.node[data-tone=fail]{color:var(--grid-fail);border-color:var(--grid-fail);background:var(--grid-fail-bg)}.node[data-tone=dc]{color:var(--dc);border-color:var(--dc);background:var(--dc-bg)}.node[data-tone=batt]{color:var(--batt);border-color:var(--batt);background:var(--batt-bg)}.node[data-tone=discharge]{color:var(--batt-discharge);border-color:var(--batt-discharge);background:var(--batt-discharge-bg)}.dot{background:var(--text-dim);border-radius:50%;flex-shrink:0;width:8px;height:8px;position:relative}.dot.ok{background:var(--grid-ok);box-shadow:0 0 0 0 var(--grid-ok);animation:2s ease-in-out infinite status-pulse}.dot.warn{background:var(--grid-warn);animation:1.6s ease-in-out infinite status-pulse}.dot.fail{background:var(--grid-fail);animation:1s ease-in-out infinite status-pulse}.dot.batt{background:var(--batt);animation:2s ease-in-out infinite status-pulse}.dot.discharge{background:var(--batt-discharge);animation:.8s ease-in-out infinite status-pulse}.dot.fail:before,.dot.discharge:before{content:"";color:inherit;border:2px solid;border-radius:50%;animation:1.4s ease-out infinite pulse-ring;position:absolute;inset:-3px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;transition:border-color .18s,transform .18s,box-shadow .18s,background-color .18s;position:relative;overflow:hidden}.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}.card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset, var(--shadow-md)}.card.alarm{border-color:var(--grid-fail);animation:2s ease-in-out infinite card-alarm-pulse}.card.alarm:before{content:"";pointer-events:none;background:linear-gradient(180deg, var(--grid-fail-bg) 0%, transparent 30%);position:absolute;inset:0}@keyframes card-alarm-pulse{0%,to{box-shadow:0 0 0 1px var(--grid-fail) inset, 0 0 0 0 #f871718c}50%{box-shadow:0 0 0 1px var(--grid-fail) inset, 0 0 0 5px #f8717100}}.card.warn{border-color:var(--grid-warn);animation:2.6s ease-in-out infinite card-warn-pulse}.card.warn:before{content:"";pointer-events:none;background:linear-gradient(180deg, var(--grid-warn-bg) 0%, transparent 25%);position:absolute;inset:0}:root[data-theme=dark]{--warn-pulse-color:245, 181, 68}:root[data-theme=light]{--warn-pulse-color:217, 119, 6}@keyframes card-warn-pulse{0%,to{box-shadow:0 0 0 1px var(--grid-warn) inset, 0 0 0 0 rgba(var(--warn-pulse-color), .4)}50%{box-shadow:0 0 0 1px var(--grid-warn) inset, 0 0 0 4px rgba(var(--warn-pulse-color), 0)}}.card-density-comfy{padding:22px}.card-density-compact{padding:14px}.spark{width:100%;height:36px;display:block;overflow:visible}.spark path.line{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.spark path.fill{fill:var(--accent);opacity:.1}.ring{width:64px;height:64px;position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle.track{fill:none;stroke:var(--border);stroke-width:6px}.ring circle.value{fill:none;stroke:var(--accent);stroke-width:6px;stroke-linecap:round;transition:stroke-dashoffset .6s}.ring .ring-label{font-family:var(--font-mono);color:var(--text);flex-direction:column;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex;position:absolute;inset:0}.ring .ring-label small{letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;font-size:8px;font-weight:500}.bignum{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-weight:700;line-height:1}.label-eyebrow{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);font-size:9px;font-weight:600}.tag{border-radius:var(--r-pill);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);align-items:center;gap:6px;padding:3px 8px;font-size:9px;font-weight:600;display:inline-flex}.tag.ok{color:var(--grid-ok);background:var(--grid-ok-bg);border-color:#0000}.tag.warn{color:var(--grid-warn);background:var(--grid-warn-bg);border-color:#0000}.tag.fail{color:var(--grid-fail);background:var(--grid-fail-bg);border-color:#0000}.tag.batt{color:var(--batt);background:var(--batt-bg);border-color:#0000}.tag.discharge{color:var(--batt-discharge);background:var(--batt-discharge-bg);border-color:#0000}.cellgrid{grid-template-columns:repeat(15,1fr);gap:3px;display:grid}.cell{aspect-ratio:1/1.4;background:var(--batt-bg);border-radius:3px;transition:transform .12s;position:relative}.cell:hover{z-index:2;transform:scale(1.15)}.cell:after{content:attr(data-v);font-family:var(--font-mono);color:var(--text);background:var(--surface-elev);border:1px solid var(--border);opacity:0;pointer-events:none;white-space:nowrap;border-radius:4px;padding:2px 4px;font-size:8px;position:absolute;bottom:-16px;left:50%;transform:translate(-50%)}.cell:hover:after{opacity:1}.btn{border-radius:var(--r-sm);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);background:var(--surface-2);color:var(--text);align-items:center;gap:6px;padding:8px 14px;font-size:11px;font-weight:600;transition:all .15s;display:inline-flex}.btn:hover{border-color:var(--border-strong);background:var(--surface-elev)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{filter:brightness(1.06)}.btn.icon{padding:8px}.btn:disabled{cursor:not-allowed;filter:grayscale(.2)}.app-header-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.app-brand-title,.app-live-meta{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.app-brand-meta{min-width:0}.app-header-btn svg{flex-shrink:0}.batt-shell{aspect-ratio:2.2;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;width:100%;position:relative;overflow:hidden}.batt-shell .liquid{background:linear-gradient(180deg, var(--batt), var(--batt) 80%);transform-origin:bottom;transition:transform .8s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.batt-shell.discharge .liquid{background:linear-gradient(180deg, var(--batt-discharge), var(--batt-discharge) 80%)}.batt-shell .liquid:after{content:"";background:linear-gradient(#ffffff2e,#0000 30%);position:absolute;inset:0}.batt-shell .stripes{background-image:repeating-linear-gradient(90deg, transparent 0 10%, var(--border) 10% calc(10% + 1px));pointer-events:none;opacity:.6;position:absolute;inset:0}.modal-veil{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:90;background:#04060ab3;justify-content:center;align-items:center;padding:24px;animation:.2s fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);width:100%;max-width:1100px;max-height:90vh;box-shadow:var(--shadow-lg);animation:.24s cubic-bezier(.16,1,.3,1) modal-rise;overflow-y:auto}@keyframes modal-rise{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}input,select{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--r-md);outline:none;padding:10px 12px}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 82%)}.telegram-rule{border:1px solid var(--border);border-radius:var(--r-md);background:color-mix(in oklab, var(--surface-2), var(--surface) 35%);grid-template-columns:18px minmax(0,1fr);align-items:flex-start;gap:10px;padding:10px;display:grid}.telegram-rule input{accent-color:var(--accent);margin:2px 0 0;padding:0}.telegram-rule strong{color:var(--text);font-size:12px;display:block}.telegram-rule small{color:var(--text-muted);margin-top:2px;font-size:11px;line-height:1.4;display:block}.telegram-stat{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:10px}.telegram-stat span{color:var(--text-muted);font-size:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;display:block}.telegram-stat strong{margin-top:4px;font-size:24px;line-height:1;display:block}.telegram-preview{white-space:pre-wrap;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-family:var(--font-mono);margin:10px 0 0;padding:12px;font-size:11px;line-height:1.6}.settings-modal{overflow:hidden}.settings-layout{grid-template-columns:260px minmax(0,1fr);gap:0;min-height:560px;display:grid}.settings-nav{border-right:1px solid var(--hairline);background:color-mix(in oklab, var(--surface-2), transparent 30%);align-content:start;gap:8px;padding:16px;display:grid}.settings-nav-item{border-radius:var(--r-md);color:var(--text);text-align:left;background:0 0;border:1px solid #0000;padding:12px}.settings-nav-item:hover{background:var(--surface-2);border-color:var(--border)}.settings-nav-item.active{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 88%)}.settings-nav-item strong{font-size:13px;display:block}.settings-nav-item small{color:var(--text-muted);margin-top:3px;font-size:11px;line-height:1.35;display:block}.settings-content{max-height:calc(90vh - 78px);padding:16px;overflow-y:auto}.settings-kv{font-family:var(--font-mono);grid-template-columns:140px minmax(0,1fr);gap:8px 12px;font-size:11px;display:grid}.settings-kv span{color:var(--text-dim)}.settings-kv strong{color:var(--text);overflow-wrap:anywhere;font-weight:600}.about-hero{background:radial-gradient(circle at top right, color-mix(in oklab, var(--accent), transparent 78%), transparent 42%), var(--surface-2)}.about-list{gap:8px;display:grid}.about-list>div{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);gap:3px;padding:10px;display:grid}.about-list strong{color:var(--text);font-size:12px}.about-list span{color:var(--text-muted);font-size:12px;line-height:1.5}.divider{background:var(--hairline);width:100%;height:1px}.dotted-divider{background-image:linear-gradient(90deg, var(--border) 50%, transparent 50%);background-repeat:repeat-x;background-size:6px 1px;height:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}.brand-icon{object-fit:contain;filter:drop-shadow(0 10px 22px #08264a2e);width:36px;height:36px;display:block}.app-brand-mark{flex-shrink:0;width:36px;height:36px}.about-brand-icon{border-radius:12px;width:44px;height:44px}.login-page{--brand-stroke:#08264a;--brand-surface:#fff;--brand-surface-soft:#f8fafc;--login-dot:#64748b24;background-color:#f7f8fc;background-image:radial-gradient(var(--login-dot) 1px, transparent 1px);background-position:0 0;background-size:16px 16px;place-items:center;min-height:100vh;padding:clamp(16px,4vw,42px);display:grid}.login-shell{justify-items:center;gap:18px;width:min(780px,100%);display:grid}.login-logo-stage{aspect-ratio:1;place-items:center;width:min(214px,40vw);margin-bottom:6px;display:grid}.login-logo-svg{width:100%;height:100%;padding:2px}.login-heading{text-align:center}.login-heading h1{letter-spacing:0;color:#0f172a;margin:10px 0 0;font-size:clamp(30px,4.1vw,42px);line-height:1.05}.login-heading p{color:#7c8597;margin:12px 0 0;font-size:17px;line-height:1.45}.login-form-card{background:#ffffffeb;border:1px solid #0f172a14;border-radius:22px;width:100%;max-width:620px;padding:clamp(26px,4vw,44px);box-shadow:0 18px 50px #0f172a14,0 2px 8px #0f172a0a}.login-field{color:#414b60;gap:12px;font-size:17px;font-weight:600;display:grid}.login-input{color:#0f172a;background:#fff;border:1px solid #0f172a24;border-radius:14px;width:100%;min-height:58px;font-size:18px;box-shadow:inset 0 0 0 1px #0f172a05,0 3px 12px #0f172a14}.login-submit{color:#fff;background:#4556ff;border:0;border-radius:14px;justify-content:center;align-items:center;gap:14px;width:100%;min-height:58px;margin-top:28px;font-size:20px;font-weight:700;transition:transform .16s,filter .16s;display:inline-flex;box-shadow:0 12px 28px #4556ff40}.login-submit:hover{filter:brightness(1.04);transform:translateY(-1px)}.login-status{color:#7c8597;align-items:center;gap:12px;font-size:14px;display:inline-flex}:root[data-theme=dark] .login-page{--brand-stroke:#08264a;--brand-surface:#fff;--brand-surface-soft:#f8fafc;--login-dot:#94a3b81a;background-color:#07090e;background-image:radial-gradient(circle at 50% 12%, #22d3a014, transparent 24%), radial-gradient(var(--login-dot) 1px, transparent 1px)}:root[data-theme=dark] .login-form-card{background:#0e1117e6;border-color:#ffffff14;box-shadow:0 20px 60px #00000073,inset 0 0 0 1px #ffffff08}:root[data-theme=dark] .login-heading h1,:root[data-theme=dark] .login-field{color:#f8fafc}:root[data-theme=dark] .login-heading p,:root[data-theme=dark] .login-status{color:#94a3b8}:root[data-theme=dark] .login-input{color:#f8fafc;background:#0b0f16;border-color:#ffffff1f;box-shadow:0 0 0 1px #ffffff05,0 5px 18px #00000059}@media (width<=700px){.app-header-inner{grid-template-columns:42px minmax(0,1fr);align-items:center!important;gap:8px 10px!important;padding:10px 12px!important;display:grid!important}.app-brand-mark,.app-brand-mark .brand-icon{border-radius:12px;width:42px;height:42px}.app-brand-title{line-height:1.1;letter-spacing:.14em!important;font-size:12px!important}.brand-long{display:none}.app-brand-meta{flex-wrap:nowrap!important;gap:6px!important;margin-top:4px!important}.app-live-meta{max-width:100%;font-size:10px!important}.meta-separator,.live-clock{display:none}.app-header-actions{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px;gap:8px;width:100%;display:grid}.app-header-btn{justify-content:center;min-width:0;min-height:42px;padding:9px 10px!important}.theme-toggle{width:42px}.app-main{padding:14px 10px 24px!important}.modal-veil{padding:12px}.modal{border-radius:var(--r-lg);max-height:calc(100vh - 24px)}.settings-modal{max-height:calc(100vh - 24px)}.settings-content{max-height:none}.settings-nav-item small{display:none}.settings-nav-item{text-align:center;padding:10px}.telegram-stat strong{font-size:20px}.login-page{padding:14px}.login-shell{grid-template-columns:1fr;gap:18px}.login-logo-stage{width:min(160px,46vw)}.login-heading h1{font-size:30px}.login-form-card{border-radius:18px;padding:20px}.login-heading p{font-size:15px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
