:root {
  --paper:#faf8f4; --canvas:#f4f0ea; --line:#e3ded5; --ink:#232922;
  --muted:#788075; --green:#285540; --green-light:#e8f0e8;
  font-family:"Segoe UI",ui-sans-serif,system-ui,sans-serif;
  color:var(--ink); background:var(--canvas);
}
* { box-sizing:border-box; }
body { margin:0; }
button,input { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.shell { min-height:100vh; display:grid; grid-template-columns:190px minmax(0,1fr); max-width:1540px; margin:0 auto; background:var(--paper); border-inline:1px solid var(--line); }
.sidebar { position:sticky; top:0; height:100vh; border-right:1px solid var(--line); background:#fff; padding:22px 13px; display:flex; flex-direction:column; }
.wordmark { display:flex; align-items:center; gap:10px; padding:0 7px 27px; }
.mark { display:grid; place-items:center; background:var(--green); color:#fff; width:30px; height:30px; border-radius:5px; font:19px Georgia,serif; }
.wordmark strong,.wordmark small { display:block; }
.wordmark strong { font:600 20px/1 Georgia,serif; }
.wordmark small { color:var(--muted); font-size:8px; letter-spacing:1.45px; margin-top:4px; font-weight:700; }
.sidebar-label,.eyebrow { font:700 9px/1.3 Consolas,"Courier New",monospace; letter-spacing:1.3px; color:#8d9489; }
.sidebar-label { padding:0 10px 10px; }
.sidebar nav { display:grid; gap:2px; }
.nav-item { display:flex; align-items:center; gap:10px; text-align:left; width:100%; border:1px solid transparent; border-radius:5px; background:none; color:#5e675e; font-size:11px; font-weight:600; padding:9px 10px; }
.nav-item span { font-size:15px; width:17px; text-align:center; line-height:1; }
.nav-item:hover { background:#f5f4f0; }
.nav-item.active { background:#edf3ed; border-color:#d7e4d8; color:var(--green); }
.sidebar-bottom { margin-top:auto; }
.server-id { border-block:1px solid var(--line); padding:13px 4px; display:flex; gap:8px; align-items:center; }
.server-id strong,.server-id small { display:block; }
.server-id strong { font:600 10px Consolas,"Courier New",monospace; }
.server-id small { color:var(--muted); font-size:9px; margin-top:3px; }
.status-dot,.eyebrow-dot { width:7px; height:7px; border-radius:50%; display:inline-block; background:#70a367; flex:none; }
.text-button { border:0; background:none; color:var(--green); padding:5px 0; font-size:10px; font-weight:700; text-align:left; }
.sidebar .text-button { margin:12px 4px; }
.main { min-width:0; width:100%; max-width:1350px; padding:0 26px; margin:0 auto; align-self:start; }
.topbar { height:52px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.top-path { font:700 9px Consolas,"Courier New",monospace; color:#8a9188; letter-spacing:1px; }
.top-path span { padding:0 8px; color:#b8bcb3; }
.top-path strong { color:#3f4940; }
.top-right { display:flex; gap:14px; align-items:center; color:#777f74; font:10px Consolas,"Courier New",monospace; }
.user-badge { border:1px solid #d4ded2; background:#e9f0e7; border-radius:50%; height:25px; width:25px; display:grid; place-items:center; color:var(--green); font-weight:700; }
.page { display:none; }
.page.active { display:block; }
.page-heading { display:flex; justify-content:space-between; align-items:end; gap:15px; margin:23px 0 15px; }
.page-heading h1 { font:500 27px/1.05 Georgia,"Times New Roman",serif; letter-spacing:-.5px; margin:7px 0 5px; }
.page-heading p { font-size:11px; color:var(--muted); margin:0; }
.eyebrow-dot { width:5px; height:5px; margin:0 3px 1px; }
.heading-side { display:flex; align-items:center; gap:12px; }
.heading-side>span { font:10px Consolas,"Courier New",monospace; color:#899186; white-space:nowrap; }
.button { border:1px solid var(--line); border-radius:5px; padding:7px 11px; font-size:10px; font-weight:700; background:#fff; color:#3c4e40; }
.button:hover { border-color:#9ebaa2; }
.button.primary { background:var(--green); color:#fff; border-color:var(--green); display:flex; justify-content:space-between; }
.mode-banner { border:1px solid #d9e5d8; background:#f0f5ef; border-radius:5px; padding:9px 12px; display:flex; gap:9px; margin-bottom:12px; color:var(--green); }
.mode-banner>span { font-size:15px; line-height:1; }
.mode-banner strong { display:block; font-size:10px; }
.mode-banner p { font-size:10px; margin:2px 0 0; color:#617064; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.metric,.panel,.detail-card { background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 3px #282c2207; }
.metric { padding:11px 12px; }
.metric-head { display:flex; justify-content:space-between; gap:8px; align-items:center; color:#657064; font-size:10px; font-weight:700; }
.metric-state { color:#768a76; background:#f1f5ef; border-radius:3px; padding:2px 4px; font:9px Consolas,"Courier New",monospace; }
.metric-value { font:600 21px/1.2 Consolas,"Courier New",monospace; letter-spacing:-.7px; margin:11px 0 8px; }
.meter { height:4px; background:#edf0e9; border-radius:2px; overflow:hidden; }
.meter i { height:100%; display:block; width:0; background:var(--green); transition:width .5s; }
.meter.muted i { background:#bbc8bb; }
.metric small { display:block; font:9px Consolas,"Courier New",monospace; color:#8a9388; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); grid-template-rows:auto auto; gap:10px; margin-top:11px; }
.panel { padding:14px; }
.services-panel { grid-row:span 2; }
.panel-head { display:flex; justify-content:space-between; gap:8px; align-items:start; margin-bottom:11px; }
.panel-head h2 { font:500 18px Georgia,"Times New Roman",serif; margin:4px 0 0; }
.panel-meta { color:#8d958b; font:9px Consolas,"Courier New",monospace; white-space:nowrap; }
.service-row { border-top:1px solid #ece9e2; padding:11px 0; display:flex; gap:10px; align-items:center; }
.service-row:last-child { padding-bottom:0; }
.row-icon { height:25px; width:25px; border:1px solid #dbe4db; border-radius:4px; background:#f1f6ef; color:var(--green); display:grid; place-items:center; flex:none; }
.service-name { flex:1; min-width:0; }
.service-name strong,.service-name small { display:block; }
.service-name strong { font-size:11px; }
.service-name small { font-size:9px; color:#8d958b; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill { border-radius:3px; padding:4px 6px; font:9px Consolas,"Courier New",monospace; white-space:nowrap; }
.pill.unknown { background:#f1f0ed; color:#798078; }
.pill.good { background:#e8f2e7; color:#316b3c; }
.pill.bad { background:#fbede7; color:#a44e2e; }
.activity-list { display:grid; }
.activity-row { display:flex; gap:8px; border-top:1px solid #ece9e2; padding:8px 0; align-items:start; }
.event-dot { margin-top:4px; width:5px; height:5px; border-radius:50%; background:#809e7d; flex:none; }
.activity-row div { flex:1; }
.activity-row strong,.activity-row small { display:block; }
.activity-row strong { font-size:10px; font-weight:600; text-transform:capitalize; }
.activity-row small { font:9px Consolas,"Courier New",monospace; color:#939a90; margin-top:3px; }
.empty,.health-panel>p { font-size:10px; color:var(--muted); line-height:1.5; margin:0; }
.health-line { display:flex; justify-content:space-between; border-top:1px solid #ece9e2; margin-top:9px; padding-top:8px; font-size:10px; }
.health-line span { color:#899287; }
.health-line strong { font-weight:600; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:1050px; }
.detail-card { padding:14px; }
.detail-card strong { font:600 15px/1.25 Consolas,"Courier New",monospace; display:block; margin:9px 0 5px; }
.detail-card p { color:var(--muted); font-size:10px; line-height:1.5; margin:0; }
.audit-panel { margin-top:10px; max-width:1050px; }
.audit-row { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding:8px 0; font-size:10px; }
.audit-row span { color:#929a90; font:9px Consolas,"Courier New",monospace; }
footer { font:9px Consolas,"Courier New",monospace; color:#a0a69e; padding:20px 0 28px; }
footer span { padding:0 5px; }
.mobile-nav { display:none; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:20px; background:var(--canvas); }
.login-card { width:min(100%,380px); background:#fff; border:1px solid var(--line); border-radius:7px; padding:25px; box-shadow:0 12px 40px #242a1e14; }
.login-card .wordmark { padding:0 0 26px; }
.login-card h1 { font:500 29px Georgia,"Times New Roman",serif; margin:7px 0; }
.login-card p { font-size:11px; color:var(--muted); }
.login-card form { display:grid; gap:8px; margin-top:24px; }
.login-card label { font-size:10px; font-weight:700; }
.login-card input { border:1px solid #ccd3cb; border-radius:5px; padding:9px; outline:none; }
.login-card input:focus { border-color:var(--green); box-shadow:0 0 0 3px #28554020; }
.form-error { font-size:10px; color:#ab4c35; min-height:19px; margin-top:7px; }
.toast { position:fixed; right:15px; bottom:15px; border-radius:5px; background:#1d3325; color:#fff; padding:9px 13px; font-size:10px; opacity:0; transform:translateY(5px); transition:.2s; pointer-events:none; }
.toast.show { opacity:1; transform:none; }
@media(max-width:900px) {
  .shell { grid-template-columns:170px minmax(0,1fr); }
  .main { padding:0 16px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .services-panel { grid-row:auto; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .shell { display:block; }
  .sidebar { display:none; }
  .main { padding:0 13px; }
  .topbar { height:48px; }
  .page-heading { margin:18px 0 12px; }
  .page-heading h1 { font-size:24px; }
  .page-heading p { font-size:10px; }
  .heading-side { display:block; text-align:right; }
  .heading-side>span { display:block; font-size:8px; margin-bottom:5px; }
  .heading-side .button { padding:5px 7px; }
  .metrics { gap:7px; }
  .metric { padding:9px; }
  .metric-value { font-size:19px; margin:9px 0 7px; }
  .dashboard-grid { gap:8px; }
  .panel { padding:12px; }
  .detail-grid { grid-template-columns:1fr; gap:8px; }
  .mobile-nav { display:flex; position:fixed; left:0; right:0; bottom:0; height:61px; padding-bottom:env(safe-area-inset-bottom); background:#fff; border-top:1px solid var(--line); z-index:5; justify-content:space-around; align-items:center; }
  .mobile-nav button { border:0; background:none; color:#879187; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:16px; padding:4px; min-width:44px; }
  .mobile-nav button.active { color:var(--green); }
  .mobile-nav small { font-size:8px; }
  footer { padding-bottom:80px; }
  .service-name small { max-width:170px; }
}