@font-face{font-family:"WM Manrope";src:url("/fonts/manrope.woff2") format("woff2");font-display:swap;font-weight:300 800}
@font-face{font-family:"WM Inter";src:url("/fonts/inter.woff2") format("woff2");font-display:swap;font-weight:100 900}
@font-face{font-family:"WM Plex Mono";src:url("/fonts/plex-mono.woff2") format("woff2");font-display:swap;font-weight:500}

:root{
  --desk:#f4f3ef;
  --sheet:#fbfaf7;
  --raised:#fff;
  --well:#efeee9;
  --ink:#202124;
  --ink-2:#565854;
  --ink-3:#777974;
  --ink-4:#a5a6a1;
  --rule:#dfddd6;
  --rule-soft:#eae8e2;
  --rule-strong:#c8c5bc;
  --marker:#8b6728;
  --marker-soft:#f1e8d7;
  --graphite:#292a2d;
  --success:#26724f;
  --success-soft:#e4f1ea;
  --warning:#91651f;
  --warning-soft:#f6ecd8;
  --danger:#b33a35;
  --danger-soft:#f8e5e3;
}

*{box-sizing:border-box}
html{font-family:"WM Inter",Arial,sans-serif;color:var(--ink);background:var(--desk);-webkit-font-smoothing:antialiased}
body{margin:0;min-width:320px;background:var(--desk)}
a{color:inherit}
button,input{font:inherit}
button,a{tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--marker);outline-offset:2px}

.app-shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;display:flex;flex-direction:column;height:100vh;border-right:1px solid var(--rule);background:var(--desk)}
.brand{display:flex;align-items:center;gap:10px;min-height:72px;padding:0 18px;text-decoration:none;font:650 12px/1 "WM Manrope";letter-spacing:.02em}
.brand b{color:var(--marker)}
.brand-sign{display:grid;place-items:center;width:34px;height:34px;border-radius:6px;color:#fff;background:var(--graphite);font:700 11px/1 "WM Manrope";letter-spacing:-.04em}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:16px 10px}
.sidebar nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:6px;color:var(--ink-2);text-decoration:none;font-size:13px;font-weight:550}
.sidebar nav a>span{display:grid;place-items:center;width:20px;color:var(--ink-3);font-size:15px}
.sidebar nav a:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.sidebar nav a.is-active{color:var(--ink);background:var(--marker-soft)}
.sidebar nav a.is-active::before{position:absolute;inset:8px auto 8px -10px;width:3px;border-radius:0 2px 2px 0;background:var(--marker);content:""}
.sidebar-foot{display:grid;gap:4px;margin-top:auto;padding:12px 10px 20px;border-top:1px solid var(--rule)}
.sidebar-foot a,.sidebar-foot button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:6px;color:var(--ink-2);background:transparent;text-decoration:none;font-size:12px;cursor:pointer}
.sidebar-foot a:hover,.sidebar-foot button:hover{color:var(--ink);background:var(--raised)}

.workspace{min-width:0}
.topbar{position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 24px;border-bottom:1px solid var(--rule);background:rgba(244,243,239,.94);backdrop-filter:blur(12px);color:var(--ink-3);font-size:11px}
.topbar>div{display:flex;align-items:center;gap:8px}
.presence-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-soft)}
.profile-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;background:var(--graphite);font-size:10px;font-weight:700}
.menu-button{display:none;width:40px;height:40px;border:0;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}

.page{padding:28px 24px 48px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;min-height:62px;margin-bottom:24px}
.page-head p,.panel-head p,.attention-panel>p:first-child{margin:0 0 6px;color:var(--marker);font:500 10px/1.2 "WM Plex Mono";letter-spacing:.08em}
.page-head h1{margin:0;font:620 26px/1.15 "WM Manrope";letter-spacing:-.03em;text-wrap:balance}

.status-strip{display:flex;align-items:center;gap:12px;min-height:44px;margin-bottom:16px;padding:0 16px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);font-size:12px}
.status-strip strong{font-weight:600}
.status-strip>span:last-child{margin-left:auto;color:var(--ink-3);font:500 10px "WM Plex Mono"}
.workspace-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,.62fr);gap:16px}
.work-panel,.attention-panel,.services-panel,.section-panel{border:1px solid var(--rule);border-radius:10px;background:var(--sheet)}
.panel-head{display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:16px;border-bottom:1px solid var(--rule-soft)}
.panel-head h2,.attention-panel h2{margin:0;font:620 17px/1.25 "WM Manrope";letter-spacing:-.015em}
.panel-head>a,.panel-head>span{color:var(--ink-3);font-size:11px;text-decoration:none}
.panel-head>a:hover{color:var(--marker)}

.work-row{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto 24px;gap:12px;align-items:center;min-height:72px;padding:10px 16px;border-bottom:1px solid var(--rule-soft);text-decoration:none}
.work-row:last-child{border-bottom:0}
.work-row:hover,.section-row:hover,.service-row:hover{background:rgba(255,255,255,.58)}
.work-row.is-current::before{position:absolute;inset:14px auto 14px -1px;width:3px;border-radius:0 2px 2px 0;background:var(--marker);content:""}
.type-tag{justify-self:start;padding:4px 6px;border-radius:4px;color:var(--marker);background:var(--marker-soft);font:500 9px/1 "WM Plex Mono";letter-spacing:.05em;text-transform:uppercase}
.work-title{min-width:0}
.work-title strong,.section-row strong,.service-row strong{display:block;overflow:hidden;margin-bottom:5px;font:600 13px/1.3 "WM Manrope";text-overflow:ellipsis;white-space:nowrap}
.work-title small,.section-row small,.service-row small{display:block;color:var(--ink-3);font-size:10px}
code{font:500 9px "WM Plex Mono"}
.work-row>b,.section-row>b,.service-row>b{color:var(--ink-4);font-weight:400}
.status{padding:5px 8px;border-radius:4px;font-size:9px;font-weight:600;white-space:nowrap}
.status--success{color:var(--success);background:var(--success-soft)}
.status--marker{color:var(--marker);background:var(--marker-soft)}
.status--neutral{color:var(--ink-2);background:var(--well)}

.attention-panel{align-self:start;padding:20px}
.attention-panel h2{margin-bottom:10px}
.attention-panel>p:not(:first-child){margin:0 0 20px;color:var(--ink-2);font-size:12px;line-height:1.55;text-wrap:pretty}
.attention-panel>a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--rule);border-radius:6px;background:var(--raised);font-size:11px;text-decoration:none}
.attention-panel>a:hover{border-color:var(--rule-strong)}
.services-panel{margin-top:16px}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.service-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto 14px;gap:10px;align-items:center;min-height:72px;padding:12px 16px;border-right:1px solid var(--rule-soft);text-decoration:none}
.service-row:last-child{border-right:0}
.service-state{width:7px;height:7px;border-radius:50%}
.service-state.is-online{background:var(--success)}
.service-state.is-offline{background:var(--danger)}
.service-row em{color:var(--ink-3);font-size:9px;font-style:normal}

.section-panel{max-width:980px}
.section-row{display:grid;grid-template-columns:96px minmax(0,1fr) 24px;gap:16px;align-items:center;min-height:76px;padding:12px 16px;border-bottom:1px solid var(--rule-soft);text-decoration:none}
.section-row:last-child{border-bottom:0}
.empty-copy{color:var(--ink-2)}

.login-page{min-height:100vh}
.login-shell{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(420px,1fr);min-height:100vh}
.login-mark{display:flex;flex-direction:column;justify-content:space-between;padding:40px;background:var(--graphite);color:#fff}
.login-mark .brand-sign{width:48px;height:48px;background:var(--marker);font-size:14px}
.login-mark p{margin:0;font:650 18px "WM Manrope";letter-spacing:.02em}
.login-mark strong{color:#d7bb83}
.login-panel{display:flex;flex-direction:column;justify-content:center;width:min(100%,520px);padding:64px}
.eyebrow{margin:0 0 12px;color:var(--marker);font:500 10px "WM Plex Mono";letter-spacing:.1em}
.login-panel h1{max-width:420px;margin:0 0 12px;font:620 32px/1.15 "WM Manrope";letter-spacing:-.035em;text-wrap:balance}
.login-copy{max-width:420px;margin:0 0 32px;color:var(--ink-2);font-size:13px;line-height:1.55}
.login-form{display:grid;gap:18px;max-width:360px}
.login-form label{display:grid;gap:7px;color:var(--ink-2);font-size:12px;font-weight:550}
.login-form input{height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:6px;background:var(--well);color:var(--ink)}
.login-form input:focus{border-color:var(--marker);outline:2px solid rgba(139,103,40,.18)}
.login-form button{height:40px;border:0;border-radius:6px;background:var(--graphite);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:background 140ms,transform 100ms}
.login-form button:hover{background:#17181a}
.login-form button:active{transform:scale(.97)}
.form-error{max-width:360px;margin:-12px 0 20px;padding:10px 12px;border:1px solid #efcbc8;border-radius:6px;color:var(--danger);background:var(--danger-soft);font-size:11px}

@media(max-width:1050px){
  .app-shell{grid-template-columns:68px minmax(0,1fr)}
  .brand{justify-content:center;padding:0}
  .brand>span:last-child,.sidebar nav a:not(.is-active)::after,.sidebar nav a{font-size:0}
  .sidebar nav a{justify-content:center;padding:0}
  .sidebar nav a>span{font-size:16px}
  .sidebar-foot a,.sidebar-foot button{justify-content:center;font-size:0}
  .sidebar-foot a>span{font-size:14px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-row:nth-child(2){border-right:0}
  .service-row:nth-child(-n+2){border-bottom:1px solid var(--rule-soft)}
}

@media(max-width:760px){
  .app-shell{display:block}
  .sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:min(280px,90vw);height:100vh;transform:translateX(-102%);transition:transform 180ms cubic-bezier(.23,1,.32,1);box-shadow:0 16px 40px rgba(32,33,36,.15)}
  .sidebar.is-open{transform:translateX(0)}
  .brand{justify-content:flex-start;padding:0 18px}
  .brand>span:last-child{display:inline;font-size:12px}
  .sidebar nav a{justify-content:flex-start;padding:0 12px;font-size:13px}
  .sidebar-foot a,.sidebar-foot button{justify-content:space-between;font-size:12px}
  .menu-button{display:grid;place-items:center}
  .topbar{padding:0 16px}
  .topbar>div{display:none}
  .page{padding:24px 16px 40px}
  .page-head{margin-bottom:20px}
  .page-head h1{font-size:24px}
  .status-strip{align-items:flex-start;flex-wrap:wrap;padding:12px 14px}
  .status-strip>span:last-child{width:100%;margin-left:20px}
  .workspace-grid{grid-template-columns:1fr}
  .work-row{grid-template-columns:52px minmax(0,1fr) 20px;min-height:80px;padding:12px}
  .work-row>.status{grid-row:2;grid-column:2;justify-self:start}
  .work-row>b{grid-row:1/3;grid-column:3}
  .panel-head{padding:14px}
  .panel-head>a{display:none}
  .service-grid{grid-template-columns:1fr}
  .service-row{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .service-row:last-child{border-bottom:0}
  .section-row{grid-template-columns:80px minmax(0,1fr) 20px;padding:12px}
  .login-shell{display:block}
  .login-mark{min-height:150px;padding:24px}
  .login-panel{width:100%;padding:40px 24px}
  .login-panel h1{font-size:28px}
}

@media(prefers-reduced-motion:reduce){
  .sidebar,.login-form button{transition:none}
}