:root { color-scheme:dark; --bg:#0d100f; --panel:#151917; --panel2:#1b201d; --ink:#f1f4f1; --muted:#9aa59f; --line:#343c38; --green:#aeea45; --cyan:#3bc6c0; --red:#ef6658; --yellow:#edbb3a; --blue:#5f8cff; }
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:hidden; background:var(--bg); }
body { max-width:100%; overflow-x:hidden; margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 Arial, Helvetica, sans-serif; }
button,textarea { font:inherit; }
a { color:inherit; text-underline-offset:4px; }
.app-header { min-height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:12px 24px; border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:10; }
.brand { justify-self:start; display:flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:4px; background:var(--green); color:#10140f; font-size:11px; }
.header-status { display:flex; align-items:center; gap:8px; color:var(--muted); font:12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.status-light { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(174,234,69,.12); }
nav { justify-self:end; display:flex; gap:20px; font-size:13px; }
main { min-height:calc(100vh - 64px); }
.workspace,.report,.boundary { min-width:0; padding:34px 28px; border-bottom:1px solid var(--line); }
.workspace-heading,.report-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.eyebrow { margin:0 0 5px; color:var(--cyan); font:700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase; letter-spacing:0; }
h1,h2 { margin:0; font:400 31px/1.1 Georgia, "Times New Roman", serif; letter-spacing:0; }
.toolbar,.report-actions { display:flex; flex-wrap:wrap; gap:8px; }
button { min-height:38px; border:1px solid var(--line); border-radius:4px; padding:8px 13px; color:var(--ink); background:var(--panel); cursor:pointer; }
button:hover,button:focus-visible { border-color:var(--cyan); outline:none; }
button.primary { border-color:var(--green); background:var(--green); color:#10140f; font-weight:700; }
button.primary:hover,button.primary:focus-visible { background:#c4f56d; }
button:disabled { opacity:.45; cursor:not-allowed; }
.editors { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.editor { min-width:0; display:block; background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.editor:focus-within { border-color:var(--cyan); }
.editor > span { height:44px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 14px; border-bottom:1px solid var(--line); font-size:13px; }
.editor output { color:var(--muted); font:11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
textarea { display:block; width:100%; height:270px; resize:vertical; min-height:180px; margin:0; padding:16px; border:0; outline:0; color:var(--ink); background:#101311; font:15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.editor small { display:block; min-height:34px; padding:9px 14px; color:var(--muted); border-top:1px solid var(--line); font-size:11px; }
.report { background:#111412; }
.metrics { display:grid; grid-template-columns:1.2fr repeat(5, 1fr); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.metrics > div { min-width:0; height:86px; padding:13px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
.metrics > div:last-child { border-right:0; }
.metrics span { color:var(--muted); font-size:11px; }
.metrics strong { font:400 27px/1 Georgia, "Times New Roman", serif; }
.metrics [data-state="PRESERVED"] strong { color:var(--cyan); }.metrics [data-state="SHIFTED"] strong { color:var(--yellow); }.metrics [data-state="DROPPED"] strong { color:var(--red); }.metrics [data-state="INTRODUCED"] strong { color:var(--blue); }
#report-field { display:block; width:100%; height:180px; margin:12px 0; background:#0b0e0c; border:1px solid var(--line); border-radius:6px; }
.findings { display:grid; gap:8px; }
.empty { margin:0; padding:36px 18px; color:var(--muted); border:1px dashed var(--line); border-radius:6px; text-align:center; }
.finding { display:grid; grid-template-columns:130px minmax(0,1fr) minmax(0,1fr); gap:0; background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.finding-state { padding:16px; border-right:1px solid var(--line); font:700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.finding-text { min-width:0; padding:16px; border-right:1px solid var(--line); }
.finding-text:last-child { border-right:0; }
.finding-text small { display:block; margin-bottom:7px; color:var(--muted); font-size:10px; text-transform:uppercase; }
.finding-text p { margin:0; overflow-wrap:anywhere; }
.finding-reasons { grid-column:2 / 4; display:flex; flex-wrap:wrap; gap:6px; padding:10px 16px; border-top:1px solid var(--line); }
.finding-reasons span { padding:4px 7px; border:1px solid var(--line); border-radius:3px; color:var(--muted); font-size:11px; }
.finding[data-state="PRESERVED"] .finding-state { color:var(--cyan); }.finding[data-state="SHIFTED"] .finding-state { color:var(--yellow); }.finding[data-state="DROPPED"] .finding-state { color:var(--red); }.finding[data-state="INTRODUCED"] .finding-state { color:var(--blue); }
.boundary { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; padding-top:64px; padding-bottom:64px; background:var(--panel2); }
.boundary p:last-child { max-width:720px; margin:0; color:var(--muted); font-size:16px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:22px 28px; color:var(--muted); font-size:11px; }
@media (max-width:900px) { .app-header { grid-template-columns:1fr auto; } .header-status { display:none; } .editors { grid-template-columns:1fr; } .metrics { grid-template-columns:repeat(3,1fr); } .metrics > div { border-bottom:1px solid var(--line); } .finding { grid-template-columns:105px minmax(0,1fr); } .finding-text { border-right:0; border-bottom:1px solid var(--line); } .finding-text:nth-of-type(2) { grid-column:2; } .finding-text:nth-of-type(3) { grid-column:2; } .finding-reasons { grid-column:2; } }
@media (max-width:620px) { .app-header { padding:10px 16px; } nav { display:none; } .workspace,.report,.boundary { padding:28px 16px; } .workspace-heading,.report-heading { align-items:flex-start; flex-direction:column; } .toolbar { width:100%; display:grid; grid-template-columns:1fr 1fr; } button { min-width:0; padding:8px; } textarea { height:230px; } .metrics { grid-template-columns:1fr 1fr; } .metrics > div { border-right:1px solid var(--line); } .finding { grid-template-columns:1fr; } .finding-state,.finding-text { border-right:0; border-bottom:1px solid var(--line); } .finding-text:nth-of-type(2),.finding-text:nth-of-type(3),.finding-reasons { grid-column:1; } .boundary { grid-template-columns:1fr; gap:22px; } footer { flex-direction:column; padding:20px 16px; } }