:root{--accent: #3d7bff;--accent-2: #2b5fd9;--accent-3: #7c5cff;--accent-soft: rgba(61, 123, 255, .12);--text: #1e2a48;--text-dim: #5f6f92;--text-faint: #93a0c0;--glass: rgba(255, 255, 255, .48);--glass-2: rgba(255, 255, 255, .6);--glass-solid: rgba(255, 255, 255, .82);--glass-border: rgba(255, 255, 255, .7);--stroke: rgba(90, 120, 180, .16);--stroke-2: rgba(90, 120, 180, .1);--shadow: 0 8px 30px rgba(45, 75, 145, .1);--shadow-lg: 0 26px 64px rgba(45, 75, 145, .22);--radius: 16px;--radius-sm: 10px;--err: #e5484d;--warn: #c98a12;--ok: #1f9d6b}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);font-size:13px;background:#e9f0ff;-webkit-font-smoothing:antialiased}.app{height:100%;display:grid;grid-template-rows:auto 1fr;gap:12px;padding:12px;position:relative;isolation:isolate;background:radial-gradient(1100px 720px at 12% -5%,rgba(124,168,255,.42),transparent 60%),radial-gradient(960px 640px at 90% 6%,rgba(180,165,255,.36),transparent 55%),radial-gradient(820px 820px at 60% 110%,rgba(140,214,255,.32),transparent 55%),linear-gradient(155deg,#eef4ff,#e3ecff 55%,#ede9ff)}.header,.filetree,.editor-pane,.preview-pane{background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow)}.header{display:flex;align-items:center;gap:10px;padding:9px 14px}.header .brand{font-weight:800;letter-spacing:-.015em;font-size:15px;margin-right:4px}.header .brand span{background:linear-gradient(120deg,var(--accent),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent}.header .title-input,.header select,.header button{background:#ffffff8c;border:1px solid var(--stroke);color:var(--text);border-radius:9px;padding:6px 10px;font:inherit;transition:background .15s,border-color .15s,box-shadow .15s}.header .title-input{min-width:12rem}.header select,.header button{cursor:pointer}.header .title-input:focus,.header select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.header button{font-weight:500;display:inline-flex;align-items:center;gap:6px}.header button svg{opacity:.85}.header button:hover:not(:disabled){background:#ffffffe6;border-color:var(--accent)}.header button.primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:0 6px 18px #3d7bff61}.header button.primary:hover:not(:disabled){filter:brightness(1.06)}.header button:disabled{opacity:.5;cursor:default}.header .spacer{flex:1}.header .status{font-size:12px;color:var(--text-dim)}.header .status.error{color:var(--err)}.header .status.ok{color:var(--ok)}.header .dev-badge{font-size:11px;font-weight:600;padding:.2rem .6rem;border-radius:20px;border:1px solid var(--stroke);background:#ffffff80}.header .dev-badge.on{color:var(--ok);border-color:#1f9d6b59;background:#1f9d6b1a}.header .dev-badge.off{color:var(--warn)}.body{display:grid;grid-template-columns:212px minmax(0,1fr) minmax(0,1.05fr);gap:12px;min-height:0}.filetree{background:var(--glass-2);overflow:auto;padding:8px 6px}.filetree .ft-head{display:flex;align-items:center;justify-content:space-between;padding:.2rem .6rem .5rem;color:var(--text-faint);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;font-weight:700}.filetree .ft-head button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;line-height:1;border-radius:6px;width:20px;height:20px}.filetree .ft-head button:hover{background:var(--accent-soft);color:var(--accent)}.filetree .row{display:flex;align-items:center;gap:.4rem;padding:.28rem .6rem;cursor:pointer;color:var(--text);white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:8px;margin:1px 2px}.filetree .row:hover{background:#fff9}.filetree .row.file.active{background:var(--accent-soft);color:var(--accent-2);font-weight:500}.filetree .row.folder{color:var(--text-dim)}.filetree .twisty{flex-shrink:0;color:var(--text-faint);transition:transform .12s ease}.filetree .twisty.open{transform:rotate(90deg)}.filetree .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-icon{width:16px;height:16px;flex-shrink:0}.filetree .row .del{margin-left:auto;opacity:0;color:var(--text-faint);border:none;background:none;cursor:pointer;font-size:15px;line-height:1}.filetree .row:hover .del{opacity:1}.filetree .row .del:hover{color:var(--err)}.new-file-input{flex:1;min-width:0;background:#ffffffd9;border:1px solid var(--accent);color:var(--text);border-radius:7px;padding:2px 6px;font:inherit;font-size:12px;outline:none}.editor-pane{background:var(--glass-2);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.pane-tabbar{display:flex;align-items:center;gap:.5rem;padding:0 .7rem;height:38px;border-bottom:1px solid var(--stroke-2)}.pane-tabbar .tab{font-size:12px;color:var(--text-dim);padding:.3rem .55rem;border-radius:8px;background:none;border:none;cursor:pointer}.pane-tabbar .tab.active{color:var(--text);background:#ffffffb3;font-weight:500}.editor-host{flex:1;min-height:0}.editor-host .monaco-editor,.editor-host .monaco-editor .overflow-guard{border-radius:0}.preview-pane{background:var(--glass-solid);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.browser{flex:1;min-height:0;display:flex;flex-direction:column}.browser-toolbar{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#ffffff73;border-bottom:1px solid var(--stroke-2)}.traffic{display:flex;gap:7px;padding-right:3px}.traffic .light{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 .5px #0000001f}.traffic .red{background:#ff5f57}.traffic .yellow{background:#febc2e}.traffic .green{background:#28c840}.nav-btn{width:27px;height:27px;border:1px solid var(--stroke);background:#fff9;color:var(--text-dim);border-radius:8px;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}.nav-btn:hover{background:#fff;color:var(--accent);border-color:var(--accent)}.reload-glyph{display:inline-block}.reload-glyph.spin{animation:sb-spin .6s linear infinite}@keyframes sb-spin{to{transform:rotate(360deg)}}.address-bar{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--stroke);border-radius:18px;padding:5px 13px;box-shadow:inset 0 1px 2px #2d4b910d}.address-bar .lock{color:var(--text-faint);font-size:9px}.address-input{flex:1;background:none;border:none;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;outline:none}.address-input::placeholder{color:var(--text-faint)}.frame-slot{flex:1;min-height:0;background:#fff;position:relative;overflow:hidden}iframe.preview{width:100%;height:100%;border:none;display:block}.loading-bar{position:absolute;top:0;height:2.5px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-3));z-index:2;opacity:0}.loading-bar.active{opacity:1;animation:sb-load .8s ease-in-out infinite}@keyframes sb-load{0%{left:0;width:0}50%{left:15%;width:55%}to{left:100%;width:0}}.console-panel{display:flex;flex-direction:column;border-top:1px solid var(--stroke);background:#ffffff59}.console-panel.open{height:176px}.console-header{display:flex;align-items:center;gap:2px;padding:3px 8px;font-size:12px;color:var(--text-dim);-webkit-user-select:none;user-select:none}.console-header .chevron{color:var(--text-faint);transition:transform .12s ease}.console-header .chevron.open{transform:rotate(90deg)}.console-header svg{flex-shrink:0}.console-header .spacer{flex:1}.console-header .cp-icon{background:none;border:none;color:var(--text-faint);cursor:pointer;padding:4px;display:flex;border-radius:6px}.console-header .cp-icon:hover{background:#fff9}.console-header .cp-tab{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--text-dim);cursor:pointer;font:inherit;font-weight:500;padding:5px 9px;border-radius:8px;border-bottom:2px solid transparent}.console-header .cp-tab:hover{color:var(--text)}.console-header .cp-tab.active{color:var(--accent-2);background:#ffffff8c}.console-header .cp-clear{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;padding:4px 8px}.console-header .cp-clear:hover{color:var(--accent)}.console-body{flex:1;min-height:0;display:flex;flex-direction:column}.repl{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--stroke-2);background:#ffffff80}.repl-prompt{color:var(--accent);font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.repl-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.repl-input::placeholder{color:var(--text-faint)}.console .row.input{color:var(--accent-2);background:#3d7bff0d}.console .row.result{color:var(--text);padding-left:1.4rem}.build-log{flex:1;min-height:0;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.build-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:.3rem .75rem;border-bottom:1px solid var(--stroke-2)}.build-row .build-status{font-weight:700}.build-row.ok .build-status{color:var(--ok)}.build-row.err,.build-row.err .build-status{color:var(--err)}.build-row .build-errors{flex-basis:100%;padding-left:1.5rem;white-space:pre-wrap;word-break:break-word;opacity:.9}.build-log .empty{color:var(--text-faint);padding:.6rem .75rem}.console{flex:1;min-height:0;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.console .row{padding:.18rem .75rem;border-bottom:1px solid var(--stroke-2);white-space:pre-wrap;word-break:break-word}.console .row.error{color:var(--err)}.console .row.warn{color:var(--warn)}.console .row.log{color:var(--text)}.console .empty{color:var(--text-faint);padding:.6rem .75rem}