*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2)}.app-container{height:100vh;display:flex;flex-direction:column;overflow:hidden}.top-bar{height:70px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:space-between;padding:0 30px;box-shadow:0 4px 20px #0000001a;position:relative;overflow:hidden}.top-bar:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff1a,#ffffff0d,#ffffff1a);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.top-bar-left{display:flex;align-items:center;gap:20px;position:relative;z-index:1}.logo-container{display:flex;align-items:center;gap:12px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-title{font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);letter-spacing:-.5px}.tagline{padding:6px 14px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;color:#fff;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.3)}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.main-content{flex:1;display:grid;grid-template-columns:340px 1fr 520px;overflow:hidden;background:#f8f9fc}.left-panel{background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow:hidden}.panel-section{padding:20px}.versions-section{flex:1;overflow:hidden;display:flex;flex-direction:column;padding-bottom:20px}.section-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.section-title{font-size:16px;font-weight:800;color:#1f2937}.version-count{margin-left:auto;padding:4px 10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;font-size:12px;font-weight:700}.prompt-textarea{width:100%;min-height:120px;padding:14px;border:2px solid #e5e7eb;border-radius:12px;font-size:14px;font-family:inherit;resize:vertical;transition:all .3s;background:#f9fafb}.prompt-textarea:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.generate-button{width:100%;margin-top:14px;padding:14px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 15px #667eea4d}.generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.generate-button:active:not(:disabled){transform:translateY(0)}.generate-button:disabled{opacity:.7;cursor:not-allowed}.generate-button.loading{background:linear-gradient(135deg,#94a3b8,#64748b)}.button-icon{font-size:18px;animation:bounce 1s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.button-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.versions-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.version-card{padding:14px;background:linear-gradient(135deg,#f9fafb,#fff);border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .3s;text-align:left}.version-card:hover{border-color:#667eea;transform:translate(4px);box-shadow:0 4px 15px #667eea26}.version-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.version-badge{padding:4px 10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:8px;font-size:12px;font-weight:700}.latest-badge{padding:4px 8px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.version-description{font-size:13px;color:#6b7280;line-height:1.5}.middle-panel{display:flex;flex-direction:column;overflow:hidden;background:#f8f9fc}.preview-container{flex:1.5;display:flex;flex-direction:column;padding:20px;overflow:hidden}.preview-viewport{flex:1;background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:20px;overflow:auto;box-shadow:0 4px 20px #0000000d}.explanation-container{flex:1;display:flex;flex-direction:column;padding:0 20px 20px}.explanation-content{flex:1;background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:20px;overflow:auto;box-shadow:0 4px 20px #0000000d}.explanation-text{font-size:14px;line-height:1.8;color:#374151;white-space:pre-wrap}.right-panel{background:#1e293b;border-left:1px solid #334155;display:flex;flex-direction:column;overflow:hidden}.code-header{padding:20px;background:#0f172a;border-bottom:1px solid #334155;justify-content:space-between}.header-left{display:flex;align-items:center;gap:10px}.code-header .section-title{color:#fff}.copy-button{padding:8px 16px;background:#667eea33;border:1px solid rgba(102,126,234,.3);border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:6px}.copy-button:hover{background:#667eea4d;border-color:#667eea80}.copy-button.copied{background:#10b98133;border-color:#10b9814d}.code-editor-container{flex:1;overflow:hidden}.code-editor{width:100%;height:100%;padding:20px;background:#1e293b;color:#e2e8f0;border:none;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:13px;line-height:1.6;resize:none;outline:none}.code-editor::placeholder{color:#64748b}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#9ca3af;text-align:center;padding:40px}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-state p{margin:6px 0;font-size:15px;font-weight:600}.empty-subtext{font-size:13px;font-weight:400;color:#cbd5e0}.empty-state-small{display:flex;align-items:center;justify-content:center;height:100%;color:#9ca3af;font-size:14px}.empty-preview-graphic{position:relative;width:200px;height:200px;margin-bottom:30px}.graphic-circle{position:absolute;top:20px;left:20px;width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;opacity:.3;animation:float 3s ease-in-out infinite}.graphic-square{position:absolute;top:60px;right:30px;width:70px;height:70px;background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:12px;opacity:.3;animation:float 3s ease-in-out infinite .5s}.graphic-triangle{position:absolute;bottom:30px;left:50px;width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:70px solid #4facfe;opacity:.3;animation:float 3s ease-in-out infinite 1s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.versions-list::-webkit-scrollbar,.preview-viewport::-webkit-scrollbar,.explanation-content::-webkit-scrollbar,.code-editor::-webkit-scrollbar{width:8px}.versions-list::-webkit-scrollbar-track,.preview-viewport::-webkit-scrollbar-track,.explanation-content::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.code-editor::-webkit-scrollbar-track{background:#0f172a;border-radius:4px}.versions-list::-webkit-scrollbar-thumb,.preview-viewport::-webkit-scrollbar-thumb,.explanation-content::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.code-editor::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}.versions-list::-webkit-scrollbar-thumb:hover,.preview-viewport::-webkit-scrollbar-thumb:hover,.explanation-content::-webkit-scrollbar-thumb:hover{background:#94a3b8}.code-editor::-webkit-scrollbar-thumb:hover{background:#475569}@media(max-width:1200px){.main-content{grid-template-columns:300px 1fr 400px}}@media(max-width:1024px){.main-content{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.left-panel{border-right:none;border-bottom:1px solid #e5e7eb;max-height:40vh}.right-panel{border-left:none;border-top:1px solid #334155;max-height:40vh}}