:root{--bg-primary: #1a1b26;--bg-secondary: #16161e;--bg-tertiary: #1f2335;--bg-highlight: #292e42;--text-primary: #c0caf5;--text-secondary: #a9b1d6;--text-muted: #565f89;--accent: #7aa2f7;--accent-hover: #89b4fa;--success: #9ece6a;--warning: #e0af68;--error: #f7768e;--border: #3b4261;--border-focus: #7aa2f7;--header-height: 56px;--status-height: 28px;--sidebar-width: 320px;--panel-header-height: 40px;--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.header{height:var(--header-height);background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0}.logo{display:flex;align-items:center;gap:10px}.logo-icon{font-size:24px}.logo-text{font-size:18px;font-weight:600;color:var(--text-primary)}.toolbar{display:flex;align-items:center;gap:16px}.theme-selector{display:flex;align-items:center;gap:8px}.theme-selector label{color:var(--text-muted);font-size:13px}.theme-selector select{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;transition:border-color var(--transition-fast)}.theme-selector select:hover{border-color:var(--accent)}.theme-selector select:focus{outline:none;border-color:var(--accent)}.btn-icon{display:flex;align-items:center;gap:6px;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;transition:all var(--transition-fast)}.btn-icon:hover{background:var(--bg-highlight);border-color:var(--accent);color:var(--text-primary)}.main-content{flex:1;display:flex;overflow:hidden}.editor-panel,.preview-panel{display:flex;flex-direction:column;min-width:200px}.editor-panel{flex:1;border-right:1px solid var(--border)}.preview-panel{flex:1}.panel-header{height:var(--panel-header-height);background:var(--bg-tertiary);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;font-size:13px;color:var(--text-muted);flex-shrink:0}#editor{flex:1;background:var(--bg-primary);color:var(--text-primary);border:none;padding:16px;font-family:SF Mono,Fira Code,Monaco,Menlo,monospace;font-size:14px;line-height:1.6;resize:none;outline:none}#editor::placeholder{color:var(--text-muted)}.preview-content{flex:1;overflow:auto;padding:20px;display:flex;justify-content:center;align-items:flex-start;background:var(--bg-primary)}.preview-content svg{max-width:100%;height:auto}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);text-align:center;padding:40px}.placeholder span{font-size:48px;margin-bottom:16px}.placeholder p{font-size:14px}.resizer{width:4px;background:var(--border);cursor:col-resize;transition:background var(--transition-fast)}.resizer:hover,.resizer.dragging{background:var(--accent)}.status-bar{height:var(--status-height);background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:12px;color:var(--text-muted);flex-shrink:0}.status-bar .success{color:var(--success)}.status-bar .error{color:var(--error)}.sidebar{position:fixed;top:0;right:0;width:var(--sidebar-width);height:100vh;background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translate(0);transition:transform var(--transition-normal);z-index:100}.sidebar.hidden{transform:translate(100%)}.sidebar-header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border)}.sidebar-header h3{font-size:16px;font-weight:500;color:var(--text-primary)}.btn-close{width:28px;height:28px;background:transparent;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;border-radius:4px;transition:all var(--transition-fast)}.btn-close:hover{background:var(--bg-highlight);color:var(--text-primary)}.history-list{flex:1;overflow-y:auto;padding:8px}.history-item{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px;cursor:pointer;transition:all var(--transition-fast)}.history-item:hover{border-color:var(--accent);background:var(--bg-highlight)}.history-item .time{font-size:12px;color:var(--text-muted);margin-bottom:4px}.history-item .preview-text{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:SF Mono,monospace}.empty-hint{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:14px}.sidebar-footer{padding:16px;border-top:1px solid var(--border)}.btn-danger{width:100%;background:transparent;color:var(--error);border:1px solid var(--error);border-radius:6px;padding:8px 16px;font-size:13px;cursor:pointer;transition:all var(--transition-fast)}.btn-danger:hover{background:var(--error);color:var(--bg-primary)}.overlay{position:fixed;inset:0;background:#00000080;z-index:50;opacity:1;transition:opacity var(--transition-normal)}.overlay.hidden{opacity:0;pointer-events:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.context-menu{position:fixed;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:6px 0;min-width:160px;box-shadow:0 8px 24px #0006;z-index:1000;opacity:0;visibility:hidden;transform:scale(.95);transition:all var(--transition-fast)}.context-menu.visible{opacity:1;visibility:visible;transform:scale(1)}.context-menu-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.context-menu-item:hover{background:var(--bg-highlight);color:var(--text-primary)}.context-menu-item .icon{font-size:14px}.context-menu-divider{height:1px;background:var(--border);margin:6px 0}.seq-config-panel{position:fixed;bottom:var(--status-height);left:0;right:0;background:var(--bg-secondary);border-top:1px solid var(--border);z-index:100;transform:translateY(100%);transition:transform var(--transition-normal)}.seq-config-panel.visible{transform:translateY(0)}.seq-config-panel.collapsed .seq-config-body{display:none}.seq-config-header{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.seq-config-icon{font-size:14px}.seq-config-title{flex:1;font-size:13px;font-weight:500;color:var(--text-primary)}.seq-config-reset,.seq-config-toggle{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text-muted);cursor:pointer;font-size:14px;transition:all var(--transition-fast)}.seq-config-reset:hover,.seq-config-toggle:hover{background:var(--bg-highlight);color:var(--text-primary);border-color:var(--accent)}.seq-config-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:16px;max-height:150px;overflow-y:auto}.seq-config-item{display:flex;flex-direction:column;gap:6px}.seq-config-item label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.seq-config-item input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--bg-highlight);border-radius:2px;outline:none;cursor:pointer}.seq-config-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast)}.seq-config-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.seq-config-item input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:none}.seq-config-value{font-size:12px;color:var(--accent);font-weight:500;text-align:right}