:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fff;background-color:#0a0a0a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}a{color:#0f8;text-decoration:none}a:hover{text-decoration:underline}.voice-selector{display:flex;flex-direction:column;gap:.5rem}.voice-selector label{font-weight:600;color:#888;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.voice-selector select{padding:.75rem 1rem;font-size:1rem;border:1px solid #333;border-radius:8px;background:#1a1a1a;color:#fff;cursor:pointer;transition:border-color .2s}.voice-selector select:hover{border-color:#0f8}.voice-selector select:focus{outline:none;border-color:#0f8;box-shadow:0 0 0 2px #0f83}.voice-selector.loading,.voice-selector.error{padding:1rem;color:#888;font-style:italic}.quality-selector{display:flex;flex-direction:column;gap:.5rem}.quality-selector label{font-weight:600;color:#888;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.quality-selector select{padding:.75rem 1rem;font-size:1rem;border:1px solid #333;border-radius:8px;background:#1a1a1a;color:#fff;cursor:pointer;transition:border-color .2s}.quality-selector select:hover{border-color:#0f8}.quality-selector select:focus{outline:none;border-color:#0f8;box-shadow:0 0 0 2px #0f83}.advanced-settings{display:flex;flex-direction:column;gap:.75rem}.advanced-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;background:none;border:none;color:#888;font-size:.875rem;cursor:pointer;transition:color .2s}.advanced-toggle:hover{color:#0f8}.toggle-icon{font-size:.75rem;transition:transform .2s}.advanced-panel{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#1a1a1a;border:1px solid #333;border-radius:8px}.setting-row{display:flex;flex-direction:column;gap:.25rem}.setting-header{display:flex;justify-content:space-between;align-items:center}.setting-header label{font-weight:500;color:#ccc;font-size:.875rem}.setting-value{font-family:monospace;font-size:.875rem;color:#0f8;min-width:50px;text-align:right}.setting-row input[type=range]{width:100%;height:6px;background:#333;border-radius:3px;appearance:none;cursor:pointer}.setting-row input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:#0f8;border-radius:50%;cursor:pointer;transition:transform .1s}.setting-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.setting-row input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#0f8;border:none;border-radius:50%;cursor:pointer}.setting-description{margin:0;font-size:.75rem;color:#666}.reset-btn{margin-top:.5rem;padding:.5rem 1rem;background:transparent;border:1px solid #444;border-radius:4px;color:#888;font-size:.75rem;cursor:pointer;transition:all .2s;align-self:flex-start}.reset-btn:hover{border-color:#666;color:#ccc}.text-input{display:flex;flex-direction:column;gap:.5rem}.text-input label{font-weight:600;color:#888;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.text-input textarea{padding:1rem;font-size:1rem;font-family:inherit;border:1px solid #333;border-radius:8px;background:#1a1a1a;color:#fff;resize:vertical;min-height:100px;transition:border-color .2s}.text-input textarea:hover{border-color:#555}.text-input textarea:focus{outline:none;border-color:#0f8;box-shadow:0 0 0 2px #0f83}.text-input textarea:disabled{opacity:.6;cursor:not-allowed}.text-input textarea::placeholder{color:#555}.text-input .text-input-footer{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:#555}.text-input .char-count{text-align:left}.text-input .credit-cost{text-align:right;color:#0f8}.text-input .credit-cost strong{color:#0f8}.text-input .credit-cost.insufficient,.text-input .credit-cost.insufficient strong{color:#ff6b6b}.text-input .credit-cost .warning{color:#ff6b6b;font-size:.7rem}.text-input .credit-info{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#00ff880d;border:1px solid rgba(0,255,136,.15);border-radius:6px;font-size:.8rem;color:#888;margin-top:.5rem}.text-input .credit-info-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;background:#0f83;color:#0f8;border-radius:50%;font-size:.65rem;font-weight:700;flex-shrink:0;margin-top:1px}.text-input .credit-info strong{color:#0f8}.generation-progress{margin-top:1.5rem}.generate-btn{width:100%;padding:1rem 2rem;font-size:1.125rem;font-weight:600;background:#0f8;color:#000;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.generate-btn:hover:not(:disabled){background:#00cc6e;transform:translateY(-1px)}.generate-btn:disabled{background:#333;color:#666;cursor:not-allowed}.progress-container{padding:1.5rem;background:#1a1a1a;border-radius:8px;border:1px solid #333}.progress-bar{height:8px;background:#333;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#0f8,#00cc6e);transition:width .3s ease}.progress-info{display:flex;justify-content:space-between;margin-top:.75rem;font-size:.875rem}.progress-stage{color:#888}.progress-percent{color:#0f8;font-weight:600}.error-message{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#ff44441a;border:1px solid #ff4444;border-radius:8px;color:#f44}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#f44;color:#000;border-radius:50%;font-weight:700;flex-shrink:0}.error-text{flex:1;font-size:.875rem}.retry-btn{padding:.5rem 1rem;background:transparent;border:1px solid #ff4444;color:#f44;border-radius:6px;cursor:pointer;font-size:.875rem;transition:all .2s}.retry-btn:hover{background:#f44;color:#000}.complete-actions{text-align:center}.success-message{padding:1rem;background:#00ff881a;border:1px solid #00ff88;border-radius:8px;color:#0f8;margin-bottom:1rem}.action-buttons{display:flex;gap:1rem}.download-btn{flex:1;padding:.75rem 1.5rem;background:#0f8;color:#000;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s}.download-btn:hover{background:#00cc6e}.new-btn{flex:1;padding:.75rem 1.5rem;background:transparent;border:1px solid #333;color:#888;border-radius:6px;cursor:pointer;transition:all .2s}.new-btn:hover{border-color:#555;color:#fff}.library-panel{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;max-height:180px;background:#30f;border-top:2px solid #5533ff}.library-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-bottom:1px solid rgba(255,255,255,.2);flex-shrink:0}.library-panel-title{display:flex;align-items:center;gap:.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;font-weight:500;color:#fff}.library-icon{font-size:1rem}.library-panel .refresh-btn{background:transparent;width:28px;height:28px;padding:0;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:0;transition:all .2s}.library-panel .refresh-btn:hover:not(:disabled){border-color:#fff;background:#ffffff1a}.library-panel .refresh-btn:disabled{opacity:.3;cursor:not-allowed}.library-error{display:flex;align-items:center;justify-content:space-between;padding:.375rem 1rem;background:#ff00644d;border-bottom:1px solid rgba(255,0,100,.5);color:#fff;font-size:.75rem;flex-shrink:0}.library-error .dismiss-btn{background:transparent;border:none;color:#fff;font-size:1rem;cursor:pointer;padding:0;line-height:1;opacity:.7}.library-error .dismiss-btn:hover{opacity:1}.library-bundle-list{flex:1;overflow-y:auto;overflow-x:hidden;background:#0a0a14}.library-empty{padding:1rem;text-align:center;font-size:.8rem;color:#3300ff80}.library-bundle-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.08);background:#0a0a14}.library-bundle-item:last-child{border-bottom:none}.library-bundle-item:hover:not(.disabled){background:#12121f}.library-bundle-item.disabled{opacity:.5;cursor:not-allowed}.bundle-info{display:flex;flex-direction:column;gap:.1rem;overflow:hidden;flex:1;min-width:0}.bundle-name{font-size:.8rem;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bundle-meta{font-size:.6rem;color:#ffffff80;font-family:SF Mono,Monaco,Inconsolata,monospace}.library-bundle-item .download-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;width:24px;min-width:24px;max-width:24px;height:24px;padding:0;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;flex-grow:0;margin-left:.5rem;opacity:.6;border-radius:0}.library-bundle-item:hover .download-btn{opacity:1}.library-bundle-item .download-btn:hover{border-color:#fff;background:#ffffff26}.library-bundle-list::-webkit-scrollbar{width:6px}.library-bundle-list::-webkit-scrollbar-track{background:#0a0a14}.library-bundle-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.library-bundle-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#1a1a1a;border:1px solid #333;border-radius:12px;max-width:480px;width:90%;max-height:90vh;overflow-y:auto;animation:slideUp .2s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #333}.modal-title{margin:0;font-size:1.25rem;font-weight:600;color:#fff}.modal-close{background:none;border:none;font-size:1.5rem;color:#888;cursor:pointer;padding:0;line-height:1;transition:color .15s}.modal-close:hover{color:#fff}.modal-body{padding:1.5rem}.license-form{display:flex;flex-direction:column;gap:1rem}.license-description{color:#aaa;margin:0;text-align:center}.license-input{font-family:Monaco,Menlo,monospace;font-size:1.25rem;text-align:center;letter-spacing:2px;padding:1rem;background:#0a0a0a;border:1px solid #333;border-radius:8px;color:#fff;outline:none;transition:border-color .15s,box-shadow .15s}.license-input:focus{border-color:#0f8;box-shadow:0 0 0 3px #00ff881a}.license-input::placeholder{color:#555;letter-spacing:2px}.license-input:disabled{opacity:.6;cursor:not-allowed}.license-error{color:#f44;margin:0;text-align:center;font-size:.875rem}.license-submit{padding:.875rem 1.5rem;background:#0f8;color:#000;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}.license-submit:hover:not(:disabled){background:#00cc6e}.license-submit:active:not(:disabled){transform:scale(.98)}.license-submit:disabled{background:#333;color:#666;cursor:not-allowed}.license-help{color:#666;font-size:.875rem;text-align:center;margin:.5rem 0 0}.license-help a{color:#0f8;text-decoration:none}.license-help a:hover{text-decoration:underline}.buy-credits{display:flex;flex-direction:column;gap:1.5rem}.buy-credits-balance{text-align:center;color:#aaa;margin:0}.buy-credits-balance strong{color:#0f8}.credit-packs{display:flex;flex-direction:column;gap:.75rem}.credit-pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1.25rem;background:#0a0a0a;border:1px solid #333;border-radius:12px;cursor:pointer;transition:all .15s}.credit-pack:hover{background:#111;border-color:#444}.credit-pack-featured{border-color:#0f8;background:#00ff880d}.credit-pack-featured:hover{background:#00ff881a;border-color:#0f8}.pack-badge{position:absolute;top:-10px;right:12px;padding:.25rem .5rem;background:#0f8;color:#000;font-size:.7rem;font-weight:600;border-radius:4px;text-transform:uppercase}.pack-name{font-size:.875rem;color:#888;text-transform:uppercase;letter-spacing:1px}.pack-credits{font-size:1.5rem;font-weight:600;color:#fff}.pack-price{font-size:1.25rem;color:#0f8;font-weight:500}.pack-rate{font-size:.75rem;color:#666}.buy-credits-info{text-align:center;color:#666;font-size:.875rem;margin:0}.settings{display:flex;flex-direction:column;gap:1.5rem}.settings-section{display:flex;flex-direction:column;gap:.75rem;padding-bottom:1.5rem;border-bottom:1px solid #333}.settings-section:last-child{border-bottom:none;padding-bottom:0}.settings-section-title{margin:0;font-size:.875rem;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:1px}.settings-row{display:flex;justify-content:space-between;align-items:center}.settings-label{color:#aaa}.settings-value{font-family:Monaco,Menlo,monospace;color:#fff;font-size:.875rem}.settings-mode{display:flex;flex-direction:column;gap:.5rem}.mode-option{display:flex;flex-direction:column;gap:.125rem;padding:.75rem;background:#0a0a0a;border:1px solid #333;border-radius:8px;opacity:.5}.mode-option.mode-active{opacity:1;border-color:#0f8;background:#00ff880d}.mode-name{font-weight:600;color:#fff}.mode-description{font-size:.875rem;color:#888}.byok-form{display:flex;flex-direction:column;gap:.75rem}.byok-description{margin:0;color:#aaa;font-size:.875rem}.byok-input{padding:.75rem 1rem;background:#0a0a0a;border:1px solid #333;border-radius:8px;color:#fff;font-family:Monaco,Menlo,monospace;font-size:.875rem;outline:none;transition:border-color .15s}.byok-input:focus{border-color:#0f8}.byok-input:disabled{opacity:.6}.byok-error{margin:0;color:#f44;font-size:.875rem}.byok-active{display:flex;flex-direction:column;gap:.75rem}.byok-status{margin:0;color:#0f8;font-size:.875rem}.settings-button-primary{padding:.75rem 1rem;background:#0f8;color:#000;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background .15s}.settings-button-primary:hover:not(:disabled){background:#00cc6e}.settings-button-primary:disabled{background:#333;color:#666;cursor:not-allowed}.settings-button-danger{padding:.75rem 1rem;background:transparent;color:#f44;border:1px solid #ff4444;border-radius:8px;font-weight:500;cursor:pointer;transition:all .15s}.settings-button-danger:hover:not(:disabled){background:#ff44441a}.settings-button-danger:disabled{opacity:.5;cursor:not-allowed}.credits-display{display:flex;align-items:center;gap:.5rem}.credits-badge{display:flex;align-items:center;gap:.35rem;padding:.4rem .75rem;background:#00ff881a;border:1px solid rgba(0,255,136,.3);border-radius:20px;color:#0f8;font-size:.875rem;cursor:pointer;transition:all .15s}.credits-badge:hover{background:#0f83;border-color:#00ff8880}.credits-badge.credits-low{background:#ffaa001a;border-color:#ffaa004d;color:#fa0}.credits-badge.credits-low:hover{background:#fa03;border-color:#ffaa0080}.credits-badge.credits-byok{background:#8888ff1a;border-color:#8888ff4d;color:#88f}.credits-badge.credits-byok:hover{background:#88f3;border-color:#8888ff80}.credits-icon{font-size:.625rem}.credits-value{font-weight:600}.credits-label{font-weight:400;opacity:.8}.settings-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:1px solid #333;border-radius:8px;color:#888;cursor:pointer;transition:all .15s}.settings-button:hover{background:#222;border-color:#444;color:#fff}.app{min-height:100vh;display:flex;flex-direction:column;background:#0a0a0a;color:#fff}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid #222}.header-left,.header-right{flex:1;display:flex}.header-left{justify-content:flex-start}.header-right{justify-content:flex-end}.header-center{text-align:center}.app-header h1{margin:0;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#0f8,#0af);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-header .subtitle{margin:.25rem 0 0;color:#666;font-size:.875rem}.app-loading{justify-content:center;align-items:center;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid #333;border-top-color:#0f8;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-main{flex:1;padding:2rem;padding-bottom:200px;display:flex;flex-direction:column;align-items:center;gap:2rem}.generation-panel{width:100%;max-width:600px;display:flex;flex-direction:column;gap:1.5rem}.selectors-row{display:flex;gap:1rem}.selectors-row>*{flex:1}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea,select{font-family:inherit}
