:root { --ink:#262b38; --muted:#697184; --line:#e7ebf2; --primary:#7567ea; --primary-strong:#6254dc; --blue:#79b7f5; --mint:#68d5ae; --orange:#f5ad72; --purple-soft:#dcd7fa; --surface:#ffffff; --soft:#f5f7fb; }
* { box-sizing:border-box; }
html { min-width:320px; color-scheme:light; background:#f7f9fc; }
body { min-height:100vh; margin:0; color:var(--ink); background:#f7f9fc; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
::selection { color:#fff; background:rgba(117,103,234,.72); }
.login-page { display:grid; min-height:100vh; min-height:100svh; grid-template-columns:minmax(570px,1.14fr) minmax(430px,.86fr); overflow:hidden; }

.creative-side { position:relative; display:flex; min-height:100vh; min-height:100svh; overflow:hidden; flex-direction:column; padding:36px clamp(38px,4vw,64px) 30px; isolation:isolate; background:radial-gradient(circle at 88% 12%,rgba(218,211,250,.58),transparent 24%),radial-gradient(circle at 10% 2%,rgba(213,235,252,.65),transparent 26%),linear-gradient(145deg,#f8fbff,#f3f6fb 58%,#f7f5fc); }
.creative-side::before { position:absolute; z-index:-2; inset:18px; border-radius:34px; content:""; background:rgba(255,255,255,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.85); }
.ambient { position:absolute; z-index:-1; border-radius:50%; filter:blur(70px); }
.ambient-blue { width:310px; height:310px; left:-140px; bottom:9%; background:rgba(121,183,245,.18); }
.ambient-purple { width:360px; height:360px; top:24%; right:-160px; background:rgba(156,137,240,.18); }
.creative-header { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; }
.brand,.mobile-brand { display:flex; align-items:center; gap:11px; }
.brand > span:last-child,.mobile-brand > span:last-child { display:flex; flex-direction:column; gap:4px; }
.brand strong,.mobile-brand strong { color:#2e3341; font-size:14px; line-height:1; letter-spacing:.2px; }
.brand small,.mobile-brand small { color:#7d8597; font-size:9px; font-weight:650; letter-spacing:.85px; }
.brand-mark { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(145deg,#9185f4,#7061df); box-shadow:0 9px 24px rgba(104,90,211,.22),inset 0 1px 0 rgba(255,255,255,.3); }
.brand-mark svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.version-pill { display:flex; min-height:29px; align-items:center; gap:7px; padding:0 11px; border-radius:999px; color:#80899a; background:rgba(255,255,255,.75); box-shadow:0 7px 24px rgba(55,69,96,.06); font-size:8px; font-weight:750; letter-spacing:.8px; }
.version-pill i { width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(104,213,174,.14); }

.creative-copy { position:relative; z-index:4; width:78%; margin:clamp(45px,7vh,78px) auto 0; }
.copy-label { display:flex; align-items:center; gap:7px; color:#8174df; font-size:8px; font-weight:800; letter-spacing:1.7px; }
.copy-label i { width:19px; height:7px; border-radius:999px; background:linear-gradient(90deg,var(--purple-soft),#b9acef); }
.creative-copy h1 { margin:13px 0 12px; color:#252b38; font-size:clamp(35px,3.5vw,55px); line-height:1.12; letter-spacing:-2.1px; }
.creative-copy p { max-width:500px; margin:0; color:#687185; font-size:13px; line-height:1.75; }

.studio-preview { position:relative; z-index:3; width:min(49vw,610px); height:min(51vh,500px); margin:28px auto 0; }
.preview-window { position:absolute; width:92%; left:3%; top:2%; overflow:hidden; border-radius:25px; background:rgba(255,255,255,.9); box-shadow:0 28px 65px rgba(67,82,112,.14),0 2px 8px rgba(82,92,118,.05); backdrop-filter:blur(12px); }
.window-bar { display:grid; height:43px; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 15px; color:#9ba2af; font-size:7px; font-weight:650; }
.window-dots { display:flex; gap:5px; }
.window-dots i { width:6px; height:6px; border-radius:50%; background:#e4e7ed; }
.window-dots i:first-child { background:#f7c5a1; }
.window-dots i:nth-child(2) { background:#bfe5d6; }
.window-dots i:last-child { background:#cbdff5; }
.window-title { justify-self:center; }
.window-status { display:flex; justify-self:end; align-items:center; gap:5px; color:#8b96a7; }
.window-status i { width:5px; height:5px; border-radius:50%; background:var(--mint); }
.preview-body { display:grid; grid-template-columns:47px 1fr; padding:0 13px 13px; }
.mini-tools { display:flex; flex-direction:column; gap:8px; align-items:center; padding-top:12px; }
.mini-tools span { display:grid; width:30px; height:30px; place-items:center; border-radius:10px; color:#9aa4b5; background:#f6f8fb; }
.mini-tools .tool-active { color:#7668df; background:#eeebff; box-shadow:0 5px 14px rgba(117,103,234,.1); }
.mini-tools svg { width:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.scene-area { min-width:0; }
.scene-image { position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:18px; background:linear-gradient(150deg,#dfeefa 0%,#e9e3fb 51%,#fbe5d7 100%); }
.scene-image::before { position:absolute; inset:0; content:""; background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 48%); }
.scene-cloud { position:absolute; height:18px; border-radius:999px; background:rgba(255,255,255,.58); filter:blur(.2px); }
.scene-cloud::before,.scene-cloud::after { position:absolute; border-radius:50%; content:""; background:inherit; }
.scene-cloud::before { width:25px; height:25px; left:14px; bottom:0; }
.scene-cloud::after { width:18px; height:18px; left:34px; bottom:0; }
.cloud-one { width:59px; left:12%; top:19%; }
.cloud-two { width:48px; right:9%; top:28%; transform:scale(.75); opacity:.8; }
.scene-sun { position:absolute; width:43px; height:43px; right:18%; top:18%; border-radius:50%; background:#ffe3bd; box-shadow:0 0 42px rgba(245,173,114,.42); }
.scene-hill { position:absolute; width:78%; height:50%; bottom:-25%; border-radius:50%; transform:rotate(-6deg); }
.hill-one { left:-17%; background:#c8dff1; }
.hill-two { right:-25%; bottom:-31%; background:#d9cef1; transform:rotate(7deg); }
.scene-person { position:absolute; width:20px; height:55px; left:49%; bottom:22%; border-radius:45% 45% 30% 30%; background:#786e99; box-shadow:0 9px 18px rgba(85,74,117,.16); }
.scene-person::before { position:absolute; width:15px; height:15px; top:-10px; left:3px; border-radius:50%; content:""; background:#867aa6; }
.play-button { position:absolute; display:grid; width:48px; height:48px; top:50%; left:50%; place-items:center; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.73); box-shadow:0 10px 28px rgba(74,74,110,.12); backdrop-filter:blur(8px); }
.play-button i { width:0; height:0; margin-left:3px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid #7769df; }
.duration-chip { position:absolute; right:10px; bottom:9px; padding:4px 7px; border-radius:7px; color:#6f7686; background:rgba(255,255,255,.75); font-size:7px; font-weight:700; backdrop-filter:blur(6px); }
.timeline { display:grid; height:45px; grid-template-columns:26px 32px 1fr 32px; gap:7px; align-items:center; }
.play-mini { display:grid; width:22px; height:22px; place-items:center; border-radius:7px; color:#7467dd; background:#f0edff; }
.play-mini i { width:0; height:0; margin-left:2px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; }
.timecode { color:#a0a7b4; font-size:7px; font-variant-numeric:tabular-nums; }
.timeline-track { position:relative; height:4px; overflow:visible; border-radius:999px; background:#edf0f4; }
.timeline-track i { display:block; width:43%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8c7dec,#7668df); }
.timeline-track b { position:absolute; width:9px; height:9px; top:50%; left:42%; border:2px solid #fff; border-radius:50%; background:#7769df; box-shadow:0 2px 7px rgba(91,77,192,.25); transform:translate(-50%,-50%); }
.prompt-card { position:absolute; z-index:3; display:grid; min-width:270px; grid-template-columns:39px 1fr auto; gap:11px; align-items:center; right:-1%; bottom:4%; padding:12px 14px; border-radius:17px; background:rgba(255,255,255,.92); box-shadow:0 18px 42px rgba(67,82,112,.13); backdrop-filter:blur(12px); }
.prompt-spark { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; color:#7768df; background:#eeebff; }
.prompt-spark svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.prompt-card > span:nth-child(2) { display:flex; flex-direction:column; gap:4px; }
.prompt-card strong { color:#4e5667; font-size:9px; }
.prompt-card small { color:#9ca4b3; font-size:7px; }
.prompt-loader { display:flex; gap:3px; }
.prompt-loader i { width:4px; height:4px; border-radius:50%; background:#9c8fee; }
.tool-chips { position:absolute; z-index:4; display:flex; gap:7px; left:-1%; bottom:13%; }
.tool-chips span { display:flex; min-height:28px; align-items:center; gap:6px; padding:0 10px; border-radius:999px; color:#747d8e; background:rgba(255,255,255,.88); box-shadow:0 9px 25px rgba(68,84,113,.08); font-size:7px; font-weight:700; backdrop-filter:blur(8px); }
.tool-chips i { width:7px; height:7px; border-radius:50%; }
.chip-blue i { background:var(--blue); }
.chip-mint i { background:var(--mint); }
.chip-orange i { background:var(--orange); }
.creative-footer { display:flex; align-items:center; gap:11px; margin-top:auto; color:#a8afbd; font-size:7px; font-weight:700; letter-spacing:1.5px; }
.creative-footer i { width:3px; height:3px; border-radius:50%; background:#c7cbd3; }

.form-side { position:relative; display:grid; min-height:100vh; min-height:100svh; overflow:hidden; place-items:center; padding:48px clamp(42px,4vw,68px); background:rgba(255,255,255,.96); }
.form-side::before { position:absolute; width:280px; height:280px; right:-170px; bottom:-130px; border-radius:50%; content:""; background:rgba(225,235,248,.38); filter:blur(20px); }
.form-bubble { position:absolute; border-radius:50%; }
.bubble-one { width:10px; height:10px; top:11%; right:12%; background:#e5defb; }
.bubble-two { width:6px; height:6px; top:14%; right:18%; background:#d4eee5; }
.mobile-brand { display:none; }
.login-wrap { position:relative; z-index:2; width:min(390px,100%); }
.form-heading { margin-bottom:32px; }
.eyebrow { display:flex; align-items:center; gap:7px; color:#7b6fe2; font-size:8px; font-weight:800; letter-spacing:1.7px; }
.eyebrow i { width:18px; height:7px; border-radius:999px; background:#e5e0fb; }
h2 { margin:12px 0 9px; color:#272c39; font-size:34px; line-height:1.12; letter-spacing:-1.2px; }
.sub { color:#70798c; font-size:13px; line-height:1.65; }
.form-group { margin-bottom:17px; }
label { display:block; margin:0 0 8px 3px; color:#565e6f; font-size:12px; font-weight:700; }
.input-shell { position:relative; }
.input-shell > svg { position:absolute; z-index:1; width:17px; height:17px; top:50%; left:16px; transform:translateY(-50%); fill:none; stroke:#98a1b1; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; transition:stroke .18s ease; }
input { width:100%; min-height:54px; padding:0 16px 0 47px; border:1px solid transparent; border-radius:15px; outline:none; color:#2d3340; caret-color:#7567ea; background:#f5f7fa; font-size:14px; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }
input::placeholder { color:#8d95a5; }
input:hover { background:#f1f4f8; }
.input-shell:focus-within > svg { stroke:#7567ea; }
input:focus-visible { border-color:#cfc8f7; background:#fff; box-shadow:0 0 0 4px rgba(117,103,234,.09),0 10px 25px rgba(64,72,94,.06); }
.submit-btn { display:flex; width:100%; min-height:54px; align-items:center; justify-content:center; gap:11px; margin-top:7px; border:0; border-radius:15px; color:#fff; background:linear-gradient(110deg,#8779ec,#6e60df); box-shadow:0 13px 30px rgba(100,86,208,.2); font-size:14px; font-weight:750; letter-spacing:.2px; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.submit-btn::after { width:6px; height:6px; margin-left:2px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; content:""; transform:rotate(45deg); transition:transform .18s ease; }
.submit-btn:hover { transform:translateY(-1px); box-shadow:0 17px 34px rgba(100,86,208,.26); filter:saturate(1.04); }
.submit-btn:hover::after { transform:translateX(2px) rotate(45deg); }
.submit-btn:focus-visible { outline:3px solid rgba(117,103,234,.2); outline-offset:3px; }
.submit-btn:active { transform:translateY(0); }
.submit-btn:disabled { color:#9fa5b1; background:#e8ebf0; box-shadow:none; cursor:wait; filter:none; transform:none; }
.submit-btn:disabled::after { display:none; }
.error-msg { display:none; margin-top:13px; padding:11px 13px; border-radius:12px; color:#b85265; background:#fff1f3; font-size:10px; line-height:1.55; }
.access-note { display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:start; margin-top:22px; padding:13px 14px; border-radius:14px; color:#70798a; background:#f8f9fb; font-size:11px; line-height:1.65; }
.access-icon { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; color:#54b993; background:#eaf8f3; }
.access-icon svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.access-note strong { display:block; margin-bottom:1px; color:#50596c; font-size:11px; }
.feature-row { display:flex; justify-content:center; gap:17px; margin-top:20px; color:#747d8f; font-size:10px; }
.feature-row span { display:flex; align-items:center; gap:6px; }
.feature-row i { width:6px; height:6px; border-radius:50%; }
.dot-blue { background:var(--blue); }
.dot-mint { background:var(--mint); }
.footer-note { margin-top:28px; color:#8e95a3; font-size:9px; text-align:center; }

@media (max-width:900px) {
    .login-page { display:block; min-height:100vh; min-height:100svh; overflow:auto; }
    .creative-side { min-height:210px; padding:23px 22px; border-bottom:1px solid #eef1f5; }
    .creative-side::before { inset:9px; border-radius:24px; }
    .version-pill,.studio-preview,.creative-footer { display:none; }
    .creative-copy { width:100%; margin:39px 0 0; }
    .creative-copy h1 { margin:10px 0 7px; font-size:30px; letter-spacing:-1.2px; }
    .creative-copy p { max-width:360px; font-size:11px; line-height:1.6; }
    .form-side { min-height:calc(100vh - 210px); min-height:calc(100svh - 210px); padding:45px 22px 34px; }
    .form-bubble { display:none; }
    .mobile-brand { display:none; }
    .login-wrap { width:min(430px,100%); }
    .form-heading { margin-bottom:29px; }
    h2 { font-size:31px; }
    input,.submit-btn { min-height:56px; }
    .feature-row { flex-wrap:wrap; }
}