:root{--bg: oklch(.962 .014 75);--bg-2: oklch(.945 .018 72);--surface: oklch(.992 .008 80);--surface-2: oklch(.978 .012 78);--border: oklch(.885 .022 68);--border-strong: oklch(.82 .03 62);--ink: oklch(.28 .04 55);--ink-2: oklch(.42 .045 58);--ink-3: oklch(.58 .04 62);--ink-4: oklch(.72 .03 68);--accent: oklch(.62 .13 55);--accent-soft: oklch(.88 .06 65);--accent-deep: oklch(.46 .1 50);--accent-glow: oklch(.62 .13 55 / .18);--ok: oklch(.7 .13 145);--ok-soft: oklch(.92 .05 140);--warn: oklch(.78 .14 80);--warn-soft: oklch(.94 .06 80);--bad: oklch(.65 .18 28);--bad-soft: oklch(.92 .06 30);--r-sm: 10px;--r: 16px;--r-lg: 22px;--r-xl: 28px;--shadow-1: 0 1px 0 oklch(1 0 0 / .7) inset, 0 1px 2px oklch(.3 .05 55 / .04), 0 4px 14px -6px oklch(.3 .05 55 / .1);--shadow-2: 0 1px 0 oklch(1 0 0 / .8) inset, 0 2px 4px oklch(.3 .05 55 / .05), 0 14px 30px -14px oklch(.3 .05 55 / .18);--shadow-pop: 0 1px 0 oklch(1 0 0 / .9) inset, 0 18px 40px -18px oklch(.3 .05 55 / .28);--font-display: "Quicksand", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--tick: 4s}[data-theme=dark]{--bg: oklch(.2 .018 50);--bg-2: oklch(.225 .022 52);--surface: oklch(.255 .022 54);--surface-2: oklch(.285 .024 55);--border: oklch(.34 .028 58);--border-strong: oklch(.42 .035 60);--ink: oklch(.96 .014 75);--ink-2: oklch(.82 .025 70);--ink-3: oklch(.66 .03 65);--ink-4: oklch(.52 .035 62);--accent: oklch(.74 .13 62);--accent-soft: oklch(.4 .08 58);--accent-deep: oklch(.86 .1 70);--accent-glow: oklch(.74 .13 62 / .22);--ok: oklch(.78 .14 148);--ok-soft: oklch(.35 .06 145);--warn: oklch(.84 .14 82);--warn-soft: oklch(.38 .07 78);--bad: oklch(.72 .16 28);--bad-soft: oklch(.36 .08 28);--shadow-1: 0 1px 0 oklch(1 0 0 / .04) inset, 0 1px 2px oklch(0 0 0 / .2), 0 4px 14px -6px oklch(0 0 0 / .3);--shadow-2: 0 1px 0 oklch(1 0 0 / .05) inset, 0 2px 4px oklch(0 0 0 / .25), 0 14px 30px -14px oklch(0 0 0 / .5);--shadow-pop: 0 1px 0 oklch(1 0 0 / .06) inset, 0 18px 40px -18px oklch(0 0 0 / .6)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(1100px 600px at 8% -8%,oklch(.96 .04 70) 0%,transparent 60%),radial-gradient(900px 600px at 100% 10%,oklch(.97 .03 50) 0%,transparent 55%),var(--bg);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}[data-theme=dark] body{background:radial-gradient(1100px 600px at 8% -8%,oklch(.3 .04 55) 0%,transparent 60%),radial-gradient(900px 600px at 100% 10%,oklch(.28 .035 40) 0%,transparent 55%),var(--bg)}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.mono{font-family:var(--font-mono)}.app{max-width:1480px;margin:0 auto;padding:24px 32px 80px}.nav{display:flex;align-items:center;gap:18px;padding:14px 18px;margin-bottom:24px;background:color-mix(in oklch,var(--surface) 88%,transparent);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}.brand{display:flex;align-items:center;gap:12px;padding-right:18px;border-right:1px solid var(--border);margin-right:4px}.brand-mark{width:34px;height:34px;border-radius:12px;background:radial-gradient(circle at 30% 30%,oklch(.94 .04 80),var(--accent) 70%);box-shadow:var(--shadow-1),0 0 0 1px #ffffff4d inset;position:relative}.brand-mark:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:8px;background:radial-gradient(circle at 65% 65%,oklch(1 0 0 / .25),transparent 50%)}.brand-name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em}.brand-sub{font-size:12px;color:var(--ink-3);margin-top:-2px}.nav-tabs{display:flex;gap:4px;flex:1}.tab{padding:9px 16px;border-radius:12px;font-weight:600;font-size:14.5px;color:var(--ink-2);transition:all .18s ease}.tab:hover{background:var(--bg-2);color:var(--ink)}.tab.active{background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-1)}.nav-right{display:flex;align-items:center;gap:10px}.clock{display:flex;flex-direction:column;align-items:flex-end;padding-right:10px}.clock-time{font-family:var(--font-display);font-weight:600;font-size:16px}.clock-date{font-size:12px;color:var(--ink-3)}.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,oklch(.78 .1 65),var(--accent));display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#fff;box-shadow:var(--shadow-1)}.hero{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:14px;margin-bottom:22px}.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-1);position:relative;overflow:hidden}.hero-card.primary{background:radial-gradient(120% 140% at 0% 0%,oklch(.94 .07 70) 0%,transparent 55%),linear-gradient(135deg,#df8f48,#a55a37);border-color:transparent;color:#fff;box-shadow:var(--shadow-2)}[data-theme=dark] .hero-card.primary{background:radial-gradient(120% 140% at 0% 0%,oklch(.5 .1 60) 0%,transparent 55%),linear-gradient(135deg,#925019,#502515)}.hero-label{font-size:12px;opacity:.75;letter-spacing:.06em;text-transform:uppercase;font-weight:700}.hero-card.primary .hero-label{color:#fff4e1;color:oklch(.97 .03 80)}.hero-greet{font-family:var(--font-display);font-weight:600;font-size:26px;margin:4px 0 2px;letter-spacing:-.015em}.hero-meta{font-size:13.5px;opacity:.8}.hero-card.primary .hero-meta{color:#fff4e1;color:oklch(.97 .03 80);opacity:.85}.hero-stat-num{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.025em;margin-top:6px;display:flex;align-items:baseline;gap:6px}.hero-stat-unit{font-size:14px;font-weight:600;color:var(--ink-3)}.hero-stat-trend{font-size:12px;color:var(--ok);font-weight:700;margin-top:4px;display:flex;align-items:center;gap:4px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:14px;transition:box-shadow .25s ease,transform .25s ease}.card:hover{box-shadow:var(--shadow-2)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.005em}.card-title .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #67b36a2e}.card-title .dot.warn{background:var(--warn);box-shadow:0 0 0 3px #e6ac3d33}.card-title .dot.bad{background:var(--bad);box-shadow:0 0 0 3px #e8594d33}.card-sub{font-size:12px;color:var(--ink-3);font-weight:600}.card-tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);letter-spacing:.03em}.card-tag.ok{background:var(--ok-soft);color:#1d5522}[data-theme=dark] .card-tag.ok{color:#9be39d}.card-tag.warn{background:var(--warn-soft);color:#744c00;color:oklch(.45 .12 75)}[data-theme=dark] .card-tag.warn{color:#ffcf7d;color:oklch(.88 .13 80)}.card-tag.bad{background:var(--bad-soft);color:#972620}[data-theme=dark] .card-tag.bad{color:#ffbab0;color:oklch(.85 .15 28)}.stat-row{display:flex;gap:22px}.stat{display:flex;flex-direction:column;gap:2px}.stat-label{font-size:11.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}.stat-value{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em}.stat-value .unit{font-size:12px;color:var(--ink-3);font-weight:600;margin-left:2px}.gauge{width:78px;height:78px;position:relative}.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}.gauge .track{stroke:var(--bg-2)}.gauge .fill{stroke:var(--accent);transition:stroke-dashoffset .6s ease}.gauge .fill.warn{stroke:var(--warn)}.gauge .fill.bad{stroke:var(--bad)}.gauge .center{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.02em}.gauge .center small{font-size:10px;color:var(--ink-3);font-weight:700;margin-top:1px}.bar{width:100%;height:6px;background:var(--bg-2);border-radius:999px;overflow:hidden;position:relative}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),oklch(.72 .13 70));border-radius:999px;transition:width .6s ease}.bar>i.warn{background:linear-gradient(90deg,var(--warn),oklch(.84 .14 90))}.bar>i.bad{background:linear-gradient(90deg,var(--bad),oklch(.74 .16 35))}.spark{width:100%;height:44px;display:block;overflow:visible}.spark .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.spark .area{fill:var(--accent-glow)}.spark.breathing{animation:breathe var(--tick) ease-in-out infinite;transform-origin:center}@keyframes breathe{0%,to{opacity:.92}50%{opacity:1}}.players{display:flex;flex-direction:column;gap:8px}.player{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px}.player:hover{background:var(--bg-2)}.player .pa{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:11px;color:#fff}.player .pn{font-weight:700;font-size:13.5px;flex:1}.player .pt{font-size:11.5px;color:var(--ink-3);font-family:var(--font-mono)}.player .ping{font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--ok-soft);color:#1d5522;font-family:var(--font-mono)}[data-theme=dark] .player .ping{color:#9be39d}.containers{display:flex;flex-direction:column;gap:4px}.ctr{display:grid;grid-template-columns:18px 1.4fr 1fr 80px 70px 60px;align-items:center;gap:12px;padding:10px;border-radius:10px;font-size:13px}.ctr:hover{background:var(--bg-2)}.ctr-dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}.ctr-dot.warn{background:var(--warn)}.ctr-dot.stop{background:var(--ink-4)}.ctr-name{font-weight:700}.ctr-img{color:var(--ink-3);font-family:var(--font-mono);font-size:12px}.ctr-stat{font-family:var(--font-mono);font-size:12px;color:var(--ink-2);font-weight:600}.ctr-up{font-size:11.5px;color:var(--ink-3)}.ctr-head{font-size:10.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:0 10px 4px;border-bottom:1px dashed var(--border);margin-bottom:4px}.devices{display:flex;flex-direction:column;gap:3px}.device{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:7px 8px;border-radius:10px}.device:hover{background:var(--bg-2)}.device-icon{width:28px;height:28px;border-radius:8px;background:var(--bg-2);display:grid;place-items:center;font-size:14px;color:var(--ink-2)}.device-name{font-weight:700;font-size:13.5px}.device-ip{font-size:11px;color:var(--ink-3);font-family:var(--font-mono)}.device-rate{display:flex;flex-direction:column;align-items:flex-end;font-size:11.5px;color:var(--ink-3)}.device-rate b{color:var(--ink);font-family:var(--font-mono);font-weight:700;font-size:12.5px}.chart-wrap{position:relative}.chart{width:100%;height:180px;display:block}.chart .grid-line{stroke:var(--border);stroke-dasharray:2 4;stroke-width:1;opacity:.7}.chart .axis-label{fill:var(--ink-3);font-size:10px;font-weight:700;font-family:var(--font-body)}.chart .area-dl{fill:var(--accent-glow)}.chart .area-ul{fill:#c16e2d14}.chart .line-dl{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}.chart .line-ul{fill:none;stroke:var(--accent-deep);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 3}.legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--ink-3)}.legend-item{display:flex;align-items:center;gap:6px}.legend-item i{width:18px;height:3px;border-radius:2px;background:var(--accent);display:block}.legend-item.ul i{background:var(--accent-deep)}.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-3)}.live:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bad);animation:pulse calc(var(--tick) / 2) ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.world-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:13px;color:#fff;flex-shrink:0}.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:24px 4px 12px}.section-head h2{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:0}.section-head .meta{font-size:12px;color:var(--ink-4)}@keyframes tickFlash{0%{color:var(--accent)}to{color:inherit}}.tick-flash{animation:tickFlash 1.2s ease-out}.scroll{max-height:240px;overflow-y:auto;margin:0 -4px;padding:0 4px}.scroll::-webkit-scrollbar{width:6px}.scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}@media (max-width: 1240px){.col-4,.col-5,.col-7{grid-column:span 6}.hero{grid-template-columns:1fr 1fr}}@media (max-width: 760px){.grid>*{grid-column:span 12!important}.hero{grid-template-columns:1fr}.nav-tabs{display:none}}.settings-fab{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-2);font-size:18px;z-index:100;transition:transform .15s ease}.settings-fab:hover{transform:scale(1.05)}.settings-panel{position:fixed;right:20px;bottom:76px;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:14px 16px;z-index:101;font-size:13.5px}.settings-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px dashed var(--border);margin-bottom:10px}.settings-close{font-size:20px;line-height:1;color:var(--ink-3);padding:0 4px}.settings-section{margin-bottom:12px}.settings-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;margin-bottom:6px}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-weight:600}.settings-row select,.settings-row input[type=range]{font:inherit;color:var(--ink);background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:3px 6px;max-width:140px}.settings-row input[type=checkbox]{width:16px;height:16px}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);padding:36px 32px;text-align:center}.auth-card h1{font-family:var(--font-display);font-size:28px;margin:0 0 6px}.auth-card p{color:var(--ink-3);font-size:14px;margin:0 0 22px}.auth-card .auth-mark{width:56px;height:56px;border-radius:16px;margin:0 auto 16px;background:radial-gradient(circle at 30% 30%,oklch(.94 .04 80),var(--accent) 70%);box-shadow:var(--shadow-1),0 0 0 1px #ffffff4d inset}.auth-btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:12px 22px;border-radius:14px;font-size:14.5px;box-shadow:var(--shadow-1);text-decoration:none;border:0;cursor:pointer}.auth-btn:hover{box-shadow:var(--shadow-2)}.auth-err{background:var(--bad-soft);color:#972620;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;font-weight:600}[data-theme=dark] .auth-err{color:#ffbab0;color:oklch(.85 .15 28)}.loading{min-height:100vh;display:grid;place-items:center;color:var(--ink-3);font-weight:600}