.prompt-input-container{width:100%;max-width:500px;display:flex;justify-content:center}.prompt-input-wrapper{width:100%}.input-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.variants-counter{display:flex;align-items:center;gap:2px;background:transparent;border:1px solid #333;border-radius:8px;padding:4px;margin-right:4px}.counter-button{background:transparent;border:none;color:#666;width:24px;height:24px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.counter-button:hover:not(:disabled){background:#ffffff08;color:#aaa}.counter-button:disabled{opacity:.3;cursor:not-allowed}.counter-value{color:#aaa;font-size:14px;font-weight:500;min-width:20px;text-align:center;-webkit-user-select:none;user-select:none}.settings-icon-button{background:transparent;border:1px solid #333;border-radius:8px;color:#666;padding:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px}.settings-icon-button:hover:not(:disabled){background:#ffffff08;border-color:#444;color:#aaa}.settings-icon-button:disabled{opacity:.3;cursor:not-allowed}.settings-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;animation:modalFadeIn .2s ease-out}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.settings-modal{background:#000;border:1px solid #222;border-radius:8px;padding:0;max-width:600px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 8px 32px #000c;animation:modalSlideIn .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:10000}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #222;position:sticky;top:0;background:#000;z-index:10}.settings-header h3{margin:0;color:#fff;font-size:20px;font-weight:700;letter-spacing:-.5px}.close-button{background:transparent;border:1px solid #333;color:#666;font-size:24px;cursor:pointer;padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;line-height:1}.close-button:hover{background:#ffffff0d;border-color:#444;color:#aaa}.settings-content{padding:24px}.setting-group{margin-bottom:24px;padding:0;background:transparent;border:none;border-radius:0;position:relative}.setting-label{display:block;color:#888;font-size:12px;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.prompt-form{width:100%}.input-container{display:flex;flex-direction:column;background:#0a0a0a;border:1px solid #222;border-radius:12px;padding:8px;transition:all .3s ease}.input-row{display:flex;align-items:center;gap:8px;width:100%}.input-container:focus-within{border-color:#444;box-shadow:0 0 0 1px #ffffff1a}.prompt-input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:14px;padding:12px 16px;font-family:inherit;border-radius:8px;min-width:0}.prompt-input::placeholder{color:#666;font-family:Courier New,monospace;letter-spacing:.5px}.send-button{position:relative;background:linear-gradient(135deg,#fff,#ccc);border:none;border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;overflow:hidden;box-shadow:0 2px 8px #ffffff1a}.send-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#fff3,#fff0,#0000001a);opacity:0;transition:opacity .3s ease;pointer-events:none}.send-button:hover:not(:disabled){background:linear-gradient(135deg,#fff,#aaa);transform:translateY(-1px);box-shadow:0 4px 12px #fff3}.send-button:hover:not(:disabled):before{opacity:1}.send-button:active:not(:disabled){transform:translateY(0) scale(.95);box-shadow:0 1px 4px #ffffff1a}.send-button:disabled{opacity:.3;cursor:not-allowed;background:#333;box-shadow:none}.send-button-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.send-icon{color:#000;transition:all .3s cubic-bezier(.4,0,.2,1)}.send-button:hover:not(:disabled) .send-icon{transform:translate(1px) translateY(-1px)}.send-button:active:not(:disabled) .send-icon{transform:translate(0) translateY(0)}.loading-spinner{color:#000;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.send-button-ripple{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff80;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease,opacity .6s ease;opacity:0;pointer-events:none;z-index:1}.send-button:active:not(:disabled) .send-button-ripple{width:100px;height:100px;opacity:0;transition:width 0s,height 0s,opacity .6s ease}.showcase-section{display:none;margin-top:48px;text-align:center}.showcase-title{color:#666;font-size:14px;margin-bottom:24px}.showcase-slider{position:relative;max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:16px}.slider-arrow{background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#888;box-shadow:0 4px 12px #00000026}.slider-arrow:hover:not(:disabled){background:#ffffff1a;border-color:#fff3;color:#fff;transform:scale(1.05);box-shadow:0 6px 16px #0003}.slider-arrow:disabled{opacity:.5;cursor:not-allowed}.slider-arrow-prev{margin-left:-60px}.slider-arrow-next{margin-right:-60px}.showcase-container{overflow:hidden;width:100%;max-width:780px;border-radius:16px}.showcase-track{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}.showcase-slide{width:100%;flex-shrink:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 10px}.showcase-item{display:flex;flex-direction:column;align-items:center;gap:12px}.showcase-preview{width:100%;display:flex;justify-content:center;align-items:center;padding:20px;background:#0a0a0a;border:1px solid #222;border-radius:12px;min-height:180px;transition:all .3s ease}.showcase-preview:hover{border-color:#333;transform:translateY(-4px)}.showcase-label{color:#888;font-size:13px;font-weight:500}.slider-indicators{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px}.slider-indicator{width:8px;height:8px;border-radius:50%;background:#fff3;border:none;cursor:pointer;transition:all .2s ease}.slider-indicator:hover{background:#fff6}.slider-indicator.active{background:#0070f3;transform:scale(1.2)}.creativity-slider,.guidance-slider{width:100%;height:4px;background:#1a1a1a;border:1px solid #333;border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;margin-bottom:8px}.creativity-slider::-webkit-slider-thumb,.guidance-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;transition:all .2s ease;border:2px solid #000}.creativity-slider::-webkit-slider-thumb:hover,.guidance-slider::-webkit-slider-thumb:hover{background:#ccc;transform:scale(1.1)}.creativity-slider::-moz-range-thumb,.guidance-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;border:2px solid #000;transition:all .2s ease}.creativity-slider::-moz-range-thumb:hover,.guidance-slider::-moz-range-thumb:hover{background:#ccc;transform:scale(1.1)}.slider-labels{display:flex;justify-content:space-between;color:#666;font-size:11px;font-weight:400}.color-scheme-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.color-scheme-choice{background:#0a0a0a;border:1px solid #222;border-radius:6px;padding:12px 6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-height:70px}.color-scheme-choice:hover{background:#111;border-color:#333}.color-scheme-choice.active{background:#1a1a1a;border-color:#fff;box-shadow:0 0 0 1px #fff inset}.color-preview{display:flex;gap:3px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:100%}.color-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 2px #0000004d}.color-scheme-name{color:#666;font-size:9px;font-weight:600;line-height:1.2;text-transform:uppercase;letter-spacing:.5px}.color-scheme-choice.active .color-scheme-name{color:#fff}.style-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.style-choice{background:#0a0a0a;border:1px solid #222;border-radius:6px;padding:10px 6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:11px}.style-choice:hover{background:#111;border-color:#333}.style-choice.active{background:#1a1a1a;border-color:#fff}.style-choice .style-icon{font-size:16px}.style-choice .style-name{color:#666;font-size:9px;font-weight:500;line-height:1.1}.style-choice.active .style-name{color:#fff}.ui-style-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}.ui-style-option{background:#0a0a0a;border:1px solid #222;border-radius:6px;padding:20px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.ui-style-option:hover{background:#111;border-color:#333}.ui-style-option.active{background:#1a1a1a;border-color:#fff}.ui-style-option .option-icon{font-size:28px}.ui-style-option .option-name{color:#666;font-size:13px;font-weight:600}.ui-style-option.active .option-name{color:#fff}.speed-mode-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}.speed-mode-option{background:#0a0a0a;border:1px solid #222;border-radius:6px;padding:24px 16px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-height:100px}.speed-mode-option:hover{background:#111;border-color:#333}.speed-mode-option.active{background:#1a1a1a;border-color:#fff}.speed-mode-option .option-icon{font-size:32px}.speed-mode-option .option-name{color:#666;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.speed-mode-option.active .option-name{color:#fff}@media (max-width: 768px){.settings-modal{max-width:95%;max-height:90vh}.settings-header{padding:16px 20px}.settings-header h3{font-size:18px}.settings-content{padding:20px}.setting-group{margin-bottom:20px}.ui-style-options,.speed-mode-options{grid-template-columns:1fr}.color-scheme-options{grid-template-columns:repeat(3,1fr)}.style-options{grid-template-columns:repeat(2,1fr)}.prompt-input{font-size:14px;padding:10px 12px}.settings-icon-button,.send-button{width:32px;height:32px}.settings-icon-button svg,.send-button svg{width:14px;height:14px}.input-actions{gap:3px}.showcase-grid{grid-template-columns:1fr;gap:20px}.showcase-preview{min-height:150px}.slider-arrow-prev{margin-left:-50px}.slider-arrow-next{margin-right:-50px}.showcase-slide{grid-template-columns:repeat(2,1fr);gap:16px}.slider-arrow{width:36px;height:36px}.showcase-container{max-width:600px}}.color-scheme-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.add-custom-scheme-btn{background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-custom-scheme-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #a855f74d}.color-scheme-wrapper{position:relative;display:inline-block}.custom-scheme-controls{position:absolute;top:-8px;right:-8px;display:flex;gap:4px;opacity:0;transition:opacity .2s ease}.color-scheme-wrapper:hover .custom-scheme-controls{opacity:1}.edit-scheme-btn,.delete-scheme-btn{width:24px;height:24px;border:none;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.edit-scheme-btn{background:#4f46e5;color:#fff}.edit-scheme-btn:hover{background:#4338ca;transform:scale(1.1)}.delete-scheme-btn{background:#dc2626;color:#fff}.delete-scheme-btn:hover{background:#b91c1c;transform:scale(1.1)}.custom-scheme-form{border:1px solid #333;border-radius:8px;padding:16px;background:#1a1a1a;margin-top:16px}.custom-scheme-form h4{margin:0 0 16px;color:#fff;font-size:16px;font-weight:600}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;color:#ccc;font-size:14px;font-weight:500}.scheme-name-input{width:100%;padding:8px 12px;background:#0a0a0a;border:1px solid #333;border-radius:6px;color:#fff;font-size:14px}.scheme-name-input:focus{outline:none;border-color:#a855f7}.color-inputs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.color-input-wrapper{position:relative;display:flex;align-items:center}.color-input{width:40px;height:32px;border:none;border-radius:4px;cursor:pointer;background:none}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:4px}.remove-color-btn{width:20px;height:20px;border:none;border-radius:50%;background:#dc2626;color:#fff;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:4px;transition:all .2s ease}.remove-color-btn:hover{background:#b91c1c;transform:scale(1.1)}.add-color-btn{width:32px;height:32px;border:1px dashed #555;border-radius:4px;background:#1a1a1a;color:#ccc;cursor:pointer;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.add-color-btn:hover{border-color:#a855f7;color:#a855f7;background:#a855f71a}.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.save-scheme-btn,.cancel-scheme-btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-scheme-btn{background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff}.save-scheme-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #a855f74d}.save-scheme-btn:disabled{background:#555;cursor:not-allowed;opacity:.6}.cancel-scheme-btn{background:#333;color:#ccc}.cancel-scheme-btn:hover{background:#444;color:#fff}.chat-sidebar{width:400px;display:flex;flex-direction:column;background:#1a1a1a;border:1px solid #333;border-radius:16px;overflow:hidden;height:100%}.chat-header{padding:20px;border-bottom:1px solid #333;background:#151515}.chat-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.header-actions{display:flex;align-items:center;gap:12px}.settings-button{background:transparent;border:1px solid #333;border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#888}.settings-button:hover{background:#222;border-color:#444;color:#fff}.chat-header h3{font-size:20px;font-weight:600;color:#fff;margin:0}.chat-subtitle{font-size:13px;color:#666}.ui-style-switcher{display:flex;gap:4px;background:#0a0a0a;border:1px solid #333;border-radius:8px;padding:2px}.style-option{background:transparent;border:none;color:#888;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.style-option:hover:not(:disabled){color:#fff;background:#222}.style-option.active{background:#0070f3;color:#fff}.style-option:disabled{opacity:.5;cursor:not-allowed}.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}.empty-chat{display:flex;align-items:center;justify-content:center;height:100%;color:#666;text-align:center;padding:20px}.chat-message{display:flex;flex-direction:column;gap:4px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-message{align-items:flex-end}.ai-message{align-items:flex-start}.message-content{padding:12px 16px;border-radius:12px;max-width:85%;word-wrap:break-word;line-height:1.5}.user-message .message-content{background:#0070f3;color:#fff}.ai-message .message-content{background:#222;color:#fff}.message-time{font-size:11px;color:#666;padding:0 4px}.chat-input-form{padding:16px;border-top:1px solid #333;background:#151515}.chat-input-container{display:flex;gap:8px;align-items:center}.chat-input{flex:1;background:#0a0a0a;border:1px solid #333;border-radius:12px;padding:12px 16px;color:#fff;font-size:14px;outline:none;transition:border-color .2s ease}.chat-input:focus{border-color:#0070f3}.chat-input::placeholder{color:#666}.chat-send-button{background:#0070f3;border:none;border-radius:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.chat-send-button:hover:not(:disabled){background:#0051cc;transform:scale(1.05)}.chat-send-button:disabled{opacity:.5;cursor:not-allowed}.chat-send-icon{font-size:16px;color:#fff}.generating-indicator{display:flex;align-items:center;gap:12px;padding:12px 16px}.spinner{width:16px;height:16px;border:2px solid rgba(0,112,243,.2);border-top-color:#0070f3;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.generating-text{color:#fff;font-size:14px;font-weight:500;background:linear-gradient(135deg,#000,#1a1a1a,#71717a 30%,#a1a1aa,#d4d4d8 70%,#e4e4e7,#000);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:black-zinc-shimmer 2.5s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(161,161,170,.3))}@keyframes black-zinc-shimmer{0%,to{background-position:0% 0%;opacity:.7}25%{background-position:50% 50%;opacity:.9}50%{background-position:100% 100%;opacity:1}75%{background-position:50% 50%;opacity:.9}}.settings-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.settings-modal{background:#1a1a1a;border:1px solid #333;border-radius:16px;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #333;background:#151515;border-radius:16px 16px 0 0}.settings-header h3{margin:0;color:#fff;font-size:18px;font-weight:600}.close-button{background:transparent;border:none;color:#888;font-size:24px;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.close-button:hover{background:#222;color:#fff}.settings-content{padding:20px}.setting-group{margin-bottom:24px}.setting-group:last-child{margin-bottom:0}.setting-label{display:block;color:#fff;font-size:14px;font-weight:500;margin-bottom:12px}.creativity-slider,.guidance-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:3px;background:#333;outline:none;transition:background .2s ease}.creativity-slider::-webkit-slider-thumb,.guidance-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#0070f3;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px #0003}.creativity-slider::-moz-range-thumb,.guidance-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0070f3;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px #0003}.slider-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#888}.style-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px}.style-choice{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;cursor:pointer;transition:all .3s ease;font-size:12px;box-shadow:0 4px 20px #0000001a}.style-choice:hover{background:#ffffff1a;border-color:#fff3;box-shadow:0 8px 25px #0003}.style-choice.active{background:#0070f31a;border-color:#0070f34d;color:#0070f3;box-shadow:0 4px 20px #0070f333}.style-icon{font-size:16px}.style-name{font-weight:500}.speed-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.speed-choice{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;cursor:pointer;transition:all .3s ease;font-size:12px;font-weight:500;box-shadow:0 4px 20px #0000001a}.speed-choice:hover{background:#ffffff1a;border-color:#fff3;box-shadow:0 8px 25px #0003}.speed-choice.active{background:#0070f31a;border-color:#0070f34d;color:#0070f3;box-shadow:0 4px 20px #0070f333}.color-scheme-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:12px}.color-scheme-choice{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;cursor:pointer;transition:all .3s ease;font-size:12px;box-shadow:0 4px 20px #0000001a;text-align:center}.color-scheme-choice:hover{background:#ffffff1a;border-color:#fff3;box-shadow:0 8px 25px #0003;transform:translateY(-2px)}.color-scheme-choice.active{background:#0070f31a;border-color:#0070f34d;box-shadow:0 4px 20px #0070f333}.color-preview{display:flex;gap:4px;align-items:center}.color-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.3);box-shadow:0 1px 3px #0003}.color-scheme-name{font-weight:500;font-size:11px;line-height:1.2}.color-scheme-choice.active .color-scheme-name{color:#0070f3}@media (max-width: 768px){.chat-sidebar{width:100%;height:50vh}.settings-modal{width:95%;max-height:85vh}.style-options{grid-template-columns:1fr}.style-choice{justify-content:center}.color-scheme-options{grid-template-columns:1fr}.color-scheme-choice{flex-direction:row;justify-content:space-between;text-align:left}}.component-canvas{display:flex;flex-direction:column;gap:24px;padding:20px}.empty-canvas{display:flex;align-items:center;justify-content:center;height:400px;color:#666;font-size:18px}.component-wrapper{background:#1a1a1a;border:1px solid #333;border-radius:16px;overflow:hidden;animation:slideIn .3s ease}.component-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #333;background:#151515}.component-actions{display:flex;gap:12px;align-items:center}.component-title-row{display:flex;align-items:center;gap:12px;margin-bottom:4px}.component-info h3{font-size:18px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}.regenerate-button{background:#000;border:1px solid #666;color:#888;padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:4px}.regenerate-button:hover{background:linear-gradient(135deg,#a855f7,#9333ea);border-color:#a855f7;color:#fff}.version-badge{background:#0070f3;color:#fff;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:600}.component-prompt{font-size:14px;color:#888;font-style:italic}.code-toggle{background:#0a0a0a;border:1px solid #333;color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s ease}.code-toggle:hover{background:linear-gradient(135deg,#a855f7,#9333ea);border-color:#a855f7}.framer-export-btn{background:#000;border:1px solid #333;color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease;display:flex;align-items:center;gap:8px}.framer-export-btn:hover{background:#1a1a1a;border-color:#444;transform:translateY(-1px)}.bolt-export-btn{background:#000;border:1px solid #333;color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease;display:flex;align-items:center;gap:8px}.bolt-export-btn:hover{background:#1a1a1a;border-color:#444;transform:translateY(-1px)}.code-display{padding:20px;background:#0a0a0a;border-bottom:1px solid #333;overflow-x:auto}.code-display pre{margin:0;font-family:Courier New,monospace;font-size:13px;line-height:1.6}.code-display code{color:#a9a9a9}.component-preview{padding:24px}.preview-label{font-size:12px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px}.preview-content{background:#0a0a0a;border:1px solid #333;border-radius:12px;padding:40px;min-height:200px;display:flex;align-items:center;justify-content:center}.error-preview{color:#ff6b6b;text-align:center}@media (max-width: 768px){.component-canvas{padding:12px;gap:16px}.component-header{flex-direction:column;align-items:flex-start;gap:12px}.component-actions{width:100%;justify-content:flex-end}.framer-export-btn{flex:1;justify-content:center}.preview-content{padding:20px}}.component-masonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:20px;align-items:start}.empty-masonry{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:#666;text-align:center}.empty-masonry p:first-child{font-size:18px;margin-bottom:8px}.empty-masonry p:last-child{font-size:14px;color:#555}.masonry-item{break-inside:avoid;page-break-inside:avoid}.masonry-card{background:#1a1a1a;border:1px solid #333;border-radius:16px;overflow:hidden;transition:all .3s ease;display:flex;flex-direction:column;animation:slideIn .3s ease}.masonry-card:hover{transform:translateY(-4px);border-color:#a855f7;background:linear-gradient(135deg,#a855f70d,#a855f705);box-shadow:0 8px 24px #a855f74d}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.masonry-header{padding:16px;border-bottom:1px solid #333;background:#151515}.masonry-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.masonry-title-row h4{margin:0;font-size:14px;font-weight:600;color:#fff;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.masonry-version{background:#0070f3;color:#fff;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;flex-shrink:0}.masonry-actions{display:flex;gap:6px;align-items:center}.masonry-export-btn{background:transparent;border:1px solid #444;color:#888;padding:6px;border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.masonry-export-btn:hover{background:linear-gradient(135deg,#a855f7,#9333ea);border-color:#a855f7;color:#fff}.masonry-regenerate{background:transparent;border:1px solid #444;color:#888;padding:4px 8px;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.masonry-regenerate:hover{background:linear-gradient(135deg,#a855f7,#9333ea);border-color:#a855f7;color:#fff}.masonry-preview{padding:24px;background:#0a0a0a;min-height:200px;display:flex;align-items:center;justify-content:center}.masonry-error{color:#ff6b6b;text-align:center;font-size:13px}.masonry-placeholder{color:#666;text-align:center;font-size:13px;padding:20px}@media (max-width: 1200px){.component-masonry{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}}@media (max-width: 768px){.component-masonry{grid-template-columns:1fr;gap:16px;padding:12px}}.history-sidebar{width:340px;display:flex;flex-direction:column;background:linear-gradient(145deg,#1a1a1a,#151515);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;height:100%;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #0000004d,0 2px 8px #0003,inset 0 1px #ffffff0d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.history-sidebar.collapsed{width:50px}.history-header{padding:24px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,#151515,#121212);position:relative;overflow:hidden}.history-header:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%)}.history-sidebar.collapsed .history-header{padding:20px 10px}.history-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.history-title-row h3{font-size:20px;font-weight:700;color:#fff;margin:0;background:linear-gradient(135deg,#fff,#e0e0e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.history-sidebar.collapsed .history-title-row h3{display:none}.toggle-button{background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);color:#888;font-size:14px;box-shadow:0 2px 8px #00000026}.toggle-button:hover{background:#ffffff1a;border-color:#fff3;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.history-subtitle{font-size:14px;color:#888;font-weight:400;opacity:.8}.history-sidebar.collapsed .history-subtitle{display:none}.history-content{flex:1;overflow-y:auto;padding:24px;background:linear-gradient(180deg,#1a1a1acc,#151515e6)}.empty-history{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#888;text-align:center;padding:32px;gap:12px}.empty-history p{margin:0;font-size:14px;line-height:1.5;opacity:.8}.empty-history p:first-child{font-size:16px;font-weight:500;color:#aaa}.history-list{display:flex;flex-direction:column;gap:16px}.history-item{background:linear-gradient(135deg,#222,#1e1e1e);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a,inset 0 1px #ffffff05}.history-item:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#0070f3,#00d4ff);opacity:0;transition:opacity .3s ease}.history-item:hover{border-color:#a855f7;background:linear-gradient(135deg,#a855f71a,#a855f70d);transform:translateY(-2px);box-shadow:0 8px 24px #a855f726,0 4px 12px #a855f71a,inset 0 1px #a855f70d}.history-item.current{border-color:#0070f3;background:linear-gradient(135deg,#0070f314,#0070f30d);box-shadow:0 0 20px #0070f326,inset 0 1px #0070f31a}.history-item.current:before{opacity:1}.history-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}.delete-button{background:transparent;border:none;color:#888;cursor:pointer;font-size:16px;padding:4px;border-radius:4px;transition:all .2s ease;flex-shrink:0}.delete-button:hover{background:#ff4d4d1a;color:#ff4d4d;transform:scale(1.1)}.version-badge{background:linear-gradient(135deg,#333,#2a2a2a);color:#fff;padding:6px 10px;border-radius:14px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px;box-shadow:0 1px 3px #0003;border:1px solid rgba(255,255,255,.05);text-transform:uppercase;letter-spacing:.5px}.history-item.current .version-badge{background:linear-gradient(135deg,#0070f3,#0056cc);box-shadow:0 0 12px #0070f34d}.current-indicator{color:#00ff41;font-size:8px;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.history-timestamp{font-size:11px;color:#888}.history-prompt{color:#fff;font-size:14px;line-height:1.5;margin-bottom:12px;word-wrap:break-word;font-weight:400;opacity:.95}.history-meta{display:flex;gap:8px;margin-bottom:12px}.ui-style-tag,.component-style-tag{background:linear-gradient(135deg,#ffffff14,#ffffff0d);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ddd;padding:4px 8px;border-radius:8px;font-size:10px;font-weight:600;text-transform:capitalize;border:1px solid rgba(255,255,255,.05);box-shadow:0 1px 3px #0000001a;letter-spacing:.3px}.restore-button{background:linear-gradient(135deg,#0070f31a,#0070f30d);border:1px solid rgba(0,112,243,.3);color:#0070f3;padding:8px 16px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 8px #0070f31a}.restore-button:hover{background:linear-gradient(135deg,#0070f3,#0056cc);border-color:#0070f3;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #0070f34d}.open-project-button{background:linear-gradient(135deg,#28a745,#218838);border:1px solid #28a745;color:#fff;padding:8px 16px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 8px #28a74533}.open-project-button:hover{background:linear-gradient(135deg,#218838,#1e7e34);border-color:#1e7e34;transform:translateY(-1px);box-shadow:0 4px 12px #28a7454d}.project-item{border-color:#28a74566;background:linear-gradient(135deg,#28a74514,#28a7450d);box-shadow:0 0 20px #28a7451a,inset 0 1px #28a7451a}.project-item:hover{border-color:#a855f7;background:linear-gradient(135deg,#a855f71f,#a855f714);transform:translateY(-2px);box-shadow:0 8px 24px #a855f733,0 0 20px #a855f726,inset 0 1px #a855f726}.project-item .version-badge{background:transparent;box-shadow:none;border:none}.folder-icon{width:16px;height:16px;object-fit:contain}.version-count{background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff;padding:2px 6px;border-radius:8px;font-size:9px;font-weight:700;margin-left:4px;box-shadow:0 1px 4px #a855f74d;border:1px solid rgba(255,255,255,.1);min-width:16px;text-align:center}.history-item.current .restore-button{display:none}@media (max-width: 768px){.history-sidebar{width:300px;border-radius:16px}.history-sidebar.collapsed{width:40px}.history-header,.history-content{padding:20px}.history-item{padding:16px;border-radius:14px}.version-badge{font-size:10px;padding:4px 8px}.history-prompt{font-size:13px}.ui-style-tag,.component-style-tag{font-size:9px;padding:3px 6px}.restore-button,.open-project-button{padding:6px 12px;font-size:11px}}.skeleton-loader{position:relative;background:linear-gradient(135deg,#1a1a1a,#151515);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;margin-bottom:20px;overflow:hidden}.skeleton-video-bg{position:absolute;top:-30%;left:-30%;width:160%;height:160%;object-fit:cover;opacity:.5;z-index:1;pointer-events:none;animation:skeleton-video-float 8s ease-in-out infinite}.skeleton-overlay{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%}.skeleton-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;background:#0000004d;border-radius:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1)}.skeleton-text-shimmer{font-size:24px;font-weight:600;background:linear-gradient(90deg,#9ca3af,#d1d5db,#f3f4f6,#d1d5db,#9ca3af);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2s ease-in-out infinite;letter-spacing:1px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes skeleton-video-float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(-5px,-3px) scale(1.02)}50%{transform:translate(3px,-5px) scale(.98)}75%{transform:translate(-2px,2px) scale(1.01)}}.shader-gradient{background:linear-gradient(135deg,#000,#111,#000)}.shader-gradient{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:-1!important;pointer-events:none!important}.shader-gradient{image-rendering:-webkit-optimize-contrast;image-rendering:optimize-contrast;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shader-gradient{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.app{position:relative;z-index:1}.app>*{position:relative;z-index:1}.app{min-height:100vh;display:flex;flex-direction:column;background:transparent}.app-header{text-align:center;padding:60px 20px 40px;border-bottom:1px solid #222;background:transparent}.app-title{font-size:48px;font-weight:700;background:linear-gradient(135deg,#fff,#888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px}.unicorn-logo{width:100%;max-width:800px;height:300px;margin:0 auto 20px;display:block;background:transparent!important}.unicorn-logo>*{background:transparent!important}.unicorn-logo canvas{background:transparent!important}.brand-title{font-size:72px;font-weight:900;background:linear-gradient(135deg,#fff,#888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:30px 0 20px;letter-spacing:-2px;text-transform:uppercase}.title-divider{width:80px;height:3px;background:linear-gradient(90deg,#fff,#888);margin:0 auto 20px;border-radius:2px}.app-subtitle{font-size:28px;color:#aaa;font-weight:300;margin-bottom:40px;letter-spacing:1px;text-transform:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5}.prompt-input-section{padding:20px;display:flex;justify-content:center;border-bottom:1px solid #222}.prompt-input-section .prompt-input-container{width:100%;max-width:1600px}.error-banner{background:#f44;color:#fff;padding:12px 20px;text-align:center;font-size:14px;border-bottom:1px solid #cc0000}.app-content{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:40px 20px;position:relative;z-index:1}.main-layout{display:flex;width:100%;max-width:1600px;gap:20px;height:calc(100vh - 250px)}.intro-layout{display:flex;width:100%;max-width:1600px;gap:20px;height:calc(100vh - 450px)}.masonry-area,.content-area{flex:1;overflow-y:auto;padding:0 10px}.intro-content{flex:1;overflow-y:auto;padding:0 10px;display:flex;align-items:center;justify-content:center}@media (max-width: 768px){.app-title{font-size:32px}.brand-title{font-size:48px;margin:20px 0 15px;letter-spacing:-1px}.unicorn-logo{max-width:100%;height:200px}.app-subtitle{font-size:24px;margin-bottom:30px}.prompt-input-section{padding:15px}.intro-layout{height:calc(100vh - 550px);flex-direction:column}.masonry-area{max-height:50vh}.main-layout{flex-direction:column;height:auto}.content-area,.intro-content{height:auto;max-height:50vh}}.variant-selection{padding:20px}.variant-selection h3{color:#fff;font-size:24px;font-weight:700;margin-bottom:20px;text-align:center}.variants-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1200px;margin:0 auto}.variant-item{background:#0a0a0a;border:1px solid #222;border-radius:12px;padding:20px;transition:all .3s ease;position:relative;overflow:hidden}.variant-item:hover{border-color:#444;transform:translateY(-2px);box-shadow:0 8px 24px #0006}.variant-item.generating{opacity:.7}.variant-item.completed:hover{border-color:#0070f3;box-shadow:0 8px 24px #0070f333}.variant-item.selected{border-color:#0070f3;box-shadow:0 0 0 2px #0070f366}.variant-number{position:absolute;top:12px;right:12px;background:#0070f3;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;z-index:2}.variant-preview{height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border-radius:8px;overflow:hidden;background:#111;border:1px solid #222}.variant-placeholder{font-size:48px;color:#666}.select-variant-btn{width:100%;background:linear-gradient(135deg,#0070f3,#0051cc);border:none;color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.select-variant-btn:hover{background:linear-gradient(135deg,#0051cc,#003d99);transform:translateY(-1px);box-shadow:0 4px 12px #0070f34d}.select-variant-btn:active{transform:translateY(0)}@media (max-width: 768px){.variants-grid{grid-template-columns:1fr;gap:16px}.variant-selection{padding:16px}.variant-selection h3{font-size:20px;margin-bottom:16px}.variant-item{padding:16px}.variant-preview{height:160px}}.demo-badge{position:fixed;top:20px;right:20px;background:#000;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 12px #ff6b6b4d;z-index:1000;border:2px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.beta-badge{background:transparent;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;display:inline-block;margin-bottom:-40px;border:2px solid white;position:relative;overflow:hidden}.beta-badge:hover{background:#ffffff1a;transform:translateY(-1px);transition:all .2s ease}*{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:#000;color:#fff;overflow-x:hidden}#root{width:100%;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#333;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#444}