@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg:#080b10;--bg-surface:#0d1117;--bg-elevated:#161b22;--panel-border:#ffffff12;--text-primary:#e6edf3;--text-secondary:#7d8590;--text-muted:#3d444d;--c-cpu:#4f8ef7;--c-mem:#e8934a;--c-disk:#a371f7;--c-net:#3fb950;--c-alert:#f85149;--c-cpu-dim:#4f8ef71a;--c-mem-dim:#e8934a1a;--c-disk-dim:#a371f71a;--c-net-dim:#3fb9501a;--c-alert-dim:#f851491a;--c-cpu-glow:#4f8ef766;--c-mem-glow:#e8934a66;--c-disk-glow:#a371f766;--c-net-glow:#3fb95066;--c-alert-glow:#f8514966;--accent:var(--c-cpu);--accent-glow:var(--c-cpu-glow);--accent-dim:var(--c-cpu-dim);--success:var(--c-net);--warning:#d29922;--danger:var(--c-alert);--green:var(--c-net);--red:var(--c-alert);--yellow:#d29922;--green-glow:var(--c-net-glow);--red-glow:var(--c-alert-glow);--yellow-glow:#d2992266;--red-dim:var(--c-alert-dim);--yellow-dim:#d299221a;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", monospace;--radius-sm:5px;--radius-md:9px;--radius-lg:13px;--sidebar-w:210px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg);color:var(--text-primary);background-image:radial-gradient(70% 40% at 15% 0,#4f8ef70f 0%,#0000 60%),radial-gradient(50% 30% at 85% 5%,#3fb9500a 0%,#0000 50%),radial-gradient(circle at 1px 1px,#ffffff06 1px,#0000 0);background-size:100% 100%,100% 100%,28px 28px;background-attachment:fixed;line-height:1.5}.app-shell{grid-template-rows:52px 1fr 40px;height:100vh;display:grid;overflow:hidden}.app-header{border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:20;background:#080b10eb;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 1.25rem 0 1rem;display:flex}.header-brand{letter-spacing:-.02em;color:var(--text-primary);align-items:center;gap:.6rem;font-size:.92rem;font-weight:700;display:flex}.header-logo-dot{background:var(--c-cpu);width:9px;height:9px;box-shadow:0 0 10px var(--c-cpu-glow);border-radius:50%;flex-shrink:0;animation:3s ease-in-out infinite logoPulse}@keyframes logoPulse{0%,to{box-shadow:0 0 7px var(--c-cpu-glow)}50%{box-shadow:0 0 18px var(--c-cpu), 0 0 30px var(--c-cpu-glow)}}.header-meta{align-items:center;gap:.75rem;font-size:.8rem;display:flex}.app-body{grid-template-columns:var(--sidebar-w) 1fr;display:grid;overflow:hidden}.sidebar{border-right:1px solid var(--panel-border);background:#080b10b3;flex-direction:column;padding-top:.5rem;display:flex;overflow-y:auto}.sidebar-section-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:.9rem 1rem .3rem;font-size:.65rem;font-weight:700}.nav-item{text-align:left;cursor:pointer;width:100%;color:var(--text-secondary);background:0 0;border:none;border-left:2px solid #0000;padding:.6rem .9rem .6rem 1rem;transition:background .15s,color .15s,border-color .15s;display:block;position:relative}.nav-item:hover{color:var(--text-primary);background:#ffffff06}.nav-item.active{color:var(--text-primary);background:#ffffff0a}.nav-item-top{justify-content:space-between;align-items:center;margin-bottom:.35rem;display:flex}.nav-item-label{letter-spacing:.01em;align-items:center;gap:.45rem;font-size:.78rem;font-weight:600;display:flex}.nav-item-value{font-family:var(--font-mono);font-size:.72rem;font-weight:600}.nav-spark{line-height:0;display:block}.nav-item-sub{color:var(--text-muted);margin-top:.25rem;font-size:.65rem;display:block}.app-main{flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex;overflow-y:auto}.summary-grid{border-radius:var(--radius-lg);background:var(--panel-border);border:1px solid var(--panel-border);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;display:grid;overflow:hidden}.summary-card{background:var(--bg-surface);cursor:pointer;text-align:left;color:inherit;border:none;padding:1rem 1.2rem;transition:background .2s}.summary-card:hover{background:var(--bg-elevated)}.summary-card-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);align-items:center;gap:.4rem;margin-bottom:.4rem;font-size:.68rem;font-weight:700;display:flex}.summary-card-value{font-family:var(--font-mono);letter-spacing:-.03em;font-size:1.7rem;font-weight:600;line-height:1}.summary-card-sub{color:var(--text-secondary);font-size:.72rem;font-family:var(--font-mono);margin-top:.35rem}.detail-view{flex-direction:column;gap:1.25rem;animation:.25s both fadeSlideIn;display:flex}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.detail-header{border-radius:var(--radius-lg);background:var(--bg-surface);border:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:1.1rem 1.4rem;display:flex}.detail-header-left{align-items:center;gap:.9rem;display:flex}.detail-header-icon{border-radius:var(--radius-md);background:var(--detail-dim,#4f8ef71f);width:36px;height:36px;color:var(--detail-color,var(--c-cpu));flex-shrink:0;justify-content:center;align-items:center;display:flex}.detail-header-title{letter-spacing:-.02em;font-size:1.05rem;font-weight:700}.detail-header-subtitle{color:var(--text-secondary);font-size:.75rem;font-family:var(--font-mono);margin-top:.1rem}.detail-header-value{font-family:var(--font-mono);letter-spacing:-.04em;font-size:2.4rem;font-weight:600;line-height:1}.detail-stat-row{background:var(--panel-border);border-radius:var(--radius-md);border:1px solid var(--panel-border);grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;display:grid;overflow:hidden}.detail-stat{background:var(--bg-surface);padding:.75rem 1rem}.detail-stat-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.3rem;font-size:.65rem;font-weight:700}.detail-stat-value{font-family:var(--font-mono);color:var(--text-primary);font-size:1.15rem;font-weight:600}.detail-section{background:var(--bg-surface);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:1.1rem 1.3rem 1rem}.detail-section-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.9rem;font-size:.68rem;font-weight:700}.detail-chart-container{width:100%;height:240px}.chart-tooltip{background:#080b10f2;border:1px solid #ffffff1a;border-radius:7px;padding:.4rem .7rem;font-size:.82rem}.info-grid{background:var(--panel-border);border-radius:var(--radius-md);border:1px solid var(--panel-border);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;display:grid;overflow:hidden}.info-row{background:var(--bg-surface);justify-content:space-between;align-items:center;padding:.65rem 1rem;font-size:.82rem;display:flex}.info-row-label{color:var(--text-secondary)}.info-row-value{font-family:var(--font-mono);font-weight:500}.alert-inline{border-radius:var(--radius-md);border:1px solid;padding:.75rem 1rem;font-size:.82rem;font-weight:500}.progress-bar-bg{background:#ffffff0f;border-radius:9999px;width:100%;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--c-cpu), #6eb3ff);height:100%;box-shadow:0 0 7px var(--c-cpu-glow);border-radius:9999px;transition:width .9s cubic-bezier(.4,0,.2,1)}.progress-bar-fill.disk{background:linear-gradient(90deg, var(--c-disk), #c39bff);box-shadow:0 0 7px var(--c-disk-glow)}.progress-bar-fill.warning{background:linear-gradient(90deg, var(--warning), #f5c842);box-shadow:0 0 7px #d2992266}.progress-bar-fill.danger{background:linear-gradient(90deg, var(--danger), #ff7b75);box-shadow:0 0 7px var(--c-alert-glow)}.info-pill{letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);background:#ffffff0f;border:1px solid #ffffff14;border-radius:4px;align-items:center;padding:.2rem .5rem;font-size:.65rem;font-weight:700;display:inline-flex}.status-badge{letter-spacing:.06em;text-transform:uppercase;color:var(--c-net);background:#3fb95014;border:1px solid #3fb95033;border-radius:9999px;align-items:center;gap:.4rem;padding:.3rem .8rem;font-size:.72rem;font-weight:700;display:flex}.status-badge.disconnected{background:var(--c-alert-dim);color:var(--c-alert);border-color:#f8514933}.status-dot{background:var(--c-alert);border-radius:50%;width:6px;height:6px}.status-dot.connected{background:var(--c-net);box-shadow:0 0 5px var(--c-net-glow);animation:2s ease-in-out infinite dotPulse}@keyframes dotPulse{0%,to{box-shadow:0 0 4px var(--c-net-glow)}50%{box-shadow:0 0 10px var(--c-net), 0 0 18px var(--c-net-glow)}}.app-footer{border-top:1px solid var(--panel-border);color:var(--text-muted);letter-spacing:.02em;background:#080b10b3;justify-content:center;align-items:center;gap:.35rem;font-size:.75rem;display:flex}.footer-link{color:var(--text-secondary);font-weight:600;text-decoration:none;transition:color .2s;position:relative}.footer-link:after{content:"";background:var(--c-cpu);transform-origin:0;height:1px;transition:transform .22s;position:absolute;bottom:-1px;left:0;right:0;transform:scaleX(0)}.footer-link:hover{color:var(--c-cpu)}.footer-link:hover:after{transform:scaleX(1)}.loading-screen{height:100%;color:var(--text-secondary);flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;gap:1rem;display:flex}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.animate-pulse{animation:2s ease-in-out infinite pulse}.mono{font-family:var(--font-mono)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}