.ssm-shell { --ssm-bg:#151b25; --ssm-surface:#1b2330; --ssm-line:#303b4c; --ssm-text:#e8edf3; --ssm-muted:#8996a8; --ssm-accent:#20c7b5; --ssm-blue:#58a6ff; color:var(--ssm-text); }
.ssm-shell * { box-sizing:border-box; }
.ssm-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--ssm-line); }
.ssm-kicker { color:var(--ssm-accent); font-size:11px; font-weight:700; letter-spacing:1.4px; }
.ssm-head h4 { margin:3px 0 2px; font-size:23px; line-height:1.3; letter-spacing:0; }
.ssm-head p { margin:0; color:var(--ssm-muted); font-size:12px; }
.ssm-toolbar { display:flex; align-items:center; gap:9px; }
.ssm-range { display:flex; height:34px; border:1px solid var(--ssm-line); border-radius:4px; overflow:hidden; }
.ssm-range button { min-width:52px; padding:0 12px; color:#9da9b8; background:#171e29; border:0; border-right:1px solid var(--ssm-line); cursor:pointer; }
.ssm-range button:last-child { border-right:0; }
.ssm-range button.is-active { color:#062d29; background:var(--ssm-accent); font-weight:700; }
.ssm-icon-button { display:grid; place-items:center; width:34px; height:34px; padding:0; color:#a9b5c4; background:#202a38; border:1px solid var(--ssm-line); border-radius:4px; cursor:pointer; }
.ssm-icon-button:hover { color:#fff; border-color:#52627a; }
.ssm-icon-button > span { display:block; font-size:18px; line-height:1; }
.ssm-icon-button.is-loading > span { animation:ssm-spin .8s linear infinite; }
@keyframes ssm-spin { to { transform:rotate(360deg); } }
.ssm-loading { min-height:460px; display:grid; place-content:center; justify-items:center; gap:12px; color:#94a2b4; }
.ssm-loading[hidden],.ssm-content[hidden],.ssm-error[hidden] { display:none; }
.ssm-loading span { width:28px; height:28px; border:2px solid #344256; border-top-color:var(--ssm-accent); border-radius:50%; animation:ssm-spin .8s linear infinite; }
.ssm-loading b { font-size:13px; font-weight:500; }
.ssm-error { padding:18px; color:#ffbec5; border-left:3px solid #ef5b6c; background:#2a1d25; }
.ssm-content { display:grid; gap:14px; animation:ssm-enter .24s ease both; }
@keyframes ssm-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.ssm-primary-grid { display:grid; grid-template-columns:minmax(430px,.95fr) minmax(0,1.35fr); gap:14px; }
.ssm-panel { min-width:0; overflow:hidden; background:var(--ssm-surface); border:1px solid var(--ssm-line); border-radius:6px; }
.ssm-panel > header { min-height:59px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 15px; border-bottom:1px solid var(--ssm-line); }
.ssm-panel header span { display:block; color:var(--ssm-muted); font-size:11px; text-transform:uppercase; }
.ssm-panel h5 { margin:2px 0 0; font-size:16px; letter-spacing:0; }
.ssm-panel header > b { color:#a8b5c5; font-size:12px; font-weight:600; }
.ssm-state { min-width:52px; padding:4px 8px; border:1px solid currentColor; border-radius:4px; text-align:center; }
.ssm-state.is-normal,.ssm-overall-status.is-normal { color:#50d4b9; }
.ssm-state.is-notice,.is-notice { color:#e1bb55!important; }
.ssm-state.is-warning,.is-warning { color:#f29b4b!important; }
.ssm-state.is-critical,.is-critical { color:#f05b6d!important; }
.ssm-capacity-body { min-height:248px; display:grid; grid-template-columns:210px minmax(190px,1fr); align-items:center; gap:8px; padding:15px 18px 18px; }
.ssm-ring-wrap { display:grid; place-items:center; }
.ssm-ring { width:190px; max-width:100%; overflow:visible; }
.ssm-ring-track,.ssm-ring-value,.ssm-ring-inner { fill:none; }
.ssm-ring-track { stroke:#2a3545; stroke-width:17; }
.ssm-ring-value { stroke:var(--ssm-accent); stroke-width:17; stroke-linecap:butt; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dasharray .65s cubic-bezier(.2,.8,.2,1),stroke .2s; }
.ssm-ring-value.is-notice { stroke:#e1bb55; }.ssm-ring-value.is-warning { stroke:#f29b4b; }.ssm-ring-value.is-critical { stroke:#f05b6d; }
.ssm-ring-inner { stroke:#263142; stroke-width:1; }
.ssm-ring-copy text { fill:#9aa7b7; text-anchor:middle; font-size:11px; }
.ssm-ring-copy .ssm-ring-percent { fill:#f1f5f9; font-size:27px; font-weight:700; }
.ssm-ring-copy .ssm-ring-amount { fill:#7f8da0; font-size:9px; }
.ssm-capacity-legend { margin:0; }
.ssm-capacity-legend div { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; border-bottom:1px solid #2a3545; }
.ssm-capacity-legend div:last-child { border-bottom:0; }
.ssm-capacity-legend dt { color:#aab5c3; font-size:13px; }
.ssm-capacity-legend dd { margin:0; color:#f0f4f8; font:600 14px Consolas,monospace; }
.ssm-capacity-legend i { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; }
.ssm-capacity-legend i.used { background:var(--ssm-accent); }.ssm-capacity-legend i.free { background:#556276; }.ssm-capacity-legend i.database { background:var(--ssm-blue); }
.ssm-summary { min-width:0; display:grid; grid-template-rows:auto auto 1fr; border-top:2px solid var(--ssm-accent); background:#18202b; }
.ssm-status-line { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 18px; border-bottom:1px solid var(--ssm-line); }
.ssm-status-line span { color:var(--ssm-muted); font-size:12px; }.ssm-status-line strong { display:block; margin-top:2px; font-size:25px; }.ssm-status-line p { margin:0; color:#aab5c3; font-size:13px; text-align:right; }
.ssm-metric-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--ssm-line); }
.ssm-metric-rail div { min-width:0; padding:13px 14px; border-right:1px solid var(--ssm-line); }.ssm-metric-rail div:last-child { border-right:0; }
.ssm-metric-rail span { display:block; color:var(--ssm-muted); font-size:11px; }.ssm-metric-rail strong { display:block; margin-top:4px; overflow:hidden; color:#e7edf3; font:600 15px Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }
.ssm-alert-list { display:grid; align-content:start; gap:7px; padding:13px 15px; }
.ssm-alert { display:grid; grid-template-columns:22px minmax(0,1fr); gap:9px; padding:9px 10px; color:#9fabb9; border-left:2px solid #536174; background:#1d2632; }
.ssm-alert-mark { display:grid; place-items:center; width:17px; height:17px; margin-top:1px; border:1px solid currentColor; border-radius:50%; font:700 11px/1 sans-serif; }
.ssm-alert.is-normal { color:#53cdb5; border-left-color:#37b9a3; }.ssm-alert.is-notice { color:#d9bd67; border-left-color:#c9a83f; }.ssm-alert.is-warning { color:#f0ad65; border-left-color:#e08b39; }.ssm-alert.is-critical { color:#f58a96; border-left-color:#ec5365; }
.ssm-alert strong,.ssm-alert span { display:block; }.ssm-alert strong { color:#dce4ec; font-size:12px; }.ssm-alert span { margin-top:2px; color:#95a2b2; font-size:11px; line-height:1.45; }
.ssm-chart-grid,.ssm-detail-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:14px; }
.ssm-bars { min-height:272px; display:grid; align-content:center; gap:10px; padding:14px 16px 16px; }
.ssm-bar-row { display:grid; grid-template-columns:130px minmax(80px,1fr) 66px; align-items:center; gap:10px; }
.ssm-bar-label { min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:7px; }.ssm-bar-label strong { overflow:hidden; color:#cdd6df; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.ssm-bar-label span { color:#7e8b9d; font:10px Consolas,monospace; white-space:nowrap; }
.ssm-bar-track { height:8px; overflow:hidden; background:#273241; }.ssm-bar-track i { display:block; width:var(--bar-width); height:100%; background:var(--ssm-accent); transform-origin:left; animation:ssm-bar .52s ease var(--bar-delay) both; }
@keyframes ssm-bar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.ssm-bar-row small { color:#7f8c9d; font:10px Consolas,monospace; text-align:right; }.ssm-bar-row small.is-up { color:#e2b75d; }
.ssm-trend { height:300px; padding:14px 12px 5px; }.ssm-trend svg { width:100%; height:100%; overflow:visible; }
.ssm-grid line { stroke:#303c4d; stroke-width:1; }.ssm-y-labels text,.ssm-x-label { fill:#7f8c9d; font:10px Consolas,monospace; }.ssm-y-labels text { text-anchor:end; }.ssm-x-label { text-anchor:middle; }
.ssm-trend-area { fill:rgba(32,199,181,.08); }.ssm-trend-line { fill:none; stroke:var(--ssm-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }.ssm-trend-points circle { fill:#1b2330; stroke:#7ce5d7; stroke-width:2; }
.ssm-chart-legend { display:flex; align-items:center; gap:6px; color:#91a0b0; font-size:11px; }.ssm-chart-legend i { width:15px; height:2px; background:var(--ssm-accent); }
.ssm-growth-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--ssm-line); background:#18202b; }
.ssm-growth-strip > div { min-width:0; padding:14px 16px; border-right:1px solid var(--ssm-line); }.ssm-growth-strip > div:last-child { border-right:0; }
.ssm-growth-strip span,.ssm-growth-strip strong,.ssm-growth-strip small { display:block; }.ssm-growth-strip span { color:var(--ssm-muted); font-size:11px; }.ssm-growth-strip strong { margin-top:3px; color:#eef3f7; font-size:21px; }.ssm-growth-strip small { margin-top:2px; color:#56cdb9; font-size:11px; }
.ssm-detail-grid { grid-template-columns:1.15fr .85fr; }
.ssm-compact-list { min-height:214px; display:grid; align-content:start; padding:9px 14px 13px; }
.ssm-compact-list > div:not(.ssm-empty) { display:grid; grid-template-columns:minmax(130px,1fr) minmax(90px,1fr) 82px; align-items:center; gap:10px; min-height:34px; border-bottom:1px solid #293443; }.ssm-compact-list > div:last-child { border-bottom:0; }
.ssm-compact-list strong { overflow:hidden; color:#bdc8d4; font:11px Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }.ssm-compact-list i { height:4px; overflow:hidden; background:#273241; }.ssm-compact-list i span { display:block; height:100%; background:#568fc9; }.ssm-compact-list b { color:#8e9aaa; font:10px Consolas,monospace; text-align:right; }
.ssm-empty { min-height:140px; display:grid; place-items:center; color:#748195; font-size:12px; text-align:center; }
body.light .ssm-shell { --ssm-bg:#f8fafc; --ssm-surface:#fff; --ssm-line:#d8e0e8; --ssm-text:#172033; --ssm-muted:#68758a; }
body.light .ssm-range button { color:#526077; background:#f5f7fa; } body.light .ssm-range button.is-active { color:#063b35; background:#31c8b6; }
body.light .ssm-icon-button,.light .ssm-summary,.light .ssm-growth-strip { background:#f7f9fb; }
body.light .ssm-ring-track { stroke:#e1e7ed; } body.light .ssm-ring-inner { stroke:#e4e9ef; } body.light .ssm-ring-copy .ssm-ring-percent { fill:#172033; }
body.light .ssm-capacity-legend div,.light .ssm-metric-rail,.light .ssm-metric-rail div { border-color:#e0e6ed; } body.light .ssm-capacity-legend dd,.light .ssm-metric-rail strong,.light .ssm-growth-strip strong { color:#172033; }
body.light .ssm-alert { background:#f4f7fa; } body.light .ssm-alert strong { color:#283549; } body.light .ssm-alert span { color:#657287; }
body.light .ssm-bar-track,.light .ssm-compact-list i { background:#e5eaf0; } body.light .ssm-grid line { stroke:#e0e6ec; } body.light .ssm-trend-points circle { fill:#fff; }
body.light .ssm-compact-list > div:not(.ssm-empty) { border-color:#e4e9ef; } body.light .ssm-compact-list strong { color:#3b485b; }
@media(max-width:980px) { .ssm-primary-grid,.ssm-chart-grid,.ssm-detail-grid { grid-template-columns:1fr; }.ssm-metric-rail { grid-template-columns:1fr 1fr; }.ssm-metric-rail div:nth-child(2) { border-right:0; }.ssm-metric-rail div:nth-child(-n+2) { border-bottom:1px solid var(--ssm-line); } }
@media(max-width:680px) { .ssm-head { align-items:flex-start; flex-direction:column; }.ssm-toolbar { width:100%; }.ssm-range { flex:1; }.ssm-range button { flex:1; min-width:0; }.ssm-capacity-body { grid-template-columns:1fr; }.ssm-capacity-legend { width:100%; }.ssm-growth-strip { grid-template-columns:1fr 1fr; }.ssm-growth-strip > div { border-bottom:1px solid var(--ssm-line); }.ssm-growth-strip > div:nth-child(2n) { border-right:0; }.ssm-growth-strip > div:last-child { grid-column:1/-1; border-bottom:0; }.ssm-bar-row { grid-template-columns:105px minmax(60px,1fr) 58px; }.ssm-bar-label span { display:none; }.ssm-trend { height:245px; }.ssm-compact-list > div:not(.ssm-empty) { grid-template-columns:minmax(100px,1fr) 70px; }.ssm-compact-list i { display:none; } }
@media(prefers-reduced-motion:reduce) { .ssm-content,.ssm-bar-track i,.ssm-loading span,.ssm-icon-button.is-loading > span { animation:none; }.ssm-ring-value { transition:none; } }