:root{--bg:#eef3f7;--panel:#fff;--line:#5b7c99;--border:#d7e2ec;--text:#1f2a36;--muted:#617487;--acc:#0f6cbd;--acc2:#0a4f8a;--danger:#b42318}*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",Tahoma,sans-serif;color:var(--text)}button{border:0;border-radius:10px;padding:10px 12px;font:inherit;font-weight:600;cursor:pointer}.b1{background:var(--acc);color:#fff}.b2{background:#eaf2fb;color:var(--acc2)}.bd{background:#fdeceb;color:var(--danger)}.nt{font-size:15px;font-weight:700;line-height:1.3;width:100%}.ns{font-size:12px;line-height:1.4;width:100%}
body.editor-page{background:linear-gradient(180deg,#f8fbfe 0%,var(--bg) 100%)}.l{display:grid;grid-template-columns:300px 1fr 340px;min-height:100vh}.p{padding:20px;background:#ffffffeb;border-right:1px solid var(--border)}.r{border-left:1px solid var(--border);border-right:0}.t{font-size:24px;font-weight:700;margin:0 0 8px}.m,.s{color:var(--muted);line-height:1.5}.tb{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.stack{display:flex;flex-direction:column;gap:10px}.wk{display:flex;flex-direction:column;min-width:0}.wt{display:flex;justify-content:space-between;gap:12px;padding:18px 20px 12px}.cv{position:relative;margin:0 20px 20px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(90deg,rgba(15,108,189,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(rgba(15,108,189,.06) 1px,transparent 1px) 0 0/24px 24px,#fff;overflow:auto;min-height:calc(100vh - 90px)}.inner{position:relative;width:2200px;height:1500px}.svg{position:absolute;inset:0;pointer-events:none}.svg path{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:auto;cursor:pointer}.svg path.sel{stroke:var(--acc);stroke-width:3.5}.n{position:absolute;padding:12px 14px;border:2px solid #8ba9c3;background:#fff;box-shadow:0 10px 24px rgba(45,73,99,.14);cursor:move;user-select:none;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;overflow:hidden}.n.sel{border-color:var(--acc);box-shadow:0 0 0 4px rgba(15,108,189,.14),0 12px 30px rgba(45,73,99,.16)}.n.src{border-color:#2e8b57}.n.link-diagram::after,.n.link-toggle::after,.node.link-diagram::after,.node.link-toggle::after{content:attr(data-linkhint);position:absolute;right:8px;bottom:6px;font-size:10px;font-weight:700;letter-spacing:.03em;color:#4b6074;background:rgba(255,255,255,.88);padding:2px 6px;border-radius:999px}.badge{display:inline-flex;padding:8px 10px;border-radius:999px;background:#eaf2fb;color:var(--acc2);font-size:12px;font-weight:700;text-transform:uppercase}.c{border:1px solid var(--border);border-radius:14px;background:#f6f9fc;padding:14px;margin-top:16px}.f{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.f label{font-size:13px;font-weight:600;color:var(--muted)}.f input,.f select{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;background:#fff}.f input[type=color]{padding:4px;height:42px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.list{margin:0;padding-left:18px;color:var(--muted)}
body.published-page{background:transparent}.page{padding:24px}.header{max-width:1400px;margin:0 auto 20px}.title{font-size:28px;font-weight:700;margin:0 0 6px}.stack-published{display:flex;flex-direction:column;gap:24px;max-width:1400px;margin:0 auto}.diagram{width:100%;background:transparent;padding:0 0 12px}.diagram-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:14px}.diagram-name{font-size:22px;font-weight:700}.diagram-pos{color:var(--muted);font-size:13px}.canvas{position:relative;width:100%;overflow:hidden;background:transparent;min-height:0}.fit-shell{position:relative;margin:0 auto;transform-origin:top left}.fit-shell .inner{min-width:0;transform-origin:top left}.node{position:absolute;padding:12px 14px;border:2px solid #000;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;box-shadow:0 10px 24px rgba(45,73,99,.12);overflow:hidden;cursor:default}.node.link-diagram,.node.link-toggle{cursor:pointer}.empty{max-width:1400px;margin:40px auto 0;padding:24px;color:var(--muted);text-align:center}
@media(max-width:1200px){.l{grid-template-columns:300px 1fr}.r{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}}@media(max-width:860px){.l{grid-template-columns:1fr}.p,.r{border:0;border-bottom:1px solid var(--border)}.cv{margin:0 12px 12px;min-height:70vh}.wt{padding:14px}}