.app-container{display:flex;flex-direction:column;height:100vh;background-color:#0d0e15;color:#e2e8f0;font-family:Fira Code,Courier New,Courier,monospace;overflow:hidden}.ide-header{display:flex;justify-content:space-between;align-items:center;background-color:#151724;padding:10px 20px;border-bottom:1px solid #26293b;height:60px}.logo-section{display:flex;align-items:center;gap:12px}.logo-icon-wrapper{background:linear-gradient(135deg,#a855f7,#3b82f6);padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px #a855f766}.logo-pulse{animation:pulse 2s infinite}.logo-section h1{font-size:16px;font-weight:700;margin:0;background:linear-gradient(to right,#c084fc,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.badge-v{font-size:9px;background-color:#a855f733;color:#c084fc;padding:1px 4px;border-radius:4px;border:1px solid rgba(168,85,247,.3)}.subtitle{font-size:11px;color:#64748b;margin:2px 0 0}.save-status-container{display:flex;align-items:center}.status-badge{display:flex;align-items:center;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;transition:all .3s ease;background-color:#1e2030;border:1px solid #2d3149}.status-dot{width:6px;height:6px;border-radius:50%;margin-right:8px}.pulse-yellow{background-color:#eab308;animation:pulse 1s infinite}.pulse-blue{background-color:#3b82f6;animation:pulse 1s infinite}@keyframes pulse{0%{transform:scale(.95);opacity:.5}50%{transform:scale(1.1);opacity:1}to{transform:scale(.95);opacity:.5}}.header-actions{display:flex;align-items:center;gap:16px}.shortcut-tip-header{display:flex;align-items:center;gap:6px;background-color:#ffffff08;padding:4px 8px;border-radius:4px;border:1px solid rgba(255,255,255,.05)}.btn-manual-save{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;box-shadow:0 4px 12px #a855f74d}.btn-manual-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px #a855f780}.ide-workspace{display:grid;grid-template-columns:1.1fr .9fr;flex:1;overflow:hidden;padding:16px;gap:16px}.editor-section{display:flex;flex-direction:column;gap:12px;overflow:hidden}.file-tabs{display:flex;gap:6px}.tab-btn{background-color:#151724;border:1px solid #26293b;color:#94a3b8;padding:8px 14px;border-radius:6px 6px 0 0;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;transition:all .2s}.tab-btn.active{background-color:#1e2030;border-color:#a855f7;color:#e2e8f0;box-shadow:0 -2px 10px #a855f726}.tab-key-hint{font-size:9px;background-color:#ffffff0d;padding:1px 3px;border-radius:3px;color:#64748b}.editor-wrapper{flex:1;display:flex;background-color:#12131e;border-radius:8px;overflow:hidden;position:relative}.neon-border{border:1px solid #26293b;transition:border-color .3s}.neon-border:focus-within{border-color:#a855f7;box-shadow:0 0 15px #a855f733}.line-numbers{padding:12px 8px;background-color:#0b0c14;color:#475569;text-align:right;font-size:12px;-webkit-user-select:none;user-select:none;min-width:32px}.code-textarea{flex:1;background:transparent;border:none;color:#e2e8f0;padding:12px;font-family:inherit;font-size:13px;line-height:1.6;resize:none;outline:none}.ai-assistant{background-color:#151724;border:1px solid #26293b;border-radius:8px;padding:12px}.ai-header{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#c084fc;margin-bottom:8px}.shortcut-tag{font-size:10px;color:#64748b;margin-left:auto;background-color:#ffffff08;padding:2px 6px;border-radius:4px}.ai-input-group{display:flex;gap:8px}.ai-input-group input{flex:1;background-color:#0f101a;border:1px solid #26293b;border-radius:6px;padding:8px 12px;color:#e2e8f0;font-size:12px;outline:none;transition:border-color .2s}.ai-input-group input:focus{border-color:#a855f7}.ai-input-group button{background-color:#1e1b4b;border:1px solid #4338ca;color:#c7d2fe;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.ai-input-group button:hover{background-color:#312e81;color:#fff}.ai-input-group button.loading{background-color:#312e81;cursor:wait}.preview-section{display:flex;flex-direction:column;gap:16px;overflow-y:auto}.preview-card{background-color:#151724;border-radius:8px;overflow:hidden}.neon-border-blue{border:1px solid #26293b;box-shadow:0 4px 20px #0000004d}.card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background-color:#1a1c2e;border-bottom:1px solid #26293b}.live-dot{width:8px;height:8px;border-radius:50%;background-color:#ef4444}.score-tag{font-size:11px;background-color:#a855f726;color:#c084fc;padding:3px 8px;border-radius:12px;font-weight:700}.btn-reset{background-color:#1e2030;border:1px solid #2d3149;color:#94a3b8;padding:4px 10px;border-radius:4px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s}.btn-reset:hover{background-color:#2d3149;color:#fff}.canvas-container{display:flex;justify-content:center;align-items:center;padding:12px;background-color:#0b0c14}canvas{background-color:#07080e;border-radius:6px;border:1px solid #1a1c2e;width:100%;max-width:360px;height:240px}.console-panel{background-color:#0b0c14;border:1px solid #1e2030;border-radius:8px;padding:12px;height:120px;display:flex;flex-direction:column}.panel-header{display:flex;align-items:center;gap:8px;font-size:11px;color:#94a3b8;margin-bottom:8px;border-bottom:1px solid #1e2030;padding-bottom:4px}.console-logs{flex:1;overflow-y:auto;font-size:11px;color:#10b981;display:flex;flex-direction:column;gap:4px}.log-line{font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-panel{background-color:#151724;border:1px solid #26293b;border-radius:8px;padding:12px;flex:1;display:flex;flex-direction:column;min-height:180px}.history-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-top:8px}.empty-history{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:#475569;height:100%}.empty-title{font-size:13px;font-weight:600;color:#64748b;margin:4px 0}.empty-desc{font-size:11px;color:#475569;max-width:240px;line-height:1.4}.history-item{display:flex;justify-content:space-between;align-items:center;background-color:#12131e;border:1px solid #1e2030;padding:8px 12px;border-radius:6px;transition:all .2s}.history-item:hover{border-color:#a855f7;transform:translate(2px)}.history-meta{display:flex;align-items:center;gap:8px;font-size:11px}.type-tag{font-size:9px;padding:1px 4px;border-radius:3px;font-weight:700}.type-tag.auto{background-color:#3b82f626;color:#60a5fa}.type-tag.manual{background-color:#a855f726;color:#c084fc}.time{color:#94a3b8}.file{color:#475569}.btn-restore{background-color:#1e2030;border:1px solid #2d3149;color:#a855f7;padding:4px 8px;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s}.btn-restore:hover{background-color:#a855f7;color:#fff}.ide-footer{display:flex;justify-content:space-between;align-items:center;background-color:#0b0c14;padding:6px 20px;border-top:1px solid #1e2030;font-size:11px;color:#475569}.footer-item,.shortcut-bar{display:flex;align-items:center;gap:6px}.key-badge{background-color:#1e2030;color:#94a3b8;padding:1px 5px;border-radius:3px;border:1px solid #2d3149;font-weight:700}.key-divider{color:#2d3149;margin:0 4px}