: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,textarea{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:20px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}.topbar h1,.panel-header h2,.section-heading h3{font-family:var(--font-display);margin:0}.topbar h1{letter-spacing:.02em;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;line-height:1}.github-link{width:44px;height:44px;color:var(--text-primary);background:#0c182ac7;border:1px solid #93a6c92e;border-radius:14px;justify-content:center;align-items:center;transition:transform .18s,border-color .18s,background .18s;display:inline-flex}.github-link:hover,.github-link:focus-visible{background:#11223aeb;border-color:#78d8ff59;outline:none;transform:translateY(-1px)}.github-link svg{fill:currentColor;width:20px;height:20px}.workspace{grid-template-columns:minmax(360px, var(--editor-width)) 8px minmax(420px, 1fr);gap:var(--workspace-gap);align-items:stretch;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{min-height:calc(100vh - 126px);padding:var(--panel-padding);flex-direction:column;min-width: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,.status-row,.section-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.panel-header{margin-bottom:12px}.editor-field{flex:1;min-height:280px;display:block}.mermaid-input{border:var(--inner-border-width) solid #93a6c921;border-radius:var(--radius-lg);width:100%;height:100%;min-height:340px;color:var(--text-primary);font-family:var(--font-mono);resize:vertical;background:#050b14d9;outline:none;padding:16px;font-size:.96rem;line-height:1.7;transition:border-color .18s,box-shadow .18s,transform .18s}.mermaid-input:focus{border-color:#78d8ff70;box-shadow:0 0 0 4px #78d8ff1a}.status-card,.controls-section{z-index:1;border-radius:var(--radius-lg);background:var(--surface-muted);border:1px solid #93a6c924;margin-top:12px;padding:12px;position:relative}.status-label{color:var(--text-secondary);font-size:.92rem}.status-pill{border-radius:999px;padding:6px 12px;font-size:.88rem;font-weight:700}.status-pill.is-idle{color:var(--accent);background:#78d8ff1f}.status-pill.is-success{color:var(--success);background:#86e4a51f}.status-pill.is-error{color:var(--danger);background:#ff7a8f1f}.status-pill.is-working{color:var(--accent-warm);background:#ffd17324}.status-message{color:var(--text-secondary);margin:10px 0 0;line-height:1.6}.theme-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px;display:grid}.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{outline:none;transform:translateY(-1px)}.ghost-button:disabled{opacity:.42;cursor:not-allowed;transform:none}.zoom-controls{gap:8px;display:flex}.zoom-controls .ghost-button{min-width:54px}.preview-stage{border:var(--inner-border-width) solid #93a6c91c;border-radius:calc(var(--radius-xl) - 8px);flex:1;min-height:540px;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;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;padding:24px;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}@media (width<=1080px){.workspace{grid-template-columns:1fr;gap:20px}.panel-editor,.panel-preview{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}.topbar{margin-bottom:12px}.panel-editor,.panel-preview{padding:var(--panel-padding)}.mermaid-input,.preview-stage{border-color:#93a6c917}.theme-list{grid-template-columns:repeat(3,minmax(0,1fr))}.panel-header{flex-direction:column;align-items:stretch}.zoom-controls{justify-content:flex-start}}