:root{--bg:#f5f6f8;--surface:#fff;--border:#d9dce1;--text:#1c1f24;--text-muted:#6b7280;--accent:#2f6feb;--accent-contrast:#fff;--error-bg:#fdeceb;--error-border:#e5534b;--error-text:#8a1f16;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#14161a;--surface:#1b1e24;--border:#2e333c;--text:#e6e8eb;--text-muted:#9aa1ac;--accent:#5b9dff;--accent-contrast:#0b1220;--error-bg:#3a1c1c;--error-border:#e5534b;--error-text:#ffb4ac;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.site-header{align-items:center;gap:10px;margin-bottom:12px;display:flex}.site-header__brand{color:var(--accent);white-space:nowrap;font-size:15px;font-weight:700;text-decoration:none}.site-header__brand:hover{text-decoration:underline}.site-header__divider{color:var(--text-muted);font-weight:400}.site-header__title{color:var(--text-muted);white-space:nowrap;font-size:15px;font-weight:600}.toolbar-spacer{flex:1}.btn,.toggle-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:13px}.btn:hover,.toggle-btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn{padding:6px 10px}.diagram-canvas-wrap{border:1px solid var(--border);border-radius:8px;flex:1;min-height:0;position:relative;overflow:hidden}.diagram-canvas{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.diagram-canvas-wrap[data-panning=true] .diagram-canvas{cursor:grab}.diagram-canvas__empty{pointer-events:none;color:var(--text-muted);text-align:center;max-width:280px;font-size:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.diagram-canvas__hint{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:4px;justify-content:space-between;align-items:center;gap:12px;padding:3px 8px;font-size:11px;display:flex;position:absolute;bottom:8px;left:12px;right:12px}.diagram-canvas__edge-kind{pointer-events:auto;white-space:nowrap}.diagram-canvas__edge-kind select{font-size:11px}.app{box-sizing:border-box;flex-direction:column;height:100vh;padding:12px 16px;display:flex}.app-body{flex:1;gap:12px;min-height:0;display:flex}.toolbar{align-items:center;gap:8px;display:flex}.toolbar-row{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;display:flex}.toolbar-row__panels{flex-wrap:wrap;align-items:flex-start;gap:10px;display:flex}.panel-menu{align-items:center;gap:6px;display:flex}.panel-menu__error{color:var(--error-text);font-size:12px}.share-dialog{position:relative}.share-dialog__panel{z-index:10;border:1px solid var(--border);background:var(--surface);border-radius:8px;flex-wrap:wrap;align-items:center;gap:6px;max-width:320px;padding:10px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 4px 16px #0000001f}.share-dialog__url{border:1px solid var(--border);background:var(--bg);min-width:180px;color:var(--text);border-radius:6px;flex:1;padding:6px 8px;font-size:12px}.share-dialog__warning{width:100%;color:var(--text-muted);font-size:11px}.toolbar__zoom{color:var(--text-muted);text-align:right;min-width:40px;font-size:12px}.diagram-type-picker{gap:6px;margin-bottom:10px;display:flex}.diagram-type-picker__btn{border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;border-radius:6px;padding:5px 10px;font-size:12px}.diagram-type-picker__btn:hover:not(:disabled){border-color:var(--accent)}.diagram-type-picker__btn[data-active=true]{border-color:var(--accent);color:var(--accent);font-weight:600}.diagram-type-picker__btn:disabled{opacity:.45;cursor:not-allowed}.palette{border:1px solid var(--border);background:var(--surface);border-radius:8px;flex-shrink:0;width:140px;padding:10px}.palette__title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;font-size:11px;font-weight:600}.palette__items{flex-direction:column;gap:6px;display:flex}.palette-item{border:1px solid var(--border);background:var(--bg);color:var(--text);text-align:left;cursor:grab;border-radius:6px;padding:8px 10px;font-size:13px}.palette-item:hover{border-color:var(--accent)}.palette__hint{color:var(--text-muted);margin-top:10px;font-size:10px}