/* W3.2 live generation page; same layout and tokens as the credits page (billing.css, docs/design-system/tokens/studio.json). */
#create{width:min(34rem,100% - 40px);margin-inline:auto;padding-block:96px;display:flex;flex-direction:column;gap:40px;text-align:start}
#create .intro{display:flex;flex-direction:column;gap:12px}
#create .intro p{margin:0;text-wrap:pretty}
#create h1{margin:0;font-size:32px;line-height:1.25;font-weight:600;letter-spacing:-0.01em}
:lang(zh-Hant) #create h1,:lang(zh-Hans) #create h1,:lang(ja) #create h1,:lang(ko) #create h1{letter-spacing:0}
#create h2{margin:0;font-size:16px;line-height:1.7;font-weight:600}
#create section{display:flex;flex-direction:column;gap:40px}
#create #step-signin{gap:16px}
#create [hidden]{display:none}
#create .balance{display:flex;flex-direction:column;gap:4px;padding:20px 24px;border:1px solid #171717}
#create .balance .label{font-size:14px;font-weight:600}
#create .balance div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#balance-value{font-size:32px;line-height:1.25;font-weight:600;font-variant-numeric:tabular-nums}
#create .buy{display:flex;flex-direction:column;gap:16px}
#offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#offers button{display:flex;align-items:center;justify-content:flex-start;min-height:44px;padding:12px 16px;background:#f5ecdd;color:#171717;border:1px solid #171717;border-radius:0;font:inherit;font-size:16px;text-align:start;cursor:pointer}
#offers button:hover{background:#171717;color:#f5ecdd}
#offers button:disabled{cursor:not-allowed;opacity:.6}
#create .action{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:#b62c45;color:#f5ecdd;font-size:16px;font-weight:600;text-decoration:none}
#create :is(button,a,[tabindex]):focus-visible{outline:2px solid #b62c45;outline-offset:2px}
#create .hint{margin:0;font-size:14px;line-height:1.7;text-wrap:pretty}
#order-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#create .docs{align-self:flex-start;display:flex;align-items:center;min-height:44px;font-size:16px}
#create .status{margin:0;padding:12px 16px;border-inline-start:4px solid #c6b9a9;font-size:16px;line-height:1.7;text-wrap:pretty}
#create .status.ok{border-inline-start-color:#171717}
#create .status.warn{border-inline-start-color:#b62c45}
#create .status:empty{display:none}
@media (max-width:700px){#create{padding-block:40px 64px}}
@media (max-width:419px){#offers{grid-template-columns:minmax(0,1fr)}}

#create form{display:flex;flex-direction:column;gap:24px}#create .field{display:flex;flex-direction:column;gap:6px}#create .field>span:first-child{font-weight:600}#create textarea,#create input[type=text]{margin:0}#create .balance a{margin-inline-start:auto;font-size:14px}#preview{width:min(256px,100%);height:auto;border:1px solid var(--line)}#create .secondary{align-self:flex-start;min-height:44px}#create #offer{display:flex;flex-direction:column;gap:12px}#create button.action{border:0;cursor:pointer;font:inherit;font-weight:600}#create button.action:disabled{opacity:.6;cursor:not-allowed}#video{width:100%;max-width:384px;background:#171717}#create .status.warn{color:#98243b}
.ai-hint{margin-top:8px;font-size:16px;overflow-wrap:anywhere}.ai-hint a{display:block;width:fit-content;min-height:44px;line-height:44px}
.check{display:flex;gap:8px;align-items:flex-start;margin-block:8px 16px;min-height:44px}.check input{width:20px;height:20px;margin-top:2px;flex:none}#drafted{margin-block:12px}#drafted summary{cursor:pointer;min-height:44px;line-height:44px}#drafted pre{background:#f4efe8;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;max-height:320px;overflow:auto;text-align:left}