:root {
  color-scheme: light;
  --ink: #111a20;
  --muted: #64717a;
  --line: #d9e0e4;
  --soft: #f3f6f7;
  --panel: #ffffff;
  --accent: #ff4f12;
  --accent-dark: #cf3500;
  --healthy: #18794e;
  --warning: #a15c00;
  --critical: #b42318;
  --sidebar: #121c22;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--soft); color: var(--ink); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, select, input, textarea { min-height: 42px; }
button { cursor: pointer; }

.eyebrow { margin: 0 0 5px; color: var(--accent-dark); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: #eef2f3; }
.login-shell { width: min(100%, 440px); }
.login-brand { margin-bottom: 24px; }
.login-brand img { display: block; width: 100%; height: 150px; object-fit: contain; }
.login-panel { padding: 30px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.login-panel h1 { margin: 0 0 8px; font-size: 1.8rem; }
.login-hint { margin: 0 0 24px; color: var(--muted); font-size: .92rem; }
.login-error { margin: -8px 0 18px; border-left: 3px solid #b53a12; background: #fff1ec; padding: 10px 12px; color: #6e2410; font-size: .9rem; }
.login-panel form, .action-form { display: grid; gap: 10px; }
label { color: #34434c; font-size: .84rem; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #adbac2; border-radius: 4px; background: #fff; padding: 9px 11px; color: var(--ink); }
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid rgba(255, 79, 18, .24); outline-offset: 1px; border-color: var(--accent); }
.login-panel button, .action-form button, .section-heading button, .section-block > button, .filters button { border: 0; border-radius: 4px; background: var(--accent); color: #fff; padding: 10px 16px; font-weight: 750; }
.login-panel button:hover, .action-form button:hover, .section-heading button:hover, .section-block > button:hover, .filters button:hover { background: var(--accent-dark); }
.public-link { display: inline-block; margin-top: 18px; color: #33444d; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 232px; display: flex; flex-direction: column; background: var(--sidebar); color: #e8edf0; }
.sidebar-brand { min-height: 92px; padding: 10px 14px; border-bottom: 3px solid var(--accent); background: #fff; }
.sidebar-brand img { display: block; width: 100%; height: 68px; object-fit: contain; }
.sidebar nav { display: grid; gap: 2px; padding: 14px 10px; overflow-y: auto; }
.nav-item { min-height: 38px; border: 0; border-left: 3px solid transparent; border-radius: 2px; padding: 8px 11px; background: transparent; color: #bac5ca; text-align: left; font-size: .88rem; }
.nav-item:hover { background: #1c2930; color: #fff; }
.nav-item.active { border-left-color: var(--accent); background: #243139; color: #fff; font-weight: 750; }
.sidebar-footer { margin-top: auto; display: grid; gap: 8px; padding: 16px; border-top: 1px solid #2a383f; }
.sidebar-footer a, .sidebar-footer button { color: #dbe2e5; font-size: .83rem; }
.sidebar-footer button { border: 1px solid #46565f; border-radius: 4px; background: transparent; }

.mobile-header { display: none; }
.mobile-brand { min-width: 0; display: flex; align-items: center; gap: 8px; }
.mobile-brand img { width: 34px; height: 34px; object-fit: cover; }
.mobile-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-main { min-height: 100vh; margin-left: 232px; padding: 26px clamp(20px, 3vw, 44px) 60px; }
.page-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 auto 22px; max-width: 1260px; }
.page-toolbar h1 { margin: 0; font-size: 1.65rem; }
.toolbar-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font-size: 1.15rem; }
.view { display: none; max-width: 1260px; margin: auto; }
.view.active { display: grid; gap: 18px; }
.section-block { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid #27343b; padding: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.section-heading h2, .action-form h2 { margin: 0; font-size: 1.05rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric { min-height: 112px; padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: #fff; }
.metric span { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.metric strong { display: block; margin-top: 15px; font-size: 1.28rem; overflow-wrap: anywhere; }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.status-item, .data-row { min-width: 0; border-bottom: 1px solid var(--line); padding: 12px 2px; }
.status-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-item span:first-child { font-size: .86rem; }
.data-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: center; gap: 12px; }
.data-row strong { font-size: .88rem; overflow-wrap: anywhere; }
.data-row span { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.data-row button { min-height: 34px; border: 1px solid #9aa8b0; border-radius: 4px; background: #fff; padding: 5px 10px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.badge { display: inline-flex; align-items: center; min-height: 26px; border-radius: 3px; background: #e8edef; color: #384950; padding: 4px 8px; font-size: .73rem; font-weight: 800; text-transform: uppercase; }
.status-healthy, .badge[data-status="verified"], .badge[data-status="completed"] { background: #dff3e9; color: var(--healthy); }
.status-warning, .badge[data-status="warning"], .badge[data-status="acknowledged"] { background: #fff0d6; color: var(--warning); }
.status-critical, .badge[data-status="critical"], .badge[data-status="blocker"], .badge[data-status="failed"], .badge[data-status="open"] { background: #fde5e2; color: var(--critical); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.facts div { min-width: 0; border-bottom: 1px solid var(--line); padding: 11px 0; }
.facts dt { color: var(--muted); font-size: .75rem; }
.facts dd { margin: 4px 0 0; font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.check-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0; font-size: .86rem; }
.action-form { max-width: 720px; padding: 20px; background: #fff; border: 1px solid var(--line); }
.action-form h2 { margin-bottom: 6px; }
.check-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0; }
.check-row label { display: flex; align-items: center; gap: 6px; }
.check-row input { width: 18px; min-height: 18px; }
.danger-command { justify-self: start; min-height: 42px; border: 1px solid var(--critical); border-radius: 4px; background: #fff; color: var(--critical); padding: 9px 15px; font-weight: 750; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters select { width: auto; min-width: 130px; }
.user-filters input { width: min(100%, 280px); }
.confirm-row { display: flex; align-items: center; gap: 9px; margin: 5px 0; }
.confirm-row input { width: 18px; min-height: 18px; }
.management-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.compact-form { max-width: none; padding: 16px; background: var(--soft); }
.section-block h3 { margin: 22px 0 8px; font-size: .95rem; }
.notice { max-width: 1260px; margin: 0 auto 18px; border-left: 4px solid var(--accent); background: #fff; padding: 12px 15px; font-size: .86rem; }
.hidden { display: none !important; }
.empty { color: var(--muted); padding: 20px 0; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #93a0a7; }

@media (max-width: 980px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-grid, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-row { grid-template-columns: minmax(130px, 1fr) minmax(90px, .5fr) minmax(140px, 1fr); }
  .data-row > :nth-child(4) { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  body { overflow-x: hidden; }
  .mobile-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-height: 60px; padding: 8px 14px; background: var(--sidebar); color: #fff; }
  .sidebar { transform: translateX(-100%); width: min(82vw, 280px); transition: transform .18s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: 12px 0 32px rgba(0,0,0,.2); }
  .admin-main { margin-left: 0; padding: 18px 14px 50px; }
  .page-toolbar { align-items: flex-start; }
  .toolbar-status span { display: none; }
  .metric-grid, .status-grid, .facts, .checklist { grid-template-columns: 1fr; }
  .management-actions { grid-template-columns: 1fr; }
  .filters > * { width: 100%; }
  .filters select, .user-filters input { width: 100%; }
  .section-block, .action-form { padding: 16px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .data-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; }
  .data-row > * { grid-column: auto; }
  .data-row > :nth-child(3), .data-row > :nth-child(4) { grid-column: 1 / -1; }
  .acceptance-list .data-row > :nth-child(5), .acceptance-list .data-row > :nth-child(6) { grid-column: 1 / -1; }
  .login-page { padding: 14px; }
  .login-panel { padding: 22px 18px; }
  .login-brand img { height: 118px; }
}