@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}:root{--bg-app: #09090b;--bg-card: #18181b;--bg-editor: #1a1a1e;--bg-console: #0c0a09;--bg-toolbar: #111113;--fg-primary: #f4f4f5;--fg-muted: #71717a;--fg-subtle: #a1a1aa;--accent: #ef4444;--accent-h: #dc2626;--accent-dim: rgba(239,68,68,.15);--error: #f87171;--warn: #facc15;--ok: #4ade80;--ai-color: #a78bfa;--ai-dim: rgba(167,139,250,.15);--border: #27272a;--border-l: #3f3f46;--font-sans: "Inter", sans-serif;--font-mono: "Fira Code", monospace;--r: 7px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-app);color:var(--fg-primary);height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6a9955;font-style:italic}.token.string{color:#ce9178}.token.number{color:#b5cea8}.token.boolean,.token.keyword{color:#569cd6}.token.operator{color:#d4d4d4}.token.function{color:#dcdcaa}.token.class-name,.token.builtin{color:#4ec9b0}.token.property,.token.attr-name{color:#9cdcfe}.token.attr-value{color:#ce9178}.token.tag{color:#569cd6}.token.punctuation{color:gray}.token.regex{color:#d16969}.token.important{color:#569cd6;font-weight:700}.token.selector{color:#d7ba7d}.token.atrule{color:#c586c0}.token.parameter{color:#9cdcfe}.token.decorator,.token.annotation{color:#c586c0}.app-container{display:flex;flex-direction:column;height:100dvh}header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0;min-height:50px;z-index:20}.title-section{display:flex;align-items:center;gap:7px}.title-section h1{font-size:16px;font-weight:700;letter-spacing:-.03em}.title-badge{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent);border-radius:4px;padding:1px 5px}.actions-section{display:flex;align-items:center;gap:8px}.lang-tabs{display:flex;background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0;padding:0 10px}.lang-tab{padding:8px 14px;font-size:12px;font-weight:600;font-family:var(--font-sans);color:var(--fg-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;min-height:38px;transition:color .15s,border-color .15s}.lang-tab:hover{color:var(--fg-subtle)}.lang-tab.active{color:var(--fg-primary);border-bottom-color:var(--accent)}.lang-tab:disabled{opacity:.4;cursor:not-allowed}.btn-run{background:var(--accent);color:#fff;border:none;border-radius:var(--r);padding:8px 16px;font-size:13px;font-weight:600;font-family:var(--font-sans);cursor:pointer;display:flex;align-items:center;gap:6px;min-height:36px;white-space:nowrap;transition:background .15s,transform .1s}.btn-run:hover{background:var(--accent-h)}.btn-run:active{transform:scale(.96)}.btn-run:disabled{background:var(--border-l);color:var(--fg-muted);cursor:not-allowed;transform:none}.btn-icon{background:none;border:1px solid var(--border-l);color:var(--fg-muted);border-radius:var(--r);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .15s,color .15s}.btn-icon:hover{border-color:var(--fg-muted);color:var(--fg-primary)}.btn-clear-output{background:none;border:none;color:var(--fg-muted);font-size:11px;font-family:var(--font-sans);cursor:pointer;display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:4px;transition:color .15s,background .15s}.btn-clear-output:hover{color:var(--fg-primary);background:var(--border)}.spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}.workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.editor-panel{height:50%;display:flex;flex-direction:column;border-bottom:1px solid var(--border);background:var(--bg-editor);position:relative;min-height:0}.panel-header{padding:7px 12px;background:var(--bg-card);border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--fg-muted);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}.panel-label{display:flex;align-items:center;gap:5px}.line-count{font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--fg-muted)}.editor-wrapper{flex:1;display:flex;overflow:hidden;min-height:0}.line-numbers{width:44px;flex-shrink:0;background:#161418;border-right:1px solid var(--border);padding:14px 0;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:#44403c;-webkit-user-select:none;user-select:none;overflow-y:hidden}.ln{display:flex;align-items:center;justify-content:flex-end;padding-right:8px;min-height:20.8px}.ln-error{color:var(--error);font-weight:700;font-size:12px}.code-input-area{position:relative;flex:1;overflow:hidden}.highlight-pre{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:14px 12px;font-family:var(--font-mono);font-size:13px;line-height:1.6;white-space:pre;word-wrap:normal;overflow:hidden;pointer-events:none;background:transparent;color:var(--fg-primary);-moz-tab-size:4;tab-size:4;border:none;outline:none;z-index:0}textarea.code-editor{position:absolute;top:0;right:0;bottom:0;left:0;padding:14px 12px;font-family:var(--font-mono);font-size:13px;line-height:1.6;background:transparent;color:transparent;caret-color:#e0e0e0;border:none;outline:none;resize:none;overflow:auto;white-space:pre;word-wrap:normal;-moz-tab-size:4;tab-size:4;-webkit-user-select:text;user-select:text;z-index:1}textarea.code-editor::placeholder{color:#52525b}textarea.code-editor::selection{background:#6478c859}.lint-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#ef44441a;border-top:1px solid rgba(239,68,68,.35);flex-shrink:0;min-height:34px}.lint-icon{color:var(--error);font-size:13px;flex-shrink:0}.lint-msg{flex:1;font-family:var(--font-mono);font-size:11px;color:var(--error);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lint-fix-btn{flex-shrink:0;background:var(--ai-dim);color:var(--ai-color);border:1px solid var(--ai-color);border-radius:5px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s}.lint-fix-btn:hover{background:#a78bfa4d}.code-toolbar{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;background:var(--bg-toolbar);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px 8px;gap:4px;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none}.code-toolbar::-webkit-scrollbar{display:none}.toolbar-key{flex-shrink:0;background:#25252a;color:var(--fg-primary);border:1px solid var(--border-l);border-radius:5px;padding:5px 9px;font-size:12px;font-family:var(--font-mono);font-weight:500;min-height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .1s,transform .08s}.toolbar-key:active{background:var(--accent);border-color:var(--accent);transform:scale(.9)}.output-panel{flex:1;display:flex;flex-direction:column;background:var(--bg-console);overflow:hidden;min-height:0}.console-output{flex:1;padding:12px;font-family:var(--font-mono);font-size:13px;line-height:1.6;overflow:auto;white-space:pre-wrap;word-break:break-word;color:var(--ok)}.console-output.empty{color:var(--fg-muted);font-style:italic;font-size:12px}.console-output.error{color:var(--error)}.console-output.loading{color:var(--fg-muted)}.html-preview-frame{flex:1;background:#fff;border:none;width:100%;height:100%}.suggestion-box{position:absolute;background:#1e1e22;border:1px solid var(--border-l);border-radius:6px;box-shadow:0 8px 24px #0009;z-index:100;max-height:170px;overflow-y:auto;font-family:var(--font-mono);font-size:12px;min-width:170px;max-width:270px;scrollbar-width:thin}.suggestion-item{padding:7px 10px;cursor:pointer;color:#d4d4d8;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;transition:background .1s}.suggestion-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.suggestion-item.active{background:var(--accent);color:#fff}.suggestion-item:hover:not(.active){background:#27272a}.suggestion-type{font-size:9px;color:var(--fg-muted);padding:1px 4px;background:#27272a;border-radius:3px;font-weight:700;flex-shrink:0}.suggestion-item.active .suggestion-type{background:#fff3;color:#fff}footer{padding:6px 14px;background:var(--bg-card);border-top:1px solid var(--border);font-size:11px;color:var(--fg-muted);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;min-height:34px}.status-area{display:flex;align-items:center;gap:4px}.status-badge{display:flex;align-items:center;gap:5px;font-weight:500}.status-badge.online{color:var(--ok)}.status-badge.offline{color:var(--error)}.status-badge.loading{color:var(--warn)}.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}.dot.pulse{animation:pulse 1.2s ease-in-out infinite}.footer-hint{display:flex;align-items:center;gap:4px;font-size:10px}.ai-fab{position:fixed;bottom:50px;right:14px;background:var(--ai-color);color:#fff;border:none;border-radius:22px;padding:10px 16px;font-size:13px;font-weight:700;font-family:var(--font-sans);cursor:pointer;z-index:200;display:flex;align-items:center;gap:6px;box-shadow:0 4px 20px #a78bfa80;transition:background .15s,transform .1s}.ai-fab:hover{background:#7c3aed}.ai-fab:active{transform:scale(.95)}.ai-fab.ai-fab-open{background:#3f3f46;box-shadow:none;border-radius:50%;padding:10px}.ai-panel{position:fixed;bottom:0;left:0;right:0;height:62dvh;max-height:62dvh;background:#18181b;border-top:1px solid var(--border-l);border-radius:16px 16px 0 0;z-index:150;display:flex;flex-direction:column;box-shadow:0 -8px 40px #000000b3;animation:slideUp .22s ease-out}.ai-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;border-bottom:1px solid var(--border);flex-shrink:0}.ai-title{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--fg-primary)}.ai-model-tag{font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--ai-color);background:var(--ai-dim);border:1px solid var(--ai-color);border-radius:4px;padding:1px 5px}.ai-header-btn{background:none;border:1px solid var(--border-l);color:var(--fg-muted);border-radius:6px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}.ai-header-btn:hover{color:var(--fg-primary);border-color:var(--fg-muted)}.ai-model-tag.online{color:var(--ok);border-color:var(--ok);background:#4ade801f}.ai-model-tag.offline{color:var(--error);border-color:var(--error);background:#f871711f}.ai-settings-area{padding:10px 14px;background:#111113;border-bottom:1px solid var(--border);flex-shrink:0}.ai-settings-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);margin-bottom:8px}.ai-settings-hint{font-size:11px;color:var(--fg-muted);font-family:var(--font-mono)}.ai-model-list{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto}.ai-model-btn{text-align:left;background:#1e1e22;color:var(--fg-subtle);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:11px;font-family:var(--font-mono);cursor:pointer;transition:border-color .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ai-model-btn:hover{border-color:var(--ai-color);color:var(--fg-primary)}.ai-model-btn.selected{border-color:var(--ai-color);color:var(--ai-color);background:var(--ai-dim)}.ai-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px 14px;flex-shrink:0;scrollbar-width:none}.ai-chips::-webkit-scrollbar{display:none}.ai-chip{flex-shrink:0;background:#27272a;color:var(--fg-subtle);border:1px solid var(--border-l);border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;white-space:nowrap;font-family:var(--font-sans);transition:background .15s,color .15s}.ai-chip:hover{background:var(--ai-dim);color:var(--ai-color);border-color:var(--ai-color)}.ai-chip:disabled{opacity:.5;cursor:not-allowed}.ai-response-area{flex:1;overflow-y:auto;padding:10px 14px;min-height:0;scrollbar-width:thin}.ai-placeholder{color:var(--fg-muted);font-size:12px;font-style:italic}.ai-thinking{display:flex;align-items:center;gap:8px;color:var(--ai-color);font-size:12px}.ai-response-content{font-size:13px;line-height:1.65;color:var(--fg-subtle)}.ai-text-part{white-space:pre-wrap}.ai-code-block{background:#0d0d0f;border:1px solid var(--border-l);border-radius:6px;padding:10px 12px;margin:8px 0;font-family:var(--font-mono);font-size:12px;line-height:1.6;overflow-x:auto;color:var(--fg-primary);white-space:pre}.ai-apply-btn{display:block;width:100%;margin-top:10px;background:var(--ai-dim);color:var(--ai-color);border:1px solid var(--ai-color);border-radius:7px;padding:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}.ai-apply-btn:hover{background:#a78bfa40}.ai-input-row{display:flex;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--border);flex-shrink:0}.ai-input{flex:1;background:var(--bg-app);color:var(--fg-primary);border:1px solid var(--border-l);border-radius:8px;padding:9px 12px;font-size:13px;font-family:var(--font-sans);outline:none;min-height:38px}.ai-input:focus{border-color:var(--ai-color)}.ai-input:disabled{opacity:.5}.ai-send-btn{background:var(--ai-color);color:#fff;border:none;border-radius:8px;padding:9px 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:38px;flex-shrink:0;transition:background .15s,opacity .15s}.ai-send-btn:hover{background:#7c3aed}.ai-send-btn:disabled{opacity:.4;cursor:not-allowed}.diff-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;background:#0e0e10;display:flex;flex-direction:column}.editor-behind-diff{visibility:hidden;pointer-events:none}.diff-header{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0}.diff-title{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--fg-primary)}.diff-legend{display:flex;gap:12px;font-size:11px;font-family:var(--font-mono)}.legend-add{color:#4ade80}.legend-rem{color:#f87171}.diff-body{flex:1;overflow-y:auto;overflow-x:auto;padding:8px 0;font-family:var(--font-mono);font-size:12.5px;line-height:1.55}.diff-line{display:flex;align-items:flex-start;padding:1px 14px;white-space:pre;min-height:19px}.dl-add{background:#4ade801f;border-left:3px solid #4ade80}.dl-rem{background:#f871711f;border-left:3px solid #f87171}.dl-ctx{border-left:3px solid transparent;color:var(--fg-muted)}.dl-sign{width:18px;flex-shrink:0;font-weight:700;font-size:13px;color:inherit}.dl-add .dl-sign{color:#4ade80}.dl-rem .dl-sign{color:#f87171}.dl-text{flex:1}.diff-footer{display:flex;gap:10px;padding:10px 14px;background:var(--bg-card);border-top:1px solid var(--border);flex-shrink:0}.diff-accept-btn,.diff-dismiss-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:var(--font-sans)}.diff-accept-btn{background:#4ade8033;color:#4ade80;border:1px solid #4ade80}.diff-accept-btn:hover{background:#4ade8059}.diff-dismiss-btn{background:#f8717126;color:#f87171;border:1px solid #f87171}.diff-dismiss-btn:hover{background:#f871714d}.diff-accept-btn.small,.diff-dismiss-btn.small{flex:none;padding:5px 12px;font-size:11px}kbd{background:#ffffff1a;color:var(--fg-muted);border:1px solid var(--border-l);border-radius:4px;padding:1px 5px;font-size:10px;font-family:var(--font-mono)}.ai-diff-notice{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;background:#4ade8014;border-bottom:1px solid rgba(74,222,128,.3);flex-shrink:0;font-size:12px;color:#4ade80}.ai-diff-notice strong{color:#f4f4f5}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-l);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#52525b}.current-line-hl{position:absolute;left:0;right:0;height:20.8px;background:#ffffff09;border-left:2px solid rgba(239,68,68,.4);pointer-events:none;z-index:0}.ln-active{color:var(--fg-primary)!important;font-weight:700}.btn-run.btn-stop-mode{background:#3f3f46;border:1px solid #52525b}.btn-run.btn-stop-mode:hover{background:#52525b}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.run-cursor{display:inline-block;width:8px;height:14px;background:var(--ok);vertical-align:text-bottom;margin-left:2px;border-radius:1px;animation:blink .9s step-end infinite}.ai-stream-cursor{display:inline-block;width:2px;height:14px;background:var(--ai-color);vertical-align:text-bottom;margin-left:2px;animation:blink .7s step-end infinite}.line-numbers{position:relative}.console-output{scroll-behavior:smooth}