:root {
  --navy: #132a42;
  --blue: #1b4e7a;
  --blue-bright: #3378b8;
  --green: #69ab45;
  --ink: #1d3349;
  --muted: #687a8b;
  --canvas: #f5f7f9;
  --card: #ffffff;
  --line: #dce3e8;
  --shadow: 0 18px 55px rgba(18, 42, 66, .09);
  --radius: 12px;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--blue); }
button, input, textarea, select { font: inherit; }
main { width: min(1440px, 100%); margin: 0 auto; flex: 1; }

.site-header { height: 82px; padding: 0 clamp(24px, 5vw, 74px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); }
.brand { display: grid; grid-template-columns: 34px auto; grid-template-rows: 27px 15px; column-gap: 10px; text-decoration: none; color: var(--navy); font-size: 25px; line-height: 1; font-weight: 760; letter-spacing: -.04em; }
.brand > span span { color: var(--blue-bright); }
.brand small { grid-column: 2; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }
.brand-mark { width: 34px; height: 34px; grid-row: 1 / 3; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.main-nav a, .link-button { color: var(--ink); text-decoration: none; background: transparent; border: 0; cursor: pointer; padding: 8px 0; }
.main-nav a:hover, .link-button:hover { color: var(--blue-bright); }
.main-nav form { margin: 0; }

.circuit-bg { position: relative; overflow: hidden; }
.circuit-bg::after { content: ""; position: absolute; inset: -30% -8% -30% 45%; pointer-events: none; opacity: .32; background-image: linear-gradient(90deg, transparent 49.7%, #c8d5df 50%, transparent 50.3%), linear-gradient(35deg, transparent 49.7%, #c8d5df 50%, transparent 50.3%); background-size: 150px 190px, 210px 210px; mask-image: linear-gradient(90deg, transparent, black); }
.page-header { margin: 34px clamp(22px, 5vw, 72px) 0; min-height: 220px; background: #fbfcfd; border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; padding: clamp(32px, 5vw, 64px); box-shadow: var(--shadow); }
.page-header > * { position: relative; z-index: 1; }
.page-header.compact { min-height: 170px; }
h1 { color: var(--navy); margin: .25rem 0 .65rem; font-size: clamp(34px, 5vw, 60px); letter-spacing: -.045em; line-height: 1.03; }
h2 { color: var(--navy); letter-spacing: -.025em; }
.page-header p:not(.eyebrow) { color: var(--muted); max-width: 680px; font-size: 17px; }
.eyebrow { color: var(--blue); letter-spacing: .2em; font-size: 11px; font-weight: 750; margin: 0 0 10px; }
.accent-line { width: 62px; height: 3px; margin: 26px 0; background: linear-gradient(90deg, var(--blue-bright) 72%, var(--green) 72%); }

.button { border: 1px solid transparent; border-radius: 7px; padding: 13px 20px; text-decoration: none; cursor: pointer; font-weight: 650; display: inline-flex; justify-content: center; align-items: center; transition: transform .15s ease, box-shadow .15s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(19,42,66,.16); }
.button-primary { color: white; background: var(--blue); }
.button-secondary { color: var(--blue); background: white; border-color: var(--blue); }
.button-wide { width: 100%; }

.metric-grid { margin: 28px clamp(22px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.metric-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 23px 26px; display: flex; justify-content: space-between; align-items: center; }
.metric-card span { color: var(--muted); font-size: 13px; }
.metric-card strong { font-size: 25px; color: var(--navy); }
.status-text.healthy { color: #3d892b; } .status-text.warning { color: #b77309; } .status-text.critical { color: #b93232; }
.content-section { margin: 54px clamp(22px, 5vw, 72px) 80px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 30px; }
.report-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: white; }
.report-row { display: grid; grid-template-columns: 14px 1fr auto 24px; gap: 18px; align-items: center; padding: 19px 22px; text-decoration: none; border-bottom: 1px solid var(--line); color: var(--ink); }
.report-row:last-child { border-bottom: 0; }
.report-row:hover { background: #f9fbfc; }
.report-main { display: flex; flex-direction: column; gap: 4px; }
.report-main small { color: var(--muted); }
.report-arrow { font-size: 20px; color: var(--blue-bright); }
.severity-dot { width: 9px; height: 9px; border-radius: 50%; background: #8b98a4; }
.severity-dot.healthy { background: var(--green); } .severity-dot.warning { background: #e4a52f; } .severity-dot.critical { background: #d84747; } .severity-dot.info { background: var(--blue-bright); }
.badge, .severity-pill { display: inline-flex; border-radius: 999px; padding: 6px 11px; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; background: #e9eef2; color: var(--muted); }
.badge.completed, .severity-pill.healthy { background: #eaf5e6; color: #397728; }
.badge.failed, .severity-pill.critical { background: #fae8e8; color: #a72626; }
.badge.running, .severity-pill.info { background: #e7f0f8; color: var(--blue); }
.severity-pill.warning { background: #fff2d8; color: #94600c; }
.empty-state { text-align: center; border: 1px dashed #bdc9d2; border-radius: var(--radius); padding: 60px; background: rgba(255,255,255,.65); }

.report-hero { padding: 48px clamp(22px, 5vw, 72px) 30px; border-bottom: 1px solid var(--line); }
.report-hero h1 { font-size: clamp(32px, 4vw, 48px); }
.report-hero > p, .back-link { color: var(--muted); font-size: 13px; }
.back-link { text-decoration: none; }
.report-title-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.report-layout { padding: 38px clamp(22px, 5vw, 72px) 80px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 30px; }
.markdown-report, .evidence-panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.markdown-report { padding: clamp(28px, 5vw, 62px); line-height: 1.68; overflow: hidden; }
.markdown-report h1 { font-size: 37px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.markdown-report h2 { margin-top: 38px; font-size: 25px; }
.markdown-report table { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.markdown-report th { color: var(--navy); background: #f0f4f7; text-align: left; }
.markdown-report th, .markdown-report td { border: 1px solid var(--line); padding: 10px 12px; vertical-align: top; }
.markdown-report code { background: #edf2f5; padding: 2px 5px; border-radius: 4px; font-size: .88em; }
.markdown-report pre, .evidence-panel pre { background: var(--navy); color: #eaf1f6; border-radius: 7px; padding: 16px; overflow: auto; font-size: 12px; }
.evidence-panel { padding: 24px; position: sticky; top: 24px; }
.evidence-panel h2 { margin-top: 0; }
.evidence-panel p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.evidence-panel summary { cursor: pointer; color: var(--blue); font-weight: 650; }
.evidence-panel pre { max-height: 430px; white-space: pre-wrap; word-break: break-word; }
.evidence-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 13px; margin-top: 22px; }
.evidence-panel dt { color: var(--muted); }

.settings-form { margin: 32px clamp(22px, 5vw, 72px) 100px; }
.settings-form fieldset { border: 1px solid var(--line); background: white; border-radius: var(--radius); margin: 0 0 24px; padding: 28px; }
.settings-form legend { color: var(--navy); font-size: 19px; font-weight: 730; padding: 0 10px; }
.settings-form legend span { color: var(--green); font-size: 11px; letter-spacing: .14em; margin-right: 8px; }
.form-grid { display: grid; gap: 20px; }
.form-grid.two { grid-template-columns: repeat(2, 1fr); } .form-grid.three { grid-template-columns: repeat(3, 1fr); }
.span-two { grid-column: span 2; } .span-three { grid-column: span 3; }
.form-stack { display: grid; gap: 22px; }
.settings-form label, .stacked-form label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink); }
input, textarea, select { width: 100%; border: 1px solid #c8d2da; border-radius: 6px; padding: 11px 12px; background: #fff; color: var(--ink); }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(51,120,184,.2); border-color: var(--blue-bright); }
textarea { resize: vertical; }
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; }
.settings-form small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.source-note { color: var(--muted); font-size: 12px; margin: -8px 0 0; }
.check-label { flex-direction: row !important; align-items: center; align-self: center; }
.check-label input { width: 18px; height: 18px; accent-color: var(--blue); }
.errorlist { color: #b93232; margin: 0; padding-left: 18px; }
.sticky-actions { position: sticky; bottom: 16px; background: rgba(19,42,66,.96); color: #d9e4ec; border-radius: 10px; padding: 14px 16px 14px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; box-shadow: 0 14px 40px rgba(19,42,66,.25); font-size: 12px; }

.login-shell { min-height: calc(100vh - 150px); display: grid; grid-template-columns: 1fr 470px; align-items: center; gap: clamp(50px, 8vw, 130px); padding: 70px clamp(24px, 8vw, 120px); }
.login-shell::after { inset: -5% -5% -5% 25%; }
.login-copy, .login-card { position: relative; z-index: 1; }
.login-copy { max-width: 520px; margin-left: auto; }
.login-copy h1 { font-size: clamp(45px, 6vw, 72px); }
.login-copy > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 400px; }
.login-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); }
.login-card h2 { font-size: 31px; margin: 4px 0 25px; }
.stacked-form { display: grid; gap: 15px; }
.separator { display: flex; align-items: center; color: var(--muted); font-size: 11px; margin: 23px 0; gap: 12px; }
.separator::before, .separator::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.messages { position: fixed; right: 22px; top: 94px; z-index: 20; }
.message { border-radius: 7px; background: var(--navy); color: white; padding: 13px 17px; box-shadow: var(--shadow); }
footer { padding: 22px clamp(24px, 5vw, 74px); display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
  .page-header, .report-title-row { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr; }
  .report-layout { grid-template-columns: 1fr; }
  .evidence-panel { position: static; }
  .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
  .span-two, .span-three { grid-column: span 1; }
  .login-shell { grid-template-columns: 1fr; padding-top: 45px; }
  .login-copy { margin: 0; }
}

@media (max-width: 620px) {
  .site-header { height: auto; padding: 18px 22px; align-items: flex-start; }
  .main-nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
  .brand small { display: none; }
  .report-row { grid-template-columns: 11px 1fr 20px; }
  .report-row .badge { display: none; }
  .sticky-actions { align-items: stretch; flex-direction: column; }
}