:root{--bg:oklch(98.5% .004 250);--bg-soft:oklch(97.5% .005 250);--surface:#fff;--surface-2:oklch(98.5% .004 250);--line:oklch(92% .006 252);--line-2:oklch(95% .005 252);--line-strong:oklch(88% .008 252);--ink:oklch(22% .02 258);--ink-2:oklch(40% .02 258);--ink-3:oklch(58% .015 258);--ink-4:oklch(72% .012 258);--nav-bg:oklch(19% .018 258);--nav-bg-2:oklch(16.5% .018 258);--nav-ink:oklch(78% .012 258);--nav-ink-2:oklch(55% .012 258);--nav-ink-3:oklch(42% .012 258);--nav-line:oklch(27% .018 258);--nav-hover:oklch(24% .022 258);--accent:oklch(62% .18 252);--accent-2:oklch(55% .2 252);--accent-soft:oklch(96% .04 252);--accent-ink:oklch(40% .16 252);--on-accent:#fff;--ok:oklch(66% .13 162);--ok-soft:oklch(96% .04 162);--ok-ink:oklch(42% .12 162);--warn:oklch(78% .14 75);--warn-soft:oklch(97% .04 75);--warn-ink:oklch(48% .12 75);--err:oklch(65% .2 22);--err-soft:oklch(97% .03 22);--err-ink:oklch(46% .18 22);--info-soft:oklch(96% .04 252);--r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;--shadow-xs:0 1px 2px #0f172a0a;--shadow-sm:0 1px 2px #0f172a0a, 0 1px 3px #0f172a0f;--shadow-md:0 4px 12px -2px #0f172a0f, 0 2px 6px #0f172a0d;--shadow-lg:0 18px 40px -16px #0f172a2e, 0 6px 16px -8px #0f172a1a;--pad-card:20px;--pad-row:14px;--gap:20px;--ff-sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--ff-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace}[data-density=compact]{--pad-card:14px;--pad-row:10px;--gap:14px}[data-density=comfy]{--pad-card:26px;--pad-row:18px;--gap:26px}*{box-sizing:border-box}html{overflow-x:hidden}html,body,#root{height:100%;margin:0}body{font-family:var(--ff-sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11", "ss01";font-size:15px}.app{grid-template-columns:var(--nav-w,248px) 1fr;min-height:100vh;transition:grid-template-columns .24s cubic-bezier(.2,.7,.2,1);display:grid}.app[data-collapsed=true]{--nav-w:72px}.nav{background:var(--nav-bg);height:100vh;color:var(--nav-ink);z-index:10;border-right:1px solid oklch(14% .02 258);flex-direction:column;align-self:start;display:flex;position:sticky;top:0}.main{grid-template-rows:auto 1fr;min-width:0;display:grid}.brand{border-bottom:1px solid var(--nav-line);align-items:center;gap:10px;padding:18px 18px 14px;display:flex}.brand-mark{background:linear-gradient(140deg, var(--accent), var(--accent-2));width:32px;height:32px;color:var(--on-accent);box-shadow:0 6px 16px -6px var(--accent), inset 0 1px 0 #ffffff40;border-radius:9px;flex:none;place-items:center;display:grid}.brand-name{letter-spacing:-.01em;color:#fff;white-space:nowrap;font-size:16px;font-weight:600;overflow:hidden}.nav-group{padding:14px 12px 6px}.nav-group-h{letter-spacing:.08em;text-transform:uppercase;color:var(--nav-ink-3);padding:0 10px 8px;font-size:11px;font-weight:600}.nav-item{color:var(--nav-ink);cursor:default;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:9px;align-items:center;gap:12px;padding:9px 10px;font-size:14.5px;font-weight:500;transition:background .12s,color .12s;display:flex;position:relative}.nav-item:hover{background:var(--nav-hover);color:#fff}.nav-item[aria-current=page]{color:#fff;background:linear-gradient(oklch(27% .022 258),oklch(24% .022 258));box-shadow:inset 0 0 0 1px oklch(33% .022 258),0 1px #ffffff0a}.nav-item[aria-current=page]:before{content:"";background:var(--accent);border-radius:0 3px 3px 0;width:3px;position:absolute;top:8px;bottom:8px;left:-12px}.nav-item .ico{width:18px;height:18px;color:var(--nav-ink-2);flex:none}.nav-item[aria-current=page] .ico{color:var(--accent)}.nav-item:hover .ico{color:#fff}.nav-badge{color:var(--nav-ink);background:oklch(32% .02 258);border-radius:999px;margin-left:auto;padding:3px 8px;font-size:11.5px;font-weight:600}.nav-item[aria-current=page] .nav-badge{background:var(--accent);color:var(--on-accent)}.nav-foot{border-top:1px solid var(--nav-line);flex-direction:column;gap:4px;margin-top:auto;padding:12px;display:flex}.nav-foot .user{cursor:default;border-radius:9px;align-items:center;gap:10px;padding:8px 10px;display:flex}.nav-foot .user:hover{background:var(--nav-hover)}.nav-foot .avatar{color:#fff;background:linear-gradient(140deg,oklch(70% .12 252),oklch(50% .16 282));border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font-size:12px;font-weight:600;display:grid}.nav-foot .meta{flex-direction:column;min-width:0;display:flex}.nav-foot .meta b{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:600;overflow:hidden}.nav-foot .meta span{color:var(--nav-ink-3);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.app[data-collapsed=true] .brand-name,.app[data-collapsed=true] .nav-group-h,.app[data-collapsed=true] .nav-item span:not(.nav-badge),.app[data-collapsed=true] .nav-foot .meta,.app[data-collapsed=true] .nav-foot .user-extra{display:none}.app[data-collapsed=true] .nav-item{justify-content:center;padding:10px}.app[data-collapsed=true] .nav-item[aria-current=page]:before{left:-8px}.app[data-collapsed=true] .nav-badge{display:none}.topbar{z-index:5;background:color-mix(in oklch, var(--bg) 86%, transparent);-webkit-backdrop-filter:blur(10px)saturate(140%);border-bottom:1px solid var(--line-2);align-items:center;gap:14px;min-height:64px;padding:14px 32px;display:flex;position:sticky;top:0}.crumbs{color:var(--ink-3);align-items:center;gap:8px;font-size:14px;display:flex}.crumbs b{color:var(--ink);font-weight:600}.crumbs svg{color:var(--ink-4)}.topbar-search{flex:1;max-width:360px;position:relative}.topbar-search input{border:1px solid var(--line);background:var(--surface);width:100%;font:inherit;color:var(--ink);border-radius:10px;padding:9px 12px 9px 36px;transition:border-color .12s,box-shadow .12s}.topbar-search input:focus{border-color:color-mix(in oklch, var(--accent), white 30%);box-shadow:0 0 0 4px color-mix(in oklch, var(--accent), white 80%);outline:none}.topbar-search input::placeholder{color:var(--ink-4)}.topbar-search .ico{width:16px;height:16px;color:var(--ink-4);pointer-events:none;position:absolute;top:50%;left:11px;transform:translateY(-50%)}.topbar-search kbd{font:500 12px/1 var(--ff-mono);background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-3);border-radius:5px;padding:3px 7px;position:absolute;top:50%;right:9px;transform:translateY(-50%)}.search-dropdown{background:var(--surface);border:1px solid var(--line);z-index:50;border-radius:12px;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow:hidden;box-shadow:0 8px 24px -4px #00000059}.search-item{cursor:default;border-bottom:1px solid var(--line-2);padding:10px 14px;transition:background 80ms}.search-item:last-child{border-bottom:none}.search-item:hover{background:var(--bg-soft)}.search-item-name{color:var(--ink);font-size:13.5px;font-weight:500}.search-item-sub{color:var(--ink-3);margin-top:2px;font-size:12px}.topbar-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.icon-btn{border:1px solid var(--line);background:var(--surface);width:36px;height:36px;color:var(--ink-2);cursor:default;border-radius:10px;place-items:center;transition:background .12s,color .12s,border-color .12s;display:grid;position:relative}.icon-btn:hover{color:var(--ink);border-color:var(--line-strong)}.icon-btn .dot{background:var(--err);width:7px;height:7px;box-shadow:0 0 0 2px var(--surface);border-radius:50%;position:absolute;top:8px;right:8px}.page{max-width:1440px;padding:28px 32px 64px}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px;display:flex}.page-title{letter-spacing:-.02em;color:var(--ink);margin:0 0 4px;font-size:26px;font-weight:700}.page-sub{color:var(--ink-3);margin:0;font-size:15px}.btn{appearance:none;border:1px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);cursor:default;white-space:nowrap;border-radius:10px;align-items:center;gap:8px;padding:9px 14px;font-size:14px;font-weight:500;transition:background .12s,border-color .12s,transform .12s;display:inline-flex}.btn:hover{border-color:var(--line-strong);background:var(--surface-2)}.btn:active{transform:translateY(1px)}.btn .ico{width:16px;height:16px}.btn-primary{background:var(--accent);color:var(--on-accent);border-color:color-mix(in oklch, var(--accent), black 12%);box-shadow:0 1px 2px #00000014, 0 6px 12px -6px var(--accent), inset 0 1px 0 #ffffff2e}.btn-primary:hover{background:var(--accent-2);border-color:color-mix(in oklch, var(--accent-2), black 12%)}.btn-ghost{color:var(--ink-2);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}.btn-danger{color:var(--err-ink)}.btn-danger:hover{background:var(--err-soft);border-color:color-mix(in oklch, var(--err), white 60%)}.btn-sm{border-radius:8px;padding:7px 11px;font-size:13px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}.card-pad{padding:var(--pad-card)}.card-head{padding:16px var(--pad-card);border-bottom:1px solid var(--line-2);justify-content:space-between;align-items:center;gap:12px;display:flex}.card-title{color:var(--ink);margin:0;font-size:15px;font-weight:600}.card-sub{color:var(--ink-3);margin:2px 0 0;font-size:13.5px}.kpi{grid-template-columns:1fr auto;align-items:flex-start;gap:12px;padding:18px 20px 16px;display:grid}.kpi-label{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-size:12px;font-weight:600}.kpi-val{letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);margin-top:6px;font-size:32px;font-weight:600;line-height:1.05}.kpi-delta{color:var(--ok-ink);align-items:center;gap:4px;margin-top:8px;font-size:12.5px;font-weight:500;display:inline-flex}.kpi-delta.down{color:var(--err-ink)}.kpi-icon{background:var(--accent-soft);width:38px;height:38px;color:var(--accent-ink);border-radius:11px;place-items:center;display:grid}.kpi-icon.ok{background:var(--ok-soft);color:var(--ok-ink)}.kpi-icon.warn{background:var(--warn-soft);color:var(--warn-ink)}.kpi-icon.err{background:var(--err-soft);color:var(--err-ink)}.kpi-spark{height:36px;color:var(--accent);grid-column:1/-1;margin-top:8px}.badge{background:var(--bg-soft);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 9px 3px 7px;font-size:12.5px;font-weight:500;line-height:1.4;display:inline-flex}.badge .dot{background:currentColor;border-radius:50%;width:6px;height:6px}.badge-ok{background:var(--ok-soft);color:var(--ok-ink);border-color:color-mix(in oklch, var(--ok), white 60%)}.badge-warn{background:var(--warn-soft);color:var(--warn-ink);border-color:color-mix(in oklch, var(--warn), white 60%)}.badge-err{background:var(--err-soft);color:var(--err-ink);border-color:color-mix(in oklch, var(--err), white 60%)}.badge-info{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in oklch, var(--accent), white 60%)}.tbl{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.tbl thead th{text-align:left;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);background:var(--bg-soft);padding:12px 16px;font-size:12.5px;font-weight:600}.tbl tbody td{padding:var(--pad-row) 16px;border-bottom:1px solid var(--line-2);color:var(--ink);vertical-align:middle;font-size:14.5px}.tbl tbody tr:last-child td{border-bottom:0}.tbl tbody tr{transition:background .1s}.tbl tbody tr:hover{background:var(--bg-soft)}.tbl .mono{font-family:var(--ff-mono);color:var(--ink-2);font-size:13px}.tbl .actions{justify-content:flex-end;gap:4px;display:flex}.sensor-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);cursor:default;text-align:left;flex-direction:column;gap:14px;padding:18px;transition:border-color .12s,transform .12s,box-shadow .12s;display:flex}.sensor-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.sensor-head{align-items:flex-start;gap:12px;display:flex}.sensor-icon{border-radius:11px;flex:none;place-items:center;width:38px;height:38px;display:grid}.sensor-meta{flex:1;min-width:0}.sensor-meta b{color:var(--ink);font-size:15.5px;font-weight:600;line-height:1.2;display:block}.sensor-meta code{font-family:var(--ff-mono);color:var(--ink-3);margin-top:3px;font-size:12.5px;display:block}.sensor-readout{background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--r);justify-content:space-between;align-items:baseline;gap:10px;padding:14px 16px;display:flex}.readout-val{font-family:var(--ff-mono);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;font-size:28px;font-weight:500;line-height:1}.readout-unit{color:var(--ink-3);font-size:14px;font-family:var(--ff-mono);white-space:nowrap}.readout-meta{color:var(--ink-4);font-size:12.5px;font-family:var(--ff-mono);white-space:nowrap}.sensor-foot{color:var(--ink-3);justify-content:space-between;align-items:center;font-size:13px;display:flex}.sensor-foot .lhs,.sensor-foot .rhs{align-items:center;gap:6px;display:flex}.grid-kpi{gap:var(--gap);grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px;display:grid}.grid-sensors{gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.grid-sensors-page{gap:var(--gap);grid-template-columns:320px minmax(0,1fr);align-items:flex-start;display:grid}.sensor-list-col{max-height:calc(100vh - 120px);position:sticky;top:84px;overflow:auto}@media (width<=1100px){.grid-sensors-page{grid-template-columns:1fr}.grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.sensor-list-col{max-height:none;position:static;overflow:visible}}.row{align-items:center;gap:10px;display:flex}.section-title{letter-spacing:-.005em;color:var(--ink);align-items:center;gap:10px;margin:0 0 14px;font-size:14px;font-weight:600;display:flex}.section-title .count{color:var(--ink-3);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:12.5px;font-weight:500}.chart-card{padding:22px 24px}.chart-head{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;display:flex}.chart-title{color:var(--ink);margin:0;font-size:17px;font-weight:600}.chart-topic{font-family:var(--ff-mono);color:var(--ink-3);margin-top:3px;font-size:13px}.range-tabs{background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;gap:2px;padding:3px;display:inline-flex}.range-tabs button{appearance:none;font:500 13px/1 var(--ff-sans);color:var(--ink-2);cursor:default;background:0 0;border:0;border-radius:7px;padding:7px 12px}.range-tabs button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs)}.notif{padding:16px var(--pad-card);border-bottom:1px solid var(--line-2);grid-template-columns:auto 1fr auto;align-items:flex-start;gap:14px;display:grid}.notif:last-child{border-bottom:0}.notif:hover{background:var(--bg-soft)}.notif-icon{border-radius:10px;flex:none;place-items:center;width:34px;height:34px;display:grid}.notif-body b{color:var(--ink);margin-bottom:2px;font-size:14.5px;font-weight:600;display:block}.notif-body p{color:var(--ink-3);margin:0;font-size:13.5px;line-height:1.5}.notif-time{color:var(--ink-4);font-size:12.5px;font-family:var(--ff-mono);white-space:nowrap}.notif.unread{background:color-mix(in oklch, var(--accent-soft), transparent 50%)}.notif.unread .notif-body b:after{content:"";vertical-align:middle;background:var(--accent);border-radius:50%;width:6px;height:6px;margin-left:8px;display:inline-block}.empty{color:var(--ink-3);text-align:center;flex-direction:column;align-items:center;gap:8px;padding:56px 24px;display:flex}.empty-mark{background:var(--bg-soft);width:56px;height:56px;color:var(--ink-4);border:1px solid var(--line);border-radius:14px;place-items:center;margin-bottom:4px;display:grid}.empty b{color:var(--ink);font-size:16px;font-weight:600}.empty p{margin:0;font-size:14px}.modal-veil{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:oklch(20% .02 258/.45);place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--line);width:100%;max-width:460px;box-shadow:var(--shadow-lg);border-radius:18px;overflow:hidden}.modal-head{padding:20px 22px 4px}.modal-head h3{color:var(--ink);margin:0;font-size:18px;font-weight:600}.modal-head p{color:var(--ink-3);margin:4px 0 0;font-size:14px}.modal-body{flex-direction:column;gap:12px;padding:16px 22px 4px;display:flex}.modal-foot{justify-content:flex-end;gap:8px;padding:16px 22px 20px;display:flex}.field{flex-direction:column;gap:6px;display:flex}.field label{color:var(--ink-2);font-size:13px;font-weight:500}.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 12px;transition:border-color .12s,box-shadow .12s}.field input:focus,.field select:focus,.field textarea:focus{border-color:color-mix(in oklch, var(--accent), white 30%);box-shadow:0 0 0 4px color-mix(in oklch, var(--accent), white 80%);outline:none}.toolbar{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;display:flex}.search{position:relative}.search input{border:1px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);border-radius:10px;width:100%;padding:9px 12px 9px 36px;transition:border-color .12s,box-shadow .12s}.search input:focus{border-color:color-mix(in oklch, var(--accent), white 30%);box-shadow:0 0 0 4px color-mix(in oklch, var(--accent), white 80%);outline:none}.search input::placeholder{color:var(--ink-4)}.search .ico{width:16px;height:16px;color:var(--ink-4);pointer-events:none;position:absolute;top:50%;left:11px;transform:translateY(-50%)}.chip{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);cursor:default;white-space:nowrap;border-radius:9px;align-items:center;gap:6px;padding:6px 11px;font-size:13.5px;font-weight:500;display:inline-flex}.chip:hover{background:var(--surface-2);color:var(--ink)}.chip[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in oklch, var(--accent), white 55%)}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.65s linear infinite spin}.spinner-wrap{min-height:200px;color:var(--ink-3);flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:14px;display:flex}.admin-tabs{background:var(--bg-soft);border:1px solid var(--line);border-radius:11px;gap:4px;margin-bottom:22px;padding:4px;display:inline-flex}.admin-tab{appearance:none;box-shadow:none;font:500 13px var(--ff-sans);color:var(--ink-2);cursor:default;background:0 0;border:0;border-radius:8px;align-items:center;gap:7px;padding:7px 12px;transition:background .12s,color .12s,box-shadow .12s;display:inline-flex}.admin-tab[aria-pressed=true]{background:var(--surface);box-shadow:var(--shadow-xs);color:var(--ink)}.admin-tab:hover:not([aria-pressed=true]){color:var(--ink)}.mobile-nav,.sensor-list-mobile{display:none}@media (width<=720px){.app{grid-template-columns:1fr}.nav{display:none}.page{padding:16px 16px calc(76px + env(safe-area-inset-bottom))}.topbar{padding:12px 16px}.topbar-search,.crumbs span,.crumbs svg{display:none}.crumbs b{color:var(--ink);font-size:17px;font-weight:700}.sensor-list-desktop{display:none}.sensor-list-mobile{display:grid}.mobile-nav{z-index:100;background:var(--nav-bg);border-top:1px solid var(--nav-line);padding:6px 0 max(6px, env(safe-area-inset-bottom));display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-nav-item{appearance:none;color:var(--nav-ink-2);font:500 11px/1 var(--ff-sans);cursor:default;background:0 0;border:0;flex-direction:column;flex:1;align-items:center;gap:3px;padding:6px 4px;transition:color .12s;display:flex}.mobile-nav-item[aria-current=page]{color:var(--accent)}.mobile-nav-icon{place-items:center;width:24px;height:24px;display:grid;position:relative}.mobile-nav-badge{background:var(--err);color:#fff;font:600 10px/1 var(--ff-sans);border-radius:999px;place-items:center;min-width:16px;height:16px;padding:0 3px;display:grid;position:absolute;top:-4px;right:-6px}}::selection{background:color-mix(in oklch, var(--accent), white 70%)}