
:root{--bg:#f6f6f4;--card:#fff;--text:#1c1c1e;--muted:#6a6a70;--line:#e2e2de;--accent:#2457c5;
--critical:#8e1b6b;--high:#c0262d;--medium:#a86400;--low:#1f6f8b;--info:#6a6a70;--ok:#1d7a46}
@media (prefers-color-scheme:dark){:root{--bg:#131315;--card:#1c1c1f;--text:#ececef;
--muted:#9b9ba3;--line:#2d2d32;--accent:#7aa2ff;--critical:#e46ac3;--high:#ff6b6b;
--medium:#f2b24c;--low:#5fc3e4;--info:#9b9ba3;--ok:#56c58a}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,
"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}header{background:var(--card);border-bottom:1px solid var(--line)}
.bar{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:16px;align-items:center;
flex-wrap:wrap}.brand{font-weight:700;text-decoration:none;color:var(--text);margin-right:auto}
nav a{margin-right:14px;text-decoration:none}nav form{display:inline}
main{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
h1{font-size:23px;margin:4px 0 14px}h2{font-size:17px;margin:22px 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
margin:12px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat b{display:block;font-size:24px}.muted{color:var(--muted)}.small{font-size:13px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:7px 8px;
border-bottom:1px solid var(--line);vertical-align:top}th{font-size:13px;color:var(--muted)}
.scroll{overflow-x:auto}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:13px}pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;
padding:10px;overflow-x:auto;white-space:pre}
.sev{font-weight:700;font-size:12px;text-transform:uppercase}.critical{color:var(--critical)}
.high{color:var(--high)}.medium{color:var(--medium)}.low{color:var(--low)}.info{color:var(--info)}
.ok{color:var(--ok)}.grade{font-weight:700;border:1px solid var(--line);border-radius:6px;
padding:0 7px}
label{display:block;font-weight:600;margin:10px 0 4px}input[type=text],input[type=password],
input[type=url],input[type=number],select,textarea{width:100%;max-width:520px;padding:8px 10px;
border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);
font:inherit}input[type=file]{margin:6px 0}textarea{min-height:70px}
.check{font-weight:400;display:flex;gap:8px;align-items:center}
button{font:inherit;padding:7px 14px;border-radius:8px;border:1px solid var(--accent);
background:var(--accent);color:#fff;cursor:pointer;margin-top:10px}
button.secondary{background:transparent;color:var(--accent)}button.danger{background:var(--high);
border-color:var(--high)}button.link{background:none;border:none;color:var(--accent);padding:0;
margin:0}.notice{border-left:4px solid var(--ok)}.error{border-left:4px solid var(--high)}
.hint{font-size:13px;color:var(--muted);margin:2px 0 0}.inline{display:inline}
.secret{font-size:15px;word-break:break-all}footer{max-width:1100px;margin:0 auto;
padding:0 16px 30px;font-size:13px;color:var(--muted)}
.spark polyline{fill:none;stroke:var(--accent);stroke-width:2}.row{display:flex;gap:10px;
flex-wrap:wrap;align-items:flex-end}

.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}
@media (max-width:860px){.editor-layout{grid-template-columns:minmax(0,1fr)}}
.editor{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
height:65vh;min-height:280px;background:var(--card)}
.gutter,textarea.code{font:13px/20px ui-monospace,SFMono-Regular,Menlo,monospace;margin:0;
padding:10px 8px}
.gutter{min-width:3.6em;text-align:right;color:var(--muted);background:var(--bg);
border-right:1px solid var(--line);overflow:hidden;user-select:none;white-space:pre}
.gutter .mark{border-radius:3px;padding:0 3px;color:#fff;font-weight:700}
.gutter .mark.critical{background:var(--critical)}.gutter .mark.high{background:var(--high)}
.gutter .mark.medium{background:var(--medium)}.gutter .mark.low{background:var(--low)}
.gutter .mark.info{background:var(--info)}
textarea.code{flex:1;border:0;border-radius:0;resize:none;white-space:pre;overflow:auto;
max-width:none;width:auto;height:100%;tab-size:4;background:var(--card);color:var(--text)}
textarea.code:focus{outline:none}
.findings{list-style:none;padding:0;margin:0}.findings li{margin:0 0 8px}
button.finding{display:block;width:100%;text-align:left;background:var(--card);color:var(--text);
border:1px solid var(--line);margin:0;padding:8px 10px}
button.finding:hover{border-color:var(--accent)}
.crumbs{font-size:14px;margin:0 0 6px}h1 code{font-size:20px}
