:root{--bg-color: #06070a;--panel-bg: #0b0d13;--panel-header-bg: #0f121a;--panel-border: #1d2230;--sidebar-bg: #090a0e;--text-primary: #ffffff;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--accent-color: #8842FD;--accent-hover: #7334ec;--accent-glow: rgba(136, 66, 253, 0.15);--accent-purple-light: #C394FF;--accent-plum: #43003B;--button-secondary-bg: #151821;--button-secondary-hover: #1f2433;--divider-color: #1a1e29;--divider-hover: #8842FD;--shadow-color: rgba(0, 0, 0, 0.6);--card-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);--scrollbar-thumb: #1f2433;--scrollbar-thumb-hover: #2d344a;--editor-content-left: 68px}[data-theme="light"]{--bg-color: #f6f8fa;--panel-bg: #ffffff;--panel-header-bg: #f1f4f8;--panel-border: #e1e6eb;--sidebar-bg: #fafbfc;--text-primary: #020617;--text-secondary: #334155;--text-muted: #475569;--accent-color: #8842FD;--accent-hover: #7334ec;--accent-glow: rgba(136, 66, 253, 0.1);--accent-purple-light: #7334ec;--accent-plum: #f1e9ff;--button-secondary-bg: #f1f4f8;--button-secondary-hover: #e2e8f0;--divider-color: #e2e8f0;--divider-hover: #8842FD;--shadow-color: rgba(0, 0, 0, 0.05);--card-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);--scrollbar-thumb: #cbd5e1;--scrollbar-thumb-hover: #94a3b8}*{box-sizing: border-box;margin: 0;padding: 0;scrollbar-width: thin;scrollbar-color: var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width: 4px;height: 4px}::-webkit-scrollbar-track{background: transparent}::-webkit-scrollbar-thumb{background: var(--scrollbar-thumb);border-radius: 10px}::-webkit-scrollbar-thumb:hover{background: var(--scrollbar-thumb-hover)}body,button,input,select,textarea{font-family: 'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}body{background: var(--bg-color);color: var(--text-primary);height: 100vh;display: flex;overflow: hidden;transition: background 0.16s ease,color 0.16s ease}i[data-lucide]{display: inline-block;width: 16px;height: 16px;flex: 0 0 16px}.app-container{display: flex;width: 100vw;height: 100vh;position: relative}.sidebar{width: 260px;background: var(--sidebar-bg);border-right: 1px solid var(--panel-border);display: flex;flex-direction: column;justify-content: space-between;padding: 24px 16px 20px;flex-shrink: 0;z-index: 10;transition: all 0.3s ease;overflow-x: hidden;overflow-y: auto}.brand-section{display: flex;align-items: center;margin-bottom: 24px;padding-left: 8px;height: 34px}.brand-title{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 1.2rem;font-weight: 700;letter-spacing: -0.02em;color: var(--text-primary)}.nav-menu{display: flex;flex-direction: column;gap: 4px;flex-grow: 1}.nav-button{display: flex;align-items: center;gap: 12px;background: transparent;border: 1px solid transparent;color: var(--text-secondary);padding: 10px 14px;border-radius: 8px;cursor: pointer;font-size: 0.88rem;font-weight: 500;text-align: left;transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);width: 100%;text-decoration: none}.nav-button svg{width: 16px;height: 16px;flex-shrink: 0}.nav-button:hover{background: var(--button-secondary-hover);color: var(--text-primary);transform: translateX(4px)}.nav-button.active{background: var(--accent-color);color: #ffffff;border: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 4px 12px var(--accent-glow)}.nav-button.active:hover{background: var(--accent-hover)}.menu-category{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 0.68rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.12em;color: var(--text-muted);margin-top: 18px;margin-bottom: 4px;padding-left: 12px;user-select: none;touch-action: none}.nav-menu>.menu-category:first-child{margin-top: 0}.footer-section{display: flex;flex-direction: column;gap: 8px;padding-top: 12px;border-top: 1px solid var(--panel-border)}.theme-toggle{display: flex;align-items: center;justify-content: space-between;background: var(--button-secondary-bg);border: 1px solid var(--panel-border);padding: 8px 12px;border-radius: 8px;color: var(--text-secondary);cursor: pointer;transition: all 0.12s ease}.theme-toggle:hover{color: var(--text-primary);background: var(--button-secondary-hover)}.theme-toggle span{font-size: 0.85rem;font-weight: 500}.theme-toggle svg{width: 14px;height: 14px}.theme-icon-container{display: inline-flex;align-items: center;justify-content: center}[data-theme="dark"] .icon-sun{display: none}[data-theme="light"] .icon-moon{display: none}.workspace{display: flex;flex-grow: 1;height: 100vh;position: relative;overflow: hidden;--split-percent: var(--saved-split-percent, 55%)}.panel{display: flex;flex-direction: column;background: var(--panel-bg);border: 1px solid var(--panel-border);border-radius: 12px;margin: 16px;overflow: hidden;box-shadow: var(--card-shadow);transition: opacity 0.16s ease,transform 0.16s ease;position: relative;container-type: inline-size}.editor-panel{flex: 0 1 var(--split-percent);min-width: var(--editor-panel-min, 420px);margin-right: 8px}.preview-panel{flex: 1 1 0%;min-width: var(--preview-panel-min, 420px);margin-left: 8px}.panel-header{display: flex;align-items: center;justify-content: space-between;padding: 0 12px;height: 40px;flex-shrink: 0;border-bottom: 1px solid var(--panel-border);background: var(--panel-header-bg);user-select: none}.panel-header-left{display: flex;align-items: stretch;height: 100%}.panel-title{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 0.8rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.08em;color: var(--text-secondary);display: flex;align-items: center;gap: 8px}.filename-container{display: inline-flex;align-items: baseline;background: transparent;gap: 0px}.filename-container:hover .filename-input,.filename-input:focus{border-bottom-color: var(--text-muted)}.filename-input{background: transparent;border: none;color: var(--text-primary);font-family: 'JetBrains Mono',Consolas,'Courier New',monospace;font-size: 0.82rem;font-weight: 500;padding: 2px 0 0px 0;margin: 0;outline: none;text-align: left;border-bottom: 1px dashed transparent;transition: border-color 0.2s ease;line-height: 1;max-width: 18ch}.filename-extension{font-family: 'JetBrains Mono',Consolas,'Courier New',monospace;font-size: 0.82rem;font-weight: 500;color: var(--text-secondary);user-select: none;text-transform: lowercase;line-height: 1}.panel-title svg{width: 16px;height: 16px}.editor-mode-selector{display: flex;background: var(--button-secondary-bg);border: 1px solid var(--panel-border);border-radius: 6px;padding: 2px;gap: 2px}.mode-btn{background: transparent;border: none;border-radius: 4px;color: var(--text-secondary);height: 22px;padding: 0 8px;font-size: 0.72rem;font-weight: 600;display: flex;align-items: center;gap: 6px;cursor: pointer;transition: all 0.15s ease;user-select: none;box-sizing: border-box}.mode-btn svg{width: 12px;height: 12px}.mode-btn:not(.active):hover{color: var(--text-primary);background: rgba(255, 255, 255, 0.05)}[data-theme="light"] .mode-btn:not(.active):hover{background: rgba(0, 0, 0, 0.03)}.mode-btn.active{background: var(--accent-color);color: #ffffff;box-shadow: 0 2px 6px var(--accent-glow)}.mode-btn:disabled{opacity: 0.35;cursor: not-allowed;pointer-events: none}.active-file-summary{min-width: 0;max-width: min(360px, 42vw);height: 30px;align-items: center;gap: 5px;margin-right: auto;padding: 0 9px;border: 1px solid transparent;border-radius: 7px;background: transparent;color: var(--text-secondary);font: inherit;font-size: 0.74rem;font-weight: 600;cursor: pointer;transition: color 0.12s ease,background 0.12s ease,border-color 0.12s ease}.active-file-summary:hover{color: var(--text-primary);background: var(--button-secondary-hover);border-color: var(--panel-border)}.active-file-summary span{min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.active-file-summary .active-file-chevron{width: 12px;height: 12px;color: var(--text-muted)}.editor-workspace-wrapper{display: flex;width: 100%;height: 100%;overflow: hidden;position: relative}.file-explorer{width: var(--explorer-width, 220px);background: var(--panel-header-bg);border-right: 1px solid var(--panel-border);display: flex;flex-direction: column;flex-shrink: 0;transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1),border-color 0.2s ease;overflow: hidden;position: relative}.file-explorer.collapsed{width: 0 !important;border-right-color: transparent}.file-explorer.resizing{transition: none !important}.explorer-resizer{position: absolute;top: 0;right: -4px;width: 8px;height: 100%;cursor: col-resize;z-index: 10;background: transparent}.file-explorer-header{display: flex;align-items: center;justify-content: space-between;padding: 6px 12px;min-height: 46px;border-bottom: 1px solid var(--panel-border);font-family: 'Outfit',sans-serif;font-size: 0.68rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.08em;color: var(--text-muted);user-select: none;flex-shrink: 0}.file-explorer-heading{min-width: 0;display: flex;flex-direction: column;gap: 2px;line-height: 1.1}.file-explorer-heading small{overflow: hidden;color: var(--text-muted);font-family: 'Inter',system-ui,sans-serif;font-size: 0.62rem;font-weight: 500;letter-spacing: 0;text-overflow: ellipsis;text-transform: none;white-space: nowrap}.file-explorer-actions{display: flex;gap: 4px;align-items: center}.file-explorer-btn{background: transparent;border: none;color: var(--text-secondary);cursor: pointer;padding: 4px;border-radius: 4px;display: flex;align-items: center;justify-content: center;transition: all 0.12s ease}.file-explorer-btn:hover{color: var(--text-primary);background: var(--button-secondary-hover)}.file-explorer-btn svg{width: 14px;height: 14px;flex-shrink: 0}.file-list{flex-grow: 1;overflow-x: hidden;overflow-y: auto;padding: 6px 4px;display: flex;flex-direction: column;gap: 1px;border: 1px solid transparent;border-radius: 8px;transition: border-color 0.12s ease,background 0.12s ease}.file-list.drop-inside{border-color: rgba(136, 66, 253, 0.45);background: rgba(136, 66, 253, 0.06)}.file-explorer.external-drop-target{border-color: rgba(136, 66, 253, 0.7);box-shadow: inset 0 0 0 1px rgba(136, 66, 253, 0.26),0 0 28px rgba(136, 66, 253, 0.12);animation: explorerDropPulse 1.1s ease-in-out infinite alternate}.file-item{display: flex;align-items: center;justify-content: space-between;padding: 4px 6px;border-radius: 6px;cursor: pointer;color: var(--text-secondary);font-size: 0.76rem;font-weight: 500;transition: all 0.12s ease;user-select: none;position: relative;gap: 8px;min-width: 0}.file-item.dragging,.folder-item.dragging{opacity: 0.45}.file-item.drop-inside,.folder-item.drop-inside{background: rgba(136, 66, 253, 0.16);color: var(--text-primary);outline: 1px solid rgba(136, 66, 253, 0.45)}.file-item.drop-before::before,.file-item.drop-after::after,.folder-item.drop-before::before,.folder-item.drop-after::after{content: '';position: absolute;left: 8px;right: 8px;height: 2px;border-radius: 999px;background: var(--accent-color);box-shadow: 0 0 8px var(--accent-glow)}.file-item.drop-before::before,.folder-item.drop-before::before{top: -2px}.file-item.drop-after::after,.folder-item.drop-after::after{bottom: -2px}.file-item:hover{background: var(--button-secondary-hover);color: var(--text-primary)}.file-item.active{background: rgba(136, 66, 253, 0.08);color: var(--accent-purple-light);font-weight: 600}.file-item.preview-entry:not(.active){color: var(--text-primary)}.file-item.preview-entry .file-item-info svg{color: #10b981}.file-item.preview-entry-warning .file-item-info svg,.file-item.preview-entry-warning .preview-entry-btn{color: #f59e0b}[data-theme="light"] .file-item.active{background: rgba(136, 66, 253, 0.06)}.file-item-info{display: flex;align-items: center;gap: 4px;flex-grow: 1;min-width: 0;overflow: hidden}.file-chevron-placeholder{width: 14px;height: 14px;flex-shrink: 0}.file-item-info svg{width: 14px;height: 14px;flex-shrink: 0}.file-item-name,.folder-name{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex-grow: 1}.file-item-actions{display: flex;gap: 2px;opacity: 0;max-width: 0;overflow: hidden;transition: max-width 0.15s ease,opacity 0.15s ease;flex-shrink: 0}.file-item.preview-entry .file-item-actions{opacity: 1;max-width: 104px}.file-item:hover .file-item-actions{opacity: 1;max-width: 104px}.file-item-btn{background: transparent;border: none;color: var(--text-muted);cursor: pointer;padding: 2px;border-radius: 3px;display: flex;align-items: center;justify-content: center;transition: all 0.12s ease}.file-item-btn:hover{color: var(--text-primary);background: rgba(255, 255, 255, 0.08)}.file-item-btn.preview-entry-btn{color: #10b981}.file-item-btn.preview-entry-btn:hover{color: #34d399;background: rgba(16, 185, 129, 0.1)}.file-item-btn:disabled{color: #10b981;cursor: default}.file-item-btn:disabled:hover{background: transparent}.file-item-btn svg{width: 12px;height: 12px;flex-shrink: 0}[data-theme="light"] .file-item-btn:hover{background: rgba(0, 0, 0, 0.05)}.file-rename-input{background: var(--button-secondary-bg);border: 1px solid var(--accent-color) !important;border-radius: 4px;color: var(--text-primary);padding: 2px 4px;font-family: inherit;font-size: 0.76rem;outline: none;width: 100%;box-sizing: border-box}.folder-item{display: flex;align-items: center;justify-content: space-between;padding: 4px 6px;border-radius: 6px;cursor: pointer;color: var(--text-secondary);font-size: 0.76rem;font-weight: 600;transition: all 0.12s ease;user-select: none;position: relative;gap: 8px;min-width: 0}.folder-item:hover{background: var(--button-secondary-hover);color: var(--text-primary)}.folder-item-info{display: flex;align-items: center;gap: 4px;flex-grow: 1;min-width: 0;overflow: hidden}.folder-item-info svg{width: 14px;height: 14px;flex-shrink: 0}.folder-chevron{color: var(--text-muted);transition: transform 0.15s ease}.folder-chevron.collapsed{transform: rotate(-90deg)}.folder-children{padding-left: 0px;margin-left: 13px;border-left: 1px dashed var(--panel-border);display: flex;flex-direction: column;gap: 1px}.folder-children.collapsed{display: none}.folder-item-actions{display: flex;gap: 2px;opacity: 0;max-width: 0;overflow: hidden;transition: max-width 0.15s ease,opacity 0.15s ease;flex-shrink: 0}.folder-item:hover .folder-item-actions{opacity: 1;max-width: 120px}.folder-item-btn{background: transparent;border: none;color: var(--text-muted);cursor: pointer;padding: 2px;border-radius: 3px;display: flex;align-items: center;justify-content: center;transition: all 0.12s ease}.folder-item-btn:hover{color: var(--text-primary);background: rgba(255, 255, 255, 0.08)}.folder-item-btn svg{width: 12px;height: 12px;flex-shrink: 0}[data-theme="light"] .folder-item-btn:hover{background: rgba(0, 0, 0, 0.05)}.folder-rename-input{background: var(--button-secondary-bg);border: 1px solid var(--accent-color) !important;border-radius: 4px;color: var(--text-primary);padding: 2px 4px;font-family: inherit;font-size: 0.76rem;outline: none;width: 100%;box-sizing: border-box}.explorer-toggle-btn{background: transparent;border: none;color: var(--text-secondary);cursor: pointer;padding: 6px;border-radius: 6px;display: flex;align-items: center;justify-content: center;transition: all 0.12s ease;height: 28px;width: 28px;margin-right: 8px;flex-shrink: 0}.explorer-toggle-btn:hover{color: var(--text-primary);background: var(--button-secondary-hover)}.explorer-toggle-btn.active{color: var(--accent-purple-light);background: rgba(136, 66, 253, 0.08)}[data-theme="light"] .explorer-toggle-btn.active{background: rgba(136, 66, 253, 0.05)}.panel-badge{background: var(--button-secondary-bg);color: var(--text-secondary);font-size: 0.7rem;font-weight: 600;padding: 2px 6px;border-radius: 4px;border: 1px solid var(--panel-border);display: inline-flex;align-items: center;gap: 6px}.live-indicator{color: #10b981;background: rgba(16, 185, 129, 0.06);border-color: rgba(16, 185, 129, 0.15)}.live-indicator[data-state="rendering"]{color: #f59e0b;background: rgba(245, 158, 11, 0.07);border-color: rgba(245, 158, 11, 0.18)}.live-indicator[data-state="rendering"] .indicator-dot{background-color: #f59e0b;box-shadow: 0 0 8px #f59e0b}.live-indicator[data-state="error"]{color: #f59e0b;background: rgba(245, 158, 11, 0.07);border-color: rgba(245, 158, 11, 0.2)}.live-indicator[data-state="error"] .indicator-dot{background-color: #f59e0b;box-shadow: 0 0 8px #f59e0b}.live-indicator[data-state="ready"],.live-indicator[data-state="idle"]{color: #10b981;background: rgba(16, 185, 129, 0.06);border-color: rgba(16, 185, 129, 0.15)}.indicator-dot{width: 6px;height: 6px;border-radius: 50%;background-color: #10b981;display: inline-block;box-shadow: 0 0 8px #10b981}.preview-reload-btn{background: var(--button-secondary-bg);border: 1px solid var(--panel-border);border-radius: 6px;width: 28px;height: 28px;display: flex;align-items: center;justify-content: center;color: var(--text-secondary);cursor: pointer;transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);padding: 0;box-sizing: border-box}.preview-reload-btn svg{width: 12px;height: 12px;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.preview-reload-btn:hover{color: var(--text-primary);background: var(--button-secondary-hover);border-color: var(--text-muted)}.preview-reload-btn:disabled{opacity: 0.38;cursor: default;color: var(--text-muted)}.preview-reload-btn:disabled:hover{color: var(--text-muted);background: var(--button-secondary-bg);border-color: var(--panel-border)}.preview-home-btn:not(:disabled){color: var(--accent-color);border-color: rgba(136, 66, 253, 0.34);background: rgba(136, 66, 253, 0.08)}.preview-reload-btn.is-spinning svg{animation: spin-once 0.4s cubic-bezier(0.4, 0, 0.2, 1)}.preview-console-btn{position: relative}.preview-console-btn.has-diagnostics{color: #d5a64a}.preview-console-btn.has-diagnostics:hover{color: #e0b45d}.preview-console-badge{position: absolute;top: 5px;right: 5px;width: 5px;height: 5px;min-width: 0;padding: 0;border-radius: 50%;background: #d5a64a;font-size: 0;box-shadow: 0 0 0 1.5px var(--button-secondary-bg)}@keyframes spin-once{0%{transform: rotate(0deg)}100%{transform: rotate(360deg)}}[data-theme="light"] .preview-reload-btn:hover{background: rgba(0, 0, 0, 0.03)}[data-theme="light"] .preview-reload-btn:disabled:hover{background: var(--button-secondary-bg)}.preview-controls{display: flex;align-items: center;background: var(--button-secondary-bg);border: 1px solid var(--panel-border);border-radius: 6px;padding: 2px;gap: 2px}.control-btn{background: transparent;border: none;border-radius: 4px;color: var(--text-secondary);padding: 3px 6px;font-size: 0.72rem;font-weight: 500;display: flex;align-items: center;gap: 6px;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),background 0.15s ease,color 0.15s ease}.control-btn svg{width: 12px;height: 12px}.control-btn-icon{width: 24px;height: 24px;justify-content: center;padding: 0}.control-btn:hover{color: var(--text-primary);background: rgba(255, 255, 255, 0.05)}.control-btn.active{background: var(--accent-color);color: #ffffff}.panel-body{flex-grow: 1;position: relative;overflow: hidden}.tab-content{display: none;width: 100%;height: 100%}.tab-content.active{display: block}.resize-handle{width: var(--workspace-resizer-width, 16px);cursor: col-resize;position: relative;z-index: 5;margin: 16px -10px;user-select: none}.resize-line{position: absolute;top: var(--mouse-y, 50%);left: 50%;transform: translate(-50%, -50%);width: 2px;height: 80px;border-radius: 2px;background: transparent;opacity: 0;transition: opacity 0.15s ease,background-color 0.15s ease;pointer-events: none}.resize-handle:hover .resize-line{opacity: 1;background: var(--text-muted)}.resize-handle.active .resize-line{opacity: 1;background: var(--accent-color)}.resize-overlay{position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 100;display: none}.resize-overlay.active{display: block}.editor-container{--editor-line-number-center: calc(var(--editor-content-left) / 2);width: 100%;height: 100%;position: absolute;top: 0;left: 0}.monaco-editor .margin-view-overlays .line-numbers{left: var(--editor-line-number-center) !important;width: max-content !important;overflow: visible;font-variant-numeric: tabular-nums;text-align: center !important;text-indent: 0;white-space: nowrap;transform: translateX(-50%)}.editor-zoom-indicator{position: absolute;top: 12px;right: 36px;z-index: 20;min-width: 52px;padding: 6px 10px;border: 1px solid rgba(136, 66, 253, 0.38);border-radius: 9px;background: color-mix(in srgb, var(--panel-bg) 88%, transparent);box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);color: var(--text-primary);font: 700 0.78rem/1 'JetBrains Mono',Consolas,monospace;text-align: center;pointer-events: none;opacity: 0;transform: translateY(-5px) scale(0.96);transition: opacity 0.14s ease,transform 0.14s ease}.editor-zoom-indicator.visible{opacity: 1;transform: translateY(0) scale(1)}.editor-placeholder{position: absolute;top: 16px;left: var(--editor-content-left);z-index: 2;color: var(--text-secondary);font-family: 'JetBrains Mono',Consolas,monospace;font-size: var(--editor-font-size, 13px);line-height: var(--editor-line-height, 18px);pointer-events: none;user-select: none;opacity: 0.72;transition: opacity 0.12s ease}.editor-placeholder.hidden{opacity: 0}.fallback-textarea{width: 100%;height: 100%;border: none;outline: none;position: relative;z-index: 2;background: transparent;color: var(--text-primary);font-family: 'JetBrains Mono',Consolas,monospace;font-size: var(--editor-font-size, 13px);line-height: var(--editor-line-height, 18px);padding: 16px 16px 16px var(--editor-content-left);resize: none;box-sizing: border-box;white-space: pre;overflow: auto}.fallback-line-numbers{position: absolute;z-index: 1;top: 16px;left: 0;width: var(--editor-content-left);color: var(--text-muted);font-family: 'JetBrains Mono',Consolas,monospace;font-size: var(--editor-font-size, 13px);line-height: var(--editor-line-height, 18px);font-variant-numeric: tabular-nums;text-align: center;white-space: pre;pointer-events: none;user-select: none;will-change: transform}.fallback-current-line{position: absolute;z-index: 0;left: 0;right: 0;top: 16px;height: var(--editor-line-height, 18px);background: rgba(148, 163, 184, 0.055);pointer-events: none;will-change: transform}.editor-container.monaco-ready .fallback-editor-chrome{display: none}.asset-preview-panel{position: absolute;inset: 0;background: var(--panel-bg);display: flex;flex-direction: column;min-width: 0}.asset-preview-stage{flex: 1 1 auto;min-height: 0;display: flex;align-items: center;justify-content: center;padding: 24px;background: linear-gradient(45deg, rgba(148, 163, 184, 0.05) 25%, transparent 25%),linear-gradient(-45deg, rgba(148, 163, 184, 0.05) 25%, transparent 25%),linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.05) 75%),linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.05) 75%);background-size: 18px 18px;background-position: 0 0,0 9px,9px -9px,-9px 0;overflow: auto}.asset-preview-stage.is-image-preview{padding: 0;overflow: hidden}.asset-image-viewport{position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;cursor: grab;touch-action: none;outline: none}.asset-image-viewport.is-panning{cursor: grabbing}.asset-image-viewport:focus-visible{outline: 1px solid var(--accent-color);outline-offset: -3px}.asset-preview-image{max-width: 100%;max-height: 100%;object-fit: contain;border-radius: 6px;filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));-webkit-user-drag: none;user-drag: none;user-select: none;transform-origin: center center;will-change: transform;transition: transform 0.08s linear;pointer-events: none}.asset-image-viewport.is-panning .asset-preview-image{transition: none}.asset-zoom-controls{position: absolute;right: 12px;bottom: 12px;z-index: 2;display: inline-flex;align-items: center;gap: 4px;padding: 4px;border: 1px solid var(--panel-border);border-radius: 8px;background: color-mix(in srgb, var(--panel-bg) 88%, transparent);box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);pointer-events: auto}.asset-zoom-btn{min-width: 28px;height: 28px;border: none;border-radius: 5px;background: transparent;color: var(--text-secondary);display: inline-flex;align-items: center;justify-content: center;cursor: pointer;font-size: 0.72rem;font-weight: 700;transition: background 0.12s ease,color 0.12s ease}.asset-zoom-btn:hover{background: var(--button-secondary-hover);color: var(--text-primary)}.asset-zoom-btn svg{width: 14px;height: 14px}.asset-zoom-value{min-width: 48px;font-family: 'JetBrains Mono',Consolas,monospace}.asset-preview-stage audio,.asset-preview-stage video{width: min(680px, 92%);max-height: 82%}.asset-preview-placeholder{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;color: var(--text-secondary);border: 1px dashed var(--panel-border);border-radius: 8px;padding: 28px;min-width: 180px;background: rgba(255, 255, 255, 0.02)}.asset-preview-placeholder svg{width: 28px;height: 28px;color: var(--accent-purple-light)}.asset-preview-placeholder span{font-family: 'JetBrains Mono',Consolas,monospace;font-size: 0.78rem;color: var(--text-muted)}.asset-preview-details{flex: 0 0 auto;display: flex;align-items: center;justify-content: space-between;gap: 16px;padding: 12px 14px;border-top: 1px solid var(--panel-border);background: var(--panel-header-bg)}.asset-preview-name{font-family: 'JetBrains Mono',Consolas,monospace;font-size: 0.82rem;color: var(--text-primary);overflow-wrap: anywhere}.asset-preview-meta{margin-top: 4px;font-size: 0.72rem;color: var(--text-muted)}.asset-preview-actions{display: flex;flex-wrap: wrap;justify-content: flex-end;gap: 6px}.asset-action-btn{display: inline-flex;align-items: center;gap: 6px;min-height: 28px;border: 1px solid var(--panel-border);border-radius: 6px;background: var(--button-secondary-bg);color: var(--text-secondary);padding: 5px 8px;font-size: 0.72rem;font-weight: 600;cursor: pointer;transition: all 0.12s ease}.asset-action-btn:hover:not(:disabled){background: var(--button-secondary-hover);color: var(--text-primary)}.asset-action-btn:disabled{opacity: 0.45;cursor: not-allowed}.asset-action-btn svg{width: 13px;height: 13px}.iframe-wrapper{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: transparent;position: relative;overflow: auto;transition: background 0.16s ease;padding: 0}#content-preview{position: relative;display: flex;flex-direction: column;min-height: 0}#content-preview .iframe-wrapper{flex: 1 1 auto;min-height: 0}.preview-console{--preview-console-height: 260px;flex: 0 0 clamp(128px, var(--preview-console-height), calc(100% - 96px));min-height: 128px;max-height: calc(100% - 96px);border-top: 1px solid var(--panel-border);background: #111218;color: var(--text-primary);overflow: hidden}.preview-console[hidden]{display: none}.preview-console-resizer{position: relative;height: 8px;margin-bottom: -1px;cursor: row-resize;touch-action: none;border-bottom: 1px solid var(--panel-border)}.preview-console-resizer span{position: absolute;top: 50%;left: var(--mouse-x, 50%);transform: translate(-50%, -50%);width: 80px;height: 2px;border-radius: 2px;background: transparent;opacity: 0;pointer-events: none;transition: opacity 0.15s ease,background-color 0.15s ease}.preview-console-resizer:hover span,.preview-console-resizer:focus-visible span{opacity: 1;background: var(--text-muted)}.preview-console.is-resizing .preview-console-resizer span{opacity: 1;background: var(--accent-color)}.preview-console.is-resizing,.preview-console.is-resizing *{cursor: row-resize !important;user-select: none}.preview-console-header,.preview-console-title,.preview-console-actions,.preview-console-filters,.preview-console-item-heading{display: flex;align-items: center}.preview-console-header{height: 38px;padding: 0 10px;justify-content: space-between;border-bottom: 1px solid var(--panel-border)}.preview-console-title{gap: 7px;font-size: 12px;font-weight: 700}.preview-console-title svg{width: 13px;height: 13px}.preview-console-summary{color: var(--text-muted);font-weight: 500}.preview-console-actions{gap: 5px}.preview-console-actions button,.preview-console-filters button{border: 0;border-radius: 5px;background: transparent;color: var(--text-muted);font: 600 11px system-ui;cursor: pointer;padding: 5px 7px}.preview-console-actions button:hover,.preview-console-filters button:hover,.preview-console-filters button.active{color: var(--text-primary);background: var(--button-secondary-hover)}.preview-console-actions svg{width: 13px;height: 13px;display: block}.preview-console-filters{gap: 4px;padding: 5px 8px;border-bottom: 1px solid var(--panel-border);overflow-x: auto}.preview-console-list{height: calc(100% - 84px);overflow: auto;font: 11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace}.preview-console-empty{padding: 18px;color: var(--text-muted);text-align: center}.preview-console-item{padding: 8px 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.055)}.preview-console-item-heading{align-items: flex-start;gap: 8px}.preview-console-kind{flex: 0 0 auto;border-radius: 4px;padding: 1px 5px;color: #fff;background: #64748b;font: 700 9px/1.5 system-ui;text-transform: uppercase}.preview-console-item.is-error .preview-console-kind{background: #dc2626}.preview-console-item.is-resource .preview-console-kind{background: #d97706}.preview-console-item.is-route .preview-console-kind{background: #7c3aed}.preview-console-item.is-cors .preview-console-kind{background: #b91c1c}.preview-console-item.is-warning .preview-console-kind{background: #ca8a04}.preview-console-message{white-space: pre-wrap;overflow-wrap: anywhere}.preview-console-location{margin-top: 4px;color: #93c5fd;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.preview-console-hint{margin-top: 4px;color: var(--text-muted);font-family: system-ui}[data-theme="light"] .preview-console{background: #f8fafc}@media (max-width: 768px){.preview-console{--preview-console-height: 220px}.preview-console-filters{scrollbar-width: none}}.iframe-wrapper.restricted-mobile,.iframe-wrapper.restricted-tablet{background: #11131a;padding: 24px}[data-theme="light"] .iframe-wrapper.restricted-mobile,[data-theme="light"] .iframe-wrapper.restricted-tablet{background: #eaeff5}.preview-iframe{width: 100%;height: 100%;border: none;background: #ffffff;box-shadow: none;border-radius: 0;contain: strict;transition: width 0.16s cubic-bezier(0.4, 0, 0.2, 1),height 0.16s cubic-bezier(0.4, 0, 0.2, 1),border-radius 0.16s ease,background 0.16s ease}[data-theme="dark"] .preview-iframe.is-empty{background: #1e1e24}.iframe-wrapper.restricted-mobile .preview-iframe,.iframe-wrapper.restricted-tablet .preview-iframe{box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);border-radius: 12px;border: 4px solid var(--panel-border)}.iframe-wrapper.restricted-mobile .preview-iframe{width: 375px;height: 667px}.iframe-wrapper.restricted-tablet .preview-iframe{width: 768px;height: 90%}#file-input{display: none}.toast-container{position: fixed;bottom: 24px;right: 24px;display: flex;flex-direction: column;gap: 10px;z-index: 999}.toast{background: var(--panel-bg);color: var(--text-primary);border: 1px solid var(--panel-border);padding: 12px 18px;border-radius: 12px;box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3),0 8px 10px -6px rgba(0, 0, 0, 0.3);display: flex;align-items: center;gap: 12px;font-size: 0.85rem;font-weight: 500;backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);opacity: 0;transform: translateY(20px) scale(0.95);animation: toastIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}.toast.success i{color: #10b981}.toast.error i{color: #ef4444}.toast.info i{color: var(--accent-purple-light)}.toast.hide{animation: toastOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards}.toast i{width: 18px;height: 18px;flex-shrink: 0;animation: toastIconIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both}.toast span{line-height: 1.4}@keyframes toastIn{to{opacity: 1;transform: translateY(0) scale(1)}}@keyframes toastOut{from{opacity: 1;transform: translateY(0) scale(1)}to{opacity: 0;transform: translateY(-12px) scale(0.95)}}@keyframes toastIconIn{from{transform: scale(0) rotate(-45deg);opacity: 0}to{transform: scale(1) rotate(0);opacity: 1}}.fullscreen-editor .preview-panel,.fullscreen-editor .resize-handle{display: none}.fullscreen-editor .editor-panel{min-width: 0;margin-right: 16px;flex: 1 1 100% !important}.fullscreen-preview .editor-panel,.fullscreen-preview .resize-handle{display: none}.fullscreen-preview .preview-panel{min-width: 0;margin-left: 16px;flex: 1 1 100% !important}.mobile-header{display: none}.sidebar-close-btn{display: none;background: transparent;border: none;color: var(--text-secondary);padding: 6px;border-radius: 6px;cursor: pointer;align-items: center;justify-content: center;transition: all 0.12s ease}.sidebar-close-btn:hover{color: var(--text-primary);background: var(--button-secondary-hover)}.sidebar-close-btn svg{width: 18px;height: 18px}.sidebar-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);z-index: 998;opacity: 0;pointer-events: none;transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)}.sidebar-overlay.active{opacity: 1;pointer-events: auto}@media (max-width: 1152px){input,select,textarea{font-size: 16px !important}#editor-panel-title .filename-container{zoom: 0.86}body{overflow: hidden}.app-container{flex-direction: column;height: 100vh;overflow: hidden}.mobile-header{display: flex;align-items: center;justify-content: space-between;height: 48px;background: var(--panel-header-bg);border-bottom: 1px solid var(--panel-border);padding: 0 12px;flex-shrink: 0;z-index: 100}.mobile-menu-toggle{background: transparent;border: none;color: var(--text-secondary);padding: 6px;border-radius: 8px;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.12s ease;-webkit-tap-highlight-color: transparent;width: 36px;height: 36px}.mobile-menu-toggle:hover{color: var(--text-primary);background: var(--button-secondary-hover)}.mobile-menu-toggle svg{width: 20px;height: 20px}.mobile-brand{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 0.95rem;font-weight: 700;letter-spacing: -0.02em;color: var(--text-primary);user-select: none}.mobile-tabs{display: flex;background: var(--button-secondary-bg);border: 1px solid var(--panel-border);border-radius: 8px;padding: 2px;gap: 2px}.mobile-tab-btn{background: transparent;border: none;border-radius: 6px;color: var(--text-secondary);padding: 4px 10px;font-size: 0.76rem;font-weight: 600;display: flex;align-items: center;gap: 6px;cursor: pointer;transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);-webkit-tap-highlight-color: transparent;min-height: 36px}.mobile-tab-btn svg{width: 14px;height: 14px}.mobile-tab-btn:hover{color: var(--text-primary)}.mobile-tab-btn.active{background: var(--accent-color);color: #ffffff;box-shadow: 0 2px 8px var(--accent-glow)}.sidebar{position: fixed;top: 0;left: 0;bottom: 0;width: 280px;height: 100dvh;max-height: 100dvh;z-index: 999;background: var(--sidebar-bg);border-right: 1px solid var(--panel-border);transform: translateX(-100%);transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);box-shadow: none;padding: 20px 16px max(28px, calc(env(safe-area-inset-bottom) + 16px));overflow-y: auto;overscroll-behavior: contain;scroll-padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px))}#btn-highlight-full{display: none !important}.editor-container,.monaco-editor,.monaco-scrollable-element,.fallback-textarea{overscroll-behavior: contain}.monaco-scrollable-element,.fallback-textarea{touch-action: pan-x pan-y;-webkit-overflow-scrolling: touch}.sidebar.open{transform: translateX(0);box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12)}.brand-section{display: flex;align-items: center;justify-content: space-between;margin-bottom: 24px;padding-left: 8px;height: 34px}.sidebar-close-btn{display: flex}.nav-menu{gap: 4px}.menu-category{margin-top: 16px;margin-bottom: 4px;padding-left: 12px}.footer-section{padding-top: 12px;border-top: 1px solid var(--panel-border);margin-top: auto}.workspace{flex-direction: column;flex-grow: 1;height: calc(100vh - 56px);overflow: hidden;margin: 0;padding: 0}.resize-handle{display: none}.panel{min-width: 0;position: absolute;top: 12px;left: 12px;width: calc(100% - 24px);height: calc(100% - 24px);margin: 0;opacity: 0;transform: scale(0.98);pointer-events: none;transition: opacity 0.2s ease,transform 0.2s ease}.app-container.active-tab-editor .editor-panel{opacity: 1;transform: scale(1);pointer-events: auto}.app-container.active-tab-preview .preview-panel{opacity: 1;transform: scale(1);pointer-events: auto}.preview-controls{display: none !important}.iframe-wrapper{background: transparent !important;padding: 0 !important}.preview-iframe{width: 100% !important;height: 100% !important;box-shadow: none !important;border: none !important;border-radius: 0 !important}}@media (max-width: 768px){.mobile-tabs{padding: 1px}.mobile-tab-btn{min-height: 32px;padding: 2px 9px}.active-file-summary{max-width: min(160px, 35vw);flex: 0 1 auto;height: 28px;margin-right: auto;background: var(--button-secondary-bg);border-color: var(--panel-border)}.editor-workspace-wrapper{isolation: isolate}.file-explorer{position: absolute;inset: 0 auto 0 0;z-index: 20;width: min(320px, calc(100% - 40px));max-width: calc(100% - 40px);box-shadow: 8px 0 24px rgba(0, 0, 0, 0.12);transition: transform 0.18s ease,opacity 0.18s ease,border-color 0.18s ease}[data-theme="light"] .file-explorer{box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08)}.file-explorer.collapsed{width: min(320px, calc(100% - 40px)) !important;transform: translateX(-100%);opacity: 0}.explorer-resizer{display: none}.file-explorer-header{min-height: 58px;padding: 8px 12px}.file-explorer-btn{width: 34px;height: 34px}.file-item,.folder-item{min-height: 36px;padding: 3px 7px;font-size: 0.76rem}.file-item-actions,.folder-item-actions,.file-item.preview-entry .file-item-actions{opacity: 1;max-width: 132px}.file-item-btn,.folder-item-btn{width: 27px;height: 27px}.file-item.long-press-dragging,.folder-item.long-press-dragging{opacity: 0.72;background: rgba(136, 66, 253, 0.14);outline: 1px solid rgba(136, 66, 253, 0.45)}}@media (max-width: 480px){.mobile-brand{display: none}.mobile-header{justify-content: flex-start;gap: 16px}.mobile-tabs{flex-grow: 1;justify-content: center}.mobile-tab-btn{flex-grow: 1;justify-content: center;padding: 2px 8px;font-size: 0.75rem}.panel-header{padding: 0 12px;height: 40px}.panel-badge{display: none}}.modal-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(4, 5, 8, 0.7);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);z-index: 1000;display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);pointer-events: none;padding: 16px}.modal-overlay.active{opacity: 1;pointer-events: auto}.modal-card{background: var(--panel-bg);border: 1px solid var(--panel-border);border-radius: 16px;width: 100%;max-width: 480px;box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5),inset 0 1px 0 rgba(255, 255, 255, 0.05);display: flex;flex-direction: column;overflow: hidden;transform: translateY(16px) scale(0.98);transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1)}[data-theme="light"] .modal-card{box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08),inset 0 1px 0 rgba(255, 255, 255, 0.8)}.modal-overlay.active .modal-card{transform: translateY(0) scale(1)}.modal-header{padding: 20px 24px;border-bottom: 1px solid var(--panel-border);display: flex;align-items: center;justify-content: space-between}.modal-title-group{display: flex;align-items: flex-start;gap: 14px}.modal-title-icon{color: var(--accent-purple-light);width: 20px !important;height: 20px !important;margin-top: 2px}.modal-header h3{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 1.15rem;font-weight: 600;color: var(--text-primary);line-height: 1.2;margin-bottom: 4px}.modal-header p{font-size: 0.78rem;color: var(--text-secondary);line-height: 1.3}.modal-close-btn{background: transparent;border: none;color: var(--text-muted);cursor: pointer;padding: 6px;border-radius: 6px;display: flex;align-items: center;justify-content: center;transition: all 0.12s ease}.modal-close-btn:hover{color: var(--text-primary);background: var(--button-secondary-hover)}.modal-close-btn svg{width: 16px !important;height: 16px !important}.modal-body{padding: 16px 20px 24px 20px;display: flex;flex-direction: column;gap: 10px}.modal-option-btn{background: var(--button-secondary-bg);border: 1px solid var(--panel-border);border-radius: 12px;padding: 14px 16px;display: flex;align-items: center;gap: 16px;cursor: pointer;text-align: left;transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);position: relative;overflow: hidden;width: 100%}.modal-option-btn:hover{border-color: var(--accent-color);background: var(--button-secondary-hover);transform: translateY(-1px)}.modal-option-icon-wrapper{background: rgba(136, 66, 253, 0.08);border: 1px solid rgba(136, 66, 253, 0.15);color: var(--accent-purple-light);width: 38px;height: 38px;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;transition: all 0.15s ease}.modal-option-btn:hover .modal-option-icon-wrapper{background: rgba(136, 66, 253, 0.16);border-color: rgba(136, 66, 253, 0.35);color: var(--accent-purple-light);box-shadow: 0 4px 12px var(--accent-glow)}.modal-option-text{display: flex;flex-direction: column;gap: 3px;min-width: 0}.modal-option-title{font-size: 0.88rem;font-weight: 600;color: var(--text-primary)}.modal-option-desc{font-size: 0.75rem;color: var(--text-secondary);line-height: 1.3}.compatibility-badge{position: absolute;top: 10px;right: 12px;background: rgba(239, 68, 68, 0.08);border: 1px solid rgba(239, 68, 68, 0.15);color: #f87171;font-size: 0.65rem;font-weight: 600;padding: 1px 5px;border-radius: 4px}.modal-option-btn:disabled{opacity: 0.5;cursor: not-allowed;pointer-events: none}.drag-drop-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(136, 66, 253, 0.08);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);z-index: 2000;display: flex;align-items: center;justify-content: center;pointer-events: none;border: 3px dashed var(--accent-color);margin: 16px;border-radius: 16px;box-shadow: inset 0 0 70px rgba(136, 66, 253, 0.16),0 0 26px rgba(136, 66, 253, 0.28);animation: dropOverlayIn 0.16s ease-out,dropOverlayPulse 1.15s ease-in-out infinite alternate;transition: background 0.15s ease,border-color 0.15s ease}.drag-drop-overlay.project-target{background: radial-gradient(circle at 50% 44%, rgba(136, 66, 253, 0.2), transparent 42%),rgba(18, 13, 31, 0.3);border-color: var(--accent-purple-light)}.drag-drop-overlay.tree-target{align-items: flex-end;justify-content: flex-start;background: transparent;border-color: transparent;backdrop-filter: none;-webkit-backdrop-filter: none;box-shadow: none;animation: fadeIn 0.12s ease-out}.drag-drop-overlay.tree-target .drag-drop-card{margin: 0 0 12px 12px;padding: 16px 20px;gap: 8px;border-color: rgba(136, 66, 253, 0.5);box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3)}.drag-drop-overlay.tree-target .drag-drop-icon{width: 28px !important;height: 28px !important}.drag-drop-overlay.tree-target .drag-drop-card p{display: none}.external-file-dragging .preview-iframe{pointer-events: none}.drag-drop-card{background: var(--panel-bg);border: 1px solid var(--panel-border);border-radius: 16px;padding: 32px 40px;text-align: center;display: flex;flex-direction: column;align-items: center;gap: 16px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);animation: dropCardIn 0.2s cubic-bezier(0.2, 0.9, 0.25, 1.15)}.drag-drop-icon{color: var(--accent-purple-light);width: 44px !important;height: 44px !important;animation: bounce 2s infinite ease-in-out}.drag-drop-card h3{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 1.25rem;font-weight: 700;color: var(--text-primary)}.drag-drop-card p{font-size: 0.85rem;color: var(--text-secondary)}@keyframes bounce{0%,100%{transform: translateY(0)}50%{transform: translateY(-6px)}}@keyframes dropOverlayIn{from{opacity: 0;transform: scale(0.992)}to{opacity: 1;transform: scale(1)}}@keyframes dropOverlayPulse{from{box-shadow: inset 0 0 48px rgba(136, 66, 253, 0.1),0 0 14px rgba(136, 66, 253, 0.18)}to{box-shadow: inset 0 0 90px rgba(136, 66, 253, 0.22),0 0 34px rgba(136, 66, 253, 0.38)}}@keyframes dropCardIn{from{opacity: 0;transform: translateY(10px) scale(0.96)}to{opacity: 1;transform: translateY(0) scale(1)}}@keyframes explorerDropPulse{from{box-shadow: inset 0 0 0 1px rgba(136, 66, 253, 0.2),0 0 16px rgba(136, 66, 253, 0.08)}to{box-shadow: inset 0 0 0 1px rgba(136, 66, 253, 0.5),0 0 34px rgba(136, 66, 253, 0.2)}}@media (prefers-reduced-motion: reduce){.drag-drop-overlay,.drag-drop-card,.drag-drop-icon,.file-explorer.external-drop-target{animation: none}}@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}.control-btn span,.mode-btn span{display: inline-block;max-width: 90px;opacity: 1;overflow: hidden;white-space: nowrap;transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),opacity 0.25s ease,margin 0.3s ease}@container (max-width: 320px){.control-btn span{max-width: 0;opacity: 0}.control-btn{gap: 0}}@container (max-width: 380px){.mode-btn span{max-width: 0;opacity: 0}.mode-btn{gap: 0;padding-inline: 6px}}@media (min-width: 769px){#active-file-summary{display: none !important}}@media (max-width: 768px){#btn-toggle-explorer{display: none !important}}@keyframes spin-continuous{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}.animate-spin{animation: spin-continuous 1s linear infinite !important}.panel-header--editor .panel-title{color: var(--text-primary) !important}.monaco-editor .current-line,.current-line{background-color: rgba(148, 163, 184, 0.055) !important;outline: none !important}[data-theme="light"] .monaco-editor .current-line,[data-theme="light"] .current-line,[data-theme="light"] .fallback-current-line{background-color: rgba(71, 85, 105, 0.055) !important}.monaco-editor .margin-view-overlays .line-numbers{text-align: center !important;padding-right: 0 !important}.monaco-editor .margin-view-overlays .line-numbers.viewer-active-line-number{color: var(--accent-color) !important;font-weight: 500}@media (max-width: 768px){:root{--editor-content-left: 44px}}.about-panel{position: fixed;top: 0;right: 0;bottom: 0;width: min(440px, 92vw);z-index: 1001;transform: translateX(100%);transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);pointer-events: none}.about-panel.open{transform: translateX(0);pointer-events: auto}.about-panel-content{display: flex;flex-direction: column;height: 100%;background: var(--panel-bg);border-left: 1px solid var(--panel-border);box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3)}[data-theme="light"] .about-panel-content{box-shadow: -8px 0 32px rgba(0, 0, 0, 0.06)}.about-panel-header{display: flex;align-items: center;justify-content: space-between;padding: 20px 24px;border-bottom: 1px solid var(--panel-border);flex-shrink: 0}.about-panel-header h2{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 1.15rem;font-weight: 700;color: var(--text-primary);letter-spacing: -0.01em}.about-close-btn{background: transparent;border: none;color: var(--text-muted);cursor: pointer;padding: 6px;border-radius: 6px;display: flex;align-items: center;justify-content: center;transition: all 0.12s ease}.about-close-btn:hover{color: var(--text-primary);background: var(--button-secondary-hover)}.about-close-btn svg{width: 18px;height: 18px}.about-panel-body{flex-grow: 1;overflow-y: auto;overflow-x: hidden;padding: 24px}.about-section{margin-bottom: 28px}.about-section:last-child{margin-bottom: 0}.about-section h3{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 0.82rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.08em;color: var(--text-muted);margin-bottom: 12px}.about-section>p{font-size: 0.88rem;line-height: 1.7;color: var(--text-secondary)}.about-product-logo{display: block;width: 64px;height: 64px;margin: 0 0 16px;border-radius: 14px}.about-byline{color: var(--text-muted) !important}.about-comparison{width: 100%;margin: 14px 0;border-collapse: collapse;font-size: 0.78rem;color: var(--text-secondary)}.about-comparison th,.about-comparison td{padding: 9px 10px;border: 1px solid var(--panel-border);text-align: left}.about-comparison th{color: var(--text-primary);background: var(--button-secondary-bg)}.about-features-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 8px}.about-feature-card{display: flex;align-items: center;gap: 10px;padding: 10px 12px;background: var(--button-secondary-bg);border: 1px solid var(--panel-border);border-radius: 8px;transition: all 0.15s ease}.about-feature-card:hover{border-color: rgba(136, 66, 253, 0.3);background: var(--button-secondary-hover)}.about-feature-icon{display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 6px;background: rgba(136, 66, 253, 0.08);color: var(--accent-purple-light);flex-shrink: 0}.about-feature-icon svg{width: 14px;height: 14px}.about-feature-card span{font-size: 0.78rem;font-weight: 500;color: var(--text-secondary);line-height: 1.3}.about-faq-list{display: flex;flex-direction: column;gap: 6px}.about-faq-item{background: var(--button-secondary-bg);border: 1px solid var(--panel-border);border-radius: 8px;overflow: hidden;transition: border-color 0.15s ease}.about-faq-item[open]{border-color: rgba(136, 66, 253, 0.25)}.about-faq-item summary{display: flex;align-items: center;padding: 12px 14px;font-size: 0.84rem;font-weight: 600;color: var(--text-primary);cursor: pointer;user-select: none;list-style: none;transition: color 0.12s ease}.about-faq-item summary::-webkit-details-marker{display: none}.about-faq-item summary::before{content: '';display: inline-block;width: 0;height: 0;border-left: 5px solid var(--text-muted);border-top: 4px solid transparent;border-bottom: 4px solid transparent;margin-right: 10px;flex-shrink: 0;transition: transform 0.2s ease}.about-faq-item[open] summary::before{transform: rotate(90deg)}.about-faq-item summary:hover{color: var(--accent-purple-light)}.about-faq-item p{padding: 0 14px 14px 29px;font-size: 0.82rem;line-height: 1.7;color: var(--text-secondary)}.about-shortcuts-list{display: flex;flex-direction: column;gap: 4px}.about-shortcut-row{display: flex;align-items: center;justify-content: space-between;padding: 8px 12px;border-radius: 6px;background: var(--button-secondary-bg);border: 1px solid var(--panel-border)}.about-shortcut-row kbd{font-family: 'JetBrains Mono',Consolas,monospace;font-size: 0.72rem;font-weight: 600;color: var(--accent-purple-light);background: rgba(136, 66, 253, 0.08);border: 1px solid rgba(136, 66, 253, 0.18);padding: 3px 8px;border-radius: 5px;white-space: nowrap}.about-shortcut-row span{font-size: 0.8rem;color: var(--text-secondary)}.about-footer{margin-top: 20px;padding-top: 16px;border-top: 1px solid var(--panel-border);text-align: center}.about-footer p{font-size: 0.78rem;color: var(--text-muted)}.about-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);z-index: 1000;opacity: 0;pointer-events: none;transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1)}.about-overlay.active{opacity: 1;pointer-events: auto}.about-btn{color: var(--text-muted);font-size: 0.82rem;padding: 8px 14px;margin-bottom: 0}.about-btn:hover{color: var(--text-secondary)}@media (max-width: 1024px){.about-panel{width: 100vw}.about-features-grid{grid-template-columns: 1fr}}.sidebar-legal-links{display: flex;align-items: center;justify-content: space-between;gap: clamp(3px, 1vw, 7px);width: 100%;min-width: 0;margin: 8px 0 0;font-size: 0.66rem;color: var(--text-muted);padding: 0 12px;box-sizing: border-box;opacity: 0.85}.legal-link-btn{flex: 0 1 auto;min-width: 0;background: none;border: none;color: var(--text-muted);font-size: inherit;font-family: inherit;cursor: pointer;padding: 2px 0;border-radius: 0;transition: color 0.12s ease;text-decoration: none;white-space: nowrap}.legal-link-btn:hover{color: var(--text-secondary);background: transparent}.cookie-banner{position: fixed;bottom: 20px;right: 20px;width: 360px;max-width: calc(100vw - 40px);background: rgba(11, 13, 19, 0.92);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border: 1px solid var(--panel-border);border-radius: 10px;padding: 16px;box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45);z-index: 9999;animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);box-sizing: border-box}[data-theme="light"] .cookie-banner{background: rgba(255, 255, 255, 0.92);box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.18)}@keyframes slideUp{from{transform: translateY(30px);opacity: 0}to{transform: translateY(0);opacity: 1}}.cookie-banner-content h4{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 0.9rem;font-weight: 700;margin-bottom: 6px;color: var(--text-primary)}.cookie-banner-content p{font-size: 0.78rem;line-height: 1.45;color: var(--text-muted);margin-bottom: 14px}.cookie-banner-actions{display: flex;gap: 6px;flex-wrap: nowrap}.cookie-banner-btn{flex: 1 1 auto;display: inline-flex;align-items: center;justify-content: center;white-space: nowrap;font-family: inherit;font-size: 0.78rem;font-weight: 500;padding: 8px 10px;border-radius: 10px;cursor: pointer;transition: all 0.12s ease;border: 1px solid transparent;min-height: 40px}.cookie-banner-btn.primary{background: var(--accent-color);color: #ffffff;border: 1px solid var(--accent-color)}.cookie-banner-btn.primary:hover{background: var(--accent-hover);border-color: var(--accent-hover)}.cookie-banner-btn.secondary{background: transparent;border-color: var(--panel-border);color: var(--text-secondary)}.cookie-banner-btn.secondary:hover{background: rgba(148, 163, 184, 0.08);color: var(--text-primary)}.cookies-modal-card{max-width: 520px;width: 100%;max-height: calc(100dvh - 32px)}.cookies-modal-body{display: flex;flex-direction: column;gap: 16px;padding: 24px;min-height: 0;overflow-y: auto;overscroll-behavior: contain;-webkit-overflow-scrolling: touch}.cookies-modal-card .modal-header,.cookies-modal-footer{flex-shrink: 0}.cookie-option-row{display: flex;justify-content: space-between;align-items: center;gap: 20px;padding-bottom: 16px;border-bottom: 1px solid var(--panel-border)}.cookie-option-info{flex-grow: 1}.cookie-option-info h4{font-family: 'Inter',system-ui,sans-serif;font-size: 0.92rem;font-weight: 600;color: var(--text-primary);margin-bottom: 4px}.cookie-option-info p{font-size: 0.78rem;line-height: 1.4;color: var(--text-muted)}.cookie-status-badge{font-size: 0.72rem;font-weight: 600;background: rgba(148, 163, 184, 0.12);color: var(--text-muted);padding: 4px 8px;border-radius: 4px;white-space: nowrap}.toggle-switch{position: relative;display: inline-block;width: 38px;height: 22px;flex-shrink: 0}.toggle-switch input{opacity: 0;width: 0;height: 0}.toggle-slider{position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: var(--panel-border);border: 1px solid var(--panel-border);transition: .2s cubic-bezier(0.16, 1, 0.3, 1);border-radius: 34px}.toggle-slider:before{position: absolute;content: "";height: 14px;width: 14px;left: 3px;bottom: 3px;background-color: var(--text-muted);transition: .2s cubic-bezier(0.16, 1, 0.3, 1);border-radius: 50%}.toggle-switch input:checked + .toggle-slider{background-color: var(--accent-color);border-color: var(--accent-color)}.toggle-switch input:checked + .toggle-slider:before{transform: translateX(16px);background-color: #ffffff}.toggle-switch input:focus-visible + .toggle-slider{outline: 2px solid var(--accent-hover);outline-offset: 2px}.cookies-modal-footer{display: flex;justify-content: flex-end;padding: 16px 24px;border-top: 1px solid var(--panel-border)}.modal-footer-btn{font-family: inherit;font-size: 0.84rem;font-weight: 500;padding: 10px 18px;border-radius: 8px;cursor: pointer;transition: all 0.12s ease;border: 1px solid transparent}.modal-footer-btn.primary{background: var(--accent-color);color: #ffffff}.modal-footer-btn.primary:hover{background: var(--accent-hover)}.legal-panel-title-area{display: flex;flex-direction: column;gap: 12px;width: 100%}.legal-tabs-nav{display: flex;gap: 4px;border-bottom: 1px solid var(--panel-border);padding-bottom: 1px}.legal-tab-btn{background: none;border: none;color: var(--text-muted);font-family: inherit;font-size: 0.8rem;font-weight: 500;padding: 6px 12px;cursor: pointer;position: relative;transition: color 0.12s ease;border-bottom: 2px solid transparent;margin-bottom: -1px}.legal-tab-btn:hover{color: var(--text-secondary)}.legal-tab-btn.active{color: var(--accent-color);border-bottom-color: var(--accent-color)}.legal-tab-content{display: none;animation: fadeInTab 0.2s ease}.legal-tab-content.active{display: block}@keyframes fadeInTab{from{opacity: 0;transform: translateY(4px)}to{opacity: 1;transform: translateY(0)}}.legal-doc{font-size: 0.86rem;line-height: 1.6;color: var(--text-secondary)}.legal-doc h3{font-family: 'Outfit','Inter',system-ui,sans-serif;font-size: 1.05rem;font-weight: 700;margin: 20px 0 10px;color: var(--text-primary)}.legal-doc h3:first-child{margin-top: 0}.legal-doc p{margin-bottom: 12px}.legal-doc ul{margin-bottom: 16px;padding-left: 20px}.legal-doc li{margin-bottom: 6px}.table-container{width: 100%;margin: 16px 0}.legal-doc table{width: 100%;border-collapse: collapse;font-size: 0.8rem}.legal-doc thead{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap}.legal-doc tbody tr{display: block;background: var(--panel-bg);border: 1px solid var(--panel-border);border-radius: 10px;padding: 6px 14px;margin-bottom: 10px}.legal-doc td{display: flex;justify-content: space-between;align-items: baseline;gap: 16px;padding: 7px 0;border-bottom: 1px solid var(--panel-border);text-align: right;color: var(--text-secondary)}.legal-doc tbody tr td:last-child{border-bottom: none}.legal-doc td::before{content: attr(data-label);flex-shrink: 0;text-align: left;font-weight: 600;color: var(--text-muted)}.legal-btn-link{display: inline-flex;align-items: center;gap: 6px;background: var(--accent-color);border: none;color: #ffffff;font-family: inherit;font-size: 0.8rem;font-weight: 500;padding: 8px 14px;border-radius: 6px;cursor: pointer;transition: all 0.12s ease;margin: 12px 0}.legal-btn-link:hover{background: var(--accent-hover)}@media (max-width: 1024px){.legal-panel{width: 100vw}}@media (max-width: 480px){.cookie-banner{bottom: max(12px, env(safe-area-inset-bottom));right: 12px;left: 12px;width: auto;max-width: none;padding: 16px}.cookie-banner-actions{display: grid;grid-template-columns: 1fr 1fr;align-items: stretch}.cookie-banner-btn{width: 100%;text-align: center;padding-inline: 8px}#btn-cookies-accept{grid-column: 1 / -1}#modal-cookies-settings{align-items: stretch;padding: 8px}.cookies-modal-card{max-height: calc(100dvh - 16px);border-radius: 12px}.cookies-modal-card .modal-header{padding: 14px 16px}.cookies-modal-body{gap: 12px;padding: 16px}.cookie-option-row{gap: 12px;padding-bottom: 12px}.cookies-modal-footer{padding: 12px 16px max(12px, env(safe-area-inset-bottom))}.cookies-modal-footer .modal-footer-btn{width: 100%}}:where(button, a, input, textarea, summary):focus-visible{outline: 2px solid var(--accent-color);outline-offset: 2px}