* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, Arial, sans-serif; background: #08090d; color: #eef2ff; }
body { min-height: 100vh; background:
 radial-gradient(circle at top left, rgba(233,30,99,0.16), transparent 28%),
 radial-gradient(circle at top right, rgba(255,193,7,0.14), transparent 24%),
 linear-gradient(180deg, #0b0e14 0%, #07080b 100%);
}
.page-shell { width: min(1200px, calc(100% - 32px)); margin: 24px auto 40px; }
.hero-card, .panel { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: rgba(18,20,29,0.86); backdrop-filter: blur(10px); box-shadow: 0 25px 80px rgba(0,0,0,0.35); }
.hero-card { border-radius: 28px; padding: 34px; min-height: 240px; display: grid; align-items: center; }
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.eyebrow { display: inline-block; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.06); color: #f3c65b; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-card h1 { margin: 16px 0 12px; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -0.04em; }
.hero-card h1 span { color: #ffd369; }
.hero-card p { margin: 0; max-width: 680px; font-size: 18px; line-height: 1.6; color: #cfd7ee; }
.hero-glow { position: absolute; right: -90px; top: -40px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255,211,105,0.25), rgba(255,0,128,0.08), transparent 70%); filter: blur(8px); }
.content-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; margin-top: 20px; }
.panel { border-radius: 24px; padding: 26px; }
.panel h2 { margin: 0 0 14px; font-size: 22px; }
.upload-box { display: block; padding: 22px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 20px; background: rgba(255,255,255,0.03); cursor: pointer; }
.upload-box input { display: block; width: 100%; margin-bottom: 12px; }
.upload-title { display: block; font-size: 18px; font-weight: 700; }
.upload-sub { display: block; margin-top: 6px; color: #b8c2e3; font-size: 14px; }
.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.style-card { display: block; padding: 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035); cursor: pointer; transition: 180ms ease; }
.style-card input { display: none; }
.style-card strong { display: block; font-size: 17px; margin-bottom: 6px; }
.style-card span { color: #b9c3e0; line-height: 1.5; font-size: 14px; }
.style-card.active { border-color: rgba(255,211,105,0.7); box-shadow: inset 0 0 0 1px rgba(255,211,105,0.2), 0 12px 24px rgba(255,211,105,0.08); transform: translateY(-1px); }
textarea { width: 100%; resize: vertical; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #fff; padding: 16px; font: inherit; min-height: 130px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; padding: 16px 22px; border-radius: 16px; border: none; cursor: pointer; text-decoration: none; font-weight: 700; }
.primary-button { margin-top: 18px; width: 100%; background: linear-gradient(135deg, #ffcc59 0%, #ff4f9b 100%); color: #17171b; box-shadow: 0 18px 44px rgba(255, 95, 152, 0.28); }
.secondary-button { margin-top: 14px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.09); }
.status-badge { display: inline-block; padding: 10px 14px; border-radius: 999px; font-weight: 700; margin-bottom: 14px; }
.status-badge.idle { background: rgba(255,255,255,0.08); }
.status-badge.work { background: rgba(255,211,105,0.18); color: #ffd369; }
.status-badge.ok { background: rgba(29,185,84,0.18); color: #8dffbb; }
.status-badge.fail { background: rgba(255,80,80,0.18); color: #ff9d9d; }
.status-message { font-size: 18px; font-weight: 600; line-height: 1.5; }
.status-step, .job-meta { margin-top: 12px; color: #bfc8e5; line-height: 1.55; }
.result-area { margin-top: 20px; }
.result-area video { width: 100%; border-radius: 18px; background: #000; border: 1px solid rgba(255,255,255,0.08); }
.hidden { display: none; }
@media (max-width: 920px) { .content-grid { grid-template-columns: 1fr; } .style-grid { grid-template-columns: 1fr; } .page-shell { width: min(100% - 18px, 1200px); } .hero-card, .panel { padding: 20px; } }