:root{--bg:#f6f7f8;--card:#fff;--fg:#1c1c1c;--mut:#666;--line:#ddd;--acc:#d9480f;--acc-text:#c2410c;--acc-soft:#fff0e6;--on-acc:#fff;--ok:#2e7d32;--on-ok:#fff;--on-err:#fff;--on-mut:#fff;--warn:#a15c00;--err:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#121316;--card:#1d1f24;--fg:#eee;--mut:#9aa;--line:#33363d;--acc:#ff8a4c;--acc-text:#ff8a4c;--acc-soft:#ff8a4c22;--on-acc:#1c1c1c;--ok:#7bc47f;--on-ok:#1c1c1c;--on-err:#1c1c1c;--on-mut:#1c1c1c;--warn:#f0b35a;--err:#f2b8b5}}
*{box-sizing:border-box}
:root{--cobbles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23000' fill-opacity='.025' stroke='%23000' stroke-opacity='.06' stroke-width='1.5'%3E%3Crect x='2' y='3' width='44' height='28' rx='13'/%3E%3Crect x='50' y='3' width='44' height='28' rx='13'/%3E%3Crect x='-22' y='35' width='44' height='28' rx='13'/%3E%3Crect x='26' y='35' width='44' height='28' rx='13'/%3E%3Crect x='74' y='35' width='44' height='28' rx='13'/%3E%3Crect x='2' y='67' width='44' height='28' rx='13'/%3E%3Crect x='50' y='67' width='44' height='28' rx='13'/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root{--cobbles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23fff' fill-opacity='.02' stroke='%23fff' stroke-opacity='.05' stroke-width='1.5'%3E%3Crect x='2' y='3' width='44' height='28' rx='13'/%3E%3Crect x='50' y='3' width='44' height='28' rx='13'/%3E%3Crect x='-22' y='35' width='44' height='28' rx='13'/%3E%3Crect x='26' y='35' width='44' height='28' rx='13'/%3E%3Crect x='74' y='35' width='44' height='28' rx='13'/%3E%3Crect x='2' y='67' width='44' height='28' rx='13'/%3E%3Crect x='50' y='67' width='44' height='28' rx='13'/%3E%3C/g%3E%3C/svg%3E")}}
body{background:var(--cobbles) var(--bg);color:var(--fg);font:15px system-ui,sans-serif;margin:0;padding:16px}
main{max-width:960px;margin:0 auto}
h1{font-size:20px;margin:0 0 4px}
.brand{margin:0 0 10px;padding-bottom:8px;border-bottom:3px solid #ff6a2b}
.brand a{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.brand img{flex:none}
.brand h1,.brand .name{font-size:26px;font-weight:500;line-height:1.2;margin:0}
@media (max-width:520px){.brand h1,.brand .name{font-size:19px}}
h2{font-size:16px;margin:20px 0 6px}
main a{color:var(--acc-text)}
nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px;border-bottom:1px solid var(--line);padding-bottom:8px}
nav a{padding:5px 10px;border-radius:6px;text-decoration:none;color:var(--fg);border:1px solid var(--line);background:var(--card)}
nav a.active{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.mut{color:var(--mut);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0}
.card.done{opacity:.5}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.title{font-weight:600;flex:1 1 280px;word-break:break-word}
button,label.btn,a.btn{background:transparent;color:var(--acc-text);border:1px solid var(--acc);border-radius:6px;padding:5px 9px;cursor:pointer;font:inherit;text-decoration:none}
button:hover,label.btn:hover,a.btn:hover{background:var(--acc-soft)}
button.ok{background:#2e7d32;color:#fff;border-color:#2e7d32}
textarea{width:100%;min-height:160px;font:12px ui-monospace,Consolas,monospace;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px}
details pre,pre{white-space:pre-wrap;word-break:break-word;font-size:12px;background:var(--bg);padding:8px;border-radius:6px}
.warn{color:var(--warn);font-size:13px;margin-top:4px}
.err,#msg.err{color:var(--err);white-space:pre-wrap}
fieldset{border:1px solid var(--line);border-radius:6px;margin:8px 0}
#layoutlist li{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 8px;margin:4px 0}
#layoutlist li.off{opacity:.55}
#layoutlist li.over{border-color:var(--acc)}
.handle{cursor:grab;user-select:none;color:var(--mut)}
#layoutlist input[type=text]{width:110px}
#layoutlist .fld{color:var(--mut);font-size:12px;min-width:56px}
input[type=number]{width:80px}
table.queue{border-collapse:collapse;width:100%;font-size:13px}
table.queue th,table.queue td{text-align:left;padding:3px 8px;border-bottom:1px solid var(--line)}
#sqlexamples{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
#appstatus{margin:6px 0}
.drop{border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;margin:10px 0;display:flex;flex-direction:column;gap:6px;align-items:center}
.drop.over{border-color:var(--acc);background:var(--card)}
kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--card);font:12px ui-monospace,Consolas,monospace}
tr.rejected td{opacity:.5;text-decoration:line-through}
tr.rejected td.seg{opacity:1;text-decoration:none}
td.seg{white-space:nowrap}
td.seg button{border-radius:0;padding:3px 9px;font-size:13px;margin-left:-1px;color:var(--fg);border-color:var(--line)}
td.seg button:first-child{border-radius:6px 0 0 6px;margin-left:0}
td.seg button:last-child{border-radius:0 6px 6px 0}
td.seg button.on.seg-same{background:var(--ok);color:var(--on-ok);border-color:var(--ok)}
td.seg button.on.seg-diff{background:var(--err);color:var(--on-err);border-color:var(--err)}
td.seg button.on.seg-unknown{background:var(--mut);color:var(--on-mut);border-color:var(--mut)}
.tag{display:inline-block;font-size:12px;line-height:1.5;padding:0 8px;border-radius:10px;border:1px solid var(--line);margin-right:4px;white-space:nowrap}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.plan{color:var(--mut)}
.flow{width:100%;height:auto;margin:6px 0}
.flow rect,.flow ellipse,.flow path.db{fill:var(--card);stroke:var(--line)}
.flow ellipse.db,.flow path.db{fill:var(--acc-soft);stroke:var(--acc);stroke-width:1.5}
.flow text{fill:var(--fg);font:13px system-ui,sans-serif}
.flow text.sub{fill:var(--mut);font-size:12px}
.flow .ln{stroke:var(--acc);stroke-width:1.5;fill:none}
.flow marker path{stroke:var(--acc);fill:none;stroke-width:1.8}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:8px 0 12px}
.card2{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.card2 h3{margin:0;font-size:15px}
.card2 p{margin:0;font-size:13px;color:var(--mut)}
.ic{width:56px;height:56px}
.ic .f{fill:var(--acc-soft);stroke:var(--acc);stroke-width:1.5}
tr.detail td{background:var(--card);padding:6px 10px 8px 34px;font-size:13px;color:var(--mut)}
tr.detail div{margin:2px 0}
button.twist{border:0;background:transparent;color:var(--acc-text);padding:0 6px 0 0;font-size:14px}