:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:#17221e;background:#080a11;font-synthesis:none;--green:#244e3b;--muted:#727b72;--border:#dfe3d9}*{box-sizing:border-box}body{margin:0}header{max-width:1320px;margin:auto;padding:28px 48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}a{color:var(--green);text-decoration:none}.wordmark{font-size:26px;font-weight:750;letter-spacing:-1px}.wordmark span{font-size:10px;font-weight:600;letter-spacing:2px;margin-left:16px;color:var(--muted)}nav{display:flex;gap:22px;align-items:center;font-size:12px}nav #mode{border:1px solid var(--border);border-radius:40px;padding:8px 12px}main{max-width:1240px;padding:0 32px;margin:auto}.intro{padding:64px 0 48px;max-width:760px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#75816c;margin:0 0 16px}h1{font-size:clamp(36px,5vw,60px);line-height:1.18;font-weight:650;letter-spacing:-2px;margin:0 0 24px}h2{font-size:22px;letter-spacing:-.5px;margin:0 0 16px}p{color:var(--muted);font-size:14px;line-height:1.9}.intro p:not(.eyebrow){max-width:600px}.chip{display:inline-block;background:#e8ece1;font-size:11px;padding:8px 12px;border-radius:5px;margin:10px 8px 0 0;color:#526146}.card{border:1px solid var(--border);background:#fff;border-radius:16px;padding:30px;margin:0 0 24px;box-shadow:0 4px 16px #14261503}.auth-card{display:grid;grid-template-columns:1fr 1fr;gap:80px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.columns .card{min-width:0}label{display:block;font-size:12px;font-weight:600;margin:16px 0 8px}input,select,textarea{display:block;width:100%;border:1px solid #d5dbd2;background:#fcfcfa;border-radius:7px;padding:12px;margin-top:8px;font:inherit;font-size:14px;color:#24372d}input:focus,select:focus,textarea:focus{outline:2px solid #92b397;outline-offset:2px}button{background:var(--green);color:#fff;border:0;padding:12px 20px;border-radius:7px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-top:12px}button:hover{filter:brightness(1.12)}button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#edf1e9;color:var(--green);border:1px solid #dfe5d9}small{display:block;color:var(--muted);line-height:1.7;font-size:11px;margin:12px 0}.workspace-head,.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.workspace-head{margin-bottom:24px}.workspace-head h2{font-size:18px;margin:0}.row h2{margin:0}.row button{margin:0}.check{display:flex;align-items:flex-start;gap:8px;font-weight:400;line-height:1.7}.check input,.checks input{width:16px;height:16px;margin:2px 0;accent-color:var(--green)}.checks{display:flex;gap:16px}.checks label{display:flex;gap:6px;font-weight:400}.consent{padding:12px;background:#f3f5ef;border-radius:8px}.connection,.item{border-bottom:1px solid #edf0e8;padding:12px 0;display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:12px}.connection button,.item button{padding:7px 12px;margin:0;white-space:nowrap}.item span{overflow-wrap:anywhere}.muted{font-size:12px}video{width:100%;max-height:390px;background:#101713;border-radius:10px;margin-top:18px}#notice{background:#e8efdc;border:1px solid #c4d1b4;border-radius:8px;color:#294b31;padding:14px 20px;position:sticky;top:12px;z-index:2;white-space:pre-wrap;overflow-wrap:anywhere}#notice.error{background:#fff0e9;border-color:#e6bba7;color:#873d28}table{border-collapse:collapse;width:100%;font-size:12px}th,td{text-align:left;padding:14px 8px;border-bottom:1px solid #edf0e8}th{font-weight:500;color:var(--muted)}.table-wrap{overflow-x:auto}.status{display:inline-block;border-radius:4px;background:#ecf0e6;padding:5px 8px;white-space:nowrap}#secret-value{font-family:monospace;font-size:12px}details{margin-top:20px;font-size:12px;color:var(--muted)}summary{cursor:pointer}footer{max-width:1240px;padding:32px;margin:auto;border-top:1px solid var(--border);display:flex;justify-content:space-between;color:var(--muted);font-size:11px}[hidden]{display:none!important}@media(max-width:750px){header{padding:20px}.wordmark span{display:none}nav{gap:12px}nav #mode{display:none}main{padding:0 20px}.intro{padding:40px 0 30px}.columns,.auth-card{grid-template-columns:1fr;gap:0}.auth-card{gap:24px}.card{padding:22px}.workspace-head{align-items:flex-start}.workspace-head h2{max-width:75%;overflow-wrap:anywhere}.checks{flex-wrap:wrap}}

/* 登录注册共享原生弹窗，背景和工作台保持独立。 */
body { min-height: 100svh; background-color: #080a11; background-image: url("/static/assets/clip-now-onboarding-background.png"); background-position: center; background-size: cover; background-attachment: fixed; }
body.auth-view { color: #242426; }
body.auth-modal-open, body.company-modal-open { overflow: hidden; }
.auth-view main { max-width: 1120px; padding: 0 24px; min-height: 100svh; }
.auth-view .intro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 0 32px; max-width: none; text-align: center; }
.auth-view .intro .hero-title { color: #fff; text-shadow: 0 8px 36px #00000094; }
/* 主标题参考大号黑体排版。 */
.intro .hero-title { margin: 0; color: #111; font-size: clamp(32px, 7.2vw, 84px); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; word-spacing: .18em; text-align: center; }
.hero-title > span { display: block; }
.hero-title > span:first-child { font-size: clamp(21px, 5.4vw, 68px); white-space: nowrap; }
#auth { position: fixed; inset: 0; margin: auto; width: min(464px, calc(100% - 32px)); max-width: none; min-height: 0; max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 58px 40px 40px; border: 1px solid #e5e7ec; border-radius: 28px; background: #fff; color: #242426; box-shadow: 0 28px 100px #17203524; }
#auth::backdrop { background: #05081266; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#company-dialog { position: fixed; inset: 0; margin: auto; width: min(500px, calc(100% - 32px)); max-width: none; min-height: 0; padding: 56px 38px 38px; border: 1px solid #e5e7ec; border-radius: 28px; background: #fff; color: #242426; box-shadow: 0 28px 100px #00000038; }
#company-dialog::backdrop { background: #05081299; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.company-heading { margin-bottom: 28px; text-align: center; }
.company-heading h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: -1px; }
.company-heading p { margin: 0; color: #77777e; font-size: 14px; line-height: 1.6; }
.company-field { display: block; margin: 0 0 18px; color: #333337; font-size: 14px; font-weight: 700; }
.company-field input { width: 100%; min-height: 54px; margin: 8px 0 0; padding: 14px 16px; border: 1px solid #d4d5da; border-radius: 12px; background: #fff; color: #242426; font-size: 16px; }
.company-field input:focus { border-color: #73849d; outline: 3px solid #73849d2e; }
#company-profile-state { min-height: 20px; margin: -4px 0 10px; color: #a23f35; font-size: 12px; }
#save-company { width: 100%; min-height: 54px; margin: 0; border-radius: 14px; background: #182335; font-size: 16px; }
.auth-panel { width: 100%; max-width: 384px; margin: auto; text-align: center; }
#auth-methods .auth-heading { margin-bottom: 32px; }
#auth-methods .auth-heading h1 { font-size: 30px; margin-bottom: 10px; }
.modal-close { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50%; background: #f5f5f7; color: #727680; }
.modal-close svg { width: 19px; height: 19px; }
.modal-close:hover { background: #ebedf1; filter: none; }
.auth-heading { margin-bottom: 18px; }
.auth-heading h1 { font-size: 36px; font-weight: 700; letter-spacing: -1px; line-height: 1.3; margin: 0 0 20px; outline: none; }
.auth-heading p { font-size: 16px; color: #858589; line-height: 1.6; margin: 0; }
.auth-heading .auth-brand { font-size: 14px; font-weight: 650; letter-spacing: .5px; color: #333337; margin-bottom: 28px; }
.auth-options { display: flex; flex-direction: column; gap: 16px; }
.auth-option { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 76px; border: 1.5px solid #e1e1e4; border-radius: 999px; background: #fff; color: #242426; font-size: 20px; font-weight: 600; margin: 0; padding: 20px 24px; }
.auth-option:hover { background: #f8f8fa; filter: none; }
.provider-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.google-login-widget { display: flex; justify-content: center; align-items: center; width: 100%; height: 76px; max-width: 100%; overflow: hidden; }
.google-login-widget:not(.google-ready) { visibility: hidden; }
.google-button-stage { flex: 0 0 auto; line-height: 0; transform: scale(var(--google-scale, 1.75)); transform-origin: center; }
.google-button-stage iframe { display: block; max-width: none; }
#google-note { margin: -6px 0 0; color: #88888c; font-size: 12px; }
#google-note:empty { display: none; }
.auth-bottom { font-size: 12px; color: #a0a0a5; margin: 30px 0 0; }
.back-button { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; padding: 0; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f5f5f7; color: #222; margin: 0; }
.back-button svg { width: 24px; height: 24px; }
.auth-tabs { display: flex; padding: 3px; background: #f0f0f2; border-radius: 999px; margin: 0 0 18px; }
.auth-tabs button { width: 50%; margin: 0; padding: 6px; border-radius: 999px; background: transparent; color: #27272a; font-size: 15px; font-weight: 500; }
.auth-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 4px #00000004; }
.auth-field { margin: 0 0 14px; text-align: left; }
.auth-field input { background: #fff; color: #242426; border: 1px solid #bfc0c4; border-radius: 9px; padding: 14px 12px; margin: 0; font-size: 16px; font-weight: 400; min-height: 50px; }
.auth-field input::placeholder { color: #aaaab0; opacity: 1; }
.auth-field input:focus { outline: 2px solid #9bccf5; outline-offset: 2px; }
.auth-submit { width: 100%; min-height: 50px; padding: 14px; margin: 8px 0 0; border-radius: 999px; background: #2b7fca; font-size: 17px; font-weight: 600; }
.auth-submit:disabled { background: #b7d9f6; color: #fff; opacity: 1; }
.auth-submit:hover { filter: brightness(1.04); }
.text-button { display: block; margin: 20px auto 0; padding: 6px 12px; background: transparent; color: #303034; font-size: 15px; font-weight: 600; }
.code-row { display: flex; gap: 10px; align-items: stretch; }
.code-row .auth-field { min-width: 0; flex: 1; margin: 0; }
.code-row #send-code { margin: 0; border: 1px solid #dce6ee; border-radius: 10px; background: #f4f8fc; color: #3671a5; font-size: 13px; padding: 12px; white-space: nowrap; }
#verification-note, #password-note { text-align: left; font-size: 12px; color: #808087; }
.auth-view #notice { position: relative; top: auto; width: 100%; margin: 0 0 22px; padding: 12px 14px; font-size: 13px; background: #f4f8fc; border-color: #d8e6f0; color: #356180; }
.auth-view #notice.error { background: #fff6f3; border-color: #eedbd2; color: #8f4d37; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
button:focus-visible { outline: 2px solid #75ace0; outline-offset: 4px; }
@media (max-width: 600px) {
  .auth-view .intro { padding-top: 44px; }
  #auth { padding: 56px 24px 30px; border-radius: 24px; }
  .auth-heading h1 { font-size: 30px; }
  .auth-panel { max-width: 360px; }
  .auth-option { font-size: 18px; }
}
@media (max-height: 650px) {
  #auth { padding-top: 54px; padding-bottom: 24px; }
  .auth-heading h1 { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  #auth[open] { animation: auth-appear .2s ease-out; }
  @keyframes auth-appear { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
}

/* 登录后的页面只保留核心操作，不展示内部实现或测试模式文案。 */
body { color: #242426; }
.app-shell-controls { position: fixed; top: 18px; right: 20px; z-index: 20; display: flex; width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; gap: 10px; }
.generation-quota { display: inline-flex; min-height: 38px; padding: 8px 17px; align-items: center; border: 1px solid #ffffff4d; border-radius: 10px; background: #11131acc; color: #fff; font-size: 13px; font-weight: 650; white-space: nowrap; box-shadow: 0 8px 22px #00000025; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.app-shell-controls button { min-width: 82px; min-height: 38px; margin: 0; padding: 8px 17px; border: 1px solid #ffffff4d; border-radius: 10px; background: #11131acc; color: #fff; font-size: 13px; font-weight: 650; box-shadow: 0 8px 22px #00000025; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.app-shell-controls button:hover { background: #242630e6; filter: none; transform: translateY(-1px); }
body:not(.auth-view) main { max-width: 1120px; padding: 0 24px; }
body:not(.auth-view) .intro { padding: 56px 0 32px; max-width: none; text-align: center; }
body:not(.auth-view) .intro .hero-title { color: #fff; text-shadow: 0 8px 36px #00000094; }
.workspace-welcome { display: none; }
#workspace { padding: 0 0 72px; }
.auth-view #workspace > :not(#product-setup) { pointer-events: none; user-select: none; }
.brief-edit-entry { position: relative; display: flex; width: min(680px, 100%); min-height: 68px; margin: 0 auto 20px; padding: 12px 98px; align-items: center; justify-content: center; color: #fff; }
#brief-edit-title { font-size: 18px; font-weight: 750; line-height: 1.3; text-align: center; }
#restart-brief { position: absolute; right: 10px; top: 50%; translate: 0 -50%; min-width: 78px; min-height: 42px; margin: 0; padding: 9px 20px; border: 1px solid #ffffff5e; background: #ffffff17; color: #fff; font-size: 15px; font-weight: 700; box-shadow: inset 0 1px 0 #ffffff20; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#restart-brief:hover { background: #ffffff29; filter: none; transform: translateY(-1px); }
.generation-start { width: min(680px, 100%); margin: 0 auto 32px; }
#start-generation { width: 100%; min-height: 60px; margin: 0; border: 1px solid #ffffff8c; border-radius: 18px !important; background: #fff; color: #171719; font-size: 18px; font-weight: 750; box-shadow: 0 18px 42px #00000045; transition: transform .2s cubic-bezier(.2,.75,.25,1), box-shadow .2s ease; }
#start-generation:hover { background: #fff; filter: none; transform: scale(1.025); box-shadow: 0 22px 50px #00000059; }
#start-generation:active { transform: scale(.99); }
.generation-animation { display: flex; min-height: 42px; margin: 4px 0 8px; align-items: center; justify-content: center; gap: 9px; }
.generation-animation span { width: 10px; height: 10px; border-radius: 50%; background: #242936; animation: generation-pulse 1.15s ease-in-out infinite; }
.generation-animation span:nth-child(2) { animation-delay: .15s; }
.generation-animation span:nth-child(3) { animation-delay: .3s; }
@keyframes generation-pulse { 0%, 70%, 100% { opacity: .28; transform: translateY(0) scale(.82); } 35% { opacity: 1; transform: translateY(-8px) scale(1); } }
#product-setup { max-width: 680px; margin: 0 auto 48px; overflow: hidden; }
.product-setup-card { overflow: hidden; border: 1px solid #e8e8ec; border-radius: 30px; background: #fff; box-shadow: 0 18px 60px #16161b0a; }
.product-setup-track { display: flex; align-items: flex-start; width: 400%; transition: transform .38s cubic-bezier(.22,.75,.24,1); }
.product-step { position: relative; display: flex; flex: 0 0 25%; min-height: 208px; padding: 16px 42px; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.product-step .step-number { position: absolute; top: 20px; left: 42px; color: #a3a3aa; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.product-step:not([data-step="0"]) .step-number { left: 74px; }
.product-step h2 { max-width: 480px; margin: 0 0 22px; color: #171719; font-size: clamp(25px, 4vw, 34px); font-weight: 600; line-height: 1.2; letter-spacing: -.045em; }
.product-step:not(.material-step) h2 { margin-top: 18px; }
.product-step > p { max-width: 450px; margin: -12px 0 24px; color: #77777e; font-size: 14px; line-height: 1.65; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(360px, 100%); }
.choice-row button { min-height: 54px; margin: 0; border-radius: 999px; background: #161618; font-size: 16px; }
.choice-row .light-choice { border: 1px solid #dedee3; background: #fff; color: #242426; }
.step-back { position: absolute; top: 20px; left: 20px; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid #e5e5e9; border-radius: 50%; background: #f7f7f8; color: #38383d; }
.step-back svg { width: 22px; height: 22px; }
.step-back:hover { background: #eeeeF1; filter: none; }
.material-step { align-items: stretch; padding-top: 48px; text-align: left; }
.material-step h2, .material-step > p { align-self: center; text-align: center; }
.material-step h2 { margin-bottom: 22px; }
.upload-access-dialog { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100% - 32px)); max-width: none; padding: 50px 34px 32px; border: 1px solid #e5e5e9; border-radius: 26px; background: #fff; color: #242426; box-shadow: 0 28px 100px #00000048; text-align: left; }
.upload-access-dialog::backdrop { background: #050812a8; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.upload-access-dialog h2 { margin: 0 0 18px; font-size: 24px; }
.access-key-row { display: flex; gap: 9px; }
.access-key-row[hidden] { display: none; }
.access-key-row input { min-width: 0; min-height: 46px; margin: 0 !important; border-radius: 12px !important; }
.access-key-row button { min-width: 76px; margin: 0; border-radius: 12px !important; background: #171719; }
.upload-access-dialog .request-access { margin: 12px 0 0; padding: 5px 0; background: transparent; color: #55555b; font-size: 12px; }
.upload-access-dialog small { margin: 8px 0 0; }
.file-field { position: relative; display: flex !important; min-height: 72px; margin: 0 0 12px !important; padding: 15px 18px; overflow: hidden; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #e1e1e5; border-radius: 18px; background: #fafafa; cursor: pointer; }
.file-field span { flex: 0 0 auto; color: #242426; font-size: 15px; font-weight: 600; }
.file-field small { margin: 0; overflow: hidden; color: #8b8b92; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.file-field input { position: absolute; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }
.material-step .screenshot-help { margin: 8px 0 12px; text-align: left; }
.operation-field { display: block; margin: 16px 0; text-align: left; }
.operation-field textarea { width: 100%; margin-top: 8px; resize: vertical; }
.material-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; }
.material-actions button:last-child { min-width: 148px; min-height: 48px; margin: 0; border-radius: 999px; background: #161618; }
.pending-step p { margin-bottom: 10px; }
#workspace .card { max-width: 680px; margin: 0 auto 28px; padding: 28px 30px; border: 1.5px solid #ffffffcf; border-radius: 22px; background: #d5d5d8ed; color: #242936; box-shadow: 0 18px 48px #00000052, inset 0 1px 0 #ffffffc7; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#workspace .card.generation-failed { border-color: #e8a994; background: #fff0e9f2; }
#workspace .card.generation-failed #video-generation-status { color: #873d28; font-weight: 650; }
#workspace label { color: #333337; font-size: 13px; }
#workspace input, #workspace select, #workspace textarea { border-color: #d9d9de; border-radius: 12px; background: #fff; min-height: 46px; }
#workspace button { border-radius: 999px; }
#workspace .connection, #workspace .item { border-bottom-color: #eeeeF2; font-size: 14px; }
#workspace .connection button, #workspace .item button { min-width: 82px; border-radius: 999px; }
body:not(.auth-view) video { margin-top: 18px; border-radius: 14px; }
body:not(.auth-view) #notice { max-width: 560px; margin: 0 auto 20px; position: static; }
.generated-videos { display: grid; width: min(760px, 100%); margin: 0 auto 28px; justify-items: center; gap: 18px; }
.generated-video-card { width: var(--generated-video-width, fit-content); max-width: 100%; overflow: hidden; border: 1px solid #ffffff38; border-radius: 24px; background: #111522d9; box-shadow: 0 18px 48px #0008; }
.generated-video-card video { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; margin-top: 0 !important; border-radius: 0 !important; background: #05060a; }
.generated-video-details { display: flex; min-height: 72px; padding: 16px 20px; align-items: center; justify-content: space-between; gap: 18px; color: #fff; }
.generated-video-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.generated-video-download { flex: 0 0 auto; border: 1px solid #ffffff59; border-radius: 999px; padding: 10px 16px; color: #fff; font-size: 13px; font-weight: 700; }
.generated-video-delete { min-height: 38px; margin: 0; padding: 9px 16px; border: 1px solid #f4a08f8c; border-radius: 999px; background: transparent; color: #ffd2c8; font-size: 13px; font-weight: 700; }
.generated-video-delete:hover { background: #8f2f2740; filter: none; }
.wizard-overlay { position: relative; width: min(680px, 100%); margin: 0 auto 32px; padding: 0; overflow: visible; color: #202735; }
.wizard-card { width: 100%; overflow: hidden; border: 2px solid #ffffffd9; border-radius: 22px; background: #d5d5d8ed; box-shadow: 0 22px 54px #00000078, 0 0 22px #ffffff2e, inset 0 1px 0 #ffffffc7; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brief-analysis-note { margin: 22px 40px 0; color: #555d6b; font-size: 13px; line-height: 1.5; }
#brief-wizard #notice { margin: 0 0 18px; max-width: none; border-color: #ffffff7a; border-radius: 14px; background: #ececeff0; color: #303744; box-shadow: 0 12px 28px #0000002e; }
.wizard-track { display: flex; width: 500%; align-items: flex-start; overflow: hidden; transition: transform .32s ease, height .2s ease; }
.wizard-step { display: flex; width: 20%; min-height: 252px; flex: 0 0 20%; padding: 38px 40px 24px; flex-direction: column; justify-content: center; }
.wizard-step p { margin: 0 0 16px; color: #555d6b; font-size: 12px; font-weight: 750; letter-spacing: 2px; }
.wizard-step h2 { margin: 0 0 22px; color: #222936; font-size: 28px; font-weight: 700; line-height: 1.22; letter-spacing: -.8px; }
.wizard-step input, .wizard-step textarea { min-height: 58px; margin: 0; border: 1px solid #ffffff; border-radius: 16px; padding: 16px 18px; background: #f7f7f8; color: #202633; font-size: 16px; resize: vertical; box-shadow: inset 0 1px 2px #18213312, 0 1px 0 #ffffffb8; }
.wizard-step input::placeholder, .wizard-step textarea::placeholder { color: #858b95; }
.wizard-step input:focus, .wizard-step textarea:focus { outline: 3px solid #df864766; outline-offset: 2px; border-color: #fff; }
.brief-suggestion-field { width: 100%; }
.company-suggestion-list { width: 100%; margin-top: 8px; padding: 6px; border: 1px solid #ffffff; border-radius: 15px; background: #f7f7f9; box-shadow: 0 12px 28px #17203524; }
.company-suggestion-list button { display: flex; width: 100%; min-height: 54px; margin: 0; padding: 10px 13px; border-radius: 11px !important; background: #fff; color: #202633; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; box-shadow: 0 1px 5px #17203512; }
.company-suggestion-list button:hover { background: #f0f2f6; filter: none; }
.company-suggestion-list small { margin: 0; color: #777d88; font-size: 11px; font-weight: 650; }
.company-suggestion-list strong { max-width: 100%; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.wizard-step textarea { min-height: 132px; }
.wizard-step .creative-direction-help { color: #555d69; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.6; }
.voice-text-field { position: relative; }
.voice-text-field textarea { padding-bottom: 66px; }
.voice-input-button { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 9px 14px; border-radius: 999px; background: #f1f1f4; color: #34343a; }
.voice-input-button span[aria-hidden="true"] { color: #d34a4a; font-size: 11px; }
.voice-input-button[aria-pressed="true"] { background: #2e2e32; color: #fff; }
.voice-input-button[aria-pressed="true"] span[aria-hidden="true"] { color: #ff7373; animation: voice-pulse 1s ease-in-out infinite; }
.voice-input-button:disabled { opacity: .72; cursor: not-allowed; }
@keyframes voice-pulse { 50% { opacity: .35; transform: scale(.8); } }
.product-image-picker { position: relative; display: flex; min-height: 118px; padding: 18px; border: 1.5px dashed #aab0ba; border-radius: 18px; background: #f2f2f4d9; flex-direction: column; justify-content: center; gap: 8px; cursor: pointer; }
.product-image-picker:focus-within { outline: 3px solid #df864766; outline-offset: 2px; }
.product-image-picker span { font-weight: 650; }
.product-image-picker small { color: #77777e; line-height: 1.45; }
.product-image-picker input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; }
.wizard-actions { display: flex; padding: 0 40px 34px; flex-direction: column; align-items: center; }
.wizard-actions button { margin: 0; }
#brief-next, #brief-submit { order: 1; width: 100%; min-height: 58px; border: 1px solid #435069; border-radius: 16px !important; background: #182335; color: #fff; font-size: 17px; font-weight: 750; box-shadow: 0 12px 24px #0a10203d, inset 0 1px 0 #ffffff21; transition: transform .2s cubic-bezier(.2,.75,.25,1), box-shadow .2s ease, background .2s ease; }
#brief-next:hover, #brief-submit:hover { filter: none; background: #202d43; box-shadow: 0 16px 30px #0a102057, inset 0 1px 0 #ffffff2e; transform: scale(1.035); cursor: pointer; }
#brief-next:active, #brief-submit:active { transform: scale(.985) translateY(1px); box-shadow: 0 7px 16px #0a102047; }
#brief-prev { order: 2; min-width: 0; min-height: 0; margin-top: 18px; padding: 5px 14px; border: 0; background: transparent; color: #293241; font-size: 17px; font-weight: 750; line-height: 1.25; transition: color .18s ease, transform .18s ease; }
#brief-prev:hover { filter: none; background: transparent; color: #05080e; transform: translateY(-1px); cursor: pointer; }
.wizard-progress { display: flex; width: max-content; height: 30px; margin: 20px auto 0; padding: 9px 12px; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; background: #080b1299; box-shadow: 0 8px 24px #0000004a; }
.wizard-progress span { display: block; width: 9px; height: 9px; border: 1px solid #ffffff75; border-radius: 999px; background: #ffffff73; transition: width .28s cubic-bezier(.2,.8,.2,1), background .28s ease, box-shadow .28s ease, transform .28s ease; }
.wizard-progress span.completed { background: #d5d7dc; }
.wizard-progress span.active { width: 27px; border-color: #fff; background: #fff; box-shadow: 0 0 15px #e09a6ba8; }
.wizard-progress span:not(.active) { transform: scale(.9); }
body:not(.auth-view).wizard-active { min-height: 100svh; }
body:not(.auth-view).wizard-active main { min-height: 100svh; max-width: none; padding: 0 24px 54px; }
body:not(.auth-view).wizard-active .intro { padding: clamp(44px, 8vh, 74px) 0 34px; }
.wizard-active .intro .hero-title { display: none; }
.wizard-active .workspace-welcome { display: block; margin: 0; color: #fff; font-size: clamp(34px, 4.3vw, 48px); font-weight: 760; line-height: 1.1; letter-spacing: -1.8px; text-shadow: 0 6px 30px #00000080; }
.wizard-active #workspace { padding: 0; }
.wizard-active #workspace > :not(#brief-wizard) { display: none !important; }
@media (max-width: 600px) {
  .app-shell-controls { top: 12px; right: 12px; }
  .generation-quota { min-height: 36px; padding: 7px 12px; }
  .app-shell-controls button { min-width: 74px; min-height: 36px; padding: 7px 14px; }
  body:not(.auth-view) .intro { padding-top: 44px; }
  #workspace .card { max-width: none; padding: 22px; border-radius: 20px; }
  #product-setup { margin-bottom: 32px; }
  .brief-edit-entry { min-height: 62px; padding: 10px 86px; }
  #restart-brief { right: 4px; }
  #start-generation { min-height: 56px; }
  .generated-video-details { align-items: flex-start; flex-direction: column; }
  .generated-video-actions { width: 100%; justify-content: space-between; }
  .product-setup-card { border-radius: 26px; }
  .product-step { min-height: 208px; padding: 16px 22px; }
  .product-step .step-number { left: 22px; }
  .product-step:not([data-step="0"]) .step-number { left: 70px; }
  .material-step { padding-top: 48px; }
  .file-field { align-items: flex-start; flex-direction: column; gap: 3px; }
  .file-field small { width: 100%; text-align: left; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-card { min-height: 72px; }
  body:not(.auth-view).wizard-active main { padding-left: 16px; padding-right: 16px; }
  body:not(.auth-view).wizard-active .intro { padding-top: 38px; padding-bottom: 26px; }
  .wizard-active .workspace-welcome { font-size: 34px; letter-spacing: -1.25px; }
  .wizard-overlay { width: 100%; }
  #brief-wizard #notice { margin-bottom: 14px; }
  .wizard-card { border-radius: 20px; }
  .brief-analysis-note { margin: 20px 24px 0; }
  .wizard-step { min-height: 242px; padding: 30px 24px 20px; }
  .wizard-step h2 { font-size: 25px; }
  .wizard-actions { padding: 0 24px 28px; }
  #brief-next, #brief-submit { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .wizard-track, #brief-next, #brief-submit, #brief-prev, #start-generation, .wizard-progress span { transition: none; } .generation-animation span { animation: none; opacity: .65; } }