:root{--bg: #06060f;--bg-2: #0b0b1a;--glass: rgba(255, 255, 255, .045);--glass-strong: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .09);--glass-border-hot: rgba(255, 255, 255, .22);--text: #f3f3fb;--muted: #9696b0;--accent: #8b5cf6;--accent-2: #22d3ee;--accent-3: #ec4899;--ok: #34d399;--err: #fb7185;--radius: 20px;--shadow: 0 24px 70px rgba(0, 0, 0, .55);--glow: 0 0 0 1px rgba(255,255,255,.06), 0 0 46px rgba(139, 92, 246, .18);--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:var(--text);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.backdrop:before{content:"";position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;background:radial-gradient(42% 38% at 18% 22%,rgba(139,92,246,.2),transparent 60%),radial-gradient(38% 34% at 82% 16%,rgba(34,211,238,.16),transparent 60%),radial-gradient(46% 44% at 62% 78%,rgba(236,72,153,.14),transparent 62%),radial-gradient(30% 30% at 30% 88%,rgba(34,211,238,.1),transparent 60%);filter:blur(20px) saturate(120%);animation:drift 28s var(--ease) infinite alternate}@keyframes drift{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.08)}to{transform:translate3d(3%,-2%,0) scale(1.02)}}.particles{position:absolute;top:0;right:0;bottom:0;left:0}.particles span{position:absolute;bottom:-12vh;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(139,92,246,.4) 60%,transparent 70%);filter:blur(.5px);opacity:0;animation:floatUp linear infinite}@keyframes floatUp{0%{transform:translateY(0) translate(0) scale(.6);opacity:0}10%{opacity:.6}90%{opacity:.4}to{transform:translateY(-118vh) translate(6vw) scale(1.15);opacity:0}}.grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .6s steps(2) infinite}@keyframes grain{0%{transform:translate(0)}50%{transform:translate(-2%,2%)}to{transform:translate(2%,-1%)}}.shell{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:28px 22px 96px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;margin-bottom:26px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:var(--glow);animation:rise .6s var(--ease) both}@keyframes rise{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:38px;height:38px;border-radius:11px;object-fit:cover;box-shadow:0 0 22px #8b5cf666;animation:pulseGlow 3.5s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 18px #8b5cf659}50%{box-shadow:0 0 34px #22d3ee8c}}.brand-name{font-size:20px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(100deg,#f3f3fb,#c7c9ff 55%,#8ce7ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.brand-tag{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.02em}.model-badge{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:7px 13px;border-radius:999px;background:#ffffff08;border:1px solid var(--glass-border)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:blink 2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.35}}.hero{position:relative;border-radius:26px;overflow:hidden;margin-bottom:26px;border:1px solid var(--glass-border);box-shadow:var(--shadow);animation:rise .7s var(--ease) .05s both}.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;transform:scale(1.06);animation:heroZoom 22s var(--ease) infinite alternate}@keyframes heroZoom{0%{transform:scale(1.02)}to{transform:scale(1.12) translateY(-1.5%)}}.hero-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#06060f40,#06060f80 55%,#06060fd1)}.hero-inner{position:relative;padding:62px 40px 58px;display:flex;flex-direction:column;gap:14px}.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#b8ffef}.hero-eyebrow .kicker{color:var(--accent-2)}.hero h1{margin:0;font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.02;background:linear-gradient(105deg,#fff,#d9d5ff,#9be8ff 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero p{margin:0;max-width:560px;color:#f8f8fff5;font-size:16px;line-height:1.6;text-shadow:0 1px 8px rgba(0,0,0,.55)}.hero-cta-row{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}.hero-cta{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:13px;border:none;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 10px 30px #8b5cf659;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}.hero-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px #22d3ee73}.hero-cta.ghost{background:#ffffff0f;border:1px solid var(--glass-border-hot);box-shadow:none;color:var(--text);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.hero-cta.ghost:hover{background:#ffffff1f;box-shadow:none}.feat-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.feat-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#ffffffd9;padding:8px 14px;border-radius:999px;background:#ffffff0e;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:26px;padding:7px;border-radius:17px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);position:sticky;top:14px;z-index:5;animation:rise .7s var(--ease) .1s both}.tab{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 8px;border:none;border-radius:12px;cursor:pointer;background:transparent;color:var(--muted);font-size:14px;font-weight:600;font-family:inherit;transition:all .25s var(--ease);position:relative}.tab:hover{color:var(--text)}.tab.active{color:#fff;background:linear-gradient(135deg,#8b5cf6e6,#22d3eed9);box-shadow:0 8px 24px #8b5cf659}@media(max-width:640px){.tabs{grid-template-columns:repeat(2,1fr)}.hero-inner{padding:44px 24px 40px}}.content{display:flex;flex-direction:column;gap:22px}.panel{position:relative;border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:20px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);box-shadow:var(--shadow);overflow:hidden;animation:rise .6s var(--ease) both}.panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.06),transparent 45%);pointer-events:none}.panel>*{position:relative;z-index:1}.panel-head{display:flex;flex-direction:column;gap:4px}.panel-title{font-size:18px;font-weight:700;letter-spacing:-.015em}.panel-sub{font-size:13px;color:var(--muted);line-height:1.5}.field{display:flex;flex-direction:column;gap:9px}.field label{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.field.grow{flex:1}textarea,input,select{background:#00000038;border:1px solid var(--glass-border);border-radius:13px;color:var(--text);padding:13px 14px;font-size:15px;font-family:inherit;resize:vertical;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}textarea::placeholder,input::placeholder{color:#8a8aa6}textarea:focus,input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #8b5cf638,0 0 24px #8b5cf626;background:#00000052}select option{background:#14142a;color:var(--text)}.row{display:flex;gap:14px}.row.hint{flex-wrap:wrap}.mini-upload{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border:1px dashed var(--glass-border-hot);border-radius:12px;cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;background:#ffffff05;transition:all .2s var(--ease)}.mini-upload:hover{border-color:var(--accent);color:var(--text);background:#8b5cf614}.cta{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;border:none;border-radius:14px;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:15px;font-weight:700;font-family:inherit;box-shadow:0 12px 30px #8b5cf652;position:relative;overflow:hidden;transition:transform .16s var(--ease),box-shadow .16s var(--ease),opacity .2s}.cta:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translate(-120%);transition:transform .7s var(--ease)}.cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 42px #22d3ee66}.cta:hover:not(:disabled):after{transform:translate(120%)}.cta:disabled{opacity:.4;cursor:not-allowed}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-track{height:7px;border-radius:999px;overflow:hidden;background:#ffffff0f}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));background-size:200% 100%;animation:shimmer 2s linear infinite;transition:width .45s var(--ease);border-radius:999px}@keyframes shimmer{0%{background-position:0% 0}to{background-position:-200% 0}}.working{display:flex;flex-direction:column;gap:11px;padding:8px 0}.generating-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600}.gen-dots{display:inline-flex;gap:4px}.gen-dots i{width:5px;height:5px;border-radius:50%;background:var(--accent-2);animation:dot 1.2s ease-in-out infinite}.gen-dots i:nth-child(2){animation-delay:.15s}.gen-dots i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,to{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.muted{color:var(--muted);font-size:13px}.error{color:var(--err);font-size:13px;padding:12px 14px;background:#fb718517;border:1px solid rgba(251,113,133,.22);border-radius:11px}.done{color:var(--ok);font-size:13px;font-weight:600}.tag{color:var(--ok);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}.preview{width:100%;border-radius:14px;background:#000;box-shadow:0 14px 40px #00000080;border:1px solid var(--glass-border)}.preview-audio{width:100%;height:48px;border-radius:14px}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
