:root{--bg-primary:#08111f;--bg-secondary:#091628d1;--panel-border:#9fbdff29;--panel-shadow:0 24px 80px #00000061;--surface-strong:#0e1d32f0;--surface-muted:#7c99ca1a;--text-primary:#eaf2ff;--text-secondary:#93a6c9;--text-soft:#7284a6;--accent:#78d8ff;--accent-strong:#2ca3dc;--accent-warm:#ffd173;--danger:#ff7a8f;--success:#86e4a5;--radius-xl:28px;--radius-lg:20px;--radius-md:14px;--grid-line:#78d8ff14;--font-ui:"Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;--font-display:"Bahnschrift", "Aptos Display", "Segoe UI Variable", "Microsoft YaHei UI", sans-serif;--font-mono:"Cascadia Mono", "Consolas", "SFMono-Regular", monospace;--editor-width:520px;--workspace-gap:6px;--panel-padding:12px;--panel-border-width:1px;--inner-border-width:1px}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:var(--font-ui);color:var(--text-primary);background:radial-gradient(circle at 0 0,#3389ff33,#0000 30%),radial-gradient(circle at 100% 0,#ffd17324,#0000 26%),linear-gradient(145deg,#050b14 0%,#08111f 46%,#0b1324 100%)}body.is-resizing,body.is-resizing *{-webkit-user-select:none;user-select:none;cursor:col-resize!important}body:before{content:"";background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);pointer-events:none;background-size:32px 32px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000c,#0000 90%);mask-image:linear-gradient(#000c,#0000 90%)}button,input{font:inherit}button{appearance:none}svg{shape-rendering:geometricprecision}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{min-height:100vh;padding:14px 20px 20px}.panel-header h2,.section-heading h3{font-family:var(--font-display);margin:0}.workspace{grid-template-columns:minmax(360px, var(--editor-width)) 8px minmax(420px, 1fr);gap:var(--workspace-gap);align-items:stretch;height:calc(100dvh - 34px);display:grid}.panel{border:var(--panel-border-width) solid var(--panel-border);border-radius:var(--radius-xl);box-shadow:var(--panel-shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#11223aeb,#08111ff5);position:relative;overflow:hidden}.panel:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(140deg,#78d8ff14,#0000 36%,#ffd17314);position:absolute;inset:0}.panel-editor,.panel-preview{height:100%;padding:var(--panel-padding);flex-direction:column;min-width:0;min-height:0;display:flex}.workspace-resizer{cursor:col-resize;touch-action:none;min-width:8px;position:relative}.workspace-resizer:before{content:"";background:#93a6c92e;border-radius:999px;width:1px;transition:background .18s,box-shadow .18s,width .18s;position:absolute;top:12px;bottom:12px;left:50%;transform:translate(-50%)}.workspace-resizer:after{content:"";opacity:.72;background:radial-gradient(circle,#78d8ffe6 1.2px,#0000 1.3px) 50%/8px 12px repeat-y;border-radius:999px;width:8px;height:56px;transition:opacity .18s,transform .18s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.workspace-resizer:hover:before,.workspace-resizer.is-active:before{background:#78d8ff4d;width:1.5px;box-shadow:0 0 10px #78d8ff1a}.workspace-resizer:hover:after,.workspace-resizer.is-active:after{opacity:1;transform:translate(-50%,-50%)scale(1.03)}.panel-header,.section-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.panel-header{z-index:6;margin-bottom:12px;position:relative}.panel-header-editor{align-items:flex-start}.panel-header-editor h2{letter-spacing:.02em;font-size:clamp(1.02rem,1.8vw,1.34rem);line-height:40px}.panel-copy{gap:2px;display:grid}.panel-caption{color:var(--text-secondary);margin:0;line-height:1.5}.panel-toolbar{z-index:7;flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex;position:relative}.toolbar-icon-button{border-radius:14px;width:40px;height:40px}.toolbar-icon-button svg{width:20px;height:20px}.editor-field{flex-direction:column;flex:auto;min-height:0;display:flex}.mermaid-editor-shell{border:var(--inner-border-width) solid #93a6c921;border-radius:var(--radius-lg);background:#050b14d9;outline:none;flex:1;width:100%;height:100%;min-height:0;transition:border-color .18s,box-shadow .18s;overflow:hidden}.mermaid-editor-shell:focus-within{border-color:#78d8ff70;box-shadow:0 0 0 4px #78d8ff1a}.mermaid-editor-shell .monaco-editor,.mermaid-editor-shell .monaco-editor-background,.mermaid-editor-shell .margin,.mermaid-editor-shell .monaco-scrollable-element{background:#050b14d9!important}.editor-loading{width:100%;height:100%;color:var(--text-secondary);background:#050b14d9;place-items:center;display:grid}.editor-textarea-fallback{border-radius:var(--radius-lg);width:100%;height:100%;min-height:0;color:var(--text-primary);font-family:var(--font-mono);tab-size:2;resize:none;background:#050b14d9;border:none;outline:none;padding:16px;font-size:14px;line-height:1.6;display:block}.mermaid-editor-shell>div{height:100%}.controls-section{z-index:1;border-radius:var(--radius-lg);background:var(--surface-muted);border:1px solid #93a6c924;flex:none;margin-top:12px;padding:12px;position:relative}.theme-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px;display:grid}.storage-search-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.text-input{width:100%;min-width:0;color:var(--text-primary);background:#070f1bbd;border:1px solid #93a6c929;border-radius:14px;outline:none;padding:12px 14px;transition:border-color .18s,box-shadow .18s,background .18s}.text-input::placeholder{color:var(--text-soft)}.text-input:focus{border-color:#78d8ff59;box-shadow:0 0 0 4px #78d8ff14}.storage-count{color:var(--text-secondary);white-space:nowrap;font-size:.9rem}.storage-notice{margin:0;font-size:.92rem;line-height:1.5}.inline-notice{margin-bottom:12px}.preview-toolbar{align-items:center;gap:12px;margin-left:auto;display:flex}.github-link-inline{flex:none}.storage-notice.is-success{color:var(--success)}.storage-notice.is-error{color:var(--danger)}.storage-notice.is-info{color:var(--accent)}.saved-diagram-list{gap:10px;max-height:300px;padding-right:2px;display:grid;overflow:auto}.popover-list{max-height:min(420px,100vh - 260px)}.saved-diagram-card{background:#070f1b99;border:1px solid #93a6c91f;border-radius:16px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;display:grid}.saved-diagram-card.is-active{border-color:#78d8ff6b;box-shadow:inset 0 0 0 1px #78d8ff29}.saved-diagram-copy{gap:6px;min-width:0;display:grid}.saved-diagram-copy strong{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.saved-diagram-copy span{color:var(--text-secondary);font-size:.88rem}.saved-diagram-actions{gap:8px;display:inline-flex}.saved-diagram-empty{min-height:108px;color:var(--text-secondary);text-align:center;border:1px dashed #93a6c929;border-radius:16px;place-items:center;padding:16px;display:grid}.saved-diagram-empty p{margin:0}.compact-button{border-radius:14px;padding:10px 12px}.danger-button{color:#ffd5db;border-color:#ff7a8f38}.danger-button:hover,.danger-button:focus-visible{background:#4a1220b8;border-color:#ff7a8f6b}.theme-card{min-height:54px;color:var(--text-primary);cursor:pointer;background:#070f1bb3;border:1px solid #93a6c924;border-radius:18px;justify-content:center;align-items:center;padding:8px;transition:transform .18s,border-color .18s,box-shadow .18s;display:inline-flex;position:relative}.theme-card:hover,.theme-card:focus-visible{border-color:#78d8ff59;outline:none;transform:translateY(-2px);box-shadow:0 12px 26px #00000038}.theme-card.is-active{border-color:#78d8ff7a;box-shadow:0 14px 32px #2ca3dc2e}.theme-card .swatches{flex-wrap:nowrap;align-items:center;gap:8px;display:inline-flex}.swatches i{border:1px solid #ffffff29;border-radius:999px;width:12px;height:12px;display:block}.theme-card:after{color:var(--text-primary);content:attr(aria-label);white-space:nowrap;opacity:0;pointer-events:none;z-index:4;background:#050b14f5;border:1px solid #93a6c92e;border-radius:999px;padding:6px 10px;font-size:.82rem;line-height:1;transition:opacity .16s,transform .16s;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,4px)}.theme-card:hover:after,.theme-card:focus-visible:after{opacity:1;transform:translate(-50%)}.ghost-button{cursor:pointer;color:var(--text-primary);background:#0c182ab8;border:1px solid #93a6c924;border-radius:16px;padding:12px 16px;transition:transform .18s,border-color .18s,background .18s,opacity .18s}.ghost-button:hover,.ghost-button:focus-visible,.icon-button:hover,.icon-button:focus-visible{background:#11223aeb;border-color:#78d8ff59}.ghost-button:hover,.ghost-button:focus-visible{outline:none;transform:translateY(-1px)}.ghost-button:disabled{opacity:.42;cursor:not-allowed;transform:none}.zoom-controls{gap:8px;display:flex}.preview-stage{border:var(--inner-border-width) solid #93a6c91c;border-radius:calc(var(--radius-xl) - 8px);flex:1;min-height:0;position:relative;overflow:hidden}.export-toolbar{z-index:3;gap:8px;display:flex;position:absolute;top:14px;right:14px}.icon-button{width:42px;height:42px;color:var(--text-primary);cursor:pointer;background:#070f1bdb;border:1px solid #93a6c92e;border-radius:14px;justify-content:center;align-items:center;transition:transform .18s,border-color .18s,background .18s,opacity .18s;display:inline-flex;position:relative}.icon-button:hover,.icon-button:focus-visible{background:#0e1d32f0;border-color:#78d8ff59;outline:none;transform:translateY(-1px)}.icon-button:disabled{opacity:.42;cursor:not-allowed;transform:none}.icon-button svg{fill:currentColor;width:21px;height:21px}.icon-button:after{color:var(--text-primary);content:attr(data-tooltip);white-space:nowrap;opacity:0;pointer-events:none;z-index:30;background:#050b14f5;border:1px solid #93a6c92e;border-radius:999px;padding:6px 10px;font-size:.82rem;line-height:1;transition:opacity .16s,transform .16s;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,4px)}.icon-button:hover:after,.icon-button:focus-visible:after{opacity:1;transform:translate(-50%)}.empty-state,.preview-surface{position:absolute;inset:0}.empty-state{text-align:center;color:var(--text-secondary);place-items:center;padding:32px;display:grid}.empty-state[hidden]{display:none!important}.empty-state p{font-family:var(--font-display);color:var(--text-primary);margin:0 0 8px;font-size:1.35rem}.preview-surface{place-items:center;display:grid;overflow:hidden}.preview-frame{border-radius:calc(var(--radius-lg) - 4px);width:100%;min-width:0;height:100%;min-height:0;overflow:hidden}.preview-frame svg{-webkit-user-select:none;user-select:none;cursor:grab;width:100%;height:100%;display:block}.preview-frame svg:active{cursor:grabbing}.popover-scrim{z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#03081094;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.popover-card{background:linear-gradient(#11223afa,#08111ffa);border:1px solid #93a6c929;border-radius:24px;flex-direction:column;gap:16px;width:min(720px,100vw - 32px);max-height:min(720px,100vh - 32px);padding:18px;display:flex;box-shadow:0 28px 80px #0000006b}.popover-card-narrow{width:min(480px,100vw - 32px)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.toast{z-index:9999;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:.92rem;font-family:var(--font-ui);white-space:nowrap;pointer-events:none;background:#0e1a2ef5;border:1px solid #93a6c92e;border-radius:999px;padding:10px 20px;animation:.2s both toast-in;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000061}.toast.is-success{color:var(--success);border-color:#86e4a540}.toast.is-error{color:var(--danger);border-color:#ff7a8f40}.toast.is-info{color:var(--accent);border-color:#78d8ff40}.popover-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.popover-header h3{font-family:var(--font-display);margin:0}.popover-description{color:var(--text-secondary);margin:6px 0 0;line-height:1.5}.popover-body{gap:14px;min-height:0;display:grid}.popover-form{flex:1}.popover-field{gap:8px;display:grid}.popover-field-label{color:var(--text-secondary);font-size:.92rem}.popover-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}@media (width<=1080px){.workspace{grid-template-columns:1fr;gap:20px;height:auto}.panel-editor,.panel-preview{height:auto;min-height:auto}.workspace-resizer{display:none}.preview-stage{min-height:460px}}@media (width<=760px){:root{--workspace-gap:4px;--panel-padding:10px}.app-shell{padding:16px}.panel-editor,.panel-preview{padding:var(--panel-padding)}.mermaid-editor-shell,.preview-stage{border-color:#93a6c917}.theme-list{grid-template-columns:repeat(3,minmax(0,1fr))}.panel-header{flex-direction:column;align-items:stretch}.panel-toolbar,.popover-actions,.preview-toolbar,.zoom-controls{justify-content:flex-start}.storage-search-row,.saved-diagram-card{grid-template-columns:1fr}.saved-diagram-actions{justify-content:flex-start}.popover-scrim{padding:16px}.popover-card,.popover-card-narrow{width:min(100%,100vw - 32px);max-height:calc(100vh - 32px)}}