:root{--bg: #f4f6f9;--panel: #ffffff;--border: #d3d9e3;--accent: #3a5a86;--accent-hover: #2c466b;--text: #1d2733;--muted: #6a7585;--danger: #b23a3a}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Tahoma,Arial,sans-serif;color:var(--text);background:var(--bg);height:100vh;overflow:hidden}#app{height:100vh}button{font:inherit;cursor:pointer;border:1px solid var(--border);border-radius:5px;background:#eef1f6;padding:7px 14px;color:var(--text)}button:hover{background:#e2e7ef}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.primary:hover{background:var(--accent-hover)}button.danger{color:var(--danger)}input{font:inherit;padding:9px 11px;border:1px solid var(--border);border-radius:5px;width:100%}.auth-wrap{display:flex;align-items:center;justify-content:center;height:100vh}.auth-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:32px;width:360px;box-shadow:0 8px 30px #0000000f}.auth-card h1{margin:0 0 4px;font-size:24px}.auth-card .sub{color:var(--muted);margin:0 0 22px;font-size:14px}.auth-card label{display:block;font-size:13px;margin:14px 0 5px;color:var(--muted)}.auth-card button{width:100%;margin-top:20px}.auth-card .switch{margin-top:16px;text-align:center;font-size:14px}.auth-card a{color:var(--accent);cursor:pointer}.form-error{color:var(--danger);font-size:14px;margin-top:14px;min-height:18px}.app-shell{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar .brand{font-weight:700;font-size:18px;color:var(--accent)}.topbar .spacer{flex:1}.topbar .user-email{color:var(--muted);font-size:14px}.workarea{display:flex;flex:1;min-height:0}.sidebar{width:240px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.sidebar .sb-head{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--border)}.sidebar .sb-head button{flex:1}.sb-section{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 12px 4px;font-weight:600}.diagram-list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}.diagram-list.examples{flex:0 0 auto;max-height:38%;border-bottom:1px solid var(--border)}.diagram-list li{padding:9px 10px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:14px}.diagram-list li:hover{background:#eef1f6}.diagram-list li.active{background:#dfe7f3;font-weight:600}.diagram-list li .title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diagram-list li .del{opacity:0;border:none;background:none;color:var(--danger);padding:2px 6px}.diagram-list li:hover .del{opacity:1}.diagram-list .empty{color:var(--muted);padding:14px 10px;font-size:13px}.editor-area{display:flex;flex:1;min-width:0;flex-direction:column}.editor-toolbar{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel);flex-wrap:wrap}.editor-toolbar .title-input{width:240px}.editor-toolbar .spacer{flex:1}.editor-toolbar .save-state{font-size:13px;color:var(--muted);min-width:90px}.panes{display:flex;flex:1;min-height:0}.pane{display:flex;flex-direction:column;min-width:120px;overflow:hidden}#leftPane{flex:0 0 42%}#rightPane{flex:1 1 auto}.pane textarea{flex:1;border:none;padding:14px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:13.5px;resize:none;outline:none;line-height:1.5}#output{flex:1;overflow:auto;background:#fff;padding:16px}#output.fit-width svg{width:100%!important;max-width:100%!important;height:auto!important}.resizer{flex:0 0 6px;cursor:col-resize;background:var(--border)}.resizer:hover,.resizer.active{background:var(--accent)}body.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.error{color:var(--danger);white-space:pre-wrap;font-family:monospace;font-size:13px}.toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}