:root{--bg:#e4eaec;--panel:#fbfcfc;--ink:#13222b;--mute:#5b6b75;--line:#c5d0d5;--teal:#0e7c86;--amber:#c98a12;--red:#b3392f;--green:#2f7d4f}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
#app{height:100%;display:flex;flex-direction:column}
#top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
#top .sp{flex:1}
#top h1{font-size:15px;margin:0 6px 0 0}
#top input,#top select{width:auto;max-width:200px}
.btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 10px}
.btn:hover{border-color:var(--teal)}
.btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.pri{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.bad{color:var(--red)}
.btn.sm{padding:2px 8px;font-size:12px}
.grp{display:flex}
.grp .btn{border-radius:0;margin-left:-1px}
.grp .btn:first-child{border-radius:6px 0 0 6px;margin-left:0}
.grp .btn:last-child{border-radius:0 6px 6px 0}
.tag{font-size:12px;color:var(--mute)}
input,select,textarea{border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:#fff;width:100%}
input[type=color]{padding:1px;height:30px;width:100%;cursor:pointer}
input[type=checkbox]{width:auto}
input[type=range]{padding:0}
textarea{resize:vertical;min-height:64px}
#main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 360px}
#stage{overflow:auto;background-color:var(--bg);background-image:linear-gradient(#d3dce0 1px,transparent 1px),linear-gradient(90deg,#d3dce0 1px,transparent 1px);background-size:20px 20px}
#cv{width:100%;min-width:680px;height:auto;display:block;touch-action:none;--lab:#e4eaec}
.ro #cv{touch-action:auto}
#side{background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:12px}
.tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:6px 10px;border-bottom:2px solid transparent;color:var(--mute)}
.tabs button.on{color:var(--ink);border-color:var(--teal);font-weight:600}
.row{margin-bottom:10px}
.row>label,.lbl{display:block;font-size:12px;color:var(--mute);margin-bottom:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.chk{display:flex;gap:6px;align-items:center;margin:4px 0;font-size:13px}
.card{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px;background:#fff}
.card.pick{cursor:pointer}
.card.pick:hover{border-color:var(--teal)}
.card h3{margin:0 0 2px;font-size:14px}
.card p{margin:0 0 6px}
.sec{font-size:12px;font-weight:600;color:var(--mute);margin:14px 0 6px;border-top:1px solid var(--line);padding-top:10px}
.seg{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.seg button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:2px 10px;font-size:12px}
.seg button.on{color:#fff;border-color:transparent}
.seg button:disabled{cursor:default;opacity:.55}
.chip{display:inline-block;font-size:11px;color:#fff;border-radius:999px;padding:0 8px;margin-left:6px;vertical-align:1px}
.hint{color:var(--mute);font-size:13px}
.nav{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.nav .sp{flex:1}
.files{list-style:none;padding:0;margin:6px 0}
.files li{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid #eef2f3}
.files a{color:var(--teal);word-break:break-all}
/* diagram elements */
.node{cursor:grab}
.ro .node,.ro .edge{cursor:default}
.edge .hit{stroke:transparent;stroke-width:16;fill:none;cursor:pointer}
.edge text{font:12px ui-monospace,Menlo,monospace;fill:#13222b;paint-order:stroke;stroke:var(--lab);stroke-width:4px;text-anchor:middle;pointer-events:none}
.node text{pointer-events:none;user-select:none}
.dim{opacity:.2}
.flow{stroke-dasharray:10 6}
@media(prefers-reduced-motion:no-preference){.flow{animation:dash .9s linear infinite}.node,.edge{transition:opacity .2s}}
@keyframes dash{to{stroke-dashoffset:-16}}
/* login */
.login{max-width:320px;margin:15vh auto;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.login h1{margin:0 0 12px;font-size:18px}
.err{color:var(--red);margin-top:8px}
.lnk{word-break:break-all;font:12px ui-monospace,Menlo,monospace;background:#eef3f4;padding:6px;border-radius:6px;margin:6px 0}
/* report */
.report{flex:1;overflow:auto;background:#fff;padding:24px 32px}
.report>*{max-width:900px;margin-left:auto;margin-right:auto}
.rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.report h1{margin:0 0 4px;font-size:22px}
.report h2{font-size:17px;margin:0 0 4px}
.report h4{margin:10px 0 2px;font-size:12px;color:var(--mute)}
.report p{margin:0}
.report .fig{border:1px solid var(--line);border-radius:6px;margin:8px 0;--lab:#fff}
.report .fig svg{width:100%;height:auto;display:block}
.report table{border-collapse:collapse;margin:14px auto;width:100%;max-width:900px}
.report th,.report td{border:1px solid var(--line);padding:4px 8px;text-align:left}
.rt{padding:16px 0;border-top:1px solid var(--line);break-inside:avoid}
.pre{white-space:pre-wrap}
@media(max-width:820px){#main{grid-template-columns:1fr;grid-template-rows:auto 1fr}#side{border-left:0;border-top:1px solid var(--line)}#stage{max-height:45vh}}
@media print{#top,.noprint{display:none!important}html,body,#app{height:auto}.report{overflow:visible;padding:0}}