:root,[data-theme=light]{--bg:#f4f6fb;--surface:#fff;--surface-2:#eef1f7;--border:#d9dfea;--text:#1c2333;--text-muted:#5a6478;--accent:#2563eb;--accent-soft:#dbeafe;--ok:#15803d;--ok-bg:#dcfce7;--warn:#b45309;--warn-bg:#fef3c7;--crit:#b91c1c;--crit-bg:#fee2e2;--info:#0369a1;--info-bg:#e0f2fe;--muted:#64748b;--muted-bg:#e2e8f0;--shadow:0 1px 3px #10182814, 0 1px 2px #1018280a}[data-theme=dark]{--bg:#0b1020;--surface:#131a2e;--surface-2:#1b2440;--border:#2a3552;--text:#e6eaf5;--text-muted:#98a3bd;--accent:#7fb0ff;--accent-soft:#1d3157;--ok:#6ee7a0;--ok-bg:#113828;--warn:#fcd34d;--warn-bg:#3f2f10;--crit:#fca5a5;--crit-bg:#461c1c;--info:#7dd3fc;--info-bg:#123448;--muted:#94a3b8;--muted-bg:#24304d;--shadow:0 1px 3px #0006}*{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--bg);color:var(--text);margin:0;font-family:Noto Sans Thai,IBM Plex Sans Thai,Leelawadee UI,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55}a{color:var(--accent)}button{font:inherit;cursor:pointer;color:inherit;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:6px 14px;transition:background .15s}button:hover{background:var(--accent-soft)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.skip-link{position:absolute;left:-9999px}.skip-link:focus{z-index:50;background:var(--surface);border-radius:8px;padding:8px 14px;top:8px;left:8px}.app-header{z-index:20;background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:10px 20px;display:flex;position:sticky;top:0}.app-header .brand{color:var(--text);align-items:center;gap:10px;font-size:1.05rem;font-weight:700;text-decoration:none;display:flex}.app-header .brand img{width:28px;height:28px}.app-header .spacer{flex:1}.theme-toggle{align-items:center;gap:6px;display:inline-flex}.layout{grid-template-columns:220px minmax(0,1fr);gap:20px;max-width:1240px;margin:0 auto;padding:20px;display:grid}.sidebar nav{flex-direction:column;gap:4px;display:flex;position:sticky;top:76px}.sidebar a{color:var(--text-muted);border-radius:10px;align-items:center;gap:10px;padding:9px 14px;font-weight:500;text-decoration:none;display:flex}.sidebar a:hover{background:var(--surface-2);color:var(--text)}.sidebar a[aria-current=page]{background:var(--accent-soft);color:var(--accent)}.content{min-width:0}.mobile-nav{display:none}.page h1{margin:0 0 4px;font-size:1.35rem}.page .subtitle{color:var(--text-muted);margin:0 0 18px;font-size:.92rem}.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:16px 18px}.card h2{margin:0 0 12px;font-size:1rem}.grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;display:grid}.grid-wide{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.stat-value{font-variant-numeric:tabular-nums;margin:2px 0;font-size:1.6rem;font-weight:700}.stat-title{color:var(--text-muted);font-size:.85rem}.stat-hint{color:var(--text-muted);font-size:.82rem}.stack{flex-direction:column;gap:14px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.spread{justify-content:space-between}.badge{white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:3px 11px;font-size:.83rem;font-weight:600;display:inline-flex}.badge .dot{background:currentColor;border-radius:50%;width:8px;height:8px}.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.crit{background:var(--crit-bg);color:var(--crit)}.badge.info{background:var(--info-bg);color:var(--info)}.badge.muted{background:var(--muted-bg);color:var(--muted)}.mono{font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,Consolas,monospace;font-size:.85em}.muted{color:var(--text-muted)}.health-banner{align-items:flex-start;gap:14px;display:flex}.health-banner .reasons{color:var(--text-muted);margin:6px 0 0;padding-left:18px;font-size:.9rem}.progress{background:var(--surface-2);border-radius:6px;height:8px;margin:8px 0 4px;overflow:hidden}.progress>div{background:var(--ok);border-radius:6px;height:100%}.progress>div.warn{background:var(--warn)}.progress>div.crit{background:var(--crit)}table{border-collapse:collapse;width:100%;font-size:.92rem}th{text-align:left;color:var(--text-muted);border-bottom:1px solid var(--border);padding:6px 8px;font-size:.8rem;font-weight:600}td{border-bottom:1px solid var(--border);vertical-align:top;padding:9px 8px}tr:last-child td{border-bottom:none}.scroll-x{overflow-x:auto}.segmented{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex}.segmented button{background:0 0;border:none;border-radius:8px;padding:5px 12px;font-size:.88rem}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--accent);box-shadow:var(--shadow);font-weight:600}.state-box{text-align:center;color:var(--text-muted);padding:26px 18px}.state-box .icon{font-size:1.6rem}.error-banner{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit);border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;padding:10px 14px;display:flex}.notice-banner{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);border-radius:12px;margin-bottom:14px;padding:10px 14px;font-size:.9rem}.skeleton{background:var(--surface-2);border-radius:10px;min-height:22px;position:relative;overflow:hidden}.skeleton:after{content:"";background:linear-gradient(90deg,#0000,#ffffff40,#0000);animation:1.4s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.refresh-info{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.82rem}.chart{width:100%;height:170px;display:block}.chart-area{fill:var(--accent);opacity:.14}.chart-line{fill:none;stroke:var(--accent);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linejoin:round}.chart-grid{stroke:var(--border);stroke-width:1px;vector-effect:non-scaling-stroke}.chart-labels{color:var(--text-muted);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:4px;font-size:.78rem;display:flex}.chart-summary{color:var(--text-muted);margin-top:2px;font-size:.84rem}.app-card .hostname{overflow-wrap:anywhere;font-size:1rem;font-weight:700}.app-card .meta{color:var(--text-muted);overflow-wrap:anywhere;margin:6px 0 10px;font-size:.85rem}.open-btn{background:var(--accent);color:#fff;border-radius:9px;padding:7px 16px;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-block}[data-theme=dark] .open-btn{color:#0b1020}@media (width<=860px){.layout{grid-template-columns:1fr;padding:14px 12px 92px}.sidebar{display:none}.mobile-nav{z-index:30;background:var(--surface);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-nav a{color:var(--text-muted);border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:6px 2px;font-size:.68rem;text-decoration:none;display:flex}.mobile-nav a .icon{font-size:1.15rem}.mobile-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft)}.stat-value{font-size:1.35rem}}