.shm-shell { --shm-bg:#101010; --shm-panel:#171918; --shm-panel-2:#1d201e; --shm-line:#292c2a; --shm-text:#f1f4f1; --shm-muted:#9aa19b; --shm-green:#12e45a; --shm-green-soft:#0b7d36; --shm-yellow:#e7bf45; --shm-red:#ef5961; color:var(--shm-text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; }
.shm-shell * { box-sizing:border-box; }
.shm-bt-head { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 18px; background:#111212; border:1px solid #272927; border-radius:8px 8px 0 0; }
.shm-server-identity { min-width:0; display:flex; align-items:center; gap:12px; }
.shm-server-identity img { width:54px; height:54px; padding:6px; object-fit:contain; background:#f5f7f4; border-radius:50%; }
.shm-server-identity > div { min-width:0; display:grid; gap:4px; }
.shm-server-identity strong { overflow:hidden; max-width:300px; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.shm-server-identity span { color:var(--shm-muted); font:13px Consolas,monospace; }
.shm-server-identity b { padding:5px 10px; color:#06140a; background:var(--shm-green); border-radius:4px; font-size:14px; font-weight:700; white-space:nowrap; }
.shm-net-live { display:flex; align-items:center; gap:18px; padding:8px 13px; background:#1d1e1d; border-radius:7px; }
.shm-net-live > div { display:flex; align-items:center; gap:7px; min-width:106px; }
.shm-net-icon { display:grid; place-items:center; width:29px; height:29px; color:#151715; background:#777b78; border-radius:50%; font-size:18px; font-style:normal; font-weight:800; }
.shm-net-icon.down { color:#071d0b; background:var(--shm-green); } .shm-net-live span { display:grid; gap:1px; } .shm-net-live b { font:14px Consolas,monospace; white-space:nowrap; } .shm-net-live small { color:var(--shm-muted); font-size:10px; }
.shm-refresh { width:34px; height:34px; padding:0; color:#b4bbb5; background:#232624; border:1px solid #343835; border-radius:50%; cursor:pointer; font-size:20px; line-height:1; } .shm-refresh:hover { color:#fff; border-color:var(--shm-green); }
.shm-bt-main { display:grid; grid-template-columns:190px minmax(0,1fr); gap:12px; padding:12px 0; }
.shm-load-card,.shm-meter-card,.shm-root-card,.shm-section { background:var(--shm-panel); border:1px solid var(--shm-line); border-radius:7px; }
.shm-load-card { min-height:218px; padding:17px 15px 13px; display:flex; flex-direction:column; }
.shm-load-card header,.shm-meter-card header,.shm-root-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.shm-load-card header span,.shm-meter-card header span,.shm-root-card header span { font-size:17px; } .shm-load-card header b { padding:4px 8px; color:var(--shm-green); background:rgba(18,228,90,.14); border-radius:3px; font-size:14px; }
.shm-load-gauge { position:relative; flex:1; min-height:125px; width:102px; margin:10px auto 5px; overflow:hidden; background:#5c5f5d; border-radius:9px; }
.shm-load-gauge i { position:absolute; right:0; bottom:0; left:0; height:4%; background:var(--shm-green); border-radius:7px 7px 0 0; transition:height .45s ease,background .25s ease; }
.shm-load-gauge i.is-warning { background:var(--shm-yellow); } .shm-load-gauge i.is-critical { background:var(--shm-red); }
.shm-load-gauge strong { position:absolute; right:0; bottom:15px; left:0; color:#fff; text-align:center; font-size:29px; text-shadow:0 1px 2px #222; } .shm-load-card small { color:var(--shm-muted); text-align:center; font-size:11px; }
.shm-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr 104px; gap:12px; }
.shm-meter-card { position:relative; min-height:150px; padding:17px 18px 5px; } .shm-meter-card header b,.shm-root-card header b { color:var(--shm-green); font:16px Consolas,monospace; }
.shm-meter { position:relative; height:112px; margin-top:1px; } .shm-meter svg { display:block; width:100%; height:100%; overflow:visible; } .shm-gauge-track,.shm-gauge-value { fill:none; stroke-linecap:round; stroke-width:16; } .shm-gauge-track { stroke:#606360; } .shm-gauge-value { stroke:var(--shm-green); stroke-dasharray:100 100; stroke-dashoffset:100; transition:stroke-dashoffset .5s ease,stroke .25s ease,opacity .15s ease; } .shm-gauge-value.is-warning { stroke:var(--shm-yellow); } .shm-gauge-value.is-critical { stroke:var(--shm-red); }
.shm-meter strong { position:absolute; right:3px; bottom:10px; color:var(--shm-green); font:700 25px Consolas,monospace; } .shm-meter strong.is-warning { color:var(--shm-yellow); } .shm-meter strong.is-critical { color:var(--shm-red); }
.shm-root-card { grid-column:1/-1; padding:14px 18px; } .shm-root-track { height:14px; margin:16px 0 8px; overflow:hidden; background:#5c5f5d; border-radius:8px; } .shm-root-track i { display:block; height:100%; width:0; background:var(--shm-green); border-radius:8px; transition:width .5s ease,background .25s ease; } .shm-root-track i.is-warning { background:var(--shm-yellow); } .shm-root-track i.is-critical { background:var(--shm-red); } .shm-root-foot { display:flex; align-items:center; justify-content:space-between; } .shm-root-foot strong { color:var(--shm-green); font:700 20px Consolas,monospace; } .shm-root-foot span { color:var(--shm-muted); font:12px Consolas,monospace; }
.shm-loading { padding:16px; color:var(--shm-muted); text-align:center; font-size:12px; } .shm-error { margin-top:12px; padding:12px; color:#ffc1c8; background:#2a1d25; border-left:3px solid var(--shm-red); } .shm-error[hidden],.shm-loading[hidden] { display:none; }
.shm-section { margin-top:12px; overflow:hidden; } .shm-section>header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--shm-line); } .shm-eyebrow { color:#2fe78a; font-size:12px; font-weight:700; letter-spacing:1px; } .shm-section h5 { margin:5px 0 0; font-size:18px; } .shm-section-status,.shm-capability { color:var(--shm-muted); font-size:12px; } .shm-section-status.is-online { color:var(--shm-green); } .shm-section-status.is-warning { color:var(--shm-yellow); } .shm-section-status.is-critical { color:var(--shm-red); }
.shm-services { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:13px 17px; } .shm-service { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; color:#d7ddd8; background:var(--shm-panel-2); border-radius:5px; font:14px Consolas,monospace; } .shm-service b,.shm-log em { font-size:12px; font-style:normal; } .is-online,.is-ok { color:var(--shm-green); } .is-critical,.is-blocked { color:var(--shm-red); } .shm-empty { padding:20px; color:var(--shm-muted); text-align:center; font-size:12px; }
.shm-policy { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:14px 18px; } .shm-policy label { color:#c5ccc6; font-size:13px; } .shm-policy input[type=checkbox] { margin-right:7px; accent-color:var(--shm-green); } .shm-time-label input { margin-left:5px; padding:5px; color:var(--shm-text); background:#111; border:1px solid #3a3e3b; border-radius:3px; } .shm-button { padding:8px 12px; color:#c7d1ca; background:#252a27; border:1px solid #3a423c; border-radius:4px; cursor:pointer; } .shm-button:hover { color:#fff; border-color:#79877b; } .shm-button-primary { color:#06170b; background:#12ae67; border-color:#20dc80; font-weight:700; } .shm-button-danger { color:#ffb4bc; border-color:#713643; } .shm-policy-result { color:var(--shm-green); font-size:12px; } .shm-note { margin:0; padding:0 18px 14px; color:var(--shm-muted); font-size:12px; line-height:1.6; }
.shm-table { padding:5px 18px 10px; } .shm-log { display:grid; grid-template-columns:1.3fr .8fr .8fr; gap:8px; padding:9px 0; color:#b9c5bd; border-bottom:1px solid var(--shm-line); font-size:12px; } .shm-log:last-child { border-bottom:0; } .shm-log em { text-align:right; }
body.light .shm-shell { --shm-bg:#f8faf9; --shm-panel:#fff; --shm-panel-2:#f3f6f3; --shm-line:#d8dfd9; --shm-text:#172019; --shm-muted:#68756b; } body.light .shm-bt-head { background:#1b1e1c; color:#f1f4f1; } body.light .shm-load-gauge,body.light .shm-root-track,body.light .shm-gauge-track { background:#b9bfba; stroke:#b9bfba; } body.light .shm-time-label input { background:#fff; color:#172019; }
@media(max-width:720px) { .shm-bt-head { align-items:flex-start; flex-wrap:wrap; } .shm-server-identity strong { max-width:180px; font-size:15px; } .shm-net-live { order:3; width:100%; justify-content:space-around; } .shm-bt-main { grid-template-columns:1fr; } .shm-load-card { min-height:175px; } .shm-load-gauge { min-height:86px; width:100%; } .shm-load-gauge strong { bottom:12px; } .shm-resource-grid { grid-template-rows:1fr 96px; } .shm-meter-card { min-height:135px; padding:13px 10px 3px; } .shm-meter strong { font-size:19px; } .shm-services { grid-template-columns:1fr; } .shm-policy { align-items:flex-start; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .shm-gauge-value,.shm-load-gauge i,.shm-root-track i { transition:none; } }