:root{font-family:Inter,system-ui,sans-serif;color:#0f172a;background:#0b1120;--topbar-h: 0px}*{box-sizing:border-box}body{margin:0;background:#0b1120;min-height:100vh}.page{min-height:0;height:100vh;display:flex;flex-direction:column}.full-page{height:100vh;width:100vw;background:#0b1120;display:flex}.full-page .preview-frame-shell,.full-page .preview-frame{flex:1}.full-page-back{position:fixed;top:1.25rem;left:1.25rem;z-index:20;padding:.45rem .85rem;border-radius:999px;border:1px solid #1e293b;background:#0f172ae6;color:#e2e8f0;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px #0f172a80}.full-page-back:hover{border-color:#38bdf8;color:#f8fafc}.view-preview-only .topbar{position:fixed;top:0;left:0;right:0;z-index:50}.topbar{display:flex;justify-content:space-between;gap:.75rem;align-items:center;color:#f8fafc;padding:0 1rem;height:48px;border-bottom:1px solid #1e293b;background:#0f172a}.topbar-section{display:flex;align-items:center;gap:.6rem}.topbar-left{min-width:0}.topbar-center{flex:1}.topbar-right{display:flex;align-items:center;gap:.6rem}.topbar-group{display:flex;align-items:center;gap:.5rem;padding-right:.4rem;border-right:1px solid #1e293b}.topbar-group:last-of-type{border-right:none;padding-right:0}.topbar-logo{width:26px;height:26px;border-radius:6px;background:#1e293b;color:#e2e8f0;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}.topbar-title{font-weight:600;font-size:.9rem;white-space:nowrap}.topbar-badge{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .4rem;border-radius:999px;background:#1e293b;color:#fbbf24;border:1px solid #334155}.runner-status{width:10px;height:10px;border-radius:999px;background:#64748b;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px #0f172a66}.runner-status.ready{background:#22c55e;box-shadow:0 0 0 4px #22c55e40}.runner-status.down{background:#94a3b8;box-shadow:0 0 0 4px #94a3b833}button{background:#1e293b;border:1px solid #334155;color:#e2e8f0;padding:.35rem .75rem;border-radius:6px;font-weight:600;cursor:pointer;font-size:.78rem;line-height:1;display:inline-flex;align-items:center;gap:.35rem}button.ghost{background:transparent;border:1px solid #334155;color:#e2e8f0}button.primary{background:#38bdf8;border-color:#38bdf8;color:#0f172a}button.primary.ghost{background:#38bdf826;border-color:#38bdf8;color:#e2e8f0}button.danger{background:#ef4444;border-color:#ef4444;color:#0f172a}button.active{background:#38bdf8;border-color:#38bdf8;color:#0f172a}button.toggle{background:#1e293b;color:#e2e8f0;border:1px solid transparent}button.toggle.active{background:#22c55e;color:#0f172a;border-color:#22c55e}.btn-icon{font-size:.85rem;line-height:1}.topbar-right button,.topbar-right .layout-button,.topbar-right select,.topbar-overflow .layout-button{height:28px}.topbar-right button.toggle{padding:0 .6rem}.view-menu{position:relative}.view-button{gap:.4rem;text-transform:uppercase;letter-spacing:.08em;font-size:.65rem}.view-button .view-icon{width:18px;height:18px;border-radius:5px}.view-menu-panel{position:absolute;right:0;top:calc(100% + .35rem);background:#0b1220;border:1px solid #1e293b;border-radius:12px;padding:.65rem .75rem .75rem;box-shadow:0 18px 32px #0f172a66;min-width:220px;z-index:12}.view-menu-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;margin-bottom:.5rem}.view-menu-options{display:grid;gap:.45rem}.view-menu-option{width:100%;border-radius:10px;border:1px solid transparent;background:#0f172a;display:flex;align-items:center;justify-content:space-between;padding:.45rem .6rem;cursor:pointer;color:#e2e8f0;text-align:left;gap:.75rem}.view-menu-option:hover{background:#38bdf81a}.view-menu-option.active{border-color:#38bdf8;box-shadow:inset 0 0 0 1px #38bdf8b3;background:#38bdf826}.view-menu-option-main{display:inline-flex;align-items:center;gap:.5rem}.view-menu-option-label{font-size:.78rem;font-weight:600}.view-menu-option-path{font-size:.68rem;color:#94a3b8;letter-spacing:.04em}.view-icon{width:22px;height:22px;display:inline-flex;border-radius:6px;border:1px solid #475569;position:relative}.view-icon--split:before,.view-icon--split:after{content:"";position:absolute;background:#64748b}.view-icon--split:before{top:4px;right:11px;bottom:4px;left:4px;border-radius:3px}.view-icon--split:after{top:4px;right:4px;bottom:4px;left:11px;border-radius:3px;opacity:.6}.view-icon--preview:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:4px;background:#475569}.view-icon--full:before{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:4px;border:1px dashed #64748b}.layout-menu{position:relative}.layout-button{list-style:none;background:transparent;border:1px solid #334155;color:#e2e8f0;padding:0 .65rem;border-radius:6px;font-weight:600;cursor:pointer;font-size:.75rem;display:inline-flex;align-items:center}.layout-button::-webkit-details-marker{display:none}.layout-button::marker{content:""}.layout-presets{position:absolute;right:0;top:calc(100% + .35rem);display:flex;flex-direction:column;gap:.35rem;background:#0b1220;border:1px solid #1e293b;border-radius:8px;padding:.45rem;box-shadow:0 16px 30px #0f172a59;z-index:10;min-width:180px}.layout-presets button{width:100%;justify-content:flex-start}.topbar-overflow{display:none;position:relative}.topbar-overflow-menu{position:absolute;right:0;top:calc(100% + .35rem);width:240px;gap:.6rem}.topbar-overflow-group{display:flex;flex-direction:column;gap:.45rem}.project-menu .layout-presets{min-width:200px}.project-meta{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end}.project-field{display:flex;flex-direction:column;gap:.35rem;color:#cbd5f5;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.project-field input{width:min(360px,80vw);padding:.5rem .75rem;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:.95rem;text-transform:none}@media (max-width: 1100px){.topbar-right{display:none}.topbar-overflow{display:inline-flex;align-items:center}}.api-status{margin:0;color:#fca5a5;font-weight:600}.api-status.error{color:#f97316}.templates-panel h2{margin:0;color:#f8fafc;font-size:1.4rem}.templates-panel p{margin:.35rem 0 0;color:#94a3b8}.templates-panel.compact{padding:1rem 1.25rem}.templates-compact{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}.templates-menu{position:relative}.templates-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.template-card{background:#0f172a;border:1px solid #1e293b;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-height:280px}.template-preview{height:140px;display:grid;place-items:center;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f8fafce6}.template-preview--tilt{background:linear-gradient(135deg,#38bdf8,#1e293b)}.template-preview--holo{background:linear-gradient(135deg,#f472b6,#38bdf8,#22c55e);color:#0f172a}.template-preview--pokemon{background:linear-gradient(145deg,#fef3c7,#f59e0b);color:#7c2d12}.template-body{padding:1rem;display:flex;flex-direction:column;gap:.75rem;flex:1}.template-body h3{margin:0;color:#e2e8f0;font-size:1.1rem}.template-body p{margin:0;color:#94a3b8;line-height:1.4;flex:1}.editor-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));height:100%}.work-area{flex:1;display:flex;min-height:0;background:#0b1120}.work-area.stacked,.work-area.single{flex-direction:column}.work-area.split-vertical{flex-direction:row}.workspace-pane{display:flex;flex-direction:column;gap:.5rem;min-width:0;min-height:0}.code-pane{overflow:auto;min-height:200px;padding:.75rem 1rem;gap:.75rem}.preview-pane{min-height:240px;padding:0;gap:0;display:flex;flex-direction:column}.previewOnlyShell{position:fixed;top:var(--topbar-h);left:0;right:0;bottom:0;display:flex;min-height:0}.previewOnlyShell .previewPane{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.previewOnlyShell iframe{width:100%;height:100%;border:0;display:block}.editor-panel{display:flex;flex-direction:column;gap:.5rem;min-height:0;flex:1}.editor-shell{flex:1;min-height:0}.editor-title{color:#cbd5f5;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.editor-title-label{display:inline-flex;align-items:center;gap:.5rem}.editor-title-text{font-weight:600}.editor-badge{width:1.1rem;height:1.1rem;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:#0b1220}.editor-badge--html{background:#f87171}.editor-badge--css{background:#60a5fa}.editor-badge--js{background:#facc15}.editor-menu{position:relative}.editor-menu-button{list-style:none;background:transparent;border:1px solid #334155;color:#e2e8f0;padding:0 .45rem;border-radius:6px;font-weight:600;cursor:pointer;font-size:.85rem;line-height:1.4;display:inline-flex;align-items:center;height:1.5rem}.editor-menu-button::-webkit-details-marker{display:none}.editor-menu-button::marker{content:""}.editor-menu-items{position:absolute;right:0;top:calc(100% + .35rem);display:flex;flex-direction:column;gap:.35rem;background:#0b1220;border:1px solid #1e293b;border-radius:8px;padding:.45rem;box-shadow:0 16px 30px #0f172a59;z-index:10;min-width:200px}.editor-menu-items button{width:100%;justify-content:flex-start}.preview-header{display:flex;gap:1rem;flex-wrap:nowrap;color:#e2e8f0;font-weight:600;height:26px;align-items:center;padding:0 1rem;background:#0f172a;border-bottom:1px solid #1e293b;font-size:.78rem}.status{color:#94a3b8;font-weight:500}.preview-frame{width:100%;height:100%;border:0;border-radius:0;background:transparent;flex:1;display:block;min-height:0}.preview-frame-shell{position:relative;display:flex;flex:1;min-height:0}.preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background:#1f2937;display:flex;align-items:center;justify-content:center;z-index:1}.preview-placeholder-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#334155,#0f172a);box-shadow:inset 0 0 0 2px #94a3b84d}.splitter{border:none;background:#1e293b;padding:0;flex:0 0 auto}.splitter-vertical{width:6px;cursor:col-resize}.splitter-stacked{height:6px;cursor:row-resize}.splitter:hover{background:#38bdf8}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172ab3;display:flex;align-items:center;justify-content:center;z-index:30}.confirm-dialog{width:min(420px,92vw);background:#0f172a;border:1px solid #1e293b;border-radius:14px;padding:1.5rem;color:#e2e8f0;display:flex;flex-direction:column;gap:.75rem;box-shadow:0 20px 40px #02061780}.confirm-dialog h3{margin:0;font-size:1.2rem}.confirm-dialog p{margin:0;color:#cbd5f5;line-height:1.4}.confirm-actions{display:flex;justify-content:flex-end;gap:.6rem}.assets-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172abf;display:flex;justify-content:flex-end;z-index:20}.assets-drawer{width:min(520px,92vw);height:100%;background:#0f172a;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;border-left:1px solid #1e293b;color:#e2e8f0}.settings-drawer{width:min(480px,92vw)}.templates-drawer{width:min(900px,96vw)}.templates-grid-drawer{overflow:auto;padding-right:.25rem;max-height:calc(100vh - 180px)}.assets-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.assets-header h3{margin:0;font-size:1.25rem}.assets-header p{margin:.4rem 0 0;color:#94a3b8}.assets-upload{display:flex;flex-direction:column;gap:.6rem}.assets-label{display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:#cbd5f5}.assets-label input[type=file]{text-transform:none;color:#e2e8f0}.assets-hint{margin:0;color:#94a3b8;font-size:.85rem}.settings-section{display:flex;flex-direction:column;gap:1rem}.settings-field{display:flex;flex-direction:column;gap:.35rem;color:#cbd5f5;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.settings-field select,.settings-field textarea{width:100%;padding:.5rem .75rem;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:.95rem;text-transform:none;resize:vertical}.settings-meta{display:flex;justify-content:flex-end;font-size:.8rem;color:#94a3b8}.settings-count{font-weight:600}.settings-errors{margin:0;padding-left:1rem;color:#fca5a5;font-size:.8rem;text-transform:none;letter-spacing:normal;list-style:disc;display:flex;flex-direction:column;gap:.25rem}.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#cbd5f5;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.settings-hint{margin:0;color:#94a3b8;font-size:.85rem;line-height:1.4}.run-warning{color:#fca5a5;font-size:.8rem;font-weight:600}.assets-status,.assets-error{margin:0;color:#fca5a5;font-weight:600}.assets-status{color:#94a3b8;font-weight:500}.assets-list{display:flex;flex-direction:column;gap:.75rem;overflow:auto;padding-right:.25rem}.asset-item{display:flex;justify-content:space-between;gap:1rem;border:1px solid #1e293b;border-radius:12px;padding:.75rem;background:#111827}.asset-meta{display:flex;flex-direction:column;gap:.35rem}.asset-name{font-weight:600}.asset-detail{color:#94a3b8;font-size:.8rem}.asset-url{font-size:.75rem;color:#38bdf8;word-break:break-all}.asset-actions{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}.help-content{display:flex;flex-direction:column;gap:1.1rem;overflow:auto;padding-right:.25rem}.help-section h4{margin:0 0 .35rem;font-size:1rem}.help-section p{margin:0;color:#cbd5f5}.help-section ul{margin:0;padding-left:1.1rem;color:#cbd5f5;display:grid;gap:.35rem}.help-code{display:inline-block;margin-top:.4rem;padding:.4rem .6rem;border-radius:8px;background:#111827;color:#38bdf8;font-size:.85rem}.console-toggle{position:fixed;left:1rem;bottom:1rem;background:#111827;color:#e2e8f0;border:1px solid #334155;z-index:25}.console-toggle.active{background:#38bdf8;color:#0f172a;border-color:#38bdf8}.console-drawer{position:fixed;left:0;right:0;bottom:0;height:35vh;background:#0f172a;border-top:1px solid #1e293b;display:flex;flex-direction:column;z-index:24}.console-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #1e293b;color:#e2e8f0;font-weight:600}.console-body{flex:1;padding:1rem;color:#94a3b8;font-size:.9rem}.toast{position:fixed;bottom:2rem;right:2rem;background:#22c55e;color:#0f172a;padding:.6rem 1rem;border-radius:999px;font-weight:700;z-index:30;box-shadow:0 10px 20px #0f172a59}