:root{--bg-charcoal: #0a0a0a;--bg-graphite: #111111;--bg-editor: #0d0d0d;--surface-fill: #0f0f0f;--surface-glass: #111111;--surface-hover: #161616;--surface-active: #ffffff;--border-subtle: #2b2b2b;--border-glass: #212121;--border-divider: #232323;--text-primary: #ffffff;--text-hover: #cecece;--text-default: #9d9d9d;--text-muted: #858585;--text-label: #6c6c6c;--text-status: #606060;--text-disabled: #3b3b3b;--inverse-bg: #ffffff;--inverse-text: #000000;--color-success: #4ade80;--color-error: #ef4444;--font-sans: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace;--shadow-panel: 0 4px 24px rgba(0, 0, 0, .4);--shadow-glass: 0 8px 32px rgba(0, 0, 0, .6);--ease-out: cubic-bezier(.215, .61, .355, 1);--duration-fast: .15s;--duration-instant: .1s}*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%;width:100%;overflow:hidden;background-color:var(--bg-charcoal);color:var(--text-primary);font-family:var(--font-sans)}.app-root{display:flex;flex-direction:column;height:100vh;width:100vw;background:radial-gradient(circle at center,#1a1a1a 0%,var(--bg-charcoal) 100%)}.top-bar{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:relative;z-index:10}.top-bar-zone{display:flex;align-items:center}.top-bar-zone.left{flex:1;justify-content:flex-start}.top-bar-zone.center{flex:0 0 auto;justify-content:center}.top-bar-zone.right{flex:1;justify-content:flex-end}.brand-identity{display:flex;align-items:center;gap:12px;-webkit-user-select:none;user-select:none}.brand-wordmark{font-weight:300;font-size:16px;letter-spacing:.05em;color:#fff}.view-selector-pill{background:var(--surface-glass);border:1px solid var(--border-glass);border-radius:999px;padding:4px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 12px #0000001a}.selector-row{display:flex;gap:2px}.view-option{background:transparent;border:none;cursor:pointer;padding:0;border-radius:999px;transition:all var(--duration-fast) var(--ease-out);color:var(--text-muted)}.option-inner{display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px}.option-label{font-size:13px;font-weight:500;font-family:var(--font-sans)}.view-option i{font-size:13px}.view-option:hover:not(.active){color:var(--text-hover)}.view-option:hover:not(.active) .option-inner{background:#161616}.view-option.active{color:var(--inverse-text)}.view-option.active .option-inner{background:var(--inverse-bg);box-shadow:0 2px 8px #0003}.utility-toolbar{display:flex;gap:8px}.utility-btn{width:36px;height:36px;border-radius:6px;background:transparent;border:none;color:var(--text-default);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-instant) ease-out}.utility-btn i{font-size:16px;stroke-width:1.5px}.utility-btn:hover{color:var(--text-primary);background:var(--surface-hover)}.utility-btn:active{background:var(--inverse-bg);color:var(--inverse-text);transform:scale(.95)}.workspace{flex:1;display:flex;padding:0 16px 16px;gap:0;position:relative;overflow:hidden}.panel-frame{display:flex;flex-direction:column;background:var(--surface-fill);border:1px solid var(--border-subtle);border-radius:4px;box-shadow:var(--shadow-panel);overflow:hidden;position:relative;transition:width .1s ease-out}.panel-header{height:32px;flex-shrink:0;background:#0f0f0f;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 12px}.header-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-label)}.header-data{font-family:var(--font-mono);font-size:11px;color:var(--text-status)}.modified-indicator{width:6px;height:6px;border-radius:50%;background:#fff;opacity:0;transition:opacity .3s ease}.modified-indicator.visible{opacity:.6;animation:pulse-dot 2s infinite ease-in-out}@keyframes pulse-dot{0%,to{opacity:.4}50%{opacity:.7}}.editor-area{flex:1;position:relative;background:var(--bg-editor);overflow:hidden}.monaco-host{width:100%;height:100%}.editor-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-editor);z-index:5;gap:16px}.editor-overlay.hidden{display:none}.loading-pulse{font-family:var(--font-sans);font-size:24px;color:var(--text-status);animation:pulse-text 1.5s infinite}@keyframes pulse-text{0%,to{opacity:.3}50%{opacity:.6}}.error-msg{font-size:13px;color:var(--text-muted)}.retry-btn{background:var(--inverse-bg);color:var(--inverse-text);border:none;padding:8px 16px;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;transition:transform .1s}.retry-btn:hover{transform:scale(1.05)}.retry-btn:active{background:#e0e0e0;transform:scale(.95)}.split-divider{width:16px;flex-shrink:0;display:flex;justify-content:center;cursor:col-resize;position:relative;z-index:20}.divider-track{width:8px;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.divider-line{width:2px;height:100%;background:#232323;border-radius:1px;transition:background .2s}.divider-grip{position:absolute;display:flex;flex-direction:column;gap:4px}.grip-dot{width:3px;height:3px;background:#3b3b3b;border-radius:50%;transition:background .2s}.split-divider:hover .divider-line{background:#545454}.split-divider:hover .grip-dot{background:#858585}.split-divider.dragging .divider-line{background:#fff}.preview-area{flex:1;position:relative;background:#fff;display:flex;flex-direction:column}.preview-frame{flex:1;border:none;width:100%;height:100%;background:#fff}.preview-empty{position:absolute;inset:0;background:#f5f5f5;display:flex;align-items:center;justify-content:center;color:#999;font-size:14px;pointer-events:none}.preview-empty.hidden{display:none}.refresh-bar{position:absolute;top:0;left:0;height:2px;background:#ccc;width:0%;z-index:10;transition:opacity .2s}.refresh-bar.animating{width:100%;transition:width .2s linear}.status-strip{height:28px;flex-shrink:0;background:#0f0f0f;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.status-zone{display:flex;align-items:center;gap:12px}.status-text{font-family:var(--font-mono);font-size:11px;color:var(--text-status)}.status-separator{width:1px;height:12px;background:#2f2f2f}.status-badge{font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-status);background:#161616;padding:2px 6px;border-radius:4px}.connection-dot{width:6px;height:6px;border-radius:50%;background:#393939;transition:background-color .3s}.connection-dot.connected{background:#308951}.code-panel,.preview-panel{flex:1}body[data-mode=code] .preview-panel,body[data-mode=code] .split-divider{display:none}body[data-mode=code] .code-panel{flex:1;margin-right:0}body[data-mode=preview] .code-panel,body[data-mode=preview] .split-divider{display:none}body[data-mode=preview] .preview-panel{flex:1;margin-left:0}@media(max-width:768px){.top-bar{padding:0 12px}.brand-wordmark,.option-label{display:none}.option-inner{padding:6px 12px}#mode-split{display:none}.split-divider{display:none!important}.workspace{flex-direction:column;gap:8px}body[data-mode=split] .code-panel{display:flex;flex:1}}