*{box-sizing:border-box}:root{--glass-bg:rgba(255,255,255,0.1);--glass-border:1px solid rgba(255,255,255,0.18);--glass-shadow:0 8px 32px 0 rgba(0,0,0,0.3);--text-color:#fff;--input-bg:rgba(255,255,255,0.05);--btn-bg:rgba(52,152,219,0.7);--btn-hover:rgba(52,152,219,0.9);--error-bg:rgba(255,107,107,0.7);--error-hover:rgba(255,107,107,0.9)}body{font-family:'Nunito',sans-serif;margin:0;padding:0;background:url('bg.jpg') no-repeat center center fixed;background-size:cover;display:flex;height:100vh;color:var(--text-color);overflow:hidden}.container{display:flex;flex-direction:column;width:100%;height:100%;padding:20px;gap:20px;overflow:auto}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(10px);border-radius:15px;padding:20px;box-shadow:var(--glass-shadow);border:var(--glass-border)}.glass-panel.settings{display:flex;flex-direction:column;overflow-y:auto}.glass-panel.image-container{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}#generation-form{flex-grow:1}.setting{margin-bottom:20px}.setting label{display:block;margin-bottom:10px}.resolution-inputs{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.resolution-inputs input[type="number"]{width:45%;background:var(--input-bg);border:var(--glass-border);color:var(--text-color);font-size:16px;padding:10px;border-radius:10px;-moz-appearance:textfield}.resolution-inputs input[type="number"]::-webkit-inner-spin-button,.resolution-inputs input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.resolution-inputs span{margin:0 10px;font-size:20px;color:var(--text-color)}input[type="text"],input[type="number"],textarea,button{width:100%;padding:15px;margin-bottom:20px;background:var(--input-bg);border:var(--glass-border);border-radius:10px;color:var(--text-color);font-family:'Nunito',sans-serif;font-size:16px;transition:all 0.3s ease}textarea{height:120px;min-height:120px;max-height:120px;resize:none;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}input[type="text"]:focus,input[type="number"]:focus,textarea:focus{outline:none;box-shadow:0 0 10px rgba(255,255,255,0.3)}input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.5)}button{background:var(--btn-bg);cursor:pointer;border:none;transition:background-color 0.3s ease}button:hover{background:var(--btn-hover)}img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:var(--glass-shadow);opacity:0;transition:opacity 0.5s ease-in-out}img.fade-in{opacity:1}h1,h2{text-align:center;margin-bottom:20px;font-weight:700}.loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:5px solid rgba(255,255,255,0.1);border-top:5px solid var(--btn-bg);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}.hidden{display:none!important}.model-selection{background:var(--glass-bg);border-radius:15px;padding:15px;margin-bottom:20px;box-shadow:var(--glass-shadow);border:var(--glass-border)}.model-header{text-align:center;font-weight:bold;margin-bottom:10px;color:var(--text-color)}.model-options{display:flex;justify-content:space-around}.model-option{position:relative;width:80px;height:40px}.model-option input[type="radio"]{opacity:0;width:0;height:0}.model-option span{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--input-bg);border-radius:20px;transition:0.4s;display:flex;align-items:center;justify-content:center;color:var(--text-color);border:var(--glass-border)}.model-option input:checked+span{background:var(--btn-bg)}.setting label[for="random-seed"]{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:10px}#random-seed{width:auto;margin:0}#seed-input{margin-top:10px}.setting-description{font-family:'Nunito',sans-serif;font-size:14px;color:rgba(255,255,255,0.5);margin-top:5px;margin-bottom:15px}input[type="range"]{-webkit-appearance:none;width:100%;height:20px;background:var(--input-bg);border:var(--glass-border);border-radius:10px;outline:none;margin:15px 0;padding:0 5px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.3)}input[type="range"]::-webkit-slider-runnable-track{height:10px;background:var(--input-bg);border-radius:5px;border:var(--glass-border)}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:25px;border-radius:50%;background:var(--btn-bg);cursor:pointer;margin-top:-7px;box-shadow:0 2px 5px rgba(0,0,0,0.3);border:2px solid rgba(255,255,255,0.5);transition:all 0.2s ease}input[type="range"]::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:var(--btn-bg);cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.3);border:2px solid rgba(255,255,255,0.5);transition:all 0.2s ease}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.1);background:var(--btn-hover);box-shadow:0 0 10px rgba(52,152,219,0.5)}input[type="range"]::-moz-range-thumb:hover{transform:scale(1.1);background:var(--btn-hover);box-shadow:0 0 10px rgba(52,152,219,0.5)}#num_inference_steps-value{display:inline-block;min-width:30px;text-align:center;background:var(--input-bg);border:var(--glass-border);border-radius:5px;padding:3px 8px;margin-left:10px;font-weight:bold}.image-info,.generation-time{margin-top:20px;padding:10px;background:var(--glass-bg);border-radius:5px;font-size:14px;text-align:center;border:var(--glass-border)}.generate-btn{animation:pulse 2s infinite}@keyframes pulse{0%,100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(52,152,219,0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(52,152,219,0)}}.fade-in{animation:fadeIn 0.5s ease-in-out}.prompt-container{margin-bottom:10px}.api-key-btn{position:relative;align-self:flex-start;margin-top:20px;width:auto;padding:10px 15px;font-size:14px}.popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center;z-index:1000;transition:opacity 0.3s ease,visibility 0.3s ease}.popup-content{background:var(--glass-bg);backdrop-filter:blur(10px);padding:20px;border-radius:10px;max-width:500px;width:90%;transition:transform 0.3s ease,opacity 0.3s ease;border:var(--glass-border);box-shadow:var(--glass-shadow)}.popup a{color:#00BFFF;text-decoration:none}.popup a:hover{text-decoration:underline}.popup h3,.popup h4{margin-bottom:10px}.popup ol{padding-left:20px}#error-popup .popup-content{text-align:center;max-width:400px}#error-popup h3{color:#ff6b6b;margin-bottom:15px}#error-popup p{margin-bottom:20px;line-height:1.5}#error-popup button{width:auto;padding:10px 30px;margin:0 auto;background:var(--error-bg);animation:errorPulse 2s infinite}#error-popup button:hover{background:var(--error-hover)}@keyframes errorPulse{0%,100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(255,107,107,0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,107,107,0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInScale{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeOutScale{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}.popup.show{visibility:visible;opacity:1}.popup.show .popup-content{animation:fadeInScale 0.3s forwards}.popup.hide{opacity:0;visibility:hidden}.popup.hide .popup-content{animation:fadeOutScale 0.3s forwards}@media screen and (min-width:768px){.container{flex-direction:row;justify-content:space-between}.glass-panel.settings{width:calc(25% - 10px)}.glass-panel.image-container{width:calc(75% - 10px);height:calc(100vh - 40px);display:flex;justify-content:center;align-items:center}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.setting-item{background:rgba(255,255,255,0.1);padding:10px;border-radius:5px}.setting-label{font-weight:bold;margin-bottom:5px}.setting-value{word-break:break-word}.image-container img{max-width:1024px;max-height:512px;width:auto;height:auto;object-fit:contain}}@media screen and (max-width:480px){body{font-size:14px}.container{padding:15px}.glass-panel{padding:15px}input[type="text"],input[type="number"],button,textarea{padding:12px;font-size:14px}textarea{height:100px;min-height:100px;max-height:100px}.model-option{width:60px;height:30px;font-size:12px}}