:root{color-scheme:dark;--bg:#0d1211;--panel:#131b17;--line:#29352d;--muted:#849389;--text:#edf2ec;--green:#b5f17a;--coral:#f29387;--violet:#b89cf6;--cyan:#76d7d2;--mono:"DM Mono",monospace;--sans:"DM Sans",sans-serif;--head:Manrope,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px var(--sans);min-height:100vh}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:4px}h1,h2,p{margin:0}.accent{color:var(--green)}.muted{color:var(--muted)}.hidden{display:none!important}.ambient{position:fixed;z-index:-1;top:-220px;right:8%;width:600px;height:500px;border-radius:50%;background:#547743;filter:blur(130px);opacity:.15;pointer-events:none}
.sidebar{position:fixed;inset:0 auto 0 0;width:236px;padding:29px 17px 16px;border-right:1px solid #233026;background:#0e1411f5;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:10px;padding:0 9px;font:800 20px var(--head);letter-spacing:-.9px}.brand-mark{width:34px;height:34px;background:var(--green);color:#17241b;border-radius:10px;display:grid;place-items:center;font:800 28px var(--head);box-shadow:0 0 24px #9bde5d19}.brand small{display:block;font:8px var(--mono);letter-spacing:1.6px;color:#788679;margin-top:2px}.workspace{display:flex;align-items:center;gap:10px;margin:36px 0 30px;border:1px solid var(--line);border-radius:8px;padding:11px 9px;background:#151d18}.workspace-icon{background:#2b3e2c;color:var(--green);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;font:600 13px var(--head)}.workspace b{font-size:11px;display:block}.workspace small{font-size:10px;color:var(--muted);display:block;margin-top:3px}.workspace>.muted{margin-left:auto}.nav-label{font:9px var(--mono);letter-spacing:1.5px;color:#6b7b70;margin:0 10px 10px}nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:11px;height:41px;padding:0 12px;border-radius:7px;color:#95a197;font-size:12px}.nav-item>span{font-size:19px;width:19px;text-align:center}.nav-item:hover{background:#18231b;color:#ebf1e9}.nav-item.active{background:#1d2c20;color:#e5efdf;box-shadow:inset 2px 0 var(--green)}.nav-item.active>span{color:var(--green)}.nav-item em{margin-left:auto;font:10px var(--mono);padding:2px 6px;background:#2a382d;border-radius:4px;color:#b8c6b7}.sidebar-bottom{margin-top:auto}.server-card{width:100%;display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--line);border-radius:8px;background:#131b16;padding:12px 9px}.server-card>.accent{font-size:18px}.server-card b{font-size:10px;display:block}.server-card small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.server-card>.dot{margin-left:auto}.dot{width:6px;height:6px;flex:none;display:inline-block;border-radius:50%;background:var(--green);box-shadow:0 0 8px #b5f17a50}.dot.neutral{background:#718174;box-shadow:none}.dot.offline{background:#e78979;box-shadow:0 0 8px #e7897950}.dot.degraded{background:#ecc777;box-shadow:none}.profile{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;border-top:1px solid #263128;margin-top:13px;padding:13px 4px 0;text-align:left}.avatar{width:31px;height:31px;border:1px solid #5f6947;border-radius:50%;background:#353c29;color:#dfedb4;display:grid;place-items:center;font:600 12px var(--head)}.profile b{display:block;font-size:11px}.profile small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.profile-more{margin-left:auto;color:#95a28e;font-size:19px}
main{margin-left:236px}.topbar{height:63px;border-bottom:1px solid #233027;background:#101611b5;display:flex;align-items:center;padding:0 38px;gap:14px}.breadcrumbs{display:flex;gap:10px;color:#7d8d80;font-size:11px}.breadcrumbs span{color:#4e6152}.breadcrumbs b{font-weight:500;color:#cdd7ca}.top-actions{display:flex;align-items:center;gap:15px;margin-left:auto}.live-indicator{font:9px var(--mono);letter-spacing:.8px;color:#a3b29f;display:flex;align-items:center;gap:7px}.divider{width:1px;height:18px;background:var(--line)}.icon-button{border:0;background:none;color:#a0aea0;font-size:18px;padding:3px}.icon-button:hover{color:var(--green)}.avatar.mini{width:27px;height:27px;font-size:10px}.mobile-menu{display:none}.content{max-width:1500px;padding:34px 38px 20px;margin:auto}.welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:25px}.eyebrow{display:flex;align-items:center;gap:8px;font:9px var(--mono);letter-spacing:1.4px;color:#9aaa95;margin-bottom:12px}.eyebrow i{height:1px;width:17px;background:var(--green)}h1{font:700 31px/1.2 var(--head);letter-spacing:-1.35px}h1 span{color:var(--green)}.welcome p{color:#859580;font-size:12px;margin-top:9px}.welcome-actions{display:flex;align-items:center;gap:14px}.welcome-actions>span{font:9px var(--mono);color:#7f907c;white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:35px;padding:0 13px;border:1px solid transparent;border-radius:6px;font-size:11px;font-weight:600;transition:.15s}.button.primary{color:#182315;background:var(--green);box-shadow:0 4px 20px #a9ee6819}.button.primary:hover{background:#c6f79a}.button.quiet{border-color:#3a4939;background:transparent;color:#c1ccba}.button.full{width:100%}.banner{display:flex;align-items:center;gap:12px;border:1px solid #425337;border-radius:8px;background:linear-gradient(110deg,#24311c,#162017);padding:13px 16px;margin-bottom:18px}.banner-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#35452a;color:var(--green);font-size:18px}.banner b{font-size:11px;font-weight:600}.banner p{font-size:10px;color:#a0b08e;margin-top:4px;line-height:1.5}.banner .text-button{margin-left:auto;white-space:nowrap}.text-button{border:0;background:none;padding:3px 0;color:var(--green);font-size:11px}.error-banner{border:1px solid #783f34;background:#2e1b16;padding:11px 15px;border-radius:7px;margin-bottom:15px;font-size:11px;color:#fac4af}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:16px}.metric-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#172019,#121914);border:1px solid var(--line);border-radius:8px;padding:15px 16px}.metric-head{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:1px;color:#97a48c}.metric-icon{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;font-size:14px}.coral{background:#4b3029;color:var(--coral)}.violet{background:#372e4c;color:var(--violet)}.cyan{background:#20423b;color:var(--cyan)}.lime{background:#354528;color:var(--green)}.metric-number{font:700 29px/1.2 var(--head);letter-spacing:-1px;margin-top:13px}.metric-number small{font:13px var(--sans);color:#9da994;margin-left:4px}.metric-foot{font-size:10px;color:#8c9a81;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}.metric-track{height:2px;position:absolute;bottom:0;left:0;right:0;background:#273324}.metric-track i{display:block;height:100%;width:0;transition:width .5s}.coral-fill{background:var(--coral)}.violet-fill{background:var(--violet)}.cyan-fill{background:var(--cyan)}.lime-fill{background:var(--green)}.network-number{margin-top:19px;display:flex;align-items:center;gap:13px;color:var(--cyan);min-height:29px;font:12px var(--mono)}.network-number>span:last-child{color:var(--violet)}.network-number b{font:600 16px var(--head)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:15px}.panel{border:1px solid var(--line);border-radius:8px;background:linear-gradient(145deg,#151e17,#121914);padding:17px 18px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-kicker{font:8px var(--mono);letter-spacing:1.4px;color:#7f9075}.panel h2,.list-heading h2{font:600 16px var(--head);letter-spacing:-.35px;margin-top:5px}.panel-link{font-size:10px;color:#acbaa0}.panel-link span{color:var(--green);margin-left:4px}.chart-legend{display:flex;align-items:center;gap:12px;color:#9ba78c;font:9px var(--mono)}.chart-legend>span{display:flex;align-items:center;gap:5px}.chart-legend i{height:6px;width:6px;border-radius:50%}.live-tag{border:1px solid #34432d;border-radius:4px;padding:5px 7px;font-size:8px}.chart-wrap{height:181px;margin-top:20px;display:flex;gap:8px}.chart-y{width:29px;display:flex;flex-direction:column;justify-content:space-between;font:9px var(--mono);color:#6d7d61}.chart-stage{position:relative;flex:1;min-width:0}.chart-guides{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}.chart-guides i{border-top:1px dashed #2c3826}.chart-stage canvas{position:absolute;width:100%;height:100%;inset:0}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:#728666}.chart-axis{display:flex;justify-content:space-between;margin:9px 0 13px 38px;color:#6b7c60;font:8px var(--mono)}.chart-note{border-top:1px solid #2a3726;padding-top:10px;display:flex;align-items:center;gap:7px;font-size:9px;color:#91a17e;line-height:1.5}.health-summary{display:flex;align-items:center;gap:16px;padding:16px 0 12px;border-bottom:1px solid #2a3625}.health-ring{position:relative;width:71px;height:71px;display:grid;place-items:center}.health-ring svg{position:absolute;width:100%;height:100%;inset:0;transform:rotate(-90deg)}.ring-bg,.ring-fill{fill:none;stroke-width:6}.ring-bg{stroke:#2a3828}.ring-fill{stroke:var(--green);stroke-dasharray:195;stroke-dashoffset:195;stroke-linecap:round;transition:stroke-dashoffset .5s}.health-ring>div{position:relative;text-align:center}.health-ring b{display:block;font:700 16px var(--head)}.health-ring small{font:7px var(--mono);color:#a0af8b}.health-summary>div:last-child>b{font:600 14px var(--head)}.health-summary p{font-size:10px;color:#849675;margin-top:6px}.health-row{min-height:34px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #263322;font-size:10px}.health-row:last-child{border-bottom:0}.health-row .site-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.health-row .latency{margin-left:auto;color:#95a583;font:9px var(--mono)}.empty{padding:30px 12px;text-align:center;font-size:11px;line-height:1.7;color:#819574}.panel-note{border-top:1px solid #2a3625;margin-top:8px;padding-top:10px;color:#819471;font-size:9px;line-height:1.5}.count{font:10px var(--mono);color:#9fb28d;border-radius:4px;background:#2b3826;padding:2px 6px;margin-left:3px;vertical-align:2px}.container-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;min-height:39px;border-bottom:1px solid #263322;font-size:11px}.container-row:last-child{border-bottom:0}.container-row .name{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container-row .usage{color:#93a380;font:9px var(--mono)}.status{display:inline-flex;align-items:center;gap:6px;font:9px var(--mono);color:#b1c99a}.status.degraded{color:#e4bc6f}.status.offline{color:#df9680}.panel-bottom{border-top:1px solid #2b3826;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:11px;margin-top:8px;font-size:9px;color:#819471}.panel-bottom a{color:#b0c59c}.service-row{display:flex;align-items:center;gap:10px;min-height:45px;border-bottom:1px solid #263322}.service-row:last-child{border-bottom:0}.service-icon{width:27px;height:27px;border-radius:7px;background:#293a24;display:grid;place-items:center;color:var(--green);font-size:15px}.service-row b{display:block;font-size:11px;font-weight:500}.service-row small{display:block;font-size:9px;color:#8b9e79;margin-top:3px}.service-row .status{margin-left:auto}.quiet-button{font-size:10px;border:1px solid #3c4b33;border-radius:5px;background:none;color:#b5c5a3;padding:5px 8px}.list-heading{display:flex;align-items:center;justify-content:space-between;margin:12px 0 18px;gap:16px}.list-heading p{font-size:11px;color:var(--muted);margin-top:7px}.table-panel{padding:0 17px;overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font:8px var(--mono);letter-spacing:1px;color:#8b9e77;padding:15px 10px;border-bottom:1px solid #304027}td{padding:15px 10px;font-size:11px;border-bottom:1px solid #263422}tr:last-child td{border:0}.table-url{font:10px var(--mono);color:#a0b28a;max-width:300px;overflow:hidden;text-overflow:ellipsis}.table-url a:hover{color:var(--green)}footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:24px 2px 0;color:#798e67;font-size:9px}footer b{font:700 11px var(--head);color:#bac9a9}footer>span:last-child{font:8px var(--mono);letter-spacing:.7px}footer i{font-style:normal;color:var(--green);margin:0 5px}
dialog{width:min(475px,calc(100% - 28px));max-height:calc(100dvh - 40px);padding:0;background:#162016;color:var(--text);border:1px solid #3d4d32;border-radius:13px;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#050a06d6;backdrop-filter:blur(7px)}.modal-content{position:relative;padding:29px}.modal-content h2{font:700 22px/1.3 var(--head);letter-spacing:-.7px;margin:9px 0}.modal-content>p{font-size:11px;line-height:1.7;color:#9daf88;margin-bottom:18px}.close{position:absolute;top:12px;right:14px;border:0;background:none;color:#98ad83;font-size:22px}.modal-emblem{height:39px;width:39px;border-radius:11px;background:#2f4624;display:grid;place-items:center;color:var(--green);font-size:23px;margin-bottom:21px}label{display:block;font-size:10px;color:#c1d0b0;margin:14px 0}input,select{width:100%;height:38px;border:1px solid #3d4e32;border-radius:6px;background:#101810;color:#e1ebd6;padding:0 10px;outline:none;font-size:12px;margin-top:6px}input:focus,select:focus{border-color:#a3d16f;box-shadow:0 0 0 3px #b5f17a12}.form-error{font-size:11px;line-height:1.6;color:#f4ac8c;min-height:14px;margin:10px 0}.modal-note{border-top:1px solid #33442a;margin-top:20px;padding-top:13px;color:#8fa477;font-size:10px;line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.tabs{display:flex;gap:8px;border-bottom:1px solid #35482a;margin-bottom:16px}.tab{padding:10px 8px;border:0;border-bottom:2px solid transparent;background:none;color:#9bb184;font-size:11px}.tab.active{color:var(--green);border-bottom-color:var(--green)}#editorDialog{width:min(710px,calc(100% - 28px))}.editor-row{border:1px solid #34462b;background:#111a10;border-radius:8px;display:grid;grid-template-columns:1fr 1.5fr .85fr 25px;gap:9px;align-items:end;padding:11px;margin-bottom:10px}.editor-row label{margin:0;font-size:9px}.editor-row input,.editor-row select{font-size:11px;height:35px}.remove-row{height:35px;border:0;background:none;color:#d49479;font-size:19px}.add-row{border:1px dashed #4b6638;background:none;border-radius:5px;color:var(--green);font-size:11px;padding:8px 11px}.setup-steps{padding-left:18px;color:#b4c79e;font-size:11px;line-height:1.6}.setup-steps li{margin:15px 0}.setup-steps code{color:var(--green);font-size:10px}pre{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #34462a;background:#10190e;border-radius:6px;padding:10px;font:10px/1.8 var(--mono);color:#cadcb2}.setup-steps label{margin:8px 0}.setup-steps .button{margin-top:5px}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s;z-index:40;border:1px solid #4c6538;border-radius:7px;background:#23351b;color:#d6ebbd;padding:11px 16px;font-size:11px;box-shadow:0 8px 30px #0008}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1550px){.content{padding-top:42px}.metric-card{padding:19px}.metric-number{font-size:34px}.chart-wrap{height:215px}.panel{padding:21px}.welcome{margin-bottom:30px}h1{font-size:35px}}
@media(max-width:1150px){.sidebar{width:210px}main{margin-left:210px}.content{padding:28px 24px 20px}.topbar{padding:0 24px}.welcome-actions{flex-direction:column-reverse;align-items:flex-end;gap:8px}.metric-grid{gap:10px}.metric-card{padding:13px 12px}.network-number{gap:7px}.network-number b{font-size:14px}.dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr)}}
@media(max-width:850px){.sidebar{width:236px;transform:translateX(-100%);transition:transform .2s;box-shadow:14px 0 35px #0008}.sidebar.open{transform:translateX(0)}main{margin-left:0}.mobile-menu{display:block}.topbar{height:57px;padding:0 17px}.content{padding:25px 19px 18px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.performance-panel{grid-column:1/-1}.network-number b{font-size:18px}.chart-wrap{height:190px}}
@media(max-width:570px){.content{padding:24px 13px 17px}.topbar{padding:0 12px}.top-actions{gap:9px}.divider{display:none}.welcome{display:block;margin-bottom:18px}h1{font-size:28px;max-width:340px}.welcome-actions{flex-direction:row;align-items:center;justify-content:space-between;margin-top:17px}.welcome p{font-size:11px}.eyebrow{font-size:8px}.banner{flex-wrap:wrap;padding:12px;gap:9px}.banner>div{flex:1;min-width:210px}.banner .text-button{margin:0 0 0 39px}.metric-grid{gap:9px}.metric-card{padding:12px}.metric-number{font-size:28px}.metric-head{font-size:8px}.metric-foot{font-size:9px}.network-number{gap:8px}.network-number b{font-size:13px}.network-number{font-size:10px;min-height:28px}.dashboard-grid{grid-template-columns:1fr;gap:12px}.performance-panel{grid-column:1}.panel{padding:16px}.chart-legend{gap:8px;font-size:8px}.chart-wrap{height:150px}.chart-empty{font-size:10px}.chart-note{font-size:8px}.health-summary{padding:13px 0}.health-row{min-height:38px}.panel-note{font-size:9px}.list-heading{align-items:flex-start}.list-heading h2{font-size:17px}.list-heading p{font-size:10px}.list-heading .button{white-space:nowrap;font-size:10px;padding:0 9px}footer{align-items:flex-start;font-size:8px}footer>span:last-child{text-align:right;font-size:7px;line-height:1.8}.modal-content{padding:25px 19px}.modal-content h2{font-size:20px}.editor-row{grid-template-columns:1fr 1fr 25px;gap:8px}.editor-row label:nth-child(2){grid-column:1/3;grid-row:2}.editor-row .remove-row{grid-column:3;grid-row:1}.table-panel{padding:0 8px}th,td{padding:13px 8px}.table-url{max-width:160px}dialog{max-height:calc(100dvh - 25px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}


/* MTech Infra light palette: clean surfaces with distinct, soft color accents. */
:root {
  color-scheme: light;
  --bg: #f2f5fb;
  --panel: #ffffff;
  --line: #e3e8f1;
  --muted: #68768d;
  --text: #172337;
  --green: #16856e;
  --coral: #e86f68;
  --violet: #785fd0;
  --cyan: #168eaa;
}
body {
  background:
    radial-gradient(ellipse at 91% 0%, #dce9ff8a, transparent 30rem),
    radial-gradient(ellipse at 18% 17%, #e4f7ef70, transparent 26rem),
    var(--bg);
  color: var(--text);
}
.ambient { background: #85b9e8; opacity: .08; }
.sidebar { background: #fff; border-color: #e2e8f0; box-shadow: 5px 0 24px #344d7108; }
.brand { color: #18263b; }
.brand-mark { background: linear-gradient(145deg, #54c1a1, #35a98c); color: #fff; box-shadow: 0 5px 14px #259d7f36; }
.brand small { color: #8290a2; }
.workspace { background: #f8fafc; border-color: #e4e9f0; }
.workspace-icon { background: #e8f6f1; color: #13856c; }
.workspace small, .profile small { color: #7e8ba0; }
.nav-label { color: #8a96a8; }
.nav-item { color: #66748a; }
.nav-item:hover { color: #26354d; background: #f4f7fb; }
.nav-item.active { color: #176956; background: #eaf7f2; box-shadow: inset 3px 0 #27a181; }
.nav-item.active > span { color: #16856e; }
.nav-item em { color: #347d6d; background: #e3f4ed; }
.server-card { background: #f8fafb; border-color: #e2e8ed; color: #2c3b50; }
.server-card small { color: #728198; }
.dot.neutral { background: #b8c2d1; }
.dot.offline { background: #e97568; }
.dot.degraded { background: #dfaa42; }
.profile { border-color: #e7ebf1; }
.avatar { color: #fff; background: linear-gradient(140deg, #8870de, #579bd5); border: 0; }
.profile-more { color: #8190a4; }
.topbar { background: #ffffffd9; border-color: #e4e9f0; }
.breadcrumbs { color: #718098; }
.breadcrumbs span { color: #a4afbd; }
.breadcrumbs b { color: #34435a; }
.live-indicator { color: #64758d; }
.divider { background: #e0e6ee; }
.icon-button { color: #687891; }
.icon-button:hover { color: #17856d; }
.content { color: #172337; }
.eyebrow { color: #75849a; }
.eyebrow i { height: 2px; background: #2da884; }
h1 { color: #1e2c42; }
h1 span { color: #188b71; }
.welcome p { color: #718098; }
.welcome-actions > span { color: #8290a3; }
.button.primary { color: #fff; background: linear-gradient(115deg, #168b73, #26a486); box-shadow: 0 5px 15px #208e7430; }
.button.primary:hover { background: linear-gradient(115deg, #117860, #168b73); }
.button.quiet { border-color: #d8e0ea; color: #53647d; }
.banner { background: linear-gradient(110deg, #edf8ff, #effaf4); border-color: #cfe5df; }
.banner-icon { color: #167c8b; background: #d9f1ef; }
.banner p { color: #5e7488; }
.error-banner { color: #9b392e; background: #fff2ee; border-color: #efc7be; }
.metric-card { background: #fff; border-color: #e4e9f0; box-shadow: 0 4px 17px #344d7108; }
.metric-card:nth-child(1) { background: linear-gradient(140deg, #fff, #fff6f4); }
.metric-card:nth-child(2) { background: linear-gradient(140deg, #fff, #f7f4ff); }
.metric-card:nth-child(3) { background: linear-gradient(140deg, #fff, #f1fbfc); }
.metric-card:nth-child(4) { background: linear-gradient(140deg, #fff, #f3faf4); }
.metric-head { color: #75839a; }
.metric-number { color: #1b2a40; }
.metric-number small { color: #748299; }
.metric-foot { color: #6c7a91; }
.metric-icon.coral { color: #d95e56; background: #ffe7e2; }
.metric-icon.violet { color: #7258c6; background: #ece7ff; }
.metric-icon.cyan { color: #14859a; background: #ddf4f4; }
.metric-icon.lime { color: #43824e; background: #e4f5df; }
.metric-track { background: #e9edf2; }
.network-number { color: #168eaa; }
.network-number > span:last-child { color: #785fd0; }
.panel { background: #fff; border-color: #e3e8f0; box-shadow: 0 5px 20px #344d7109; }
.section-kicker { color: #8190a4; }
.panel h2, .list-heading h2 { color: #213047; }
.panel-link { color: #63748b; }
.chart-legend { color: #75829a; }
.live-tag { color: #21846b; border-color: #cfe8dd; background: #f0faf5; }
.chart-y, .chart-axis { color: #91a0b3; }
.chart-guides i { border-color: #e9edf3; }
.chart-empty { color: #8a9bb0; }
.chart-note { color: #65768c; border-color: #e9edf2; }
.health-summary, .health-row, .panel-note, .panel-bottom, .service-row { border-color: #edf0f4; }
.ring-bg { stroke: #e8edf3; }
.health-ring small { color: #7c8ba0; }
.health-summary p, .panel-note { color: #75849a; }
.health-row .latency { color: #6c7c90; }
.empty { color: #7e8da2; }
.count { color: #536dba; background: #eff0ff; }
.container-row { border-color: #edf0f4; color: #304058; }
.container-row .usage { color: #64758d; }
.status { color: #278161; }
.status.degraded { color: #ad7617; }
.status.offline { color: #c15046; }
.panel-bottom { color: #6d7e92; }
.panel-bottom a { color: #278161; }
.service-icon { color: #fff; background: linear-gradient(145deg, #39ad90, #218b7a); }
.service-row small { color: #73839a; }
.quiet-button { color: #50637a; border-color: #dfe6ed; background: #fbfcfe; }
.list-heading p { color: #738199; }
th { color: #8190a4; border-color: #e7ebf1; }
td { color: #34445b; border-color: #edf0f4; }
.table-url { color: #367b91; }
.table-url a:hover { color: #15856d; }
footer { color: #8190a2; }
footer b { color: #37475c; }
footer > span:last-child { color: #8794a5; }
footer i { color: #238e75; }
dialog { color: #223047; background: #fff; border-color: #e0e6ee; box-shadow: 0 25px 100px #263b5b30; }
dialog::backdrop { background: #17264066; }
.modal-content > p { color: #687991; }
.close { color: #7889a0; }
.modal-emblem { color: #fff; background: linear-gradient(145deg, #846bd5, #5a9ed2); }
label { color: #4e5f77; }
input, select { color: #25364c; background: #fff; border-color: #d9e1eb; }
input:focus, select:focus { border-color: #38a68a; box-shadow: 0 0 0 3px #52bd9b20; }
.form-error { color: #bf5047; }
.modal-note { color: #73839a; border-color: #e6ebf1; }
.tabs { border-color: #e4e9f0; }
.tab { color: #697b91; }
.tab.active { color: #16856e; border-color: #32a786; }
.editor-row { border-color: #e2e8ef; background: #f9fbfd; }
.remove-row { color: #ca6858; }
.add-row { color: #20846c; border-color: #b9dace; background: #f7fcf9; }
.setup-steps { color: #53647a; }
.setup-steps code { color: #1b806c; }
pre { color: #30445b; border-color: #e0e7ec; background: #f5f8fa; }
#toast { color: #245d4f; border-color: #bddfd0; background: #effaf4; box-shadow: 0 8px 30px #294d3330; }


/* Lighter MTech Infra palette */
:root {
  --bg: #edf2fa;
  --panel: #ffffff;
  --line: #e1e7f0;
  --text: #18253a;
  --muted: #63738c;
  --green: #12826f;
  --coral: #e56868;
  --violet: #7959d0;
  --cyan: #138da8;
}
body {
  background:
    radial-gradient(ellipse at 87% 2%, #dce5ff 0, #dce5ff00 32rem),
    radial-gradient(ellipse at 18% 12%, #dff4ed 0, #dff4ed00 28rem),
    #edf2fa;
}
.sidebar { background: linear-gradient(180deg,#fff 0%,#fbfcff 70%,#f5f7ff 100%); }
.brand-mark { background: linear-gradient(135deg,#37b694,#448cd4); color:#fff; box-shadow:0 5px 14px #438fbd38; }
.brand-secondary { color:#5666bf; }
.workspace { background:#f6f8fc; }
.nav-item.active { background:#e7f5f0; color:#146d60; box-shadow:inset 3px 0 #239e83; }
.nav-item em { background:#ebeaff; color:#6458b7; }
.topbar { background:#ffffffed; box-shadow:0 2px 12px #50648908; }
h1 span { color:#257fa6; }
.button.primary { background:linear-gradient(115deg,#188c77,#218eae); box-shadow:0 5px 15px #218a9b2c; }
.button.primary:hover { background:linear-gradient(115deg,#137861,#187997); }
.metric-card { box-shadow:0 5px 20px #50648912; }
.metric-card:nth-child(1) { background:linear-gradient(145deg,#fff 15%,#fff0ed); }
.metric-card:nth-child(2) { background:linear-gradient(145deg,#fff 15%,#f2eeff); }
.metric-card:nth-child(3) { background:linear-gradient(145deg,#fff 15%,#eafbff); }
.metric-card:nth-child(4) { background:linear-gradient(145deg,#fff 15%,#ebf8ef); }
.metric-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:#dd6870; }
.metric-card:nth-child(2)::before { background:#8162d5; }
.metric-card:nth-child(3)::before { background:#25a5ba; }
.metric-card:nth-child(4)::before { background:#42a879; }
.panel { box-shadow:0 6px 22px #465d7e0d; }
.section-kicker { color:#647c9e; }
.chart-note { background:linear-gradient(90deg,#f5f8ff,#f4fbf8); }
.status { padding:4px 7px; border-radius:20px; background:#e8f6ee; }
.status.degraded { color:#93630d; background:#fff3d9; }
.status.offline { color:#ac453f; background:#ffebe8; }
.health-ring .ring-fill { stroke:#239d7f; }
.service-icon { background:linear-gradient(145deg,#35b394,#278fa1); }
.banner { background:linear-gradient(110deg,#e8f3ff,#e9f8f0); border-color:#cbddec; }
.banner-icon { background:#dcedff; color:#327caf; }
dialog { background:#fff; box-shadow:0 25px 100px #273d5c38; }

/* Personal tools, weather and planner */
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:16px}
.feature-grid>.panel{background:#fff;border-color:#e1e7f0}
.feature-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-size:18px}
.weather-icon{color:#db8b23;background:#fff2d7}.vpn-icon{color:#5871ca;background:#edf0ff}.storage-icon{color:#218f77;background:#e7f8f0}.planner-icon{color:#b25e99;background:#fff0f8}
.weather-main{display:flex;align-items:center;gap:13px;margin:14px 0 8px}.weather-main strong{font:800 38px/1 var(--head);letter-spacing:-1.5px;color:#213047}.weather-main span{color:#63748b;font-size:12px}
.weather-meta{display:flex;gap:16px;color:#7b899d;font-size:10px}.forecast-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border-top:1px solid #edf0f4;padding-top:10px}.forecast-strip>div{display:grid;grid-template-columns:1fr auto;align-items:center;padding:3px 7px;border-right:1px solid #edf0f4}.forecast-strip>div:last-child{border:0}.forecast-strip small{color:#8794a5;font-size:9px}.forecast-strip span{grid-row:span 2;font-size:15px;margin:0 8px}.forecast-strip b{font:600 11px var(--head);color:#34445b}
.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:9px;margin-top:13px}.shortcut{min-width:0;padding:11px 10px;border:1px solid #e9edf4;border-radius:9px;background:linear-gradient(140deg,#fff,#f8faff);transition:transform .15s,border-color .15s}.shortcut:hover{transform:translateY(-2px);border-color:#acd9cf}.shortcut-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font:700 13px var(--head);margin-bottom:8px}.tone-0{color:#237f70;background:#e6f6ef}.tone-1{color:#6657b3;background:#efedff}.tone-2{color:#ad6941;background:#fff0e5}.tone-3{color:#327b9c;background:#e8f6ff}.shortcut>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#34445b}.shortcut small{display:flex;align-items:center;gap:5px;margin-top:7px;color:#78879c;font-size:9px}.shortcut .dot{width:6px;height:6px;box-shadow:none}
.feed-list{display:grid;margin-top:9px}.feed-item{display:flex;align-items:center;gap:9px;padding:10px 2px;border-bottom:1px solid #edf0f4}.feed-item:last-child{border:0}.feed-item>span{min-width:0;flex:1}.feed-item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#36455c;font-size:10px;font-weight:600}.feed-item small{display:block;margin-top:4px;color:#8390a3;font-size:9px}.feed-item code{color:#7180b1;font-size:9px}.feed-dot{width:8px;height:8px;border-radius:50%;background:#53b895;box-shadow:0 0 0 4px #e8f7f0;flex:none}
.integration-empty{min-height:110px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px}.integration-empty p{max-width:400px;color:#718097;font-size:11px;line-height:1.6}.integration-badge{font:9px var(--mono);letter-spacing:.6px;border-radius:20px;padding:5px 9px;color:#7b65bd;background:#f1edff}
.storage-content{display:flex;align-items:center;gap:17px;padding:16px 0}.storage-ring{--used:0%;width:82px;height:82px;flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;background:conic-gradient(#25a184 var(--used),#eaf0f3 0);position:relative;color:#2f4560}.storage-ring:before{content:"";position:absolute;inset:7px;background:#fff;border-radius:50%}.storage-ring strong,.storage-ring small{z-index:1}.storage-ring strong{font:700 18px var(--head)}.storage-ring small{font:8px var(--mono);letter-spacing:.8px;color:#8896a8}.storage-copy>b,.storage-copy>small{display:block}.storage-copy>b{font-size:12px;color:#34445b}.storage-copy>small{font-size:10px;color:#8290a3;margin-top:5px}.backup-state{display:flex;align-items:center;gap:7px;margin-top:12px;color:#738198;font-size:9px}
.planner-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(190px,.9fr);gap:18px;margin-top:14px}.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.calendar-head>b{font:600 12px var(--head);color:#384a63}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}.calendar-weekdays{margin-bottom:5px;color:#8d99aa;font:9px var(--mono)}.calendar-day{position:relative;aspect-ratio:1;border:0;border-radius:8px;background:transparent;color:#53647b;font-size:10px}.calendar-day:hover{background:#edf7f4}.calendar-day.today{color:#157c68;font-weight:700;background:#e5f6ef}.calendar-day.selected{color:#fff;background:#328eae}.calendar-day.has-note:after{content:"";position:absolute;bottom:3px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#e38a62}.calendar-day.selected.has-note:after{background:#fff}.calendar-blank{aspect-ratio:1}.note-editor{display:flex;flex-direction:column;gap:9px}.note-editor label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#3e4f67}.note-editor label small{font-size:9px;font-weight:400;color:#8794a5}.note-editor textarea{min-height:109px;resize:vertical;padding:10px;border:1px solid #dfe6ee;border-radius:8px;background:#fbfcfe;color:#293b51;font:11px/1.5 var(--sans)}.note-editor textarea:focus{outline:2px solid #32a78655;border-color:#32a786}.note-editor .button{align-self:flex-end;height:30px}
@media(max-width:1000px){.feature-grid{grid-template-columns:1fr}.planner-layout{grid-template-columns:minmax(200px,.9fr) 1.1fr}}
@media(max-width:600px){.feature-grid{gap:11px}.planner-layout{grid-template-columns:1fr}.calendar{max-width:340px}.note-editor textarea{min-height:90px}}

.peer-list{display:grid;min-height:100px}.peer-row{display:flex;align-items:center;gap:9px;padding:10px 2px;border-bottom:1px solid #edf0f4}.peer-row:last-child{border:0}.peer-row>span{min-width:0;flex:1}.peer-row b,.peer-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.peer-row b{color:#36455c;font-size:10px}.peer-row small{margin-top:4px;color:#8290a3;font:9px var(--mono)}.peer-row em{max-width:45%;color:#75849a;font-size:9px;font-style:normal;text-align:right}.backup-history{margin-top:3px}.backup-history-title{margin-bottom:7px;color:#8391a4;font:8px var(--mono);letter-spacing:1px}.backup-event{display:flex;align-items:center;gap:8px;padding:4px 0;color:#728198;font-size:9px}.backup-event i{width:6px;height:6px;border-radius:50%;background:#38aa84;box-shadow:0 0 0 3px #e9f7f0}