:root{--bg-dark: #07090e;--bg-panel: rgba(15, 20, 32, .88);--bg-input: rgba(24, 32, 50, .75);--amber-main: #f59e0b;--amber-warm: #d97706;--amber-gold: #fbbf24;--emerald-main: #10b981;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--border-subtle: rgba(255, 255, 255, .1)}*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(circle at top left,#17130d,#07090e 55%,#05070b);color:var(--text-primary);font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;overflow-x:hidden}.app-shell{min-height:100vh;display:flex;flex-direction:column}.top-header{background:#0a0d16e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle);padding:.95rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}.brand-wrap{display:flex;align-items:center;gap:.9rem}.brand-badge{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#f59e0b,#b45309);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px #f59e0b59}.brand-icon-svg{width:24px;height:24px;color:#09090b}.brand-title-row{display:flex;align-items:center;gap:.65rem}.brand-title{font-size:1.25rem;font-weight:800;letter-spacing:.02em;background:linear-gradient(90deg,#fde68a,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ratio-pill{font-size:.68rem;font-weight:800;background:#f59e0b29;color:#fcd34d;border:1px solid rgba(245,158,11,.35);padding:.15rem .55rem;border-radius:999px}.brand-subtitle{font-size:.76rem;color:var(--text-muted);margin-top:2px}.api-toggle-btn{background:#1e293bcc;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.5rem .9rem;color:var(--text-secondary);font-size:.76rem;font-weight:700;display:flex;align-items:center;gap:.45rem;cursor:pointer;transition:all .2s}.api-toggle-btn:hover{border-color:var(--amber-main);background:#1e293b}.api-bar{background:#0d1322;border-bottom:1px solid rgba(245,158,11,.3);padding:.75rem 2rem}.api-bar-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}.api-bar-label{font-size:.78rem;font-weight:700;color:#fde68a}.api-bar-input{flex:1;min-width:240px;background:#162033;border:1px solid #334155;border-radius:8px;padding:.45rem .75rem;color:#f8fafc;font-size:.8rem}.api-bar-link{color:#fbbf24;font-size:.75rem;font-weight:700;display:flex;align-items:center;gap:.25rem;text-decoration:none}.api-bar-save{background:var(--amber-main);color:#09090b;border:none;border-radius:8px;padding:.42rem .9rem;font-size:.75rem;font-weight:800;cursor:pointer}.workspace-grid{flex:1;max-width:1360px;width:100%;margin:0 auto;padding:1.75rem 1.5rem;display:grid;grid-template-columns:1.05fr .95fr;gap:1.75rem;align-items:start}@media(max-width:980px){.workspace-grid{grid-template-columns:1fr}}.panel-card{background:var(--bg-panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--border-subtle);border-radius:20px;padding:1.5rem;box-shadow:0 12px 35px #00000073;display:flex;flex-direction:column;gap:1.25rem}.panel-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.85rem;gap:.75rem;flex-wrap:wrap}.panel-title-group{display:flex;align-items:center;gap:.55rem}.panel-title-group h2{font-size:1.02rem;font-weight:800;color:#f1f5f9}.step-tag{font-size:.7rem;font-weight:700;color:#fbbf24;background:#f59e0b1f;border:1px solid rgba(245,158,11,.25);padding:.2rem .6rem;border-radius:999px}.samples-strip{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:#0f172a99;border:1px solid rgba(255,255,255,.06);padding:.6rem .85rem;border-radius:12px}.samples-label{font-size:.73rem;font-weight:700;color:var(--text-muted)}.samples-buttons{display:flex;gap:.45rem;flex-wrap:wrap}.sample-chip{display:flex;align-items:center;gap:.35rem;background:#1e293bd9;border:1px solid rgba(255,255,255,.1);color:#cbd5e1;padding:.32rem .65rem;border-radius:8px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .18s}.sample-chip:hover{border-color:var(--amber-main);color:#fff}.sample-chip.active{background:#f59e0b33;border-color:var(--amber-main);color:#fde68a}.field-group{display:flex;flex-direction:column;gap:.5rem}.field-label{display:flex;align-items:center;justify-content:space-between;font-size:.84rem;font-weight:700;color:#e2e8f0;gap:.5rem}.label-with-icon{display:flex;align-items:center;gap:.4rem}.field-badge{font-size:.68rem;font-weight:700;background:#10b98126;color:#6ee7b7;padding:.12rem .5rem;border-radius:6px}.auto-filled-tag{font-size:.68rem;font-weight:700;background:#f59e0b29;color:#fcd34d;padding:.12rem .5rem;border-radius:6px}.optional-tag{font-size:.68rem;font-weight:600;background:#94a3b826;color:#94a3b8;padding:.12rem .5rem;border-radius:6px}.dropzone{border:2px dashed rgba(245,158,11,.35);background:#0c111da6;border-radius:14px;padding:1.1rem;cursor:pointer;transition:all .2s ease;display:block}.dropzone:hover,.dropzone.dragging{border-color:var(--amber-main);background:#182032cc}.sr-only-input{display:none}.dropzone-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:1rem .5rem}.dropzone-title{font-size:.9rem;font-weight:700;color:#f8fafc}.dropzone-sub{font-size:.75rem;color:var(--text-muted)}.uploaded-preview-row{display:flex;align-items:center;gap:1rem}.checkerboard-thumb{width:92px;height:92px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background-color:#1e293b;background-image:linear-gradient(45deg,#0f172a 25%,transparent 25%),linear-gradient(-45deg,#0f172a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#0f172a 75%),linear-gradient(-45deg,transparent 75%,#0f172a 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;display:flex;align-items:center;justify-content:center;padding:6px;flex-shrink:0}.checkerboard-thumb img{max-width:100%;max-height:100%;object-fit:contain}.uploaded-meta{flex:1;display:flex;flex-direction:column;gap:.3rem}.uploaded-filename{display:flex;align-items:center;gap:.4rem;font-size:.92rem;font-weight:800;color:#f8fafc}.uploaded-sub{font-size:.74rem;color:var(--text-muted)}.change-file-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;color:#fbbf24;margin-top:.2rem}.ref-code-wrapper{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;background:#0c111da6;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:.85rem}@media(max-width:600px){.ref-code-wrapper{grid-template-columns:1fr}}.ref-code-badge-preview{background:linear-gradient(135deg,#df9f3d,#c48224);color:#09090b;padding:.55rem .95rem;border-radius:8px;display:flex;flex-direction:column;min-width:170px;box-shadow:0 4px 14px #d977064d;border:1px solid rgba(255,255,255,.25)}.ref-mini-top{font-size:.58rem;font-weight:800;letter-spacing:.06em;opacity:.85}.ref-mini-code{font-size:1.15rem;font-weight:900;letter-spacing:.02em;margin-top:1px}.ref-input-box{display:flex;flex-direction:column;gap:.3rem}.ref-code-input{width:100%;background:var(--bg-input);border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:.65rem .85rem;color:#fff;font-size:.95rem;font-weight:800;font-family:inherit}.ref-code-input:focus{outline:none;border-color:var(--amber-gold);box-shadow:0 0 0 3px #f59e0b33}.ref-input-hint{font-size:.71rem;color:var(--text-muted)}.prompt-textarea{width:100%;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:12px;padding:.8rem .95rem;color:#f8fafc;font-size:.84rem;font-family:inherit;resize:vertical;line-height:1.45}.prompt-textarea:focus{outline:none;border-color:var(--amber-main);box-shadow:0 0 0 3px #f59e0b26}.quick-pills{display:flex;gap:.45rem;flex-wrap:wrap}.pill-btn{background:#1e293bbf;border:1px solid rgba(255,255,255,.1);color:#cbd5e1;border-radius:8px;padding:.3rem .65rem;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s}.pill-btn:hover{border-color:var(--amber-main);color:#fde68a}.pill-btn.clear{background:#ef444426;border-color:#ef444459;color:#fca5a5}.error-banner{background:#ef444424;border:1px solid rgba(239,68,68,.4);border-radius:12px;padding:.75rem 1rem;display:flex;align-items:center;gap:.65rem;color:#fecaca;font-size:.8rem}.error-icon{color:#f87171;flex-shrink:0}.progress-card{background:#0f172ae6;border:1px solid rgba(245,158,11,.4);border-radius:12px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.5rem}.progress-top{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;font-weight:700;color:#fde68a}.progress-status{display:flex;align-items:center;gap:.45rem}.progress-bar-bg{width:100%;height:9px;background:#1e293b;border-radius:999px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24,#10b981);border-radius:999px;transition:width .35s ease}.cta-stack{display:flex;flex-direction:column;gap:.65rem}.primary-generate-btn{width:100%;background:linear-gradient(135deg,#f59e0b,#d97706);color:#09090b;border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:1rem 1.25rem;font-size:.94rem;font-weight:900;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:.65rem;cursor:pointer;box-shadow:0 6px 24px #f59e0b59;transition:all .2s ease}.primary-generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px #f59e0b8c}.primary-generate-btn:disabled{opacity:.65;cursor:not-allowed}.secondary-actions-row{display:flex;gap:.6rem;flex-wrap:wrap}.studio-quick-btn{flex:1;background:#1e293bd9;border:1px solid rgba(255,255,255,.14);color:#e2e8f0;border-radius:11px;padding:.68rem .9rem;font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.45rem;cursor:pointer;transition:all .18s}.studio-quick-btn:hover:not(:disabled){border-color:var(--amber-main);background:#334155e6}.prompt-inspect-btn{background:#0f172ad9;border:1px solid rgba(255,255,255,.12);color:#94a3b8;border-radius:11px;padding:.68rem .85rem;font-size:.75rem;font-weight:700;display:flex;align-items:center;gap:.4rem;cursor:pointer}.prompt-inspect-btn:hover{color:#f8fafc;border-color:#ffffff47}.refined-prompt-box{background:#090d16;border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:.85rem;font-size:.74rem}.refined-prompt-header{font-weight:700;color:#fbbf24;margin-bottom:.45rem}.refined-prompt-pre{white-space:pre-wrap;word-break:break-word;color:#cbd5e1;font-family:monospace;max-height:180px;overflow-y:auto;line-height:1.4}.result-badges{display:flex;align-items:center;gap:.45rem}.code-pill{font-size:.74rem;font-weight:900;background:#d99326;color:#09090b;padding:.2rem .6rem;border-radius:6px}.model-pill{font-size:.7rem;font-weight:700;background:#10b98129;color:#6ee7b7;border:1px solid rgba(16,185,129,.3);padding:.2rem .55rem;border-radius:6px}.viewport-3x4{width:100%;max-width:540px;aspect-ratio:3 / 4;margin:0 auto;background:#030508;border-radius:16px;border:1px solid rgba(255,255,255,.14);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px #000000a6}.result-showcase-img{width:100%;height:100%;object-fit:contain;display:block}.loading-overlay{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem;gap:.65rem}.loading-overlay h3{font-size:1rem;font-weight:800;color:#fde68a}.loading-overlay p{font-size:.8rem;color:var(--text-muted);max-width:340px}.pulse-ring{width:76px;height:76px;border-radius:50%;background:#f59e0b1f;border:1px solid rgba(245,158,11,.35);display:flex;align-items:center;justify-content:center;margin-bottom:.4rem}.empty-showcase{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:#64748b;font-size:.85rem}.download-bar{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}@media(max-width:560px){.download-bar{grid-template-columns:1fr}}.download-btn{border-radius:12px;padding:.8rem 1rem;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;transition:all .18s}.download-btn.hd{background:#059669;border:1px solid #10b981;color:#fff}.download-btn.ultra{background:linear-gradient(135deg,#f59e0b,#b45309);border:1px solid #fbbf24;color:#09090b}.download-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}.icon-amber{color:#f59e0b}.icon-emerald{color:#10b981}.spin-icon{animation:spin 1.1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.admin-user-pill{display:flex;align-items:center;gap:.45rem;background:#f59e0b1a;border:1px solid rgba(245,158,11,.25);border-radius:9999px;padding:.35rem .8rem;font-size:.76rem;color:#fde68a;font-weight:500}.admin-email{font-family:monospace;font-size:.75rem;color:#fbbf24}.logout-btn{display:flex;align-items:center;gap:.35rem;background:#ef44441a;border:1px solid rgba(239,68,68,.25);color:#fca5a5;padding:.35rem .75rem;border-radius:9999px;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .2s ease}.logout-btn:hover{background:#ef444433;border-color:#ef444466;color:#fee2e2}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .2s ease forwards}.auth-wrapper{min-height:100vh;width:100%;background-color:#07090e;background-image:radial-gradient(circle at 50% 0%,rgba(245,158,11,.08) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:1.5rem;box-sizing:border-box;color:#f8fafc;font-family:inherit}.auth-header{width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem}.auth-card{width:100%;max-width:440px;background:#0f1420f2;border:1px solid rgba(255,255,255,.1);border-radius:1.25rem;padding:2rem;box-shadow:0 25px 50px -12px #000000b3;box-sizing:border-box;margin:auto 0}.auth-title-icon{width:56px;height:56px;border-radius:16px;background:#f59e0b1f;border:1px solid rgba(245,158,11,.3);color:#f59e0b;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}.auth-title{font-size:1.35rem;font-weight:700;color:#fff;text-align:center;margin-bottom:.25rem}.auth-subtitle{font-size:.8rem;color:#94a3b8;text-align:center;margin-bottom:.5rem}.auth-admin-badge{display:block;width:fit-content;margin:.25rem auto 1.25rem;background:#f59e0b1a;border:1px solid rgba(245,158,11,.25);color:#fbbf24;font-size:.75rem;font-family:monospace;font-weight:600;padding:.25rem .65rem;border-radius:6px}.auth-tabs{display:flex;background:#090d16;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:4px;margin-bottom:1.25rem;gap:4px}.auth-tab-btn{flex:1;padding:.6rem;font-size:.78rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;background:transparent;color:#94a3b8;transition:all .2s ease}.auth-tab-btn.active{background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;box-shadow:0 2px 8px #f59e0b4d}.auth-field{margin-bottom:1rem}.auth-label{display:flex;justify-content:space-between;font-size:.76rem;font-weight:600;color:#cbd5e1;margin-bottom:.4rem}.auth-input-wrap{position:relative;display:flex;align-items:center}.auth-input-icon{position:absolute;left:.85rem;color:#64748b;pointer-events:none}.auth-input{width:100%;background:#090d16;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.65rem .85rem .65rem 2.5rem;color:#f8fafc;font-size:.85rem;box-sizing:border-box;outline:none;transition:border-color .2s}.auth-input:focus{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b}.auth-eye-btn{position:absolute;right:.75rem;background:transparent;border:none;color:#64748b;cursor:pointer;padding:.2rem;display:flex;align-items:center}.auth-eye-btn:hover{color:#cbd5e1}.auth-submit-btn{width:100%;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;color:#09090b;font-weight:700;font-size:.88rem;padding:.8rem;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.25rem;box-shadow:0 4px 14px #f59e0b40;transition:all .2s}.auth-submit-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-alert-error{background:#ef44441f;border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:.75rem;border-radius:10px;font-size:.76rem;margin-bottom:1rem;display:flex;align-items:flex-start;gap:.5rem}.auth-alert-success{background:#10b9811f;border:1px solid rgba(16,185,129,.3);color:#6ee7b7;padding:.75rem;border-radius:10px;font-size:.76rem;margin-bottom:1rem;display:flex;align-items:flex-start;gap:.5rem}.auth-supabase-box{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}