:root{color-scheme:dark;--bg:#0d1117;--pure:#000;--inset:#010409;--surface:#151a22;--surface2:#24292f;--surface3:#2e374a;--ink:#fff;--ink-default:#f0f6fc;--muted:#9198a1;--subtle:#a4aea6;--line:#30363d;--hair:#484f58;--blue:#8dd6ff;--blue2:#4493f8;--green:#5fed83;--success:#08872b;--red:#ff7b72;--yellow:#d29922;--radius:16px;--shadow:none}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink-default);font:400 14px/1.5 "Mona Sans","MonaSansFallback",-apple-system,system-ui,"Segoe UI",Arial,sans-serif;letter-spacing:.12px}button,input,select{font:inherit}.shell{min-height:100vh;background:var(--bg)}
.sidebar{position:fixed;z-index:5;inset:0 auto 0 0;width:256px;background:var(--pure);color:var(--ink);padding:20px 16px;border-right:1px solid #21262d;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;padding:5px 8px 28px}.brandmark{width:36px;height:36px;border-radius:8px;background:var(--surface2);border:1px solid var(--hair);display:grid;place-items:center;color:var(--blue);font-weight:500;font-size:19px}.brand strong{font-size:14px;letter-spacing:.02em;font-weight:500}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:2px;letter-spacing:.14em}.navlabel{font-size:10px;color:var(--muted);letter-spacing:.13em;padding:10px 12px}.nav{display:grid;gap:5px}.nav button{border:1px solid transparent;background:transparent;color:#c9d1d9;text-align:left;padding:11px 12px;border-radius:8px;cursor:pointer;display:flex;gap:12px;align-items:center;font-weight:400;font-size:13px}.nav button:hover{background:#161b22;color:#fff;border-color:#30363d}.nav button.active{background:#151a22;color:var(--blue);border-color:#30363d}.nav .ico{width:18px;text-align:center;font-size:16px;color:var(--blue)}.sidebarfoot{margin-top:auto;border-top:1px solid #21262d;padding:16px 8px 3px;color:var(--muted);font-size:11px;line-height:1.8}.main{margin-left:256px;min-height:100vh}.topbar{height:64px;background:var(--pure);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:4;border-bottom:1px solid #21262d}.crumb{font-weight:400;font-size:13px;color:var(--ink-default)}.topright{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 12px #5fed8370}.avatar{width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--hair);display:grid;place-items:center;color:var(--blue);font-weight:500}
.content{max-width:1500px;margin:auto;padding:30px 32px 56px}.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;padding:24px 26px;background:var(--pure);border:1px solid #21262d;border-radius:16px}.eyebrow{font-size:10px;letter-spacing:.14em;color:var(--blue);font-weight:500;text-transform:uppercase}.pagehead h1{font-size:clamp(25px,3vw,38px);line-height:1.15;margin:7px 0;font-weight:425;letter-spacing:-1.1px;color:#fff}.sub{color:var(--muted);font-size:13px}.btn{border:1px solid var(--hair);background:var(--pure);color:var(--ink-default);padding:9px 13px;border-radius:8px;cursor:pointer;font-weight:400;font-size:12px;transition:background .15s,border-color .15s,color .15s}.btn:hover{border-color:var(--blue);color:var(--blue);background:var(--surface)}.btn.primary{background:var(--success);border-color:var(--success);color:#fff}.btn.primary:hover{background:#0a9b32;border-color:#0a9b32;color:#fff}.btn.danger{color:var(--red);border-color:#6e3633}.btn:disabled{opacity:.45;cursor:not-allowed}
.grid{display:grid;gap:16px}.metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.card{background:var(--surface);border:1px solid #30363d;border-radius:16px;padding:20px;box-shadow:none;min-width:0}.metric-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}.metric-icon{width:31px;height:31px;border-radius:8px;background:#8dd6ff12;color:var(--blue);display:grid;place-items:center;font-size:16px;border:1px solid #8dd6ff25}.metric-value{font-size:27px;font-weight:460;letter-spacing:-.7px;margin:12px 0 4px;color:#fff}.metric-foot{font-size:11px;color:var(--muted)}.bar{height:6px;background:#30363d;border-radius:10px;overflow:hidden;margin-top:13px}.bar span{display:block;height:100%;background:var(--blue);border-radius:10px;transition:width .3s}.two{grid-template-columns:1.35fr 1fr}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px}.cardhead h3{font-size:15px;margin:0;font-weight:480;color:#fff}.muted{color:var(--muted)}.small{font-size:11px}.hostline{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid #30363d}.hostline:last-child{border:0}.hosticon{width:36px;height:36px;background:#21262d;border-radius:8px;display:grid;place-items:center;color:var(--blue)}.hostline strong{font-size:12px;font-weight:500}.hostline small{display:block;color:var(--muted);margin-top:3px;font-size:11px}.right{margin-left:auto;text-align:right}.status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:500;background:#21262d;color:#c9d1d9;border:1px solid #30363d}.status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.status.up{background:#08872b20;color:#5fed83;border-color:#08872b55}.status.down{background:#ff7b7218;color:var(--red);border-color:#ff7b7240}.status.warn{background:#d2992218;color:#e3b341;border-color:#d2992240}.status.unknown{background:#21262d;color:var(--muted)}
.sysinfo{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.sysinfo div{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:12px}.sysinfo label{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.sysinfo b{font-size:12px;font-weight:400;overflow-wrap:anywhere;color:var(--ink-default)}.tablewrap{overflow:auto;border:1px solid #30363d;border-radius:9px}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;background:#010409;color:var(--blue);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:13px 14px}td{padding:12px 14px;border-top:1px solid #30363d;font-size:12px}tr:hover td{background:#1c2128}.mono,pre{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace}.terminal{background:var(--inset);color:var(--ink-default);border:1px solid #30363d;border-radius:12px;padding:16px;white-space:pre-wrap;overflow:auto;max-height:520px;font:11px/1.7 ui-monospace,monospace;min-height:140px}.servicegrid{grid-template-columns:1fr}.servicecard{display:grid;grid-template-columns:42px minmax(160px,1fr) auto minmax(270px,auto);align-items:center;column-gap:16px;row-gap:4px;padding:16px 18px}.servicecard>.metric-icon{grid-column:1;grid-row:1/3;margin:0!important}.servicecard>h3{grid-column:2;grid-row:1;margin:0;font-size:15px;font-weight:480}.servicecard>.mono{grid-column:2;grid-row:2;min-width:0;overflow-wrap:anywhere}.servicecard>div[style*="margin-top:13px"]{grid-column:3;grid-row:1/3;margin:0!important}.service-actions{grid-column:4;grid-row:1/3;display:grid;grid-template-columns:repeat(3,minmax(78px,1fr));gap:7px;margin:0;min-width:0}.service-actions .btn{font-size:11px;padding:8px 10px;white-space:nowrap}.servicecard>.service-state{grid-column:3;grid-row:1/3;margin:0!important}.service-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}.service-toolbar input{flex:1 1 240px;min-width:180px;border:1px solid #afb8c1;background:#fff;color:#24292f;border-radius:8px;padding:10px 12px;outline:none}.service-toolbar input:focus{border-color:#0969da;box-shadow:0 0 0 2px #0969da22}.service-toolbar select{min-width:170px}.service-toolbar #serviceCounts{margin-left:auto}.service-actions .btn:disabled{opacity:.35;cursor:not-allowed}.hidden{display:none!important}.notice{padding:12px 14px;background:#151a22;border:1px solid #30363d;border-left:3px solid var(--blue);border-radius:8px;color:#c9d1d9;font-size:12px;line-height:1.7;margin-bottom:18px}.login{position:fixed;inset:0;background:#000e;z-index:20;display:grid;place-items:center;padding:20px}.loginbox{background:var(--surface);border:1px solid #30363d;border-radius:16px;max-width:420px;width:100%;padding:32px;box-shadow:none}.loginbox h2{margin:0 0 7px;font-size:24px;font-weight:460;letter-spacing:-.5px;color:#fff}.loginbox p{color:var(--muted);font-size:13px;line-height:1.6}.field{display:grid;gap:6px;margin:16px 0}.field label{font-size:11px;font-weight:500;color:#c9d1d9}.field input{width:100%;border:1px solid #484f58;background:#0d1117;color:#f0f6fc;border-radius:8px;padding:11px 12px;outline:none}.field input:focus{border-color:var(--blue);box-shadow:0 0 0 2px #8dd6ff20}.loginerror{color:var(--red);font-size:12px;min-height:18px}.mobilemenu{display:none}.drawer-backdrop{display:none}.toast{position:fixed;right:22px;bottom:22px;background:#24292f;border:1px solid #484f58;color:white;padding:12px 16px;border-radius:8px;box-shadow:none;z-index:30;font-size:12px}.toast.bad{background:#3b1718;border-color:#8b3a3a}.settingsrow{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #30363d;gap:20px}.settingsrow:last-child{border:0}.settingsrow strong{font-size:12px;font-weight:500}.settingsrow p{margin:4px 0 0;color:var(--muted);font-size:11px}.empty{padding:30px;text-align:center;color:var(--muted)}select.btn{background:var(--surface2);color:var(--ink-default)}a{color:var(--blue)}
.swal2-popup.evreghen-swal{border:1px solid #d1d9e0;border-radius:16px;box-shadow:0 12px 40px #1f23281c;font-family:inherit}.swal2-popup.evreghen-swal .swal2-title{color:#1f2328;font-size:20px;font-weight:600}.swal2-popup.evreghen-swal .swal2-html-container{color:#57606a;font-size:13px}.swal2-popup.evreghen-swal .swal2-confirm{background:#1f883d;border-radius:8px;font-size:13px}.swal2-popup.evreghen-swal .swal2-cancel{background:#f6f8fa;color:#24292f;border:1px solid #d1d9e0;border-radius:8px;font-size:13px}.swal2-popup.evreghen-swal.swal2-toast{box-shadow:0 8px 28px #1f23281c}
.brandmark svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ico svg,.metric-icon svg,.hosticon svg,.btn-icon svg,.mobilemenu svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.metric-icon svg{width:17px;height:17px}.btn-icon{display:inline-flex;vertical-align:middle;margin-right:7px}.mobilemenu svg{width:20px;height:20px}

/* Unified icon system: fixed geometry, consistent stroke and alignment */
svg[data-ui-icon],.ico svg,.metric-icon svg,.hosticon svg,.btn-icon svg,.mobilemenu svg{display:block!important;flex:none;width:18px;height:18px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.nav .ico{display:grid;place-items:center;flex:0 0 18px;width:18px;height:20px;line-height:0;font-size:0}
.metric-icon{display:grid;place-items:center;flex:0 0 31px;line-height:0;font-size:0}
.hosticon{display:grid;place-items:center;flex:0 0 36px;line-height:0;font-size:0}
.btn-icon{display:inline-grid;place-items:center;vertical-align:middle;margin-right:8px;line-height:0}
.mobilemenu{line-height:0}
.brandmark{display:grid;place-items:center;line-height:0}
.brandmark svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}.servicegrid{grid-template-columns:1fr}.two{grid-template-columns:1fr}}
@media(max-width:700px){
 html,body{width:100%;min-height:100%;overflow-x:hidden}body{min-height:100vh;min-height:100svh}.shell{width:100%;min-height:100vh;min-height:100svh}.sidebar{width:min(82vw,290px);max-width:290px;padding:20px 16px;transform:translateX(-105%);transition:transform .22s ease;z-index:12;box-shadow:16px 0 40px #0008;overflow-y:auto}.sidebar.drawer-open{transform:translateX(0)}.brand{padding:5px 8px 28px}.brandtext,.navlabel,.nav button .navtext,.sidebarfoot{display:initial}.navlabel{display:block}.sidebarfoot{display:block}.brandmark{width:36px;height:36px}.nav button{justify-content:flex-start;padding:11px 12px}.nav button .ico{font-size:16px}.main{margin-left:0;width:100%;min-width:0}.topbar{width:100%;height:58px;padding:0 12px;gap:10px;justify-content:flex-start}.crumb{font-size:12px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.topright{gap:8px;flex-shrink:0}.topright>span:first-child{font-size:9px;letter-spacing:.05em;white-space:nowrap}.topright .live-dot{margin-right:0}.avatar{width:30px;height:30px}.mobilemenu{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid #30363d;border-radius:9px;background:#151a22;color:var(--blue);font-size:19px;cursor:pointer}.drawer-backdrop{display:block;position:fixed;inset:0;z-index:11;background:#0009;border:0;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.drawer-backdrop.visible{opacity:1;visibility:visible}body.drawer-active{overflow:hidden}.content{width:100%;max-width:100%;margin:0;padding:16px 14px calc(32px + env(safe-area-inset-bottom));}.pagehead{width:100%;padding:20px 18px;display:flex;flex-direction:column;gap:12px;margin-bottom:16px;border-radius:16px}.pagehead>.btn{margin-top:2px;align-self:flex-start}.pagehead h1{font-size:26px}.pagehead .sub{max-width:100%;overflow-wrap:anywhere}.notice{margin-bottom:14px;padding:12px 14px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}.card{padding:15px;min-width:0;border-radius:16px}.metric-value{font-size:clamp(21px,5vw,27px);overflow-wrap:anywhere}.metric-foot{overflow-wrap:anywhere}.two{grid-template-columns:minmax(0,1fr);gap:12px}.servicegrid{grid-template-columns:minmax(0,1fr)}.servicecard{grid-template-columns:40px minmax(0,1fr) auto;column-gap:12px;padding:15px}.servicecard>.metric-icon{grid-column:1;grid-row:1/3}.servicecard>h3{grid-column:2;grid-row:1;min-width:0}.servicecard>.mono{grid-column:2;grid-row:2;font-size:10px}.servicecard>div[style*="margin-top:13px"]{grid-column:3;grid-row:1/3}.service-actions{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:8px}.service-actions .btn{width:100%;padding:9px 6px}.three{grid-template-columns:repeat(2,minmax(0,1fr))}.sysinfo{grid-template-columns:repeat(2,minmax(0,1fr))}.terminal{max-width:100%;font-size:10px}.topdate{display:none}.settingsrow{gap:10px}.loginbox{padding:26px 22px;max-height:calc(100svh - 32px);overflow:auto}
}
@media(max-width:380px){.metrics{grid-template-columns:1fr}.content{padding-left:8px;padding-right:8px}.card{padding:13px}}

/* Thai-friendly light theme override */
:root{color-scheme:light;--bg:#f5f7fa;--pure:#ffffff;--inset:#f6f8fa;--surface:#ffffff;--surface2:#f3f5f8;--surface3:#e8edf3;--ink:#1f2328;--ink-default:#24292f;--muted:#656d76;--subtle:#57606a;--line:#d1d9e0;--hair:#afb8c1;--blue:#0969da;--blue2:#0550ae;--green:#1a7f37;--success:#1f883d;--red:#cf222e;--yellow:#9a6700;--shadow:0 1px 3px #1f232812}
html,body,.shell{background:var(--bg);color:var(--ink-default)}.sidebar,.topbar{background:#fff;color:#1f2328;border-color:#d1d9e0}.sidebar{box-shadow:1px 0 3px #1f232808}.brandmark,.avatar,.hosticon,.nav button.active,.nav button:hover{background:#f6f8fa;color:#0969da;border-color:#d1d9e0}.brand strong,.crumb,.pagehead h1,.cardhead h3,.metric-value{color:#1f2328}.brand small,.navlabel,.sidebarfoot,.topright,.sub,.muted,.metric-foot{color:#656d76}.nav button{color:#424a53}.nav button:hover{color:#0969da}.nav button.active{color:#0550ae;background:#ddf4ff}.pagehead,.card,.loginbox{background:#fff;border:1px solid #d1d9e0;box-shadow:0 1px 3px #1f232808}.pagehead{background:#fff}.btn{background:#fff;color:#24292f;border-color:#afb8c1}.btn:hover{background:#f6f8fa;color:#0550ae;border-color:#0969da}.btn.primary{background:#1f883d;border-color:#1f883d;color:#fff}.btn.danger{color:#cf222e;border-color:#d1a0a3}.metric-icon{background:#ddf4ff;color:#0969da;border-color:#b6e3ff}.bar{background:#eaeef2}.bar span{background:#218bff}.status{background:#f6f8fa;color:#57606a;border-color:#d1d9e0}.status.up{background:#dafbe1;color:#116329;border-color:#aceebb}.status.down{background:#ffebe9;color:#cf222e;border-color:#ffcecb}.status.warn{background:#fff8c5;color:#7d4e00;border-color:#eac54f}.status.unknown{background:#f6f8fa;color:#656d76}.sysinfo div{background:#f6f8fa;border-color:#d1d9e0}.sysinfo label{color:#656d76}.sysinfo b{color:#24292f}.hostline{border-color:#eaeef2}.tablewrap{border-color:#d1d9e0}th{background:#f6f8fa;color:#57606a}td{border-color:#d8dee4}tr:hover td{background:#f6f8fa}.terminal{background:#0d1117;color:#e6edf3;border-color:#30363d}.notice{background:#ddf4ff;border-color:#b6e3ff;border-left-color:#0969da;color:#24292f}.login{background:#f5f7faeF}.loginbox h2{color:#1f2328}.loginbox p,.field label,.settingsrow p{color:#57606a}.field input{background:#fff;color:#24292f;border-color:#afb8c1}.field input:focus{border-color:#0969da;box-shadow:0 0 0 2px #0969da22}.toast{background:#24292f;color:#fff}.toast.bad{background:#cf222e}.settingsrow{border-color:#d8dee4}a{color:#0969da}
@media(max-width:700px){.mobilemenu{background:#fff;color:#0969da;border-color:#d1d9e0}.drawer-backdrop{background:#1f232866}}


.chartbox{width:100%;height:180px;position:relative;min-width:0}.chartbox canvas{display:block;width:100%;height:100%}
.tablewrap table{min-width:480px}.tablewrap td{font-variant-numeric:tabular-nums}.alertrow{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid #eaeef2;font-size:12px}.alertrow:last-child{border:0}.alertdot{width:8px;height:8px;border-radius:50%;background:#d29922;margin-top:5px;flex:none}.alertdot.critical{background:#cf222e}.alertok{padding:16px;border-radius:9px;background:#dafbe1;color:#116329;font-size:12px}.chartlegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#656d76;margin-top:6px}
@media(max-width:700px){.chartbox{height:150px}.tablewrap{max-width:100%}.pagehead{overflow:hidden}}
/* Visual refinement: clear hierarchy, balanced cards and consistent iconography */
.content{max-width:1560px;padding-top:26px}
.pagehead{align-items:center;padding:22px 26px;margin-bottom:20px;box-shadow:0 2px 8px #1f232808}
.pagehead h1{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.7px}
.pagehead .sub{margin-top:5px}
.grid{gap:16px}.metrics{gap:14px;margin-bottom:18px}
.card{padding:19px;border-radius:14px;box-shadow:0 2px 8px #1f232808;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.card:hover{border-color:#b6c4d2;box-shadow:0 5px 16px #1f23280d}
.metric-top{font-size:10px;letter-spacing:.09em;color:#656d76;font-weight:650}
.metric-icon{width:38px;height:38px;flex-basis:38px;border-radius:11px;background:linear-gradient(145deg,#eaf5ff,#dceeff);border:1px solid #c8e4ff;color:#0969da}
.metric-icon svg{width:19px;height:19px}
.metric-value{font-size:32px;font-weight:650;letter-spacing:-1.1px;margin:14px 0 5px;line-height:1.15}
.metric-foot{font-size:11px;line-height:1.55;min-height:18px}
.bar{height:7px;margin-top:14px;background:#edf1f5}.bar span{background:linear-gradient(90deg,#0969da,#54a6ff)}
.metrics .card:nth-child(2) .metric-icon{background:#e8f8ed;color:#1a7f37;border-color:#c5ebd0}
.metrics .card:nth-child(2) .bar span{background:linear-gradient(90deg,#1a7f37,#54c77b)}
.metrics .card:nth-child(3) .metric-icon{background:#fff5df;color:#9a6700;border-color:#f4dfaa}
.metrics .card:nth-child(3) .bar span{background:linear-gradient(90deg,#bf8700,#e6b94f)}
.metrics .card:nth-child(4) .metric-icon{background:#f1edff;color:#8250df;border-color:#ded4ff}
.cardhead{margin-bottom:17px;align-items:center}.cardhead h3{font-size:14px;font-weight:650;letter-spacing:-.15px}
.cardhead .small{font-size:10px}.two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.three{gap:14px}
.sysinfo{gap:10px}.sysinfo div{padding:13px 14px;border-radius:10px;min-width:0}
.sysinfo label{font-size:9px;font-weight:700;letter-spacing:.065em}.sysinfo b{font-size:12px;line-height:1.5;display:block}
.hostline{gap:12px;padding:12px 2px}.hosticon{width:34px;height:34px;flex-basis:34px;border-radius:10px;background:#edf5ff;color:#0969da}
.hosticon svg{width:17px;height:17px}.status{min-width:76px;justify-content:center;font-size:9px;letter-spacing:.035em}
.tablewrap{border-radius:10px}th{font-size:9px;font-weight:700;letter-spacing:.07em}td{font-size:11px}
.chartbox{height:190px}.chartlegend{gap:18px;font-weight:600}
.readonly-note{display:flex;align-items:flex-start;gap:10px;background:#f0f7ff;border:1px solid #d4e7ff;border-left:3px solid #0969da;border-radius:11px;padding:12px 15px;margin-bottom:17px;color:#34465a}
.readonly-note:before{content:'i';display:grid;place-items:center;flex:0 0 19px;height:19px;border-radius:50%;background:#0969da;color:#fff;font-size:12px;font-weight:700}
.nav .ico{color:#667085}.nav button.active .ico{color:#0969da}.nav button{border-radius:10px;min-height:42px}.nav button.active{font-weight:650}
.btn{border-radius:9px;font-weight:600;min-height:36px}.btn-icon{margin-right:6px}
.monitor-pill{font-size:10px;letter-spacing:.04em;padding:7px 10px}
@media(max-width:1050px){.two{grid-template-columns:1fr}.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
.content{padding:15px 13px calc(34px + env(safe-area-inset-bottom))}
.pagehead{padding:18px 17px;gap:11px;margin-bottom:14px;border-radius:13px}
.pagehead h1{font-size:24px;line-height:1.25}.pagehead .sub{font-size:12px;line-height:1.6}
.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.card{padding:14px;border-radius:13px}.metric-top{font-size:9px;letter-spacing:.065em;gap:5px}
.metric-icon{width:32px;height:32px;flex-basis:32px;border-radius:9px}.metric-icon svg{width:17px;height:17px}
.metric-value{font-size:26px;margin:12px 0 4px}.metric-foot{font-size:10px;min-height:30px}
.bar{height:6px;margin-top:10px}.two,.three{grid-template-columns:minmax(0,1fr);gap:11px}
.cardhead{margin-bottom:13px}.cardhead h3{font-size:13px}.sysinfo{gap:8px}
.sysinfo div{padding:11px;border-radius:9px}.sysinfo label{font-size:9px}.sysinfo b{font-size:11px}
.hostline{gap:10px}.status{min-width:70px;padding:5px 7px}.chartbox{height:160px}
.readonly-note{font-size:11px;line-height:1.65;padding:11px 12px;margin-bottom:13px}
.monitor-pill{font-size:0;padding:7px 9px;gap:0}.monitor-pill .live-dot{width:8px;height:8px}
}
@media(max-width:360px){.content{padding-left:9px;padding-right:9px}.metrics{gap:8px}.card{padding:12px}.metric-value{font-size:23px}.metric-top{font-size:8px}}
/* Consistent icon system across every monitoring page */
svg[data-ui-icon],.ui-icon{display:inline-block!important;flex:0 0 auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.heading-icon{width:20px;height:20px;margin-right:9px;color:#0969da;vertical-align:-4px}
.button-icon{width:16px;height:16px;margin-right:7px}
.pagehead .btn{display:inline-flex;align-items:center;justify-content:center;gap:2px}
.mobilemenu{display:grid;place-items:center}.mobilemenu .button-icon{width:21px;height:21px;margin:0}
.cardhead h3{display:flex;align-items:center;gap:0}.cardhead h3 .heading-icon{width:17px;height:17px;margin:0 8px 0 0;vertical-align:middle}
.hosticon{display:grid;place-items:center}.hosticon .ui-icon{width:18px;height:18px}
.status{display:inline-flex;align-items:center;gap:5px}.status .ui-icon{width:13px;height:13px}
.alertdot{display:grid;place-items:center;flex:0 0 22px}.alertdot .ui-icon{width:17px;height:17px}.alertok{display:flex;align-items:center;gap:9px}.alertok .ui-icon{width:18px;height:18px;color:#1a7f37}
.nav button .ico .ui-icon{width:19px;height:19px}
/* Resources page — dedicated responsive telemetry layout */
#page-resources .pagehead{margin-bottom:15px}
.resource-intro{display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:16px;background:#fff;border:1px solid #d1d9e0;border-radius:13px;box-shadow:0 1px 3px #1f232808}
.resource-intro-icon,.panel-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:#eaf3ff;color:#0969da}
.resource-intro-icon svg,.panel-icon svg{width:19px;height:19px}
.resource-intro>div:nth-child(2){display:grid;gap:2px;min-width:0}.resource-intro strong{font-size:12px;color:#24292f}.resource-intro span{font-size:10px;color:#656d76}
.resource-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:9px!important;font-weight:750;letter-spacing:.08em;color:#1a7f37!important;background:#dafbe1;padding:6px 9px;border-radius:999px}.resource-live i{width:6px;height:6px;border-radius:50%;background:#1a7f37;box-shadow:0 0 0 3px #1a7f3720}
.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.resource-card{padding:17px;min-width:0;overflow:hidden}
.resource-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.resource-label{display:flex;align-items:center;gap:10px;min-width:0}.resource-symbol{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:#eaf3ff;color:#0969da}.resource-symbol svg{width:18px;height:18px}.resource-label>div{display:grid;gap:2px}.resource-label strong{font-size:13px;color:#24292f}.resource-label small{font-size:9px;color:#656d76}
.resource-value{font-size:23px;font-weight:750;letter-spacing:-.7px;font-variant-numeric:tabular-nums;color:#0969da}
.resource-ram .resource-symbol{background:#e8f8ed;color:#1a7f37}.resource-ram .resource-value{color:#1a7f37}.resource-disk .resource-symbol{background:#fff5df;color:#9a6700}.resource-disk .resource-value{color:#9a6700}
.resource-chart{height:145px;margin:12px -3px 10px;min-width:0}.resource-chart canvas{width:100%;height:100%;display:block}
.resource-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px}.resource-stats>div{display:grid;gap:4px;min-width:0;padding:10px;background:#f6f8fa;border:1px solid #eaeef2;border-radius:9px}.resource-stats .wide{grid-column:1/-1}.resource-stats span{font-size:8px;font-weight:750;letter-spacing:.06em;color:#656d76}.resource-stats b{font-size:11px;font-weight:650;color:#24292f;overflow-wrap:anywhere}
.resource-bottom{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:14px;margin-top:14px}.resource-panel{padding:19px;min-width:0}.resource-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.resource-panel-head .eyebrow{font-size:8px}.resource-panel-head h3{font-size:15px;margin:4px 0 2px;color:#24292f}.resource-panel-head p{font-size:10px;color:#656d76;margin:0}.panel-icon{width:34px;height:34px;flex-basis:34px;background:#f1edff;color:#8250df}
.partition-list,.interface-list{display:grid;gap:12px}.partition-item{padding:11px 12px;background:#f8fafc;border:1px solid #eaeef2;border-radius:10px}.partition-top,.partition-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}.partition-top strong{font-size:11px;color:#24292f}.partition-top span{font-size:10px;font-weight:700;color:#57606a;font-variant-numeric:tabular-nums}.partition-track{height:7px;background:#e8edf3;border-radius:99px;overflow:hidden;margin:9px 0 7px}.partition-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0969da,#54a6ff)}.partition-meta{font-size:9px;color:#656d76}.partition-meta b{font-weight:650;color:#424a53}
.interface-item{padding:11px 12px;background:#f8fafc;border:1px solid #eaeef2;border-radius:10px}.interface-name{display:flex;align-items:center;gap:8px;margin-bottom:10px}.interface-name>span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#eaf3ff;color:#0969da}.interface-name svg{width:15px;height:15px}.interface-name strong{font-size:11px;color:#24292f}.interface-traffic{display:grid;grid-template-columns:1fr 1fr;gap:8px}.interface-traffic>div{display:grid;gap:3px}.interface-traffic small{font-size:8px;font-weight:750;letter-spacing:.06em;color:#656d76}.interface-traffic b{font-size:11px;color:#24292f;font-weight:650;font-variant-numeric:tabular-nums}
.network-total{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:12px;padding:12px;background:#eef6ff;border:1px solid #d4e7ff;border-radius:9px}.network-total span{font-size:10px;color:#57606a}.network-total strong{font-size:10px;text-align:right;color:#0550ae;overflow-wrap:anywhere}
@media(max-width:1100px){.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resource-bottom{grid-template-columns:1fr}}
@media(max-width:700px){#page-resources .pagehead{margin-bottom:12px}.resource-intro{padding:11px 12px;gap:9px;margin-bottom:12px}.resource-intro-icon{width:33px;height:33px;flex-basis:33px}.resource-intro>div:nth-child(2) span{font-size:9px;line-height:1.45}.resource-live{padding:5px 7px}.resource-grid{grid-template-columns:minmax(0,1fr);gap:11px}.resource-card{padding:15px}.resource-card-head{gap:12px}.resource-value{font-size:22px}.resource-chart{height:140px;margin:8px -2px 9px}.resource-stats>div{padding:9px}.resource-bottom{grid-template-columns:minmax(0,1fr);gap:11px;margin-top:11px}.resource-panel{padding:15px}.resource-panel-head h3{font-size:14px}.partition-item,.interface-item{padding:10px}.network-total{flex-direction:column;gap:5px}.network-total strong{text-align:left}}