:root { --ink:#eee6d5; --muted:#aaa28f; --gold:#caa96b; --dark:#070a09; --panel:#0c1210; --line:rgba(202,169,107,.24); }
* { box-sizing:border-box; }
html.magic-cursor-enabled,html.magic-cursor-enabled *,html.magic-cursor-enabled *::before,html.magic-cursor-enabled *::after { cursor:none !important; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 72% 10%,#18251e 0,#090d0b 36%,#060908 75%); font-family:"Noto Serif SC",serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.magic-wand-cursor { position:fixed; left:0; top:0; z-index:2147483647; width:84px; height:84px; pointer-events:none; opacity:0; transform:translate(-22px,-16px); transition:opacity .16s ease,filter .18s ease; will-change:transform,left,top; }
.magic-wand-cursor.is-visible { opacity:1; }
.magic-wand-cursor .wand-glow { position:absolute; left:4px; top:8px; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle,rgba(255,233,151,.78),rgba(209,157,67,.26) 42%,transparent 72%); opacity:0; transform:scale(.72); transition:opacity .18s ease,transform .18s ease; filter:blur(.2px); }
.magic-wand-cursor .wand-shaft { position:absolute; left:12px; top:57px; width:66px; height:7px; border-radius:999px; background:linear-gradient(90deg,transparent 0 18px,rgba(83,39,13,.32) 18px 20px,transparent 20px 42px,rgba(255,220,151,.28) 42px 44px,transparent 44px),linear-gradient(180deg,#e8b872 0%,#b97634 45%,#6a3212 100%); box-shadow:inset 0 1px 0 #ffe2aa77,inset 0 -1px 0 #170704cc,0 2px 4px #0007; clip-path:polygon(0 0,9% 13%,100% 40%,100% 60%,9% 87%,0 100%); transform:rotate(-133deg); transform-origin:top center; }
.magic-wand-cursor.is-hovering { filter:drop-shadow(0 0 4px rgba(255,214,117,.38)); }
.magic-wand-cursor.is-hovering .wand-glow { opacity:1; transform:scale(1); }
.magic-spark { position:fixed; z-index:2147483646; width:var(--spark-size,5px); height:var(--spark-size,5px); pointer-events:none; border-radius:50%; background:radial-gradient(circle,#fff9c9 0 18%,#f2cf73 36%,transparent 72%); box-shadow:0 0 8px rgba(238,196,88,.55); animation:magic-spark-fade .72s ease-out forwards; transform:translate(-50%,-50%); }
@keyframes magic-spark-fade { from { opacity:.72; transform:translate(-50%,-50%) scale(1); } to { opacity:0; transform:translate(calc(-50% + var(--spark-x,0px)),calc(-50% + var(--spark-y,0px))) scale(.2); } }
.studio-nav { height:72px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; gap:32px; border-bottom:1px solid rgba(211,172,95,.12); background:linear-gradient(#080c0be8, transparent); backdrop-filter:blur(3px); }
.studio-brand { font-weight:900; letter-spacing:.12em; }
.studio-brand span { display:inline-grid; place-items:center; width:30px; height:30px; margin-right:8px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-family:"Playfair Display"; }
.studio-nav nav { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; justify-content:center; gap:28px; color:var(--muted); font-size:13px; white-space:nowrap; }
.studio-nav nav a:hover,.studio-nav nav .active { color:var(--gold); }
.privacy-badge { display:flex; align-items:center; gap:8px; color:#a9c7ae; font-size:12px; letter-spacing:.08em; }
.privacy-badge i { width:6px; height:6px; border-radius:50%; background:#79b788; box-shadow:0 0 10px #79b788; }
main { padding:70px 5vw 100px; }
.studio-intro { max-width:1400px; margin:auto; display:grid; grid-template-columns:1.3fr .7fr; gap:9vw; align-items:end; }
.eyebrow { margin:0 0 14px; color:var(--gold); font:13px "Playfair Display"; letter-spacing:.22em; }
h1 { margin:0; font-size:clamp(52px,7vw,105px); line-height:1.03; letter-spacing:-.07em; }
em { color:var(--gold); font-style:normal; }
.intro-copy { margin:0 0 9px; max-width:420px; color:var(--muted); font-size:13px; line-height:2; }
.mode-switcher { max-width:1400px; margin:45px auto 0; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }
.mode { padding:19px 24px; color:var(--muted); text-align:left; background:#090e0c; border:0; cursor:pointer; transition:.25s; }
.mode + .mode { border-left:1px solid var(--line); }
.mode:hover,.mode.active { color:var(--ink); background:#151d17; box-shadow:inset 0 -2px var(--gold); }
.mode span,.mode b,.mode small { display:block; }
.mode span { margin-bottom:7px; color:var(--gold); font-size:11px; letter-spacing:.15em; }
.mode b { font-size:14px; }
.mode small { margin-top:5px; font-size:12px; }
.workbench { max-width:1400px; margin:48px auto 0; display:grid; grid-template-columns:.82fr 1.18fr; min-height:730px; border:1px solid var(--line); background:#090e0c; box-shadow:0 35px 100px #0008; }
.controls { min-width:0; padding:32px; border-right:1px solid var(--line); }
.step { padding-bottom:27px; margin-bottom:27px; border-bottom:1px solid var(--line); }
.ai-status { padding:15px; margin-bottom:25px; border:1px solid #b76a4566; background:#2b171244; }
.ai-status div { display:flex; align-items:center; gap:8px; color:#dfa17e; font-size:12px; }
.ai-status i { width:6px; height:6px; border-radius:50%; background:#cf704f; box-shadow:0 0 8px #cf704f; }
.ai-status p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.8; }
.ai-status.ready { border-color:#79b78866; background:#13251a66; }
.ai-status.ready div { color:#9fd0aa; }
.ai-status.ready i { background:#79b788; box-shadow:0 0 8px #79b788; }
.ai-status.busy { border-color:#caa96b66; background:#2a221344; }
.ai-status.busy div { color:#dec28b; }
.ai-status.busy i { background:#caa96b; box-shadow:0 0 8px #caa96b; }
.member-panel { margin-bottom:25px; padding:15px; border:1px solid var(--line); background:#10181388; }
.member-panel > div:not(.member-actions) { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #caa96b1f; }
.member-panel span { color:var(--muted); font-size:12px; }
.member-panel b { color:var(--ink); font-size:14px; }
.member-panel p { margin:12px 0; color:var(--muted); font-size:12px; line-height:1.7; }
.member-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.member-actions button { padding:10px 8px; color:var(--gold); background:#0c120f; border:1px solid var(--line); cursor:pointer; transition:.2s; }
.member-actions button:hover { border-color:var(--gold); background:#1b170f; }
.package-link { margin-top:10px; min-height:39px; display:flex; align-items:center; justify-content:center; color:#151009; background:var(--gold); border:1px solid var(--gold); font-size:12px; font-weight:900; letter-spacing:.08em; transition:.2s; }
.package-link:hover { background:#e2c483; transform:translateY(-2px); }
.step.compact { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.step-title { display:flex; gap:14px; margin-bottom:17px; }
.step-title > span { color:var(--gold); font:20px "Playfair Display"; }
.step-title b,.step-title small { display:block; }
.step-title b { font-size:14px; }
.step-title small { margin-top:4px; color:var(--muted); font-size:12px; }
.upload-zone { position:relative; min-height:125px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #caa96b66; background:#111a163d; cursor:none !important; transition:.25s; overflow:hidden; }
.upload-zone:hover,.upload-zone.dragging,.upload-zone.has-file { border-color:var(--gold); background:#1b241b80; }
.upload-zone:focus-visible { outline:2px solid #caa96b88; outline-offset:3px; }
.upload-zone input { position:absolute; inset:0; z-index:3; width:100%; height:100%; opacity:.001; cursor:none !important; font-size:100px; }
.upload-zone input::file-selector-button { cursor:none !important; }
.upload-zone input::-webkit-file-upload-button { cursor:none !important; }
.upload-icon,.upload-zone b,.upload-zone small { position:relative; z-index:1; pointer-events:none; }
.upload-icon { color:var(--gold); font:30px "Playfair Display"; }
.upload-zone b { margin:5px 0; font-size:12px; }
.upload-zone small { color:var(--muted); font-size:12px; }
.preset-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.preset { min-height:112px; padding:13px 9px; color:var(--muted); background:#0c120f; border:1px solid var(--line); cursor:pointer; transition:.25s; }
.preset:hover,.preset.active { color:var(--ink); border-color:var(--gold); background:#171d15; }
.preset b,.preset small { display:block; }
.preset b { margin:8px 0 5px; font-size:12px; }
.preset small { font-size:11px; }
.preset-orb { display:block; width:18px; height:18px; margin:auto; border-radius:50%; background:radial-gradient(circle,#fff9cb,#d7a741 32%,transparent 68%); box-shadow:0 0 14px #d7a74188; }
.preset:nth-child(2) .preset-orb { background:radial-gradient(circle,#e8eeff,#7381bd 32%,transparent 68%); box-shadow:0 0 14px #7381bd88; }
.preset:nth-child(3) .preset-orb { background:radial-gradient(circle,#fff3cb,#b65a27 32%,transparent 68%); box-shadow:0 0 14px #b65a2788; }
.action-grid { display:grid; gap:8px; }
.action { padding:13px; color:var(--muted); text-align:left; background:#0c120f; border:1px solid var(--line); cursor:pointer; }
.action:hover,.action.active { color:var(--ink); border-color:var(--gold); background:#171d15; }
.action b,.action small { display:block; }
.action b { margin-bottom:4px; font-size:13px; }
.action small { font-size:11px; }
.video-preset-panel { margin:0 0 12px; }
.video-preset { width:100%; padding:13px; color:var(--muted); text-align:left; background:#0c120f; border:1px solid var(--line); cursor:pointer; transition:.25s; }
.video-preset:hover,.video-preset.active { color:var(--ink); border-color:var(--gold); background:#171d15; box-shadow:0 0 0 2px #caa96b14; }
.video-preset span,.video-preset b,.video-preset small { display:block; }
.video-preset span,.video-preset small { display:none; }
.video-preset b { margin-bottom:0; color:var(--ink); font-size:14px; line-height:1.7; }
.video-preset small { font-size:11px; line-height:1.6; }
.setting label { display:flex; justify-content:space-between; margin-bottom:8px; color:var(--muted); font-size:12px; letter-spacing:.08em; }
.setting select { width:100%; min-width:0; padding:10px; color:var(--ink); background:#101612; border:1px solid var(--line); outline:none; }
.step textarea { width:100%; min-height:128px; padding:14px; resize:vertical; color:var(--ink); background:#0c120f; border:1px solid var(--line); outline:none; line-height:1.8; font-size:13px; }
.step textarea:focus,.step textarea.custom-active { border-color:var(--gold); box-shadow:0 0 0 2px #caa96b16; }
.range-setting { grid-column:span 2; }
.setting input[type=range] { width:100%; accent-color:var(--gold); }
.create-button { width:100%; padding:16px; color:#151009; background:var(--gold); border:0; cursor:pointer; transition:.25s; }
.create-button:disabled { opacity:.28; cursor:not-allowed; }
.create-button:not(:disabled):hover { background:#e2c483; transform:translateY(-2px); }
.ai-button { color:#d4c6ab; background:#25251f; border:1px solid var(--line); }
.create-button span,.create-button small { display:block; }
.create-button span { font-weight:900; }
.create-button small { margin-top:4px; font-size:11px; }
.progress-wrap { margin-top:14px; color:var(--muted); font-size:12px; text-align:center; }
.progress { height:2px; margin-bottom:8px; background:#ffffff12; overflow:hidden; }
.progress i { display:block; width:0; height:100%; background:var(--gold); transition:width .2s linear; }
.result-actions { display:flex; justify-content:center; gap:10px; margin-top:10px; }
.result-actions a { padding:7px 12px; color:#151009; background:var(--gold); border:1px solid var(--gold); font-size:12px; letter-spacing:.08em; }
.result-actions a:first-child { color:var(--gold); background:transparent; }
.auth-chip { position:fixed; right:22px; top:78px; z-index:80; display:flex; align-items:center; gap:10px; padding:9px 13px; color:#f7dfae; background:rgba(12,8,5,.78); border:1px solid rgba(217,181,109,.42); backdrop-filter:blur(14px); font-size:12px; letter-spacing:.08em; }
.auth-chip a,.auth-chip button { color:var(--gold); background:transparent; border:0; cursor:pointer; text-decoration:none; }
.auth-chip.nav-auth-chip { position:static; flex:0 0 auto; margin-left:auto; height:39px; min-width:172px; padding:0 14px; background:transparent; backdrop-filter:none; white-space:nowrap; }
.auth-chip.nav-auth-chip span,
.auth-chip.nav-auth-chip button { white-space:nowrap; }
.studio-login { margin-left:auto; height:39px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--gold); padding:0 18px; color:var(--gold); background:transparent; font-size:13px; cursor:pointer; letter-spacing:0; white-space:nowrap; }
.studio-login[hidden] { display:none !important; }
.auth-lock { overflow:hidden; }
.auth-modal[hidden] { display:none; }
.auth-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; }
.auth-backdrop { position:absolute; inset:0; background:rgba(3,2,1,.72); backdrop-filter:blur(12px); }
.auth-dialog { position:relative; width:min(520px,94vw); padding:34px; color:#f8ead0; background:linear-gradient(145deg,#21160e,#0b0705); border:1px solid rgba(217,181,109,.45); box-shadow:0 35px 90px #000d; }
.auth-close { position:absolute; right:15px; top:12px; color:var(--gold); background:transparent; border:0; font-size:28px; cursor:pointer; }
.auth-kicker { margin:0 0 10px; color:var(--gold); font-size:12px; letter-spacing:.22em; }
.auth-dialog h2 { margin:0; font-size:32px; }
.auth-reason { color:var(--muted); line-height:1.8; }
.auth-tabs { display:flex; gap:10px; margin:24px 0 16px; }
.auth-tabs button,.auth-primary,#authSendCode { padding:11px 15px; color:var(--gold); background:transparent; border:1px solid var(--gold); cursor:pointer; }
.auth-tabs button.active,.auth-primary,#authSendCode { color:#120c07; background:var(--gold); }
.auth-panel { display:none; }
.auth-panel.active { display:block; }
.auth-panel label { display:block; margin:12px 0; color:var(--muted); }
.auth-panel input { width:100%; margin-top:7px; padding:13px; color:#fff4d9; background:#080503; border:1px solid rgba(217,181,109,.32); outline:none; }
.auth-code-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
.auth-primary { width:100%; margin-top:10px; font-weight:800; }
.auth-primary.ghost { background:transparent; color:var(--gold); }
.auth-link-button { display:block; width:fit-content; margin:14px auto 0; padding:0; color:var(--gold); background:transparent; border:0; cursor:pointer; font:inherit; text-align:center; text-decoration:underline; text-underline-offset:4px; }
.auth-status,#authHint,.auth-panel p { color:var(--muted); font-size:12px; line-height:1.8; }
.auth-qr { width:210px; padding:14px; color:#120c07; background:#f8ead0; text-align:center; }
.auth-qr i { display:block; width:182px; height:182px; margin-bottom:9px; background:linear-gradient(90deg,#111 10px,transparent 10px) 0 0/26px 26px,linear-gradient(#111 10px,transparent 10px) 0 0/26px 26px,radial-gradient(circle,#111 0 8px,transparent 9px) 13px 13px/52px 52px,#f8ead0; }
.asset-history-panel { max-width:1400px; margin:26px auto 0; padding:24px; border:1px solid var(--line); background:#090e0c; box-shadow:0 18px 60px #0005; }
.history-title { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.history-title span { color:var(--gold); font:12px "Playfair Display"; letter-spacing:.18em; }
.history-title b { color:var(--ink); font-size:15px; }
.asset-history { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; max-height:346px; padding-right:8px; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:rgba(202,169,107,.62) rgba(255,255,255,.06); }
.asset-history::-webkit-scrollbar { width:8px; }
.asset-history::-webkit-scrollbar-track { background:rgba(255,255,255,.05); }
.asset-history::-webkit-scrollbar-thumb { background:rgba(202,169,107,.62); }
.history-empty { margin:0; padding:14px; color:var(--muted); border:1px dashed rgba(217,181,109,.35); font-size:12px; line-height:1.7; }
.history-card { display:grid; grid-template-columns:76px 1fr; gap:12px; min-width:0; padding:10px; border:1px solid rgba(217,181,109,.25); background:rgba(7,5,4,.38); }
.history-card img,.history-card video { width:76px; height:96px; object-fit:cover; background:#050403; }
.history-card b,.history-card small,.history-card a { display:block; }
.history-card b { color:#f8ead0; font-size:12px; }
.history-card small { margin:5px 0 9px; color:var(--muted); font-size:12px; line-height:1.5; }
.history-card a { width:max-content; padding:6px 10px; color:#151009; background:var(--gold); text-decoration:none; font-size:12px; }
.preview-panel { padding:23px; display:flex; flex-direction:column; min-width:0; background:radial-gradient(circle at 50% 45%,#263322,#080c0a 70%); }
.preview-topline,.preview-note { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font:12px "Playfair Display"; letter-spacing:.16em; }
.portrait-stage { position:relative; flex:1; max-width:650px; width:100%; min-height:570px; margin:18px auto; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(202,169,107,.28); outline:0; box-shadow:none; background:transparent; }
#magicCanvas { width:100%; height:100%; display:none; object-fit:contain; }
#aiVideo { width:100%; height:100%; object-fit:contain; background:transparent; }
#aiImage { width:100%; height:100%; object-fit:contain; background:transparent; }
.empty-state { text-align:center; color:var(--muted); }
.empty-state b,.empty-state small { display:block; }
.empty-state b { margin:22px 0 7px; color:var(--ink); font-size:13px; }
.empty-state small { font-size:12px; }
.empty-frame { width:76px; height:95px; margin:auto; display:grid; place-items:center; border:1px solid var(--gold); box-shadow:0 0 0 7px #caa96b12,0 0 30px #caa96b20; }
.empty-frame span { color:var(--gold); font:34px "Playfair Display"; }
.stage-corners { display:none; }
.preview-note { justify-content:center; }
.preview-note span { display:none; }
.preview-note button { min-width:92px; padding:8px 18px; color:#d4c6ab; background:#25251f; border:1px solid var(--line); cursor:pointer; font-weight:900; letter-spacing:.08em; transition:.25s; box-shadow:none; text-shadow:none; }
.preview-note button:not(:disabled):hover { color:#151009; background:#e2c483; border-color:#e2c483; transform:translateY(-2px); }
.preview-note button:disabled { opacity:.42; cursor:not-allowed; }
.capability-note { max-width:900px; margin:80px auto 0; padding-left:24px; border-left:1px solid var(--gold); }
.capability-note span { color:var(--gold); font-size:12px; letter-spacing:.16em; }
.capability-note h2 { margin:12px 0; font-size:30px; }
.capability-note p { margin:0; color:var(--muted); font-size:13px; line-height:2; }
@media(max-width:900px){.studio-nav nav,.privacy-badge{display:none}.studio-intro,.workbench,.mode-switcher{grid-template-columns:1fr}.mode+.mode{border-left:0;border-top:1px solid var(--line)}.workbench{margin-top:40px}.controls{border-right:0;border-bottom:1px solid var(--line)}.step.compact{grid-template-columns:1fr}.preview-panel{min-height:600px}main{padding-inline:18px}.preset-grid{grid-template-columns:1fr}.studio-intro{gap:25px}.portrait-stage{min-height:450px}}