@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,600&display=swap");

:root { --bg:#08130f; --panel:#101d18; --line:#294038; --text:#edf0e9; --muted:#8fa199; --mint:#67d8af; --blue:#72b8da; --gold:#e9bf69; --red:#e47f75; }
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: Manrope, sans-serif; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 10% 0%, #123529 0, transparent 32rem), var(--bg); }
button,input,select,textarea { font: inherit; }
button { color: inherit; }
header { height: 88px; padding: 0 3vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(7,18,14,.88); }
.brand { display:flex; align-items:center; gap:16px; }
.brand > span { display:grid; place-items:center; width:55px; height:55px; border:1px solid var(--mint); color:var(--mint); transform:rotate(-2deg); font:500 18px "DM Mono"; }
.brand p,.kicker { margin:0 0 4px; color:var(--muted); font:500 9px "DM Mono"; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-family:"Source Serif 4",serif; }
h1 { font-size:25px; } h2 { max-width:760px; font-size:clamp(40px,5vw,76px); line-height:.98; } h3 { font-size:22px; }
.runtime { padding:8px 10px; border:1px solid rgba(103,216,175,.4); color:var(--mint); font:10px "DM Mono"; }
main { width:min(1780px,95vw); margin:0 auto; }
.hero { min-height:290px; display:flex; align-items:end; justify-content:space-between; gap:36px; padding:55px 0 38px; }
.hero > p { max-width:460px; margin:0 0 8px; color:var(--muted); font-size:14px; line-height:1.7; }
.grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(500px,1.45fr) minmax(300px,.85fr); gap:14px; align-items:start; }
.panel { border:1px solid var(--line); background:rgba(15,28,23,.94); }
.panel-title { min-height:82px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.panel-title > span { padding:5px 7px; border:1px solid var(--line); color:var(--muted); font:8px "DM Mono"; text-transform:uppercase; }
.source-panel textarea { display:block; width:calc(100% - 36px); height:340px; margin:18px; padding:16px; resize:vertical; border:1px solid var(--line); color:#b9c9c2; background:#09140f; font:9px/1.6 "DM Mono"; }
.file-picker { display:flex; flex-direction:column; margin:18px; padding:18px; border:1px dashed #456158; cursor:pointer; }
.file-picker strong { font-size:12px; }.file-picker small { margin-top:5px; color:var(--muted); font-size:9px; }.file-picker input { width:1px; height:1px; opacity:0; }
.inline-notice { margin:0 18px; padding:10px 12px; border:1px solid #315d4f; color:#b9d8cd; background:#10271f; font-size:9px; line-height:1.5; }
.inline-notice.error { border-color:rgba(228,127,117,.55); color:#efaaa3; background:rgba(228,127,117,.06); }
.actions { display:flex; gap:8px; padding:0 18px 18px; }
button { min-height:40px; padding:0 14px; border:1px solid var(--mint); color:#07150f; background:var(--mint); cursor:pointer; font-size:10px; font-weight:700; }
button.quiet { color:var(--muted); background:transparent; border-color:var(--line); } button.check { color:var(--blue); background:transparent; border-color:rgba(114,184,218,.5); }
button:disabled { opacity:.5; cursor:wait; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:22px; }
.fields label { display:flex; flex-direction:column; gap:7px; }.fields label:first-child,.fields label:nth-child(2) { grid-column:1/-1; }
.fields span { color:var(--muted); font:9px "DM Mono"; text-transform:uppercase; letter-spacing:.08em; }
.fields small { color:#6f837a; font-size:8px; line-height:1.45; }
input,select { width:100%; min-height:45px; padding:0 12px; border:1px solid #31473f; color:var(--text); background:#0b1712; }
.bottom-actions { padding:4px 22px 22px; }.bottom-actions button { flex:1; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); }.metrics div { padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.metrics div:last-child { border-right:0; }
.metrics strong,.metrics span { display:block; }.metrics strong { font:22px "DM Mono"; }.metrics span { margin-top:5px; color:var(--muted); font:8px "DM Mono"; text-transform:uppercase; }
.audit { padding:18px; }.audit > strong,.validation > strong { color:var(--mint); font:9px "DM Mono"; }
.issue { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }.issue b { font:9px "DM Mono"; }.issue p { margin:5px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }.issue.error b { color:var(--red); }.issue.warning b { color:var(--gold); }
.validation { margin:0 18px 18px; padding:16px; border:1px solid var(--line); }.validation p { color:var(--muted); font-size:10px; line-height:1.6; }.validation small { display:block; margin-top:8px; color:#b7c8c1; font:8px "DM Mono"; }.validation.pass { border-color:rgba(103,216,175,.5); }.validation.fail { border-color:rgba(228,127,117,.5); }.validation.fail > strong { color:var(--red); }.validation.not_evaluated > strong { color:var(--gold); }
.empty { padding:20px; color:var(--muted); font-size:11px; }
.notice { display:flex; align-items:center; gap:10px; min-height:46px; margin:14px 0; padding:0 16px; border:1px solid #315d4f; color:#bbd8cd; background:#10271f; font-size:10px; }.notice span { width:7px; height:7px; border-radius:50%; background:var(--mint); }
footer { width:min(1780px,95vw); margin:0 auto; padding:22px 0 38px; display:flex; justify-content:space-between; color:#617169; font:8px "DM Mono"; text-transform:uppercase; }
@media(max-width:1100px){.grid{grid-template-columns:1fr 1.6fr}.results-panel{grid-column:1/-1}.hero{align-items:start;flex-direction:column;min-height:0}.hero>p{max-width:700px}}
@media(max-width:720px){header{height:auto;padding:18px}.runtime{display:none}.grid{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.fields label:first-child,.fields label:nth-child(2){grid-column:auto}.hero{padding-top:40px}.actions,.bottom-actions{flex-direction:column}footer{gap:8px;flex-direction:column}}