@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-color:#0f172a;--bg-gradient:radial-gradient(circle at top right, #1e293b, #0f172a 70%);--panel-bg:#1e293b99;--panel-border:#ffffff1a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-primary:#8b5cf6;--accent-hover:#a78bfa;--success:#10b981;--error:#ef4444;--radius-lg:16px;--radius-md:12px;--shadow-glow:0 0 20px #8b5cf64d;--shadow-panel:0 8px 32px #0006}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-attachment:fixed;min-height:100vh;font-family:Outfit,sans-serif}.app-container{flex-direction:column;gap:1.5rem;width:96%;max-width:1680px;margin:0 auto;padding:1.5rem;display:flex}header{text-align:center;margin-bottom:1rem}header h1{background:linear-gradient(135deg,#a78bfa,#38bdf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}header p{color:var(--text-secondary);font-size:1.1rem}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);padding:1.5rem}.glass-panel h2{color:var(--text-primary);align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.2rem;display:flex}.main-grid{grid-template-columns:360px 1fr;align-items:start;gap:1.5rem;display:grid}.left-column{scrollbar-width:thin;scrollbar-color:#fff3 transparent;flex-direction:column;gap:1.5rem;max-height:calc(100vh - 3rem);padding-right:4px;display:flex;position:sticky;top:1.5rem;overflow-y:auto}.left-column::-webkit-scrollbar{width:6px}.left-column::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.right-column{flex-direction:column;gap:1.5rem;min-width:0;display:flex}.input-group{flex-direction:column;gap:1.5rem;display:flex}label{color:var(--text-secondary);flex-direction:column;gap:.5rem;font-size:.95rem;font-weight:500;display:flex}input,textarea{border:1px solid var(--panel-border);border-radius:var(--radius-md);color:var(--text-primary);resize:vertical;background:#0f172a99;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:all .3s}input:focus,textarea:focus{border-color:var(--accent-primary);box-shadow:var(--shadow-glow);outline:none}.button-primary{background:linear-gradient(135deg, var(--accent-primary), #6366f1);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.button-primary:hover:not(:disabled){box-shadow:var(--shadow-glow);background:linear-gradient(135deg, var(--accent-hover), #818cf8);transform:translateY(-2px)}.button-primary:disabled{opacity:.5;cursor:not-allowed}.button-secondary{border:1px solid var(--panel-border);color:var(--text-primary);border-radius:var(--radius-md);cursor:pointer;background:#ffffff0d;padding:.6rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s}.button-secondary:hover:not(:disabled){background:#ffffff1a;border-color:#fff3}.button-secondary:disabled{opacity:.5;cursor:not-allowed}.templates-grid{grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;display:grid}.template-card{flex-direction:column;gap:1rem;display:flex}.image-container{aspect-ratio:1;border-radius:var(--radius-md);border:1px dashed var(--panel-border);background:#0f172acc;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.image-container img{object-fit:contain;width:100%;height:100%;transition:transform .5s}.image-container:hover img{transform:scale(1.02)}.placeholder-text{color:var(--text-secondary);text-align:center;padding:1rem;font-size:.9rem}.actions-section{grid-template-columns:1fr 1fr;gap:2rem;display:grid}.buttons-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;display:grid}.gallery-section{margin-top:2rem}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin-top:1rem;display:grid}.gallery-item{border-radius:var(--radius-md);border:1px solid var(--panel-border);background:#0f172a99;transition:transform .3s;overflow:hidden}.gallery-item:hover{border-color:#fff3;transform:translateY(-5px)}.gallery-item img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.gallery-item-info{text-align:center;color:var(--text-secondary);background:#0003;padding:.75rem;font-size:.9rem}.loader{border:3px solid #ffffff1a;border-top:3px solid var(--accent-primary);border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.overlay-loader{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text-primary);z-index:10;background:#0f172acc;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:absolute;inset:0}.settings-panel{align-items:flex-end;gap:1rem;margin-bottom:2rem;display:flex}.variation-image-wrapper .variation-card-toolbar{opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);transform:translateY(4px)}.variation-image-wrapper:hover .variation-card-toolbar,.variation-image-wrapper:focus-within .variation-card-toolbar{opacity:1;pointer-events:auto;transform:translateY(0)}.variation-card-toolbar button:hover{transform:scale(1.08);background:#ffffff26!important}.variation-card-toolbar button{transition:background .15s,transform .15s}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-shimmer{background:linear-gradient(90deg,#0f172acc 0%,#1e293bb3 20%,#38bdf81f 50%,#1e293bb3 80%,#0f172acc 100%) 0 0/200% 100%;animation:2.2s cubic-bezier(.4,0,.6,1) infinite skeleton-shimmer}.animate-spin{animation:1s linear infinite spin}.img-fade-in{opacity:0;transition:opacity .3s cubic-bezier(.16,1,.3,1)}.img-fade-in.loaded{opacity:1}@media (width<=1180px){.main-grid{grid-template-columns:1fr}.left-column{max-height:none;padding-right:0;position:static;overflow-y:visible}}@media (width<=768px){.templates-grid{grid-template-columns:1fr}}