@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root{font-family:'DM Sans','Noto Sans SC',system-ui,sans-serif;color:#f6f4f5;background:#0b0c10;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.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}
.app-shell{min-height:100vh;display:flex}.sidebar{width:228px;min-width:228px;min-height:100vh;background:#101115;border-right:1px solid #25262d;display:flex;flex-direction:column;padding:30px 16px 26px}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700;letter-spacing:-1.5px;margin:0 15px 63px}.brand-dot{color:#ed8daf}.brand-mark{width:27px;height:28px;position:relative;display:inline-block}.brand-mark span{position:absolute;border:2px solid #ec8dac;border-radius:4px;transform:rotate(-35deg)}.brand-mark span:nth-child(1){width:10px;height:23px;left:4px;top:2px}.brand-mark span:nth-child(2){width:10px;height:23px;left:12px;top:2px;border-color:#a28afa}.brand-mark span:nth-child(3){width:8px;height:11px;left:10px;top:8px;border-color:#f7c5d4}.sidebar-group-label{padding:0 15px 13px;color:#777983;font-size:11px;letter-spacing:.13em}.nav-item{height:44px;padding:0 14px;display:flex;align-items:center;gap:11px;color:#f7f4f7;font-size:13px;font-weight:600;border:1px solid #3b2f42;border-radius:10px;background:linear-gradient(96deg,#2c2133,#211e2a)}.nav-item svg{width:18px;height:18px;color:#ea92bd}.nav-active-dot{width:5px;height:5px;border-radius:50%;background:#d596f8;margin-left:auto;box-shadow:0 0 12px #d596f8}.sidebar-spacer{flex:1}.sidebar-bottom{border-top:1px solid #292a30;padding:23px 11px 0;display:flex;align-items:center;gap:9px;color:#888991;font-size:11px}.status-dot{height:7px;width:7px;border-radius:50%;background:#d6a774;box-shadow:0 0 10px #d6a77455}.status-dot.ready{background:#74cda8;box-shadow:0 0 10px #74cda888}.status-dot.error{background:#e8899a;box-shadow:0 0 10px #e8899a88}
.sidebar nav{display:flex;flex-direction:column;gap:7px}.nav-item.secondary{color:#888994;border-color:transparent;background:transparent;font-size:12px}.nav-item.secondary:hover{color:#ddd6dd;background:#18191e}.nav-item.secondary svg{color:#8e758d}
.main{flex:1;min-width:0}.topbar{height:76px;border-bottom:1px solid #24252b;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4.3vw,72px)}.crumbs{display:flex;gap:15px;font-size:12px;color:#777880}.crumbs strong{font-weight:600;color:#d9d5d9}.slash{color:#4a4b52}.topbar-pill{display:flex;align-items:center;gap:8px;border:1px solid #37313e;color:#bdacbc;background:#1a1720;border-radius:100px;padding:8px 12px;font-size:9px;font-weight:700;letter-spacing:.12em}.topbar-pill span{width:6px;height:6px;border-radius:50%;background:#d79ec9;box-shadow:0 0 10px #e4a1cb}.workspace{max-width:1535px;margin:0 auto;padding:59px clamp(24px,4.3vw,72px) 20px}.intro{margin-bottom:45px}.eyebrow{display:flex;align-items:center;gap:9px;color:#e5a8ce;font-size:11px;font-weight:600;letter-spacing:.12em}.eyebrow-line{width:19px;height:1px;background:#e5a8ce}.intro h1{font-size:clamp(32px,3vw,47px);line-height:1.25;letter-spacing:-.055em;margin:16px 0 15px;font-weight:700}.intro h1 em{font-style:normal;background:linear-gradient(97deg,#eca2bf 5%,#a993ec 88%);color:transparent;background-clip:text}.intro p{margin:0;color:#909099;font-size:13px;letter-spacing:.025em}.work-grid{display:grid;grid-template-columns:minmax(440px,1.05fr) minmax(380px,.95fr);gap:22px}.creator-panel,.result-panel{background:#14151a;border:1px solid #292a31;border-radius:18px;padding:28px 29px 26px;min-width:0;box-shadow:0 16px 40px #0000000b}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-index{font-size:10px;font-weight:700;letter-spacing:.16em;color:#a69ba8}.section-heading h2{font-size:17px;line-height:1.3;letter-spacing:-.03em;margin:7px 0 0}.heading-icon{font-size:24px;color:#daa1d1}.prompt-wrap{margin-top:25px;background:#1b1c22;border:1px solid #33343d;border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.prompt-wrap:focus-within{border-color:#a87aaf;box-shadow:0 0 0 3px #a87aaf15}.prompt-wrap textarea{display:block;width:100%;height:174px;resize:vertical;background:transparent;border:0;outline:0;padding:18px 19px;color:#f1ecf0;font-size:13px;line-height:1.8}.prompt-wrap textarea::placeholder{color:#797a83}.prompt-footer{border-top:1px solid #303138;padding:11px 16px;display:flex;align-items:center;gap:7px;color:#85858e;font-size:10px}.tip-icon{font-size:16px;line-height:0;color:#d49cc7}.char-count{margin-left:auto;white-space:nowrap;color:#777780}.inspiration{display:flex;align-items:center;gap:7px;background:none;border:none;color:#d9a3cc;font-size:11px;font-weight:600;margin-top:14px;padding:0}.inspiration:hover{color:#f3bfdc}.inspiration svg{width:16px;height:16px}.inspiration span{font-size:14px}.form-divider{height:1px;background:#2a2b31;margin:25px 0 23px}.settings-heading{margin-bottom:22px}.field label,.ratio-field legend{display:block;font-size:12px;font-weight:600;color:#e8e4e8;margin-bottom:10px}.select-wrap{height:47px;border:1px solid #34353d;background:#1d1e24;border-radius:9px;position:relative;display:flex;align-items:center}.select-wrap:focus-within{border-color:#a87aaf}.select-wrap svg{width:17px;height:17px;color:#bd9cc8;margin-left:14px;flex:none}.select-wrap select{appearance:none;border:none;outline:none;color:#f0ecf1;background:none;width:100%;height:100%;padding:0 35px 0 10px;font-size:12px;font-weight:600;cursor:pointer}.select-wrap select option{background:#202129}.chevron{width:7px;height:7px;border-right:1.5px solid #9a939e;border-bottom:1.5px solid #9a939e;transform:rotate(45deg);position:absolute;right:18px;top:18px;pointer-events:none}.custom-model{display:block;width:100%;margin-top:9px;height:43px;padding:0 14px;border:1px solid #34353d;border-radius:9px;background:#1d1e24;color:#f0ecf1;outline:0;font-size:12px}.custom-model:focus{border-color:#a87aaf}.ratio-field{border:0;padding:0;margin:24px 0 0}.ratio-field legend span{font-size:11px;font-weight:400;color:#777982;margin-left:6px}.ratio-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.ratio-option{height:94px;border:1px solid #35353d;background:#1b1c21;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;position:relative;transition:background .2s,border-color .2s}.ratio-option:hover{border-color:#987b99}.ratio-option:has(input:checked){background:linear-gradient(150deg,#34283a,#272333);border-color:#c88dbe;box-shadow:inset 0 0 0 1px #c88dbe25}.ratio-option input{position:absolute;opacity:0;inset:0;cursor:pointer}.ratio-option strong{font-size:11px;font-weight:600}.ratio-option small{font-size:10px;color:#89838e}.ratio-shape{height:23px;border:1.5px solid #98919e;border-radius:2px;display:block;margin-bottom:3px}.ratio-option:has(input:checked) .ratio-shape{border-color:#efacd4}.landscape{width:34px;height:20px}.portrait{width:16px;height:26px}.square{width:23px;height:23px}.classic{width:29px;height:22px}.upright{width:18px;height:24px}.fixed-settings{display:flex;align-items:center;gap:6px;color:#898792;font-size:10px;margin:21px 0 15px}.fixed-settings span{color:#db9dbd}.generate-button{border:0;width:100%;height:51px;border-radius:9px;color:#271d29;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(100deg,#f3b5ca 0%,#c9a9ea 100%);box-shadow:0 8px 27px #d69fcb1a;transition:transform .2s,filter .2s}.generate-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.generate-button:disabled{opacity:.65;cursor:not-allowed}.button-sparkle{font-size:18px}.button-arrow{font-size:17px;margin-left:3px}.form-note{text-align:center;color:#6f707a;font-size:10px;margin:12px 0 0}
.result-panel{display:flex;flex-direction:column}.result-heading{margin-bottom:25px}.preview-indicator{font-size:10px;color:#8c8992;border:1px solid #3b3a41;padding:7px 10px;border-radius:100px}.preview-indicator.busy{border-color:#715774;color:#d7a7d0;background:#2c2330}.preview-indicator.done{border-color:#4d725f;color:#9fd6b3;background:#1b2a22}.preview-indicator.failed{border-color:#89565f;color:#eca2ac;background:#2c2024}.preview-stage{aspect-ratio:16/10;min-height:310px;border:1px solid #3d3443;border-radius:13px;background:radial-gradient(ellipse at 51% 77%,#4b2c4b 0%,#32243e 29%,#211e2c 52%,#161820 80%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.stage-grain{position:absolute;inset:0;opacity:.28;background-image:radial-gradient(#e4d3e5 0.5px,transparent .5px);background-size:5px 5px;mask-image:linear-gradient(transparent,#000)}.stage-orb{position:absolute;border-radius:50%;filter:blur(48px);pointer-events:none}.orb-one{width:180px;height:100px;background:#aa6c9b50;bottom:-60px;left:5%}.orb-two{width:150px;height:110px;background:#775de951;top:14%;right:-30px}.preview-empty,.preview-progress{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}.preview-symbol{height:96px;width:96px;border:1px solid #af96b92b;background:#ffffff08;border-radius:25px;display:grid;place-items:center;margin-bottom:21px;box-shadow:0 20px 65px #cf8cda17}.preview-symbol svg{width:57px;color:#dfb3db}.preview-empty strong,.preview-progress strong{font-size:14px;font-weight:600}.preview-empty>span,.preview-progress>span{color:#a59ba9;font-size:11px;margin-top:10px}.preview-progress{width:80%}.progress-animation{height:96px;width:96px;display:grid;place-items:center;position:relative;margin-bottom:21px}.progress-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #ffffff1f;border-top-color:#f1b4d1;animation:spin 1.5s linear infinite}.progress-animation span{font-size:40px;color:#f1b4d1;filter:drop-shadow(0 0 18px #eda3d9)}.progress-track{height:3px;width:190px;background:#ffffff24;border-radius:9px;overflow:hidden;margin-top:25px}.progress-track span{display:block;background:linear-gradient(90deg,#f1b4d1,#a99bea);height:100%;width:40%;border-radius:9px;animation:progress 2s ease-in-out infinite}.video-player{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;z-index:2;background:#09090b}.result-meta{display:flex;justify-content:space-between;align-items:center;color:#898791;font-size:10px;border-bottom:1px solid #2b2c32;padding:18px 1px}.result-meta>span:first-child{display:flex;align-items:center;gap:7px}.meta-dot{width:6px;height:6px;background:#8b738e;border-radius:50%}.result-actions{display:flex;gap:9px;min-height:66px;align-items:center}.download-button,.retry-button{border:1px solid #6f526e;color:#f4c5e2;background:#2b2330;border-radius:8px;height:38px;padding:0 15px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:14px}.download-button:hover,.retry-button:hover{background:#3a2c40}.retry-button{border-color:#424049;color:#c9becd;background:#24242b}.message{border:1px solid #89565f;background:#2b2025;color:#efadb9;padding:12px 14px;border-radius:9px;font-size:11px;line-height:1.6;margin-bottom:16px}.how-it-works{margin-top:auto;border:1px solid #313139;background:#1a1b20;border-radius:10px;padding:15px 17px}.how-label{font-size:10px;color:#86858e}.flow{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:6px}.flow span{font-size:10px;color:#c7c1ca;white-space:nowrap}.flow b{font-size:9px;color:#c999be;margin-right:4px}.flow i{height:1px;flex:1;max-width:30px;background:#57505c}.page-footer{display:flex;justify-content:space-between;gap:16px;color:#585961;font-size:10px;margin-top:27px}.page-footer span:last-child{letter-spacing:.15em;font-size:9px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes progress{0%{transform:translateX(-110%)}50%{transform:translateX(110%)}100%{transform:translateX(300%)}}
@media(max-width:1100px){.sidebar{width:185px;min-width:185px}.workspace{padding-top:45px}.work-grid{grid-template-columns:1fr}.preview-stage{aspect-ratio:16/8;min-height:310px}}@media(max-width:680px){.sidebar{display:none}.topbar{height:60px;padding:0 20px}.workspace{padding:38px 18px 24px}.intro{margin-bottom:31px}.intro h1{font-size:34px}.intro p{line-height:1.7}.creator-panel,.result-panel{padding:23px 18px}.work-grid{gap:16px}.ratio-options{gap:5px}.ratio-option{height:82px}.ratio-field legend span{display:block;margin:5px 0 0}.preview-stage{aspect-ratio:4/3;min-height:260px}.prompt-footer{font-size:9px}.page-footer span:last-child{display:none}}@media(max-width:390px){.ratio-option strong{font-size:10px}.ratio-option small{font-size:9px}.flow i{max-width:10px}}

.advanced-settings{margin-top:24px;border-top:1px solid #2d2e35;padding-top:22px}.duration-field>label{display:flex;justify-content:space-between}.duration-field>label span{color:#777982;font-size:10px;font-weight:400}.duration-control{display:flex;align-items:center;gap:15px}.duration-control input{appearance:none;height:4px;flex:1;border:0;border-radius:10px;background:linear-gradient(90deg,#e6a9ca var(--range-progress,20%),#393941 var(--range-progress,20%));outline:0}.duration-control input::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border:3px solid #f2bdd8;border-radius:50%;background:#5b405c;box-shadow:0 0 0 4px #dda1c826;cursor:pointer}.duration-control input::-moz-range-thumb{width:12px;height:12px;border:3px solid #f2bdd8;border-radius:50%;background:#5b405c;cursor:pointer}.duration-control output{width:55px;text-align:center;border:1px solid #554354;background:#29212d;color:#efbad9;border-radius:7px;padding:7px 5px;font-size:11px;font-weight:600}.duration-marks{display:flex;justify-content:space-between;color:#696a72;font-size:8px;margin:7px 70px 0 0}.subtitle-setting{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.subtitle-setting>div{display:flex;flex-direction:column;gap:5px}.subtitle-setting>div label{font-size:12px;font-weight:600}.subtitle-setting>div span{color:#777982;font-size:10px}.switch{position:relative;width:39px;height:22px;cursor:pointer}.switch input{position:absolute;opacity:0}.switch>span{position:absolute;inset:0;border-radius:100px;background:#3a3a42;transition:.2s}.switch>span:after{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#a3a0aa;transition:.2s}.switch input:checked+span{background:#9e6d9c}.switch input:checked+span:after{transform:translateX(17px);background:#f7d5e8}.subtitle-input{position:relative;margin-top:12px}.subtitle-input textarea{display:block;width:100%;height:76px;resize:vertical;border:1px solid #34353d;background:#1d1e24;color:#f0ecf1;border-radius:9px;padding:11px 45px 11px 13px;outline:0;font-size:11px;line-height:1.6}.subtitle-input textarea:focus{border-color:#a87aaf}.subtitle-input>span{position:absolute;right:10px;bottom:9px;color:#676871;font-size:9px}.subtitle-input b{font-weight:400}

.template-area{position:relative;margin-top:18px}.template-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.template-toolbar>div{display:flex;flex-direction:column;gap:4px}.template-toolbar strong{font-size:11px;color:#d9d4da}.template-toolbar>div span{font-size:9px;color:#74757d}.template-toolbar>button{border:1px solid #554254;background:#28212c;color:#e4b0d2;border-radius:7px;padding:7px 10px;font-size:10px}.template-toolbar>button:hover{background:#332638}.template-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;min-height:26px}.template-empty{font-size:9px;color:#60616a;padding:6px 0}.template-chip{border:1px solid #423846;background:#211e27;color:#cabdcb;border-radius:100px;padding:6px 10px;font-size:10px;display:flex;align-items:center;gap:6px}.template-chip:hover{border-color:#936e91;color:#efc2df}.template-chip b{color:#d99dc4;font-weight:600}.template-chip i{width:3px;height:3px;border-radius:50%;background:#66616b}.template-editor{border:1px solid #423744;background:#1b1a20;border-radius:10px;padding:15px;margin-top:12px}.template-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.template-editor-head strong{font-size:12px}.template-editor-head button{border:0;background:none;color:#777780;font-size:19px;line-height:1}.template-editor>label{display:block;color:#a7a1aa;font-size:10px;margin:11px 0 7px}.template-name-wrap{display:flex;align-items:center;border:1px solid #393a42;background:#202127;border-radius:7px;height:38px}.template-name-wrap span{color:#d89fc5;margin-left:11px;font-size:12px}.template-name-wrap input{height:100%;flex:1;min-width:0;border:0;outline:0;background:none;color:#eee9ee;padding:0 10px 0 3px;font-size:11px}.template-editor>textarea{width:100%;height:100px;resize:vertical;border:1px solid #393a42;background:#202127;border-radius:7px;color:#eee9ee;padding:10px;outline:0;font-size:11px;line-height:1.6}.template-name-wrap:focus-within,.template-editor>textarea:focus{border-color:#966f95}.template-editor-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}.template-editor-actions button{border-radius:7px;padding:7px 11px;font-size:10px}.template-cancel,.template-delete{border:1px solid #3b3c43;background:#23242a;color:#aaa6af}.template-delete{color:#e59ca7;margin-right:auto}.template-save{border:1px solid #ab7ba5;background:#9b6c95;color:white}.template-error{margin-top:9px;color:#e994a2;font-size:10px}.mention-menu{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:6px;background:#222129;border:1px solid #4a3d4b;border-radius:9px;padding:6px;box-shadow:0 15px 35px #0008}.mention-item{width:100%;border:0;background:transparent;color:#d8d2d9;border-radius:6px;padding:9px 10px;text-align:left;display:flex;align-items:center;gap:9px;font-size:10px}.mention-item:hover,.mention-item.active{background:#352a38;color:white}.mention-item b{color:#e0a2ca}.mention-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#817d86}
.template-entry{display:flex;align-items:center;border:1px solid #423846;background:#211e27;border-radius:100px;overflow:hidden}.template-entry .template-chip{border:0;background:transparent;border-radius:0;padding-right:6px}.template-edit{align-self:stretch;border:0;border-left:1px solid #3a323d;background:transparent;color:#77717b;padding:0 8px;font-size:12px}.template-edit:hover{background:#332838;color:#e5b3d4}