:root {
    color-scheme: dark;
    --bg: #050706;
    --panel: #0a100c;
    --line: #1e3b27;
    --text: #d6f5dc;
    --muted: #7fa989;
    --green: #58f28a;
    --shadow: rgba(55, 255, 119, .12);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
    position: relative;
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: radial-gradient(circle at 50% 0%, #102418 0, var(--bg) 46rem);
}

.matrix-rain {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: .44;
    mix-blend-mode: screen;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: .06;
    background: repeating-linear-gradient(0deg, transparent 0 3px, #8affad 4px);
}

.shell, .topbar, .footer {
    position: relative;
    z-index: 1;
}

.shell {
    width: min(100% - 2rem, 58rem);
    margin: 0 auto;
    padding: 3rem 0;
}

.masthead { border-left: 2px solid var(--green); padding-left: 1rem; }
.eyebrow, .prompt, .status { color: var(--green); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: .35rem 0; font-size: clamp(2.1rem, 9vw, 4.5rem); letter-spacing: -.08em; }
h2 { margin-top: 0; font-size: clamp(1.25rem, 4vw, 2rem); line-height: 1.25; }
p { line-height: 1.7; }
.status { display: flex; align-items: center; gap: .55rem; margin-bottom: 0; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 1rem var(--green); }
.panel { margin-top: 2rem; padding: clamp(1.25rem, 5vw, 2.5rem); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(19, 42, 26, .8), rgba(5, 7, 6, .94)); box-shadow: 0 1rem 4rem var(--shadow); }
.prompt { margin-top: 0; color: var(--muted); letter-spacing: normal; text-transform: none; }
.readout { display: grid; gap: .75rem; margin: 2rem 0 0; }
.readout div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
dt { color: var(--muted); }
dd { margin: 0; color: var(--green); text-align: right; }
.topbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; width: min(100% - 2rem, 58rem); margin: 0 auto; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.brand { color: var(--green); font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.brand span { color: var(--muted); }
.operator { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; }
.operator a, .link-button { color: var(--green); text-decoration: none; }
.inline { display: inline; }
.link-button { padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
.auth-card { width: min(100%, 30rem); margin: 8vh auto 0; padding: clamp(1.25rem, 5vw, 2.5rem); border: 1px solid var(--line); background: var(--panel); box-shadow: 0 1rem 4rem var(--shadow); }
.auth-card h1 { font-size: clamp(2rem, 9vw, 3.2rem); }
.stack, .form-grid { display: grid; gap: 1rem; }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: end; }
.field { display: grid; gap: .4rem; color: var(--muted); font-size: .82rem; }
input, select, textarea { width: 100%; padding: .8rem .75rem; color: var(--text); border: 1px solid var(--line); border-radius: .2rem; background: #071009; font: inherit; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.input-toggle { position: relative; display: block; }
.input-toggle input { padding-right: 3rem; }
.password-toggle { position: absolute; top: 50%; right: .45rem; display: grid; width: 2rem; height: 2rem; padding: .35rem; place-items: center; color: var(--muted); border: 0; background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus-visible, .password-toggle.is-visible { color: var(--green); }
.password-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.password-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.button { width: fit-content; padding: .75rem 1rem; color: #031007; border: 1px solid var(--green); border-radius: .2rem; background: var(--green); font: inherit; font-weight: 700; cursor: pointer; }
.button.small { padding: .35rem .6rem; font-size: .75rem; }
.muted { color: var(--muted); }
.flash { margin: 1rem auto 0; padding: .8rem 1rem; border: 1px solid var(--line); background: #0a160d; }
.flash-error { color: #ff9b9b; border-color: #713838; }
.flash-warn { color: #ffe599; border-color: #6b5a22; }
.flash-success { color: var(--green); }
.badge { display: inline-block; padding: .18rem .42rem; border: 1px solid var(--line); color: var(--muted); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.badge-completed, .badge-approved, .badge-open, .badge-in-scope { color: var(--green); border-color: #2e8548; }
.badge-pending, .badge-draft, .badge-awaiting-approval, .badge-not-tested, .badge-needs-review { color: #ffe599; border-color: #6b5a22; }
.badge-blocked, .badge-rejected, .badge-closed, .badge-resolved { color: #ffb0b0; border-color: #713838; }
.severity-critical, .severity-high { color: #ff8d8d; border-color: #8e3838; }
.severity-medium { color: #ffe599; border-color: #6b5a22; }
.severity-low, .severity-informational { color: var(--green); border-color: #2e8548; }
.button-muted { color: var(--text); background: #0c1a10; border-color: var(--line); }
.notice { padding: .9rem 1rem; border-left: 2px solid var(--green); background: rgba(17, 46, 25, .55); }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 1.5rem 0 0; }
.metric { padding: .85rem; border: 1px solid var(--line); background: rgba(4, 11, 6, .75); }
.metric strong { display: block; margin-top: .3rem; color: var(--green); font-size: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.button-link { display: inline-block; text-decoration: none; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.card { display: grid; gap: .5rem; padding: 1rem; color: var(--text); border: 1px solid var(--line); background: #071009; text-decoration: none; }
.card strong { color: var(--green); }
.card span { color: var(--muted); font-size: .85rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem .5rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 400; }
.inline-form { display: flex; align-items: center; gap: .75rem; }
.check { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.check input { width: auto; }
.footer { width: min(100% - 2rem, 58rem); margin: 3rem auto 1rem; color: var(--muted); font-size: .7rem; text-align: center; }

@media (max-width: 30rem) {
    .shell { padding-top: 2rem; }
    .readout div { display: block; }
    dd { margin-top: .25rem; text-align: left; }
}