:root{--bg:#1f144e;--panel:#150a47;--line:#5c00ad;--lime:#ebfe17;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white);font-family:Inter,Arial,sans-serif}
body{font-size:13px}.app{width:100%;max-width:440px;min-height:100vh;margin:0 auto;padding:15px 41px 28px 47px}
header{height:40px;display:flex;align-items:flex-start;justify-content:space-between;margin:0 -18px 16px -19px}.brand-logo{width:137px;height:30px;object-fit:contain}.account{display:flex;gap:9px;align-items:center}.header-login{height:31px;padding:7px 15px;border-radius:6px;background:var(--lime);color:#1e1e1e;text-decoration:none;font-weight:600}
.credits{width:68px;height:31px;border-radius:6px;background:var(--lime);color:#1e1e1e;display:flex;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:600}.credits img{width:17px;height:17px}.credits i,.generate i{font-style:normal}.profile{width:35px;height:35px;border:0;padding:0;background:transparent}.profile img{width:35px;height:35px;border-radius:50%;object-fit:cover}.profile-menu{position:absolute;z-index:9;top:53px;right:18px;width:170px;padding:12px;background:#150a47;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 25px #09031d99}.profile-menu strong,.profile-menu small{display:block;overflow:hidden;text-overflow:ellipsis}.profile-menu small{color:#9189aa;margin:4px 0 10px}.profile-menu button{width:100%;border:1px solid var(--line);border-radius:6px;background:transparent;color:#fff;padding:7px}
.label{display:block;font-size:11px;margin:0 4px 11px}.model-select{width:343px;height:57px;border:0;border-radius:10px;padding:0 17px;color:#fff;background:linear-gradient(244deg,#5c00ad 9%,#00579f 98%);display:flex;align-items:center;justify-content:space-between;font:400 24px Inter;text-align:left}.model-select img{width:21px;height:16px;transform:rotate(180deg);transition:transform .18s ease}.model-select[aria-expanded="true"] img{transform:rotate(0)}
.model-menu{position:absolute;z-index:5;width:343px;background:#302f30;border-radius:0 0 10px 10px;overflow:hidden;box-shadow:0 14px 28px #09031d99}.model-menu button{display:block;width:100%;padding:10px 17px;border:0;background:none;color:#fff;text-align:left;font:20px Inter}.model-menu button:hover{background:#454145}.hidden{display:none!important}
.uploads{width:352px;display:grid;grid-template-columns:repeat(2,162px);gap:28px;margin:49px 0 0}.uploads.single{grid-template-columns:340px;margin-left:4px}.uploads.split-media{grid-template-columns:340px;grid-template-rows:repeat(2,84px);gap:8px;margin-left:4px}.upload{height:177px;min-height:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;padding:12px;overflow:hidden}.upload.compact-upload{height:84px;border-radius:13px}.compact-upload .placeholder{display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;align-items:center;text-align:left;column-gap:10px}.compact-upload .upload-icon{grid-row:1/3;width:38px;height:38px;margin:0;background-image:url('/assets/video.svg')}.compact-upload:nth-child(2) .upload-icon{background-image:url('/assets/image.svg'),url('/assets/audio.svg');background-size:25px,24px;background-position:left center,right center;width:58px}.compact-upload .placeholder>div:not(.upload-icon){font-size:14px;font-weight:600}.compact-upload small{font-size:11px}.upload input{display:none}.upload-icon{width:40px;height:40px;margin:0 auto 17px;background:center/contain no-repeat url('/assets/image.svg')}.uploads.single .upload-icon{width:104px;height:36px;background-image:url('/assets/image.svg'),url('/assets/video.svg'),url('/assets/audio.svg');background-size:28px,36px,28px;background-position:left center,center center,right center}.upload small{display:block;color:var(--line);font-size:13px}.upload .placeholder>div:not(.upload-icon){font-size:15px}.media-grid{width:100%;height:151px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.compact-upload .media-grid{height:64px}.media-grid:has(.media-preview:only-child){grid-template-columns:1fr}.media-preview{position:relative;min-width:0;overflow:hidden;border-radius:9px}.media-preview img,.media-preview video{width:100%;height:100%;object-fit:cover}.audio-preview{height:100%;display:grid;place-items:center;font-size:34px;color:var(--line)}.remove-media{position:absolute;top:5px;right:5px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#11092ecc;color:#fff;font:18px/20px Arial;cursor:pointer}
.prompt-label{font-size:13px;margin:2px 0 4px}textarea{display:block;width:352px;height:201px;min-height:201px;resize:vertical;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:#fff;padding:14px;font:13px Inter;outline:0}textarea::placeholder{color:#756e8d}
.options{width:348px;height:34px;display:flex;align-items:stretch;gap:6px;flex-wrap:nowrap;margin:4px 0 10px}.option{height:34px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:#fff;padding:0 7px;display:flex;align-items:center;font-size:13px;white-space:nowrap;cursor:pointer}.option.elements{width:120px}.option img{width:19px;height:19px;margin-right:2px}.option input{position:absolute;opacity:0;pointer-events:none}.option select{max-width:55px;background:transparent;color:#fff;border:0;font:13px Inter;outline:0}.option option{background:#241753}.option.aspect{margin-left:auto}.ratio-icon{width:11px;height:18px;min-width:11px;flex:0 0 auto;border:1px solid #fff;display:inline-block;margin-right:3px;transition:.2s}.ratio-icon.ratio-16-9{width:18px;height:11px;min-width:18px}.ratio-icon.ratio-1-1{width:14px;height:14px;min-width:14px}.option.sound.off img{opacity:.5}.option.sound.off .sound-icon{position:relative}.option.sound.off .sound-icon:after{content:'';position:absolute;width:23px;height:1px;background:#fff;left:-2px;top:9px;transform:rotate(-40deg)}
.element-panel{width:348px;margin:-4px 0 10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.element-panel>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:8px}.element-panel label,.element-panel small{font-size:10px;color:#aaa3bd}.element-panel input{display:block;width:100%;margin-top:4px;color:#fff;background:#211452;border:1px solid var(--line);border-radius:5px;padding:6px;font-size:11px}.element-panel button{margin-top:8px;background:var(--lime);border:0;border-radius:5px;padding:6px 9px;font-weight:600}.element-chip{display:inline-flex;align-items:center;gap:5px;margin:8px 5px 0 0;padding:5px 7px;border:1px solid var(--line);border-radius:12px;color:#fff}.element-chip button{margin:0;padding:0 3px;background:transparent;color:#fff}
#durationWrap{width:348px;position:relative}input[type=range]{width:348px;height:34px;margin:0;accent-color:#fff}.duration-min,.duration-max{position:absolute;top:24px;font-size:12px;pointer-events:none}.duration-min{left:9px}.duration-max{right:7px}.generate-row{width:344px;display:flex;justify-content:flex-end;margin-top:10px}.generate,.google{border:0;background:var(--lime);color:#1e1e1e;border-radius:10px;font-weight:600;text-decoration:none}.generate{width:130px;height:39px;padding:0;font-size:14px}.generate span{margin-left:18px;display:inline-flex;align-items:center;gap:3px}.generate img{width:15px;height:15px}.generate:disabled{opacity:.55}
.history{margin-top:8px}.history h2{font-size:13px;font-weight:400;margin:0 0 4px}.history-grid{display:grid;grid-template-columns:258px;gap:8px}.job,.empty{width:258px;min-height:144px;margin:0;background:var(--panel);border:1px solid var(--line);padding:12px}.job video{display:block;width:100%;max-height:220px;margin:8px 0;object-fit:cover}.job a{color:var(--lime)}.job small{display:block;color:#ff9aaf;margin-top:6px}.empty{color:#756e8d}
.login{min-height:75vh;display:grid;place-items:center;text-align:center}.login>div{max-width:330px}.big-z{font-size:80px;font-style:italic;color:var(--lime)}.login h1{letter-spacing:8px}.login p{opacity:.75;margin-bottom:25px}.google{display:inline-flex;gap:10px;align-items:center;padding:14px 20px;font-size:16px}.google span{background:#fff;color:#4285f4;border-radius:50%;padding:3px 7px}.test-login{display:block;margin:12px auto 0;border:1px solid var(--line);background:transparent;color:#fff;padding:10px 15px;border-radius:8px;cursor:pointer}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(100px);background:#0e092b;color:#fff;padding:12px 18px;border-radius:10px;transition:.25s;z-index:10}#toast.show{transform:translateX(-50%) translateY(0)}
@media(max-width:439px){.app{max-width:100%;padding-left:max(24px,calc((100vw - 346px)/2));padding-right:max(24px,calc((100vw - 346px)/2))}.model-select,.model-menu{width:100%}.uploads,textarea,.options,#durationWrap,input[type=range],.generate-row{width:100%}.uploads.single,.uploads.split-media{grid-template-columns:1fr;margin-left:0}.uploads:not(.single):not(.split-media){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.history-grid{grid-template-columns:min(258px,100%)}header{margin-left:-19px;margin-right:-18px}}
.compact-upload .placeholder{grid-template-columns:62px auto;column-gap:8px}
.mode-tabs{width:348px;display:flex;gap:5px;margin:12px 0}.mode-tabs button{flex:1;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:#fff;font:12px Inter;cursor:pointer}.mode-tabs button.active{background:linear-gradient(100deg,#0876b9,#8400cd);border-color:transparent}
@media(max-width:439px){.mode-tabs{width:100%}}