body{margin:0;padding:0;background-color:#0b0f19;color:#e2e8f0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}.ide-container{display:flex;flex-direction:column;height:100vh;width:100vw;background-color:#0b0f19}.ide-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background-color:#0f172a;border-bottom:1px solid #1e293b;height:64px;box-sizing:border-box}.logo-section{display:flex;align-items:center;gap:12px}.logo-icon{background:linear-gradient(135deg,#4f46e5,#7c3aed);padding:8px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px #6366f166}.logo-section h1{font-size:1.1rem;font-weight:800;margin:0;color:#f8fafc;display:flex;align-items:center;gap:8px}.logo-section p{margin:2px 0 0;font-size:.75rem}.status-bar{display:flex;align-items:center}.status-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:500;border:1px solid transparent;transition:all .3s ease}.status-badge.saving{background-color:#f59e0b1a;color:#fbbf24;border-color:#f59e0b33}.status-badge.saved{background-color:#10b9811a;color:#34d399;border-color:#10b98133;box-shadow:0 0 10px #10b9811a}.status-badge.dirty{background-color:#ef44441a;color:#f87171;border-color:#ef444433}.btn-run{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:8px 18px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease;box-shadow:0 4px 12px #10b9814d}.btn-run:hover{transform:translateY(-1px);box-shadow:0 6px 16px #10b98166}.ide-main{display:grid;grid-template-columns:260px 1fr 1fr;height:calc(100vh - 64px);background-color:#0b0f19}.sidebar{background-color:#0f172a;border-right:1px solid #1e293b;padding:16px;display:flex;flex-direction:column;gap:20px;overflow-y:auto}.sidebar-group{display:flex;flex-direction:column;gap:10px}.group-title{font-size:.8rem;text-transform:uppercase;color:#94a3b8;letter-spacing:.05em;margin:0;display:flex;align-items:center;gap:6px;font-weight:700}.template-list{display:flex;flex-direction:column;gap:8px}.template-btn{background-color:#1e293b;color:#cbd5e1;border:1px solid #334155;padding:8px 12px;border-radius:6px;cursor:pointer;text-align:left;font-size:.85rem;transition:all .2s}.template-btn:hover{background-color:#334155;color:#f8fafc;transform:translate(2px)}.file-list{display:flex;flex-direction:column;gap:6px}.file-item{display:flex;align-items:center;gap:8px;background-color:transparent;color:#94a3b8;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;text-align:left;font-size:.85rem;transition:all .2s}.file-item:hover{background-color:#ffffff08;color:#e2e8f0}.file-item.active{background-color:#1e1b4b;color:#e0e7ff;border-left:3px solid #6366f1}.ai-panel{margin-top:auto;border-top:1px solid #1e293b;padding-top:16px}.ai-box{display:flex;flex-direction:column;gap:8px}.ai-box textarea{background-color:#0b0f19;border:1px solid #334155;border-radius:6px;padding:8px;color:#f1f5f9;font-size:.8rem;resize:none;height:60px;outline:none}.ai-box textarea:focus{border-color:#6366f1}.ai-btn{background-color:#4f46e5;color:#fff;border:none;padding:8px;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s}.ai-btn:hover{background-color:#4338ca}.ai-response{background-color:#1e1b4b;border:1px solid #3730a3;border-radius:6px;padding:8px;max-height:120px;overflow-y:auto}.ai-response pre{margin:0;font-family:monospace;color:#c7d2fe}.editor-area{display:flex;flex-direction:column;background-color:#090d16;border-right:1px solid #1e293b}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:#0f172a;border-bottom:1px solid #1e293b;height:38px;box-sizing:border-box}.current-file-tab{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#94a3b8}.editor-wrapper{display:flex;flex:1;position:relative;overflow:hidden}.line-numbers{width:40px;padding:12px 10px 12px 0;background-color:#0b0f19;color:#475569;text-align:right;font-family:Courier New,Courier,monospace;font-size:.9rem;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;gap:4px;border-right:1px solid rgba(255,255,255,.02)}.code-textarea{flex:1;background-color:transparent;border:none;color:#e2e8f0;font-family:Fira Code,Courier New,Courier,monospace;font-size:.95rem;padding:12px;resize:none;outline:none;line-height:1.5;-moz-tab-size:2;tab-size:2;overflow-y:auto}.preview-area{display:flex;flex-direction:column;background-color:#090d16}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:#0f172a;border-bottom:1px solid #1e293b;height:38px;box-sizing:border-box}.preview-title{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:#94a3b8}.btn-refresh{background-color:#1e293b;color:#94a3b8;border:1px solid #334155;padding:4px 10px;border-radius:4px;font-size:.75rem;cursor:pointer;display:flex;align-items:center;gap:4px}.btn-refresh:hover{background-color:#334155;color:#f8fafc}.iframe-container{flex:1;background-color:#fff;position:relative}.preview-iframe{width:100%;height:100%;border:none;background-color:#fff}.console-panel{height:180px;background-color:#090d16;border-top:1px solid #1e293b;display:flex;flex-direction:column}.console-header{display:flex;align-items:center;gap:8px;padding:8px 16px;background-color:#0f172a;border-bottom:1px solid #1e293b;font-size:.75rem;color:#94a3b8;font-weight:600}.console-body{flex:1;padding:10px 16px;font-family:Courier New,Courier,monospace;font-size:.8rem;overflow-y:auto;background-color:#05070c;color:#38bdf8;display:flex;flex-direction:column;gap:4px}.console-line{word-break:break-all;white-space:pre-wrap}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}