@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--font-family: "Outfit", sans-serif;--bg-dark: #0f1115;--bg-gradient: linear-gradient(135deg, #09090b 0%, #171717 50%, #262626 100%);--panel-bg: rgba(255, 255, 255, .03);--panel-border: rgba(255, 255, 255, .06);--text-primary: #fafafa;--text-secondary: #a1a1aa;--accent-color: #3b82f6;--accent-hover: #2563eb;--accent-glow: rgba(59, 130, 246, .3);--success-color: #10b981;--danger-color: #ef4444;--border-radius-lg: 24px;--border-radius-md: 16px;--border-radius-sm: 8px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--bg-gradient);background-attachment:fixed;color:var(--text-primary);min-height:100vh;margin:0;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 15px #3b82f600}to{box-shadow:0 0 #3b82f600}}@keyframes scan-line{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}to{top:100%;opacity:0}}.glass-panel{background:var(--panel-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:var(--border-radius-lg);box-shadow:0 25px 50px -12px #00000080}.gradient-text{background:linear-gradient(to right,#f8fafc,#94a3b8,#e2e8f0);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}.btn{font-family:var(--font-family);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--border-radius-md);font-weight:600;cursor:pointer;transition:var(--transition);border:none;font-size:1rem}.btn-primary{background:linear-gradient(135deg,var(--accent-color),var(--accent-hover));color:#fff;box-shadow:0 4px 14px 0 var(--accent-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px 0 var(--accent-glow);background:linear-gradient(135deg,#60a5fa,#3b82f6)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;background:var(--panel-border)}.btn-secondary{background:transparent;border:1px solid var(--panel-border);color:var(--text-primary)}.btn-secondary:hover{background:#ffffff0d;border-color:#fff3}.app-container{max-width:1200px;margin:0 auto;padding:2rem;width:100%}.header{text-align:center;margin-bottom:3rem;animation:fadeIn .8s ease-out}.header h1{font-size:3.5rem;font-weight:800;margin-bottom:.5rem;letter-spacing:-.02em}.header p{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:2rem;animation:fadeIn 1.2s ease-out}.upload-section{display:flex;flex-direction:column;gap:1.5rem;padding:2rem}.result-section{padding:2rem;display:flex;flex-direction:column}.section-title{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;display:flex;align-items:center;gap:12px}.icon{color:var(--accent-color)}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.upload-box{background:#ffffff05;border:2px dashed rgba(255,255,255,.1);border-radius:var(--border-radius-md);padding:1.5rem;text-align:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px}.upload-box:hover{border-color:var(--accent-color);background:#8b5cf60d;transform:translateY(-2px)}.upload-box.has-image{border-style:solid;border-color:#fff3;padding:0}.upload-icon{color:var(--text-secondary);transition:var(--transition);margin-bottom:.75rem}.upload-box:hover .upload-icon{color:var(--accent-color);transform:translateY(-4px)}.upload-box p{font-size:.9rem;color:var(--text-secondary);font-weight:500}.upload-box span.sub-text{font-size:.8rem;color:#94a3b899;margin-top:.5rem}.upload-box input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.preview-image{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:1}.remove-btn{position:absolute;top:8px;right:8px;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;z-index:3;transition:var(--transition)}.remove-btn:hover{background:var(--danger-color);transform:scale(1.1)}.upload-full{grid-column:1 / -1;min-height:160px}.actions{margin-top:auto;padding-top:2rem}.generate-btn{width:100%;font-size:1.1rem;padding:1rem}.generate-btn:not(:disabled){animation:pulse-glow 2s infinite}.result-container{flex:1;display:flex;align-items:center;justify-content:center;background:#0003;border-radius:var(--border-radius-md);border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;min-height:400px}.result-placeholder{text-align:center;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:1rem}.result-image{width:100%;height:100%;object-fit:contain;animation:fadeIn 1s ease}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172acc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10}.scanner{position:absolute;left:0;width:100%;height:2px;background:var(--accent-color);box-shadow:0 0 10px 2px var(--accent-glow);z-index:11;animation:scan-line 2.5s infinite linear}.loader-spinner{width:50px;height:50px;border:3px solid rgba(139,92,246,.2);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s infinite linear;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-primary);font-weight:500;font-size:1.1rem;margin-top:1rem}.api-config{background:#ffffff05;border:1px solid var(--panel-border);padding:1rem;border-radius:var(--border-radius-sm);margin-bottom:1.5rem}.api-config label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}.api-config input{width:100%;background:#0003;border:1px solid rgba(255,255,255,.1);color:#fff;padding:.75rem;border-radius:var(--border-radius-sm);font-family:var(--font-family);font-size:.9rem}.api-config input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #8b5cf633}@media(max-width:900px){.main-content{grid-template-columns:1fr}.header h1{font-size:2.5rem}}