:root {
  --ink: #1d2421;
  --muted: #65706b;
  --line: #dfe4e1;
  --soft: #f4f6f5;
  --paper: #ffffff;
  --green: #176b52;
  --green-soft: #e6f1ed;
  --amber: #a16207;
  --blue: #315d87;
  --red: #a33b3b;
}

* { box-sizing: border-box; }
html { background: var(--soft); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
body { margin: 0; min-width: 320px; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; letter-spacing: 0; }

.topbar { align-items: center; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; height: 64px; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 10; }
.brand { align-items: center; color: var(--ink); display: flex; gap: 10px; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { align-items: center; background: var(--green); border-radius: 5px; color: white; display: inline-flex; flex: 0 0 34px; font-size: 18px; font-weight: 800; height: 34px; justify-content: center; }
.brand-mark.large { height: 42px; width: 42px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 1px; }
.topbar-actions { align-items: center; display: flex; gap: 14px; }
.environment { background: var(--green-soft); border-radius: 4px; color: var(--green); font-size: 12px; font-weight: 700; padding: 5px 8px; }
.user-name { color: var(--muted); font-size: 13px; }
.text-button { background: none; border: 0; color: var(--green); cursor: pointer; padding: 6px; }

.app-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.sidebar { background: #202724; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; }
.sidebar a { border-radius: 4px; color: #d8dfdc; font-size: 13px; padding: 9px 12px; }
.sidebar a:hover { background: #2b3531; text-decoration: none; }
.sidebar a[aria-current="page"] { background: #e8efec; color: #173d31; font-weight: 700; }
.nav-label { color: #89958f; font-size: 10px; font-weight: 800; margin: 18px 12px 6px; text-transform: uppercase; }
.main-content { min-width: 0; padding: 30px; }

.page-header { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 22px; }
.eyebrow { color: var(--green); font-size: 11px; font-weight: 800; margin: 0 0 6px; text-transform: uppercase; }
h1, h2 { letter-spacing: 0; margin: 0; }
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 18px; line-height: 1.3; }
.snapshot-note { color: var(--muted); font-size: 12px; margin: 0; }
.record-total { align-items: baseline; display: flex; gap: 6px; }
.record-total strong { font-size: 24px; }
.record-total span { color: var(--muted); font-size: 12px; }

.metric-grid { display: grid; gap: 1px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 28px; }
.metric { background: var(--paper); border: 1px solid var(--line); color: var(--ink); min-width: 0; padding: 16px; }
.metric:first-child { border-radius: 6px 0 0 6px; }
.metric:last-child { border-radius: 0 6px 6px 0; }
.metric:hover { border-color: #9eb5ab; position: relative; text-decoration: none; }
.metric span { color: var(--muted); display: block; font-size: 11px; margin-bottom: 8px; }
.metric strong { font-size: 24px; }
.section-block { margin-top: 30px; }
.section-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 12px; }
.section-heading > a { font-size: 13px; font-weight: 700; }
.quality-grid { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: repeat(4, 1fr); }
.quality-grid div { border-right: 1px solid var(--line); padding: 15px 18px; }
.quality-grid div:last-child { border-right: 0; }
.quality-grid span { color: var(--muted); display: block; font-size: 12px; }
.quality-grid strong { color: var(--red); display: block; font-size: 21px; margin-top: 5px; }

.filters { align-items: end; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; }
.filters label { display: grid; gap: 5px; min-width: 150px; }
.filters label > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.filters .search-field { flex: 1 1 240px; }
input, select { background: white; border: 1px solid #cbd3cf; border-radius: 4px; color: var(--ink); height: 36px; min-width: 0; padding: 0 10px; }
input:focus, select:focus { border-color: var(--green); outline: 2px solid #cce2da; }
.filter-actions { display: flex; gap: 8px; }
.primary-button, .secondary-button { align-items: center; border-radius: 4px; cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 700; height: 36px; justify-content: center; padding: 0 14px; }
.primary-button { background: var(--green); border: 1px solid var(--green); color: white; }
.secondary-button { background: white; border: 1px solid #bfc9c4; color: var(--ink); }
.primary-button:hover, .secondary-button:hover { text-decoration: none; }
.table-actions { align-items: center; color: var(--muted); display: flex; font-size: 12px; justify-content: space-between; min-height: 52px; }

.table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; }
table { border-collapse: collapse; font-size: 12px; min-width: 100%; table-layout: auto; }
th { background: #eef2f0; color: #4d5a54; font-size: 10px; height: 40px; padding: 0 12px; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { border-top: 1px solid #e8ecea; max-width: 260px; padding: 10px 12px; vertical-align: top; }
tbody tr:hover { background: #fafcfb; }
.sort-link { align-items: center; color: inherit; display: inline-flex; gap: 5px; }
.long-cell { line-height: 1.45; min-width: 220px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
.status-pill { background: #edf1ef; border-radius: 4px; color: #46534d; display: inline-block; font-size: 10px; font-weight: 700; max-width: 170px; overflow: hidden; padding: 4px 7px; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.empty-state { color: var(--muted); padding: 24px; text-align: center; }
.compact-table table { min-width: 760px; }
.run-list { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.run-list > div { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 120px minmax(160px, 1fr) 150px; padding: 11px 14px; }
.run-list > div:last-child { border-bottom: 0; }
.run-list > div > span:last-child { color: var(--muted); font-size: 12px; text-align: right; }
.pagination { align-items: center; display: flex; gap: 18px; justify-content: flex-end; padding: 18px 0 4px; }
.pagination span, .pagination a, .pagination strong { font-size: 13px; }
.pagination span { color: #9ca5a1; }

.auth-shell { align-items: center; background: #edf1ef; display: flex; min-height: calc(100vh - 64px); justify-content: center; padding: 30px 18px; }
.login-panel { background: white; border: 1px solid var(--line); border-radius: 6px; width: min(420px, 100%); }
.account-panel { background: white; border: 1px solid var(--line); border-radius: 6px; max-width: 560px; }
.account-panel p { margin: 0; padding: 24px; }
.account-panel .login-form > div { display: grid; gap: 6px; }
.account-panel .login-form ul { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 4px 0 8px; padding-left: 18px; }
.login-heading { border-bottom: 1px solid var(--line); padding: 28px; }
.login-heading .brand-mark { margin-bottom: 20px; }
.login-heading h1 { font-size: 24px; }
.login-form { display: grid; gap: 8px; padding: 28px; }
.login-form label { color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 6px; }
.login-form .primary-button { margin-top: 14px; width: 100%; }
.form-error { background: #fae8e8; color: var(--red); font-size: 12px; margin: 0; padding: 12px 28px; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .metric, .metric:first-child, .metric:last-child { border-radius: 6px; }
}

@media (max-width: 760px) {
  .topbar { height: 58px; padding: 0 14px; }
  .environment, .user-name { display: none; }
  .topbar-actions > .text-button { display: none; }
  .app-shell { display: block; min-height: calc(100vh - 58px); }
  .sidebar { flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px; position: sticky; top: 58px; z-index: 9; }
  .sidebar a { flex: 0 0 auto; padding: 8px 10px; white-space: nowrap; }
  .nav-label { display: none; }
  .main-content { padding: 20px 14px 30px; }
  .page-header { align-items: flex-start; gap: 16px; }
  h1 { font-size: 24px; }
  .snapshot-note { max-width: 130px; text-align: right; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-grid div:nth-child(2) { border-right: 0; }
  .quality-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .filters { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .filters .search-field, .filter-actions { grid-column: 1 / -1; }
  .filter-actions > * { flex: 1; }
  .run-list > div { grid-template-columns: 100px minmax(140px, 1fr); }
  .run-list > div > span:last-child { display: none; }
}

@media (max-width: 440px) {
  .brand small { display: none; }
  .metric-grid, .quality-grid, .filters { grid-template-columns: 1fr; }
  .quality-grid div { border-bottom: 1px solid var(--line); border-right: 0; }
  .quality-grid div:last-child { border-bottom: 0; }
  .page-header { display: block; }
  .record-total { margin-top: 12px; }
  .snapshot-note { margin-top: 8px; max-width: none; text-align: left; }
}