: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: 600px}*{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;height:100vh;gap:0;background:var(--border);overflow:hidden}.sidebar{background:var(--card-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:1000;transition:transform .3s ease}.sidebar-header{padding:20px;border-bottom:1px solid var(--border)}.sidebar-tabs{display:flex;padding:10px;gap:5px;background:#0003}.sidebar-tabs .tab-btn{flex:1;padding:10px 4px;font-size:.8rem;background:transparent;border:1px solid transparent;color:var(--text-muted);border-radius:6px;cursor:pointer;transition:all .2s;font-weight:600}.sidebar-tabs .tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.sidebar-content{flex-grow:1;overflow:hidden;padding:0;display:flex;flex-direction:column}.tab-pane{display:none;height:100%;flex-direction:column;overflow-y:auto;padding:20px}.tab-pane.active{display:flex}.pane-header{margin-bottom:32px}.main-content{background:#000;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center}#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}.resizer{width:4px;background:var(--border);cursor:col-resize;transition:all .2s;z-index:1001}.resizer:hover,.resizer.active{background:var(--accent);width:8px;box-shadow:0 0 10px var(--accent-glow)}.sidebar-toggle-btn{position:absolute;top:20px;left:20px;z-index:1500;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);color:#fff;width:44px;height:44px;border-radius:10px;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1.25rem}.mobile-only{display:none}.panel-header{margin-bottom:24px}h2{font-family:Outfit,sans-serif;font-size:1.2rem;margin-bottom:4px}.subtitle{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.btn-action{background:var(--accent);color:#fff;border:none;padding:12px;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 .label{font-size:.85rem}.btn-action .target{font-size:.65rem;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:.7rem;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:.8rem}.state-viewer{background:#0000004d;border-radius:16px;padding:16px;font-family:JetBrains Mono,monospace;font-size:.75rem;white-space:pre-wrap;border:1px solid var(--border)}.history-list{font-size:.75rem}.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:6px 10px;border-radius:8px;cursor:pointer;font-size:.75rem;transition:all .2s}.btn-mini:hover{background:var(--accent);border-color:var(--accent)}.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;transition:all .2s}.btn-zoom:hover{background:var(--accent);transform:translateY(-2px)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}@media(max-width:1024px){.visualizer-container{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(320px,85vw);transform:translate(-100%);box-shadow:20px 0 50px #00000080}.sidebar.active{transform:translate(0)}.sidebar-toggle-btn{display:flex}.sidebar.active~.main-content .sidebar-toggle-btn{display:none}.mobile-only{display:block}.resizer{display:none}.main-content{height:100vh}}@media(max-width:640px){.sidebar{width:100%}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.test-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}.test-item{background:#ffffff08;border:1px solid var(--border);border-radius:12px;padding:16px;transition:all .2s}.test-item:hover{border-color:var(--accent);background:#ffffff0d}.test-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.test-name-container{flex-grow:1;margin-right:12px}.test-name-input{background:transparent;border:none;color:var(--text);font-size:1rem;font-weight:600;width:100%;padding:2px 4px;border-radius:4px;outline:none;font-family:Inter,sans-serif}.test-name-input:focus{background:#ffffff0d;border-bottom:1px solid var(--accent)}.test-date{font-size:.7rem;color:var(--text-muted)}.test-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.test-actions{display:flex;gap:8px}.btn-test-run{background:var(--success);color:#fff;border:none;padding:6px 12px;border-radius:8px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-test-run:hover{opacity:.9;transform:translateY(-1px)}.btn-test-delete{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2);padding:6px 10px;border-radius:8px;font-size:.75rem;cursor:pointer;transition:all .2s}.btn-test-delete:hover{background:#ef4444;color:#fff}.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:.85rem;border:2px dashed var(--border);border-radius:12px}