:root{--bg:#fff;--fg:#1b1f23;--card:#f3f5f8;--bd:#d0d7de;--accent:#0b5fff;--err:#c62828;--warn:#b26a00;--info:#1565c0;--ok:#2e7d32}
[data-theme=dark]{--bg:#12161b;--fg:#e6e9ed;--card:#1c222a;--bd:#34404d;--accent:#6ea8ff;--err:#ff6b6b;--warn:#ffb74d;--info:#64b5f6;--ok:#81c784}
*{box-sizing:border-box}
body{margin:0;padding:1rem;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,sans-serif}
header{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;align-items:center}
h1{font-size:1.3rem;margin:0}
h3{margin:.2rem 0 .4rem;font-size:1rem}
.note{color:var(--warn);margin:.3rem 0 .8rem}
button,select{background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:4px;padding:.35rem .6rem;cursor:pointer}
main{display:grid;grid-template-columns:minmax(300px,1fr) minmax(360px,1.3fr);gap:1rem}
@media(max-width:900px){main{grid-template-columns:1fr}}
textarea{width:100%;height:75vh;font:12px/1.4 ui-monospace,Consolas,monospace;background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:6px;padding:.5rem;resize:vertical}
.card{background:var(--card);border:1px solid var(--bd);border-radius:6px;padding:.6rem .8rem;margin-bottom:.7rem}
table{border-collapse:collapse;width:100%}td,th{text-align:left;padding:.15rem .4rem;border-bottom:1px solid var(--bd);vertical-align:top;word-break:break-all}
th{width:9rem;white-space:nowrap;font-weight:600}
.badge{display:inline-block;padding:0 .45rem;border-radius:9px;font-size:.8rem;font-weight:600;color:#fff;background:var(--info)}
.badge.ok{background:#2e7d32}.badge.bad{background:#c62828}
.error{--c:var(--err)}.warn{--c:var(--warn)}.info{--c:var(--info)}
.f{border-left:4px solid var(--c);padding:.2rem .6rem;margin:.3rem 0}
.f b{color:var(--c)}
.tabs{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.6rem}
.tabs button.on{background:var(--accent);color:#fff}
.mono{font-family:ui-monospace,Consolas,monospace}
.brand{font-size:.7em;font-weight:400;color:var(--accent);margin-left:.4rem}
.brand a,footer a{color:var(--accent);text-decoration:none}
.brand a:hover,footer a:hover{text-decoration:underline}
.intro{max-width:70rem}.intro p{margin:.3rem 0}
.about{margin-top:1rem}.about a{color:var(--accent)}
footer{margin-top:1.2rem;padding-top:.6rem;border-top:1px solid var(--bd);text-align:center;font-size:.85rem;opacity:.75}
.good{color:var(--ok)}.bad{color:var(--err)}.dim{opacity:.5}
th.tip{cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
.callbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}.callbar[hidden]{display:none}.callbar select{flex:1 1 28rem;min-width:0;font-family:monospace}.callbar input[type=text],.callbar input:not([type]){flex:0 1 16rem}
.dg{width:100%;height:auto;display:block;margin:0 auto}.dg-box rect{fill:var(--card);stroke:var(--bd);stroke-width:1.5}.dg-sbc rect{stroke:var(--accent)}.dg-hub rect,.dg-mp rect{stroke:var(--ok)}.dg-mp.off rect{stroke-dasharray:4 4;opacity:.5}.dg-t{fill:var(--fg);font:600 18px sans-serif;text-anchor:middle}.dg-ip{fill:var(--fg);font:14px monospace;text-anchor:middle;opacity:.85}.dg-l{stroke-width:3;fill:none}.dg-l.sig{stroke:var(--accent)}.dg-l.med{stroke:var(--ok)}.dg-l.bad{stroke:var(--err)}.dg-l.faint{opacity:.4;stroke-dasharray:2 5}.dg-l.dashed{stroke-dasharray:8 6}.dg-lbl{fill:var(--fg);font:13px sans-serif;text-anchor:middle}.dg-note{fill:var(--fg);font:italic 13px sans-serif;text-anchor:middle;opacity:.75}
.loadbox{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.6rem}.loadbox .big{font-size:1.1rem;padding:.7rem 1.3rem;font-weight:600;border:2px solid var(--accent);border-radius:8px;background:var(--card);color:var(--fg);cursor:pointer}.loadbox .big:hover{background:var(--accent);color:var(--bg)}.formats{flex:1 1 14rem}.formats .or{font-size:1.25rem;font-weight:600}.formats small{font-size:.8rem;opacity:.8}
#prog{width:14rem;height:.9rem}.loadbox #progtext{font-size:.85rem}button.link{background:none;border:0;color:var(--accent);cursor:pointer;text-decoration:underline;font:inherit;padding:0;text-align:left}.loadbox .big:disabled{opacity:.5;cursor:wait}
.dg-car rect{stroke:var(--warn)}.dg-car.off rect{stroke-dasharray:4 4;opacity:.5}.dg-l.faint{opacity:.3;stroke-dasharray:3 6}
body::before{content:'BETA';position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font:900 22vw sans-serif;letter-spacing:.1em;transform:rotate(-20deg);color:var(--fg);opacity:.04;pointer-events:none;z-index:0}
.beta{font-size:.55rem;font-weight:700;vertical-align:middle;padding:.15rem .45rem;border-radius:4px;background:var(--warn);color:#000;letter-spacing:.08em}.ver{opacity:.7;font-weight:400}
.changelog{margin-bottom:.6rem}.changelog summary{cursor:pointer}.changelog ul{margin:.3rem 0 0 1.2rem;padding:0}.changelog h4{margin:.5rem 0 .2rem}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}.modal[hidden]{display:none}.modal-box{background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:10px;padding:1.5rem 2rem;min-width:min(26rem,90vw);display:flex;flex-direction:column;gap:.7rem;box-shadow:0 10px 40px rgba(0,0,0,.5)}.modal-title{font-size:1.2rem;font-weight:600}.modal-box progress{width:100%;height:1.2rem}
main>.callbar{grid-column:1;grid-row:1;margin:0;align-self:center}main>.tools{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;align-items:center}main>section:not(#output){grid-column:1;grid-row:2;min-width:0}main>#output{grid-column:2;grid-row:2;min-width:0}.loadcol{display:flex;flex-direction:column;gap:.4rem;align-items:stretch}@media(max-width:900px){main>.callbar,main>.tools,main>section:not(#output),main>#output{grid-column:1;grid-row:auto}}
.callbar select:disabled,.callbar input:disabled{opacity:.6;cursor:not-allowed}section>.formats{margin:0 0 .3rem}
main>.tools{justify-content:space-between!important;flex-wrap:wrap}.callfilters{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:flex-start;flex:1 1 16rem}.callfilters input:not([type]){flex:0 1 16rem}.toolbtns{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}main>.callbar select{width:100%}
.tabs .sdpflag{font-size:.65rem;font-weight:700;padding:0 .3rem;margin-left:.2rem;border-radius:3px;background:var(--ok);color:#000;vertical-align:1px}
.overview table{width:100%}.overview th{width:7.5rem;text-align:left;vertical-align:top;font-weight:600}.overview td.good b:first-child{color:var(--ok)}.overview td.bad b:first-child{color:var(--err)}.overview td.warn b:first-child{color:var(--warn)}
.chips{margin:.1rem 0 .5rem;display:flex;flex-wrap:wrap;gap:.3rem}
.badge.warnb{background:#b26a00}
details.findings>summary{cursor:pointer;list-style:none}
details.findings>summary::-webkit-details-marker{display:none}
details.findings>summary h3{display:inline;margin:0}
details.findings>summary::before{content:"\25B8  ";color:var(--dim,#888)}
details.findings[open]>summary::before{content:"\25BE  "}
details.findings>summary+*{margin-top:.5rem}
details.why summary{cursor:pointer;font-size:.8rem;color:var(--dim,#888)}
.subtabs{display:flex;gap:.3rem;margin:.4rem 0 .6rem;border-bottom:1px solid var(--bd)}
.subtabs button{border:0;border-bottom:2px solid transparent;background:none;color:inherit;padding:.25rem .7rem;cursor:pointer;border-radius:0}
.subtabs button.on{border-bottom-color:var(--accent);font-weight:600}
.rawmsg{white-space:pre-wrap;word-break:break-all;margin:0;font-size:.8rem}
