:root {
    --bg: #131313;
    --bg-deep: #0b0b0b;
    --panel: #11110f;
    --panel2: #1b1b18;
    --border: rgba(241, 242, 233, .14);
    --border-bright: rgba(199, 163, 79, .38);
    --violet: #c7a34f;
    --violet-bright: #c7a34f;
    --violet-deep: #98752d;
    --magenta: #8a70ff;
    --allow: #68e6a2;
    --allow-bg: rgba(104, 230, 162, .07);
    --deny: #ff6b63;
    --deny-bg: rgba(255, 107, 99, .07);
    --approval: #ffc45a;
    --approval-bg: rgba(255, 196, 90, .07);
    --text: #f4f5ed;
    --dim: #a7ab9c;
    --muted: #777c70;
}

html { scroll-behavior: smooth; }
body { font-family: "Manrope", Inter, system-ui, sans-serif; background: var(--bg); }
::selection { background: var(--violet); color: var(--bg); }
button, input { font-family: inherit; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.ambient {
    background:
        radial-gradient(ellipse 50% 38% at 86% 4%, rgba(138, 112, 255, .13), transparent 68%),
        radial-gradient(ellipse 38% 28% at 0% 82%, rgba(199, 163, 79, .065), transparent 70%);
}
.grid-overlay {
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 72px 72px;
}

nav {
    min-height: 72px;
    padding: 0 34px;
    border-color: var(--border);
    background: rgba(19, 19, 19, .94);
}
.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}
.nav-emblem { width: 34px; height: 36px; flex: none; object-fit: cover; }
.nav-brand span { color: var(--text); }
.nav-link, .nav-badge { font-family: "DM Mono", monospace; font-size: 10px; }
.nav-link:hover { color: var(--violet); }
.nav-badge { padding: 7px 11px; border-radius: 0; background: rgba(199,163,79,.06); border-color: rgba(199,163,79,.32); color: var(--violet); }

.hero {
    max-width: 1168px;
    padding: 82px 24px 54px;
    text-align: left;
}
.hero-label {
    margin-bottom: 25px;
    color: var(--violet);
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: .12em;
}
.hero-label::before { content: "●"; margin-right: 9px; font-size: 8px; }
.hero h1 {
    max-width: 880px;
    margin-bottom: 20px;
    color: var(--text);
    font-family: "Manrope", sans-serif;
    font-size: clamp(44px, 6.7vw, 78px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.065em;
}
.hero h1 .glow { background: none; color: var(--violet); }
.hero > p:not(.hero-label):not(.hero-note) {
    max-width: 670px;
    margin: 0;
    color: #b9bdb1;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
}
.hero-note {
    max-width: 760px;
    margin-top: 18px;
    color: var(--muted);
    font-family: "DM Mono", monospace;
    font-size: 10px;
}
.plant-state {
    width: 100%;
    margin-top: 38px;
    padding: 15px 18px;
    justify-content: flex-start;
    gap: 16px 30px;
    border-radius: 0;
    background: var(--panel);
    font-family: "DM Mono", monospace;
    font-size: 10px;
}
.plant-state span:first-child { color: var(--text); }
.plant-state span:first-child::before { content: "SIM / "; color: var(--approval); }
.plant-state b { color: var(--violet); }

.main { max-width: 1168px; padding: 0 24px 90px; }
.input-section {
    margin-bottom: 20px;
    border-radius: 0;
    border-color: var(--border-bright);
    background: var(--panel);
    box-shadow: 16px 16px 0 -15px #8a70ff, 0 30px 80px rgba(0,0,0,.3);
}
.input-header { padding: 14px 18px; background: var(--panel2); }
.input-label, .sample-btn, .input-field, .validate-btn, .card-label, .pipe-count,
.step-name, .decision-badge, .decision-field-label, .decision-field-value.mono,
.risk-score, .flag-badge, .decision-summary h4, .audit-title, .audit-row {
    font-family: "DM Mono", monospace;
}
.input-label { color: var(--text); font-size: 10px; }
.sample-btn {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 0;
    border-color: var(--border);
    color: var(--dim);
    font-size: 9px;
}
.sample-btn:hover { background: rgba(199,163,79,.06); border-color: var(--violet); color: var(--violet); }
.input-row { min-width: 0; }
.input-field {
    min-width: 0;
    padding: 20px;
    background: var(--bg-deep);
    color: var(--text);
    font-size: 14px;
    caret-color: var(--violet);
}
.input-field::placeholder { color: #686d62; }
.input-field:focus { box-shadow: inset 0 -2px 0 var(--violet); }
.validate-btn {
    min-width: 150px;
    padding: 18px 27px;
    background: var(--violet);
    color: var(--bg);
    font-size: 11px;
}
.validate-btn:hover { background: #dfc171; box-shadow: none; }
.validate-btn:disabled { background: #272b24; color: #777c70; }

.result-grid { grid-template-columns: minmax(0,1fr) minmax(340px,410px); gap: 20px; }
.card { border-radius: 0; background: rgba(15,17,14,.92); }
.card-header { min-height: 52px; padding: 15px 18px; background: var(--panel2); }
.card-label { color: var(--text); font-size: 10px; }
.card-label.accent { color: var(--violet); }
.pipe-count { color: var(--muted); font-size: 9px; }
.pipeline-steps { padding: 0; }
.step { min-height: 78px; padding: 14px 18px; border-color: var(--border); opacity: .32; }
.step.processing { background: rgba(199,163,79,.05); }
.step-indicator {
    width: 31px;
    height: 31px;
    border-radius: 0;
    background: var(--panel2);
    font-family: "DM Mono", monospace;
}
.step.processing .step-indicator { border-color: var(--violet); color: var(--violet); }
.step-name { color: var(--text); font-size: 11px; }
.step-detail { color: var(--dim); font-size: 11.5px; }
.decision-body { padding: 24px; }
.decision-badge { border-radius: 0; font-size: 13px; }
.decision-field-label, .audit-title { color: var(--muted); font-size: 9px; }
.decision-field-value { color: var(--text); }
.decision-field-value.mono { color: var(--text); }
.risk-bar { height: 7px; border-radius: 0; background: var(--panel2); }
.risk-bar-fill { border-radius: 0; }
.flag-badge { border-radius: 0; }
.decision-summary, .audit-section { border-radius: 0; }
.decision-summary p { color: var(--dim); font-size: 12px; }
.audit-section { background: var(--bg-deep); }
.empty-state { color: var(--muted); }
.empty-icon { border-radius: 0; border-color: var(--border-bright); color: var(--violet); background: rgba(199,163,79,.05); }

footer { max-width: 1168px; padding: 28px 24px; border-color: var(--border); }
footer span { color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; }
footer span b { color: var(--violet); }
.legal-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.legal-links a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    color: var(--dim);
    font: 400 10px/1.2 "DM Mono", monospace;
    text-decoration: underline;
    text-decoration-color: rgba(167, 171, 156, .45);
    text-underline-offset: 4px;
}
.legal-links a:hover { color: var(--violet); text-decoration-color: currentColor; }

@media (max-width: 860px) {
    .result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    nav { min-height: 64px; padding: 0 16px; }
    .nav-badge { display: none; }
    .nav-link { font-size: 8px; }
    .hero { padding: 58px 20px 40px; }
    .hero h1 { font-size: clamp(42px, 13vw, 60px); }
    .hero > p:not(.hero-label):not(.hero-note) { font-size: 15px; }
    .plant-state { gap: 11px; display: grid; }
    .main { padding: 0 12px 55px; }
    .input-header { align-items: flex-start; }
    .sample-btns { display: grid; grid-template-columns: 1fr 1fr; }
    .sample-btn { min-height: 40px; }
    .input-row { flex-direction: column; }
    .input-field { min-height: 58px; font-size: 12px; }
    .validate-btn { min-height: 54px; width: 100%; }
    .test-row { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}