:root{--bg-app: #090a0f;--bg-card: rgba(20, 22, 33, .65);--bg-terminal: #07080b;--border-glow: rgba(147, 51, 234, .15);--border-focus: #a855f7;--color-text-main: #f3f4f6;--color-text-muted: #9ca3af;--accent-purple: #a855f7;--accent-blue: #3b82f6;--accent-green: #10b981;--accent-red: #ef4444;--accent-yellow: #f59e0b;--font-sans: "Outfit", sans-serif;--font-mono: "Fira Code", monospace;--shadow-glow: 0 0 20px rgba(168, 85, 247, .15)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--color-text-main);font-family:var(--font-sans);height:100vh;overflow:hidden;display:flex;flex-direction:column}.app-container{display:flex;flex-direction:column;height:100vh;padding:1rem;gap:1rem}.app-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;background:var(--bg-card);border:1px solid var(--border-glow);border-radius:12px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-glow)}.header-logo{display:flex;align-items:center;gap:.75rem}.logo-icon{color:var(--accent-purple);font-size:1.5rem;text-shadow:0 0 10px var(--accent-purple)}.header-logo h1{font-size:1.25rem;font-weight:800;letter-spacing:.5px}.accent-text{background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-status{display:flex;gap:.75rem}.badge{padding:.25rem .75rem;font-size:.8rem;font-weight:600;border-radius:9999px;border:1px solid transparent;display:flex;align-items:center;gap:.35rem;transition:all .3s ease}.badge-success{background:#10b9811a;border-color:#10b9814d;color:var(--accent-green)}.badge-warning{background:#f59e0b1a;border-color:#f59e0b4d;color:var(--accent-yellow)}.badge-danger{background:#ef44441a;border-color:#ef44444d;color:var(--accent-red)}.app-main{display:grid;grid-template-columns:1fr 1.2fr;gap:1rem;flex:1;height:calc(100vh - 5rem)}.left-panel,.right-panel{display:flex;flex-direction:column;gap:1rem;height:100%;overflow:hidden}.panel-card{background:var(--bg-card);border:1px solid var(--border-glow);border-radius:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1.25rem;display:flex;flex-direction:column;transition:border-color .3s ease,box-shadow .3s ease}.panel-card:hover{border-color:#a855f74d;box-shadow:0 4px 20px #a855f70d}.panel-card h2{font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.step-num{background:var(--accent-purple);color:#fff;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800}.config-card{flex-shrink:0}.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.form-group label{font-size:.85rem;font-weight:500;color:var(--color-text-muted)}select,textarea,input[type=password]{background:#0f1017cc;border:1px solid rgba(255,255,255,.1);color:var(--color-text-main);padding:.75rem 1rem;border-radius:10px;font-family:inherit;font-size:.9rem;transition:border-color .3s ease,box-shadow .3s ease;outline:none}select:focus,textarea:focus,input[type=password]:focus{border-color:var(--border-focus);box-shadow:0 0 10px #a855f733}textarea{resize:none;height:80px;font-family:inherit;line-height:1.4}.actions-row{display:flex;gap:.75rem}.btn{flex:1;padding:.75rem 1.25rem;border-radius:10px;font-weight:600;font-size:.9rem;cursor:pointer;border:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary{background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));color:#fff;box-shadow:0 4px 14px #a855f74d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #a855f780}.btn-primary:disabled{background:#323545;color:#6b7280;cursor:not-allowed;box-shadow:none}.btn-secondary{background:#ffffff14;color:var(--color-text-main);border:1px solid rgba(255,255,255,.15)}.btn-secondary:hover:not(:disabled){background:#ffffff26}.btn-text{color:var(--color-text-muted);background:transparent;padding:.25rem .5rem;font-size:.8rem}.btn-text:hover{color:var(--color-text-main)}.btn-icon{background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;transition:background .3s}.btn-icon:hover{background:#ffffff14;color:var(--color-text-main)}.preview-card{flex:1;display:flex;flex-direction:column}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.preview-controls{display:flex;align-items:center;gap:.5rem;background:#0000004d;padding:.25rem .5rem;border-radius:6px;border:1px solid rgba(255,255,255,.05)}#preview-url{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-muted)}.preview-iframe-wrapper{flex:1;background:#0f1016;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.05);position:relative;min-height:150px}.iframe-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;text-align:center;padding:2rem;color:var(--color-text-muted)}.iframe-placeholder .sub-text{font-size:.8rem;max-width:250px;opacity:.7}.preview-iframe{width:100%;height:100%;border:none;background:#fff}.terminal-card{flex:1;display:flex;flex-direction:column}.terminal-badge{background:#a855f71a;color:var(--accent-purple);border:1px solid rgba(168,85,247,.25);font-size:.75rem;padding:.15rem .5rem;border-radius:4px;font-family:var(--font-mono)}.terminal-container-wrapper{flex:1;background:var(--bg-terminal);border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.05);position:relative}#terminal-container{position:absolute;top:.5rem;right:.5rem;bottom:.5rem;left:.5rem;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#fff3}.xterm-viewport::-webkit-scrollbar{width:8px}.xterm-viewport::-webkit-scrollbar-thumb{background:#a855f74d}.xterm-viewport::-webkit-scrollbar-thumb:hover{background:#a855f780}.form-help-text{font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem;line-height:1.3}.logo-text-group{display:flex;flex-direction:column}.logo-subtext{font-size:.75rem;color:var(--color-text-muted);margin-top:.15rem}.developer-profile{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:.8rem;padding:0 1rem}.dev-name{font-weight:700;color:var(--color-text-main);font-size:.9rem}.dev-title{color:var(--accent-purple);font-size:.75rem;font-weight:500;margin:.15rem 0}.dev-meta{display:flex;gap:.4rem;align-items:center;color:var(--color-text-muted);font-size:.75rem}.dev-meta a{color:var(--accent-blue);text-decoration:none;transition:color .2s}.dev-meta a:hover{color:var(--accent-purple);text-decoration:underline}.meta-dot{color:#fff3}/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}.xterm .xterm-accessibility-tree{-webkit-user-select:text;user-select:text;white-space:pre}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}