:root {
  --ink: #18352d;
  --muted: #6e7e77;
  --green: #087f5b;
  --green-dark: #075f46;
  --mint: #dfeee7;
  --cream: #f6f2e8;
  --paper: #fffdf8;
  --line: #dfe5df;
  --red: #b3483f;
  --amber: #b57713;
  --blue: #376e8c;
  --shadow: 0 18px 48px rgba(28, 66, 54, .09);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: "Manrope", sans-serif; letter-spacing: -.03em; }
p { line-height: 1.55; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: var(--green); color: #fff; font: 800 25px "Manrope"; box-shadow: 0 12px 28px rgba(8,127,91,.22); }
.brand-mark.small { width: 40px; height: 40px; border-radius: 13px; font-size: 19px; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
.auth-brand { padding: clamp(48px,8vw,120px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 15% 15%, #f7f4e8, transparent 40%), linear-gradient(145deg,#dcebe4,#f6f2e8 65%); }
.auth-brand h1 { max-width: 660px; margin: 24px 0 16px; font-size: clamp(42px,5vw,76px); line-height: 1.03; }
.auth-brand > p:not(.eyebrow) { max-width: 610px; color: #526b62; font-size: 18px; }
.auth-products { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.auth-products span { padding: 9px 13px; border: 1px solid rgba(8,127,91,.18); border-radius: 999px; background: rgba(255,255,255,.5); font-size: 13px; }
.auth-card { align-self: center; width: min(430px,calc(100% - 48px)); margin: 24px auto; padding: 42px; border: 1px solid var(--line); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); }
.auth-card h2 { font-size: 30px; }
label { display: grid; gap: 7px; margin: 17px 0 0; color: #41584f; font-size: 13px; font-weight: 700; }
input, select { width: 100%; padding: 12px 13px; border: 1px solid #cad6cf; border-radius: 11px; color: var(--ink); background: #fff; outline: none; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(8,127,91,.1); }
.primary-btn, .secondary-btn { width: 100%; margin-top: 18px; padding: 13px 16px; border-radius: 11px; border: 1px solid var(--green); font-weight: 800; }
.primary-btn { color: white; background: var(--green); }
.primary-btn:hover { background: var(--green-dark); }
.secondary-btn { color: var(--green-dark); background: transparent; }
.secondary-btn:hover { background: var(--mint); }
.secondary-btn.compact { width: auto; margin: 0; padding: 11px 16px; }
.divider { display: flex; align-items: center; gap: 10px; margin: 24px 0 2px; color: var(--muted); font-size: 12px; }
.divider::before,.divider::after { content:""; flex:1; border-top:1px solid var(--line); }
.notice { min-height: 22px; color: var(--red); font-size: 13px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 25px 18px; color: #eaf5ef; background: #113b30; }
.logo-row { display: flex; align-items: center; gap: 12px; padding: 0 7px 24px; }
.logo-row strong,.logo-row span { display: block; }.logo-row span { margin-top:2px; color:#9dbeb1; font-size:12px; }
nav { display: grid; gap: 5px; }
nav p { margin: 20px 10px 6px; color: #7fa898; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
nav button { padding: 11px 12px; border: 0; border-radius: 10px; color: #cbe0d7; background: transparent; text-align: left; font-weight: 600; }
nav button:hover,nav button.active { color:#fff; background:rgba(255,255,255,.1); }
.sidebar-foot { margin-top:auto; padding:15px 8px 0; border-top:1px solid rgba(255,255,255,.12); }
.sidebar-foot span { display:block; overflow:hidden; margin-bottom:10px; color:#a9c8bb; font-size:11px; text-overflow:ellipsis; }
.sidebar-foot button { padding:0; border:0; color:#fff; background:none; font-weight:700; }
.workspace { min-width: 0; padding: 34px clamp(20px,4vw,58px) 60px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.topbar h1 { font-size:clamp(28px,3vw,42px); }
.topbar p:last-child { margin:8px 0 0; color:var(--muted); }
.top-actions { display:flex; align-items:flex-end; gap:10px; }
.top-actions label { min-width:130px; margin:0; }.top-actions select { padding:10px 36px 10px 12px; }
.menu-btn { display:none; }
.status-banner { margin:26px 0 20px; padding:12px 15px; border:1px solid #cfe0d7; border-radius:11px; color:#436056; background:#edf5f0; font-size:13px; }
.status-banner.error { color:#7d302c; border-color:#ecc8c4; background:#faeae8; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.kpi { min-height:128px; padding:20px; border:1px solid var(--line); border-radius:17px; background:var(--paper); box-shadow:0 8px 24px rgba(26,61,49,.05); }
.kpi span { color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.kpi strong { display:block; margin:10px 0 5px; font:800 30px "Manrope"; }.kpi small { color:var(--muted); }
.grid-2 { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-top:16px; }
.panel { margin-top:16px; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:0 8px 24px rgba(26,61,49,.04); }
.grid-2 .panel { margin-top:0; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }
.panel h2 { font-size:19px; }.panel-head span { color:var(--muted); font-size:12px; }
.app-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.app-card { padding:17px; border:1px solid var(--line); border-radius:14px; background:#fbfaf5; }
.app-card-top { display:flex; justify-content:space-between; gap:10px; }.app-card h3 { font-size:16px; }
.app-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:15px; }
.app-metrics span { color:var(--muted); font-size:10px; text-transform:uppercase; }.app-metrics strong { display:block; margin-top:3px; font-size:17px; }
.badge { display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.badge.healthy,.badge.live,.badge.ok,.badge.completed { color:#066645; background:#dff2e9; }
.badge.degraded,.badge.stale,.badge.warning,.badge.running,.badge.queued { color:#805611; background:#f8edd5; }
.badge.unavailable,.badge.failed,.badge.error { color:#933b34; background:#f8dfdc; }
.bar-chart { min-height:220px; display:flex; align-items:flex-end; gap:7px; padding-top:20px; border-bottom:1px solid var(--line); overflow:hidden; }
.bar-group { min-width:12px; flex:1; display:flex; align-items:flex-end; gap:2px; height:190px; }
.bar { min-height:2px; flex:1; border-radius:4px 4px 0 0; background:var(--green); }.bar.gres{background:#58a983}.bar.developer_api{background:#d4a540}.bar.orchestrate{background:#5e8397}.bar.failures{background:var(--red)}
.legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; color:var(--muted); font-size:11px; }.legend i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--green); }
.toolbar { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }.toolbar input,.toolbar select { width:auto; min-width:170px; margin:0; padding:9px 11px; }.toolbar button { padding:9px 12px; border:1px solid var(--line); border-radius:9px; color:var(--green-dark); background:#fff; font-weight:700; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:12px; } th,td { padding:12px 13px; border-bottom:1px solid #e8ece8; text-align:left; white-space:nowrap; } th { position:sticky; top:0; color:#4b6259; background:#f1f3ee; cursor:pointer; } tr:last-child td { border-bottom:0; } tbody tr:hover { background:#faf8f1; }
.table-empty { padding:30px; color:var(--muted); text-align:center; }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; color:var(--muted); font-size:12px; }.pagination button { padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:white; }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.detail-item { padding:13px; border-radius:12px; background:#f4f3ed; }.detail-item span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; }.detail-item strong { display:block; margin-top:5px; overflow-wrap:anywhere; }
.timeline { display:grid; gap:10px; }.timeline-item { display:grid; grid-template-columns:120px 1fr auto; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }.timeline-item:last-child{border:0}.timeline-item time { color:var(--muted); font-size:11px; }
.toast { position:fixed; right:22px; bottom:22px; max-width:360px; padding:14px 17px; border-radius:11px; color:#fff; background:#173f34; box-shadow:var(--shadow); }
@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.app-cards{grid-template-columns:1fr}}
@media (max-width:760px){.auth-shell{grid-template-columns:1fr}.auth-brand{min-height:42vh;padding:40px 28px}.auth-brand h1{font-size:39px}.auth-card{padding:28px}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:20;left:-260px;width:244px;transition:left .2s}.sidebar.open{left:0}.workspace{padding:24px 16px 50px}.menu-btn{display:block;padding:8px;border:1px solid var(--line);border-radius:8px;background:white}.topbar{flex-wrap:wrap}.top-actions{width:100%}.top-actions label{flex:1}.kpi-grid{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr}.timeline-item{grid-template-columns:1fr}.app-metrics{grid-template-columns:repeat(3,1fr)}}
@media (max-width:440px){.kpi-grid{grid-template-columns:1fr}.auth-products{display:none}}