:root{--bg: #030712;--card-bg: rgba(17, 24, 39, .7);--border: rgba(255, 255, 255, .1);--accent: #6366f1;--accent-glow: rgba(99, 102, 241, .3);--text: #f9fafb;--text-muted: #9ca3af;--glass-blur: blur(12px);--success: #10b981;--editor-width: 350px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg);color:var(--text);overflow:hidden;height:100vh}.visualizer-container{display:grid;grid-template-columns:var(--editor-width) auto 1fr 340px;height:100vh;gap:0;background:var(--border)}.panel{background:var(--card-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);padding:20px;overflow-y:auto;display:flex;flex-direction:column}.editor-panel{background:#1e1e1e}.resizer{width:4px;background:var(--border);cursor:col-resize;transition:all .2s;z-index:1000}.resizer:hover,.resizer.active{background:var(--accent);width:8px;box-shadow:0 0 10px var(--accent-glow)}.panel-header{margin-bottom:24px}h2{font-family:Outfit,sans-serif;font-size:1.25rem;margin-bottom:4px}.subtitle{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.mermaid-panel{background:#000;display:flex;justify-content:center;align-items:center;position:relative;padding:0!important;overflow:hidden}#mermaid-root{width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}#mermaid-root svg{width:100%!important;height:100%!important;max-width:none!important}.btn-action{background:var(--accent);color:#fff;border:none;padding:14px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:12px;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;box-shadow:0 4px 12px var(--accent-glow)}.btn-action:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn-action span.label{font-size:.9rem}.btn-action span.target{font-size:.7rem;opacity:.8}.input-group{margin-bottom:12px;padding:12px;background:#ffffff08;border-radius:12px;border:1px solid var(--border)}.input-field{margin-bottom:12px}.input-field label{display:block;font-size:.75rem;color:var(--text-muted);margin-bottom:4px}.input-field input{width:100%;background:var(--bg);border:1px solid var(--border);color:#fff;padding:8px;border-radius:8px;font-size:.85rem}.table-input-container{margin-top:8px;background:#0006;border-radius:8px;border:1px solid var(--border);overflow:hidden}.input-table{width:100%;border-collapse:collapse;font-size:.75rem}.input-table th{text-align:left;padding:8px;background:#ffffff0d;color:var(--text-muted);font-weight:600;border-bottom:1px solid var(--border)}.input-table td{padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.05)}.input-table input{width:100%;background:transparent;border:1px solid transparent;color:#fff;padding:4px;border-radius:4px}.input-table input:focus{background:#ffffff0d;border-color:var(--accent);outline:none}.btn-table-add{width:100%;padding:6px;background:#10b9811a;color:var(--success);border:none;border-top:1px solid var(--border);cursor:pointer;font-size:.7rem;font-weight:600}.btn-table-del{background:transparent;border:none;color:#ef4444;cursor:pointer;padding:4px}.zoom-controls{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:100}.btn-zoom{width:36px;height:36px;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:all .2s;-webkit-user-select:none;user-select:none}.btn-zoom:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}.btn-zoom:active{transform:translateY(0)}.state-viewer{background:#0000004d;border-radius:16px;padding:16px;font-family:JetBrains Mono,monospace;font-size:.8rem;white-space:pre-wrap;flex-grow:1;border:1px solid var(--border)}.tab-bar{display:flex;gap:8px;margin-bottom:20px;padding:4px;background:#0003;border-radius:12px;border:1px solid var(--border)}.tab-btn{flex:1;padding:8px;border:none;background:transparent;color:var(--text-muted);font-size:.8rem;font-weight:600;cursor:pointer;border-radius:8px;transition:all .2s}.tab-btn.active{background:var(--accent);color:#fff}.hidden{display:none!important}.history-list{margin-top:24px;font-size:.8rem}.history-item{padding:8px 0;border-bottom:1px solid var(--border)}.history-item .time{color:var(--text-muted);margin-right:8px}.history-item .event{color:var(--accent);font-weight:600}.btn-mini{background:#ffffff0d;border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s}.btn-mini:hover{background:var(--accent);border-color:var(--accent)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}