@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil1Thin.woff2') format('woff2');
    font-weight:100;
    font-display:swap;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil2Light.woff2') format('woff2');
    font-weight:300;
    font-display:swap;
}
@font-face {
    font-family:'PretendardSubtitle';
    src:url('../font/PretendardVariable.woff2') format('woff2');
    font-style:normal;
    font-weight:100 600;
    font-display:swap;
}
@font-face {
    font-family:'Cafe24Ssurround';
    src:url('../font/Cafe24Ssurround.woff') format('woff');
    font-style:normal;
    font-weight:400;
    font-display:swap;
}
@font-face {
    font-family:'A2GSubtitle';
    src:url('../font/a2g.woff2') format('woff2');
    font-style:normal;
    font-weight:400;
    font-display:swap;
}
@font-face {
    font-family:'BMEuljiroSubtitle';
    src:url('../font/BMEULJIRO.woff') format('woff');
    font-style:normal;
    font-weight:400;
    font-display:swap;
}
@font-face {
    font-family:'Cafe24ProSlimSubtitle';
    src:url('../font/Cafe24PROSlim-Light.woff2') format('woff2');
    font-style:normal;
    font-weight:300;
    font-display:swap;
}
@font-face {
    font-family:'GangwonEduSubtitle';
    src:url('../font/GangwonEdu_OTFLightA.woff') format('woff');
    font-style:normal;
    font-weight:300;
    font-display:swap;
}
@font-face {
    font-family:'SangSangFlowerSubtitle';
    src:url('../font/SangSangFlowerRoad.woff') format('woff');
    font-style:normal;
    font-weight:400;
    font-display:swap;
}
@font-face {
    font-family:'UlsanJungguSubtitle';
    src:url('../font/ulsanjunggu.woff2') format('woff2');
    font-style:normal;
    font-weight:400;
    font-display:swap;
}
@font-face {
    font-family:'TheJamsilSubtitle';
    src:url('../font/TheJamsil1Thin.woff2') format('woff2');
    font-style:normal;
    font-weight:100;
    font-display:swap;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil3Regular.woff2') format('woff2');
    font-weight:400;
    font-display:swap;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil4Medium.woff2') format('woff2');
    font-weight:500;
    font-display:swap;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight:600;
    font-display:swap;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil6ExtraBold.woff2') format('woff2');
    font-weight:600;
    font-display:swap;
}

:root{
    --font-family:"TheJamsil","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
    --page-bg:#202543;
    --panel-bg:#262b4f;
    --side-bg:#202543;
    --card-bg:#30365f;
    --card-bg-2:#333a68;
    --card-active:#4f7cff;
    --card-active-border:#638cff;
    --text:#ffffff;
    --text-strong:#ffffff;
    --text-soft:#a7adc6;
    --text-muted:#747b99;
    --primary:#4f7cff;
    --primary-2:#5c85ff;
    --pink:#F75165;
    --purple:#c05dce;
    --range-bg:#202342;
    --white:#ffffff;
    --line:#353b68;
    --radius-lg:28px;
    --radius-md:18px;
    --radius-sm:12px;
    --shadow-card:0 14px 26px rgba(9,12,30,.24);
    --shadow-soft:0 12px 35px rgba(5,8,20,.18);
    --app-width:100%;
    --nav-width:95px;
    --preview-panel-width:370px;
    --content-pad-x:46px;
    --preview-width:100%;
    --preview-height:441px;
    --voice-card-w:150px;
    --voice-card-h:auto;
    --voice-gap:15px;
    --fs-logo:25px;
    --fs-title:22px;
    --fs-base:14px;
    --fs-small:12px;
    --fs-xs:11px;
}
html[data-theme="light"]{
    --page-bg:#f5f7ff;
    --panel-bg:#ffffff;
    --side-bg:#eef2ff;
    --card-bg:#ffffff;
    --card-bg-2:#f2f5ff;
    --card-active:#4f7cff;
    --card-active-border:#638cff;
    --text:#1f2744;
    --text-strong:#10172f;
    --text-soft:#6b728d;
    --text-muted:#9aa1b7;
    --range-bg:#dfe5ff;
    --line:#dfe5ff;
    --shadow-card:0 14px 26px rgba(38,50,98,.10);
    --shadow-soft:0 12px 35px rgba(38,50,98,.12);
}
*{box-sizing:border-box}
html,
body{
    min-height:100%;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.22) rgba(255,255,255,.04);
}

body{
    margin:0;
    font-family:var(--font-family);
    line-height:0;
    color:var(--text);
    background:var(--page-bg);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
    width:6px;
    height:6px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
    background:rgba(255,255,255,.04);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(255,255,255,.22);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.34);
}
body.is-preview-wide{
    --preview-panel-width:468px;
    --preview-width:100%;
    --preview-height:calc((var(--preview-panel-width) - 48px) * 9 / 16);
}
body.is-index-ready{
    --preview-width:0px;
    --preview-height:0px;
    height:100vh;
    overflow:hidden;
}
html.is-index-ready{
    height:100vh;
    overflow:hidden;
}
button{font:inherit;border:0;cursor:pointer;color:inherit}
.app{
    width:var(--app-width);
    min-height:100vh;
    display:flex;
    background:var(--panel-bg);
    overflow:visible;
}
.nav{
    width:var(--nav-width);
    height:100vh;
    background:var(--side-bg);
    position:fixed;
    left:0;
    top:0;
    z-index:60;
    overflow:visible;
    border-right: 1px solid rgba(255,255,255,0.05);
}
.brand-mark{
    position:absolute;
    left:50%;
    top:45px;
    transform:translateX(-50%);
}

.nav-icons{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:31px;
}
.nav-ico{
    width:34px;
    height:34px;
    position:relative;
    opacity:1;
    text-align: center;
    cursor:pointer;
    transition:opacity .2s ease, transform .2s ease;
}
.nav-ico > img{
    opacity:.3;
    transition:opacity .2s ease;
}
.nav-ico:hover{
    transform:translateY(-1px);
}
.nav-ico:hover > img{
    opacity:.75;
}
.nav-ico:focus-visible{
    outline:0;
}
.nav-ico:focus-visible > img{opacity:.9}
.nav-ico.act{
    opacity:1;
}
.nav-ico.act > img{opacity:1}

.nav-ico.is-disabled{
    cursor:pointer;
    pointer-events:auto;
}
.nav-ico.is-disabled > img{opacity:.58}
.nav-ico.is-complete::after{
    content:"✓";
    position:absolute;
    top:-5px;
    right:-7px;
    width:16px;
    height:16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:var(--white);
    font-size:10px;
    font-weight:500;
    line-height:1;
    box-shadow:0 0 0 2px var(--side-bg);
}
.nav-ico.is-stale::after{
    content:"✓";
    position:absolute;
    top:-5px;
    right:-7px;
    width:16px;
    height:16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FF4D6D;
    color:var(--white);
    font-size:10px;
    font-weight:500;
    line-height:1;
    box-shadow:0 0 0 2px var(--side-bg);
}
.nav-tooltip{
    position:absolute;
    left:52px;
    top:50%;
    z-index:80;
    width:230px;
    min-height:142px;
    padding:25px;
    border:0px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:#20264A;
    box-shadow:0 18px 48px rgba(0,0,0,.34);
    color:var(--white);
    text-align:left;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(8px,-50%);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-tooltip::before{
    content:"";
    position:absolute;
    left:-7px;
    top:50%;
    width:12px;
    height:12px;
    border-left:0px solid rgba(255,255,255,.12);
    border-bottom:0px solid rgba(255,255,255,.12);
    background:#20264A;
    transform:translateY(-50%) rotate(45deg);
}
.nav-ico:hover .nav-tooltip,
.nav-ico:focus-visible .nav-tooltip{
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%);
}
.nav-tooltip strong{
    display:block;
    color:var(--text-soft);
    font-size:18px;
    font-weight:500;
    line-height:1.25;
}
.nav-tooltip p{
    margin:8px 0 14px;
    color:var(--text-muted);
    font-size:14px;
    font-weight:400;
    line-height:1.45;
    word-break:keep-all;
}
.nav-tooltip > img{
    display:block;
    width:100%;
    height:autol;
    object-fit:contain;
    padding:0px;
    border-radius:8px;
    background:#171D3A;
    opacity:1;
}
.main{
    width:calc(var(--app-width) - var(--nav-width) - var(--preview-panel-width));
    min-height:100vh;
    margin-left:calc(var(--nav-width) + var(--preview-panel-width));
    padding:0 46px 0 var(--content-pad-x);
    background:var(--panel-bg);
    overflow:visible;
}
body.library-open .app{
    transform:none;
}
body.library-open .nav,
body.library-open .main,
body.library-open .preview,
body.library-open .workspace-logo{
    transform:translateX(calc(var(--library-panel-width, min(360px,calc(100vw - 24px))) * -1));
    transition:transform .28s ease;
}
body.is-index-ready .nav,
body.is-index-ready .preview,
body.is-youtube-main .preview{
    display:none;
}
body.is-index-ready .step-bubble,
body.is-index-ready .step-backdrop{
    display:none;
}
body.is-index-ready .main{
    width:100%;
    margin-left:0;
    height:100vh;
    min-height:0;
    overflow:hidden;
}
body.is-youtube-main .main{
    width:calc(var(--app-width) - var(--nav-width));
    margin-left:var(--nav-width);
    background-color:#171C39;
    background-image:url('../image/bg/yt.jpeg');
    background-repeat:no-repeat;
    background-position:left top;
    background-size:max(100%, 1698px) auto;
    background-attachment:fixed;
}
body.is-index-ready .app,
body.is-index-ready .workspace{
    height:100vh;
    min-height:0;
    overflow:hidden;
}
body.is-index-ready .app{
    line-height:normal;
}
body > .app,
body > .common-modal,
body > .ai-chat-modal,
body > .library-panel,
body > .voice-custom-modal{
    line-height:normal;
}
.step{
    position:relative;
    outline:0;
    z-index:1;
    padding: 20px 10px 20px 10px;
}
.step > img{
    position:relative;
    z-index:32;
    display:block;
    opacity:.4;
    transition:opacity .2s ease;
}
.step.is-active > img,
.step:hover > img,
.step:focus-visible > img{
    opacity:1;
}
.step:hover,
.step:focus-visible{
    z-index:40;
}
.step-backdrop{
    position:fixed;
    inset:0;
    display:none;
    background:rgba(0,0,0,.5);
    pointer-events:none;
    z-index:20;
}
.step-bubble{
    position:absolute;
    top:80px;
    left:50%;
    width:380px;
    min-height:150px;
    border-radius:25px;
    padding:25px;
    color:var(--text);
    background:var(--primary);
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index:33;
}
.step:nth-child(1) .step-bubble{background:#4D7CFE;}
.step:nth-child(2) .step-bubble{background:#9F66FF;}
.step:nth-child(3) .step-bubble{background:#F75165;}
.step:nth-child(4) .step-bubble{background:#74C739;}
.step-bubble:before{
    content:"";
    position:absolute;
    left:50%;
    top:-5px;
    width:28px;
    height:28px;
    background:inherit;
    transform:translateX(-50%) rotate(45deg);
    border-radius:2px;
}
.step-bubble p{
    margin:0 0 10px;
    font-size:14px;
    line-height:1.28;
    color:rgba(255,255,255,.62);
    font-weight:400;
    word-break: keep-all
}
.step-bubble strong{
    display:block;
    margin-bottom:0px;
    font-size:22px;
    line-height:1.28;
    font-weight:500;
    word-break: keep-all
}
.step-bubble strong span {color:rgba(0,0,0,0.6);}
.step-video-slider{
    display:flex;
    gap:10px;
    width:calc(100% + 50px);
    margin-left:-25px;
    padding:0 25px;
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:25px;
    scroll-padding-right:25px;
    scroll-behavior:smooth;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
    user-select:none;
    touch-action:pan-x;
}
.step-video-slider.is-dragging{
    cursor:grabbing;
    scroll-snap-type:none;
    scroll-behavior:auto;
}
.step-video-slider::-webkit-scrollbar{
    display:none;
}
.step-video-slider video{
    flex:0 0 124px;
    width:124px;
    min-width:124px;
    height:220px;
    aspect-ratio:9 / 16;
    display:block;
    border-radius:14px;
    background:#11142D;
    object-fit:cover;
    scroll-snap-align:start;
}
.step-bubble button{
    width:auto;
    height:55px;
    border-radius:55px;
    background:var(--white);
    color:var(--primary);
    font-size:18px;
    font-weight:500;
    padding-left: 40px; padding-right: 40px;
}
.step:nth-child(2) .step-bubble button{color:#9F66FF;}
.step:nth-child(3) .step-bubble button{color:#F75165;}
.step:nth-child(4) .step-bubble button{color:#74C739;}
.step:hover .step-backdrop,
.step:hover .step-bubble,
.step:focus-visible .step-backdrop,
.step:focus-visible .step-bubble{
    display:block;
}
.step:hover .step-bubble,
.step:focus-visible .step-bubble{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}
.step.is-hover-suppressed .step-backdrop,
.step.is-hover-suppressed .step-bubble{
    display:none;
    opacity:0;
    visibility:hidden;
}
.workspace{
    display:block;
    align-items:start;
    overflow:visible;
    transition:grid-template-columns .25s ease;
}
body.is-index-ready .workspace{
    display:block;
}
body.is-index-ready .voice-area{
    height:100vh;
    min-height:0;
    padding:35px 18px 0 0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
body.is-index-ready .ready-page{
    flex:1;
    min-height:0;
}
body.is-youtube-main .workspace{
    display:block;
}
body.is-youtube-main .voice-area{
    padding-bottom:46px;
}

.voice-area{
    overflow:visible;
    height:auto;
    padding:45px 18px 46px 0;
}

.project-step-stack{
    width:100%;
    padding-top:74px;
    position:relative;
    --step-slide-distance:calc(100% + var(--content-pad-x));
    --step-slide-exit-distance:calc(100% + (var(--content-pad-x) * 2));
    --step-slide-duration:.42s;
}
.project-step{
    display:none;
    width:100%;
    min-height:calc(100vh - 48px);
    padding-bottom:100px;
    box-sizing:border-box;
    visibility:hidden;
    pointer-events:none;
}
.project-step.is-visible{
    display:block;
    visibility:visible;
    pointer-events:auto;
}
.project-step.is-leaving{
    position:absolute;
    left:0;
    top:74px;
    z-index:1;
}
.project-step.is-entering{
    position:relative;
    z-index:2;
}
.workspace-logo.youtube-workspace-logo{
    position:static;
    top:auto;
    left:auto;
    padding:0;
    margin:0 0 48px;
    transform:none;
}
body.library-open .workspace-logo.youtube-workspace-logo{
    transform:none;
}
.youtube-project-step-stack{
    padding-top:0;
}
.youtube-project-step-stack .project-step.is-leaving{
    top:0;
}
.project-step.is-entering-forward{
    animation:stepEnterForward var(--step-slide-duration) cubic-bezier(.16,1,.3,1);
    animation-fill-mode:both;
}
.project-step.is-leaving-forward{
    animation:stepLeaveForward var(--step-slide-duration) cubic-bezier(.16,1,.3,1);
    animation-fill-mode:both;
}
.project-step.is-entering-back{
    animation:stepEnterBack var(--step-slide-duration) cubic-bezier(.16,1,.3,1);
    animation-fill-mode:both;
}
.project-step.is-leaving-back{
    animation:stepLeaveBack var(--step-slide-duration) cubic-bezier(.16,1,.3,1);
    animation-fill-mode:both;
}

.project-step .step-ready-page{
    min-height:calc(100vh - 244px);
}
@keyframes stepEnterForward{
    from{transform:translateX(var(--step-slide-distance))}
    to{transform:translateX(0)}
}
@keyframes stepLeaveForward{
    from{transform:translateX(0)}
    to{transform:translateX(calc(var(--step-slide-exit-distance) * -1))}
}
@keyframes stepEnterBack{
    from{transform:translateX(calc(var(--step-slide-distance) * -1))}
    to{transform:translateX(0)}
}
@keyframes stepLeaveBack{
    from{transform:translateX(0)}
    to{transform:translateX(var(--step-slide-exit-distance))}
}

.ready-page,
.youtube-main-page{
    min-height:520px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.ready-page p{
    margin:0;
    color:var(--text-soft);
    font-size:22px;
    font-weight:500;
    display: block;
    margin-bottom: 25px;
}
.youtube-main-page{
    text-align:left;
    max-width:none;
    width:100%;
    min-height:auto;
    align-items:flex-start;
    justify-content:flex-start;
    padding-top:0px;
}
.youtube-main-head{
    display:flex;
    align-items:center;
    gap:44px;
}
.youtube-main-hero{
    max-width:760px;
}
.youtube-main-kicker{
    margin:16px 0 0px;
    color:var(--text-soft);
    font-size:16px;
    line-height:1.4;
    font-weight:400;
}
.youtube-main-title{
    max-width:100%;
    margin:0;
    color:var(--text);
    font-size:22px;
    line-height:1.28;
    font-weight:500;
    letter-spacing:0;
    word-break: keep-all;
}
.youtube-main-page .project-start{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:260px;
    height:64px;
    margin-top:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(135deg, #6D8DFF 0%, #4F7CFF 48%, #7A5CFF 100%);
    box-shadow:0 18px 34px rgba(79,124,255,.35), inset 0 1px 0 rgba(255,255,255,.28);
    font-size:19px;
    font-weight:500;
    letter-spacing:0;
    isolation:isolate;
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
    border-radius: 70px;
}
@media(max-width:980px){
    .youtube-main-head{
        display:block;
    }
    .youtube-main-page .project-start{
        margin-top:28px;
    }
}
.project-start-icon{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}
.project-start-icon svg{
    width:24px;
    height:24px;
    display:block;
}
.youtube-main-page .project-start::after{
    content:"";
    position:absolute;
    inset:-55% auto -55% -70%;
    width:62%;
    transform:skewX(-16deg);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(255,255,255,.08), transparent);
    filter:blur(6px);
    opacity:.45;
    transition:left .72s ease;
    z-index:-1;
}
.youtube-main-page .project-start:hover,
.youtube-main-page .project-start:focus-visible{
    transform:translateY(-4px);
    filter:saturate(1.08);
    box-shadow:0 24px 42px rgba(79,124,255,.42), inset 0 1px 0 rgba(255,255,255,.34);
}
.youtube-main-page .project-start:hover::after,
.youtube-main-page .project-start:focus-visible::after{
    left:112%;
}
.youtube-video-area{
    width:100%;
    margin-top:58px;
}
.youtube-video-grid{
    --youtube-masonry-gap:26px;
    --youtube-masonry-min-column:230px;
    --youtube-masonry-single-column:0;
    width:100%;
    column-width:var(--youtube-masonry-min-column);
    column-gap:var(--youtube-masonry-gap);
    min-height:0;
}
.youtube-video-slot{
    position:relative !important;
    display:block;
    width:100%;
    margin:0 0 var(--youtube-masonry-gap);
    aspect-ratio:9 / 16;
    min-height:auto;
    border-radius:15px;
    background:var(--side-bg);
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
}
.youtube-video-slot.ratio-wide{
    aspect-ratio:16 / 9;
}
.youtube-video-slot.ratio-vertical{
    aspect-ratio:9 / 16;
}
.project-id{
    display:none;
    align-items:center;
    justify-content:center;
    min-height:34px;
    margin:0 0 48px;
    padding:0 24px;
    border-radius:18px;
    background:#30365f;
    color:var(--text);
    font-size:13px;
    font-weight:400;
}

.workspace-logo{
    position:fixed;
    top:40px;
    left:calc(var(--nav-width) + var(--content-pad-x));
    z-index:24;
    width:max-content;
    padding:8px 16px 8px 0;
    background:transparent;
    margin:0;
    transition:transform .32s cubic-bezier(.16,1,.3,1), opacity .22s ease;
    will-change:transform,opacity;
}
.workspace-logo.project-workspace-logo{
    left:calc(var(--nav-width) + var(--preview-panel-width) + var(--content-pad-x));
}
body.is-index-ready .workspace-logo{
    left:var(--content-pad-x);
}
body.is-workspace-logo-hidden .workspace-logo{
    opacity:0;
    transform:translateY(calc(-100% - 48px));
    pointer-events:none;
}
.workspace-logo.project-workspace-logo.youtube-workspace-logo{
    position:static;
    top:auto;
    left:auto;
    padding:0;
    margin:0 0 48px;
    transform:none;
}
body.library-open .workspace-logo.project-workspace-logo.youtube-workspace-logo{
    transform:none;
}

.section-title{
    font-size:var(--fs-title);
    font-weight:500;
    color:var(--text-muted);
    margin:0 0 15px;
}
.desc{
    margin:0 0 32px;
    font-size:16px;
    line-height:1.45;
    color:var(--text-muted);
    font-weight:400;
}
.setup-section{
    margin-bottom:48px;
}
.setup-options{
    display:flex;
    align-items:stretch;
    gap:18px;
}
.setup-card{
    width:198px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius:28px;
    background:var(--card-bg);
    box-shadow:var(--shadow-card);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:13px;
    color:#fff;
    text-align:center;
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.setup-card:hover:not(.active){
    transform:translateY(-2px);
    box-shadow:inset 0 0 0 4px var(--card-active-border),0 16px 30px rgba(9,12,30,.3);
}
.setup-card.active{
    background:var(--card-active);
    box-shadow:inset 0 0 0 4px rgba(39,48,92,.38);
}
.setup-card strong{
    font-size:18px;
    font-weight:500;
    line-height:1;
}
.setup-card span{
    color:#aab1d1;
    font-size:13px;
    line-height:1.4;
    font-weight:400;
}
.setup-card.active span{
    color:#dce5ff;
}
.subtitle-page{
    width:100%;
}
.subtitle-section{
    margin-bottom:52px;
}
.subtitle-preset-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill,var(--voice-card-w));
    gap:14px 16px;
    align-items:start;
}
.subtitle-preset-card{
    width:var(--voice-card-w);
    min-width:var(--voice-card-w);
    min-height:146px;
    padding:22px 12px;
    gap:20px;
}
.subtitle-preset-card strong{
    font-family:var(--font-family);
    font-size:16px;
    font-weight:400;
    line-height:1;
    color:var(--text-soft);
}
.subtitle-preset-card .subtitle-preset-sample{
    width:auto;
    max-width:100%;
    min-height:34px;
    padding:var(--subtitle-padding);
    border-radius:var(--subtitle-radius);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--subtitle-background);
    color:var(--subtitle-color);
    font-family:var(--subtitle-font-family),sans-serif;
    font-size:18px;
    font-weight:var(--subtitle-font-weight);
    line-height:1;
    text-shadow:var(--subtitle-shadow);
    -webkit-text-stroke:var(--subtitle-stroke,0 transparent);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:geometricPrecision;
    white-space:nowrap;
}
.subtitle-preset-card[data-subtitle-preset="sentimental"] .subtitle-preset-sample,
.subtitle-preset-card[data-subtitle-preset="documentary"] .subtitle-preset-sample,
.subtitle-preset-card[data-subtitle-preset="fairytale"] .subtitle-preset-sample,
.subtitle-preset-card[data-subtitle-preset="travel"] .subtitle-preset-sample{
    font-size:22px;
}
.subtitle-preset-card.active .subtitle-preset-sample{
    color:var(--subtitle-color);
}
.subtitle-actions{
    margin-top:0;
}
.subtitle-controls{
    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:22px 28px;
}
.subtitle-control-row{
    display:contents;
}
.subtitle-control{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.subtitle-control[hidden]{
    display:none;
}
.subtitle-control-label{
    color:var(--text-muted);
    font-size:16px;
    font-weight:500;
}
.subtitle-range-control{
    width:auto;
}
.subtitle-range-control .duration-value{
    width:58px;
    flex:0 0 58px;
}
.setup-card .setup-credit-note{
    display:block;
    margin-top:2px;
    color:var(--text-muted);
    font-size:13px;
    line-height:1.35;
    font-style:normal;
    font-weight:500;
}
.setup-card.active .setup-credit-note{
    color:rgba(255,255,255,.82);
}
.setup-card.compact{
    min-height:136px;
}
.transition-options{
    gap:12px;
}
.transition-options .setup-card{
    width:148px;
    min-height:64px;
    border-radius:22px;
}
.transition-options .setup-card strong{
    font-size:18px;
    font-weight:500;
}

.setup-icon-wide{
}
.setup-icon-vertical{
}
.duration-control{
    width:auto;
    padding-top:2px;
    display:flex;
    align-items:center;
    gap:16px;
}
.duration-control input{
    width:185px;
    flex:0 0 185px;
    height:24px;
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    border-radius:999px;
    cursor:pointer;
}
.duration-control input::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:linear-gradient(to right,var(--primary) 0%,var(--primary) var(--range-progress, 14.285%),var(--range-bg) var(--range-progress, 14.285%),var(--range-bg) 100%);
}
.duration-control input::-webkit-slider-thumb{
    width:34px;
    height:20px;
    margin-top:-7px;
    border:0;
    border-radius:20px;
    background:var(--primary);
    -webkit-appearance:none;
    box-shadow:none;
    transition:transform .2s ease;
}
.duration-control input:hover::-webkit-slider-thumb,
.duration-control input:focus-visible::-webkit-slider-thumb{
    transform:scale(1.1);
}
.duration-control input::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:var(--range-bg);
}
.duration-control input::-moz-range-progress{
    height:6px;
    border-radius:999px;
    background:var(--primary);
}
.duration-control input::-moz-range-thumb{
    width:34px;
    height:20px;
    border:0;
    border-radius:20px;
    background:var(--primary);
    box-shadow:none;
    transition:transform .2s ease;
}
.duration-control input:hover::-moz-range-thumb,
.duration-control input:focus-visible::-moz-range-thumb{
    transform:scale(1.1);
}
.duration-value{
    width:150px;
    flex:0 0 150px;
    color:var(--text);
    font-size:16px;
    font-weight:500;
    white-space:nowrap;
}
.duration-minutes{
    color:var(--text-muted);
    margin-left:5px;
}
.topic-section{
    margin-bottom:26px;
}
.topic-search{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:17px;
}
.topic-video-duration-hint{
    margin:-7px 0 17px;
    color:var(--text-muted);
    font-size:14px;
    line-height: 1.5
}
.topic-video-duration-hint[hidden]{
    display:none;
}
.topic-input,
.topic-guide{
    
    height:60px;
    border-radius:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0;
    color:var(--text-muted);
    background:transparent;
    position:relative;
    max-width: 1024px;
}
.topic-guide{
    padding-left:50px;
}
.topic-guide-icon{
    position:absolute;
    left:13px;
    top:50%;
    width:24px;
    height:25px;
    transform:translateY(-50%);
    pointer-events:none;
}
.topic-input{
    width:462px;
}
.topic-input input,
.topic-guide input{
    width:100%;
    max-width: 1024px;
    height:100%;
    min-width:0;
    border:0px solid rgba(255,255,255,.34);
    border-radius:20px;
    outline:0;
    background: #202342;
    color:var(--text);
    font-family:var(--font-family);
    font-size:16px;
    font-weight:500;
    padding:0 54px 0 20px;
    transition:border-color .2s ease;
}

.topic-guide input{
    border:0px solid rgba(255,255,255,.34);
    background: #202342;
}

.topic-guide {height:60px;}
.topic-guide[hidden],
.topic-ai[hidden],
.topic-panel[hidden],
.script-generate[hidden],
.topic-input input[hidden]{
    display:none;
}

.topic-input input{
    color:var(--text);
    font-size:18px;
    font-weight:500;
}
.topic-guide input{
    color:#aab1d1;
    font-size:18px;
    font-weight:400;
}
.topic-input input::placeholder,
.topic-guide input::placeholder{
    color:var(--text-muted);
}
.topic-input input:focus,
.topic-guide input:focus{
    border-color:var(--primary);
}
.topic-file-select{
    width:100%;
    height:100%;
    overflow:hidden;
    border:0;
    border-radius:20px;
    padding:0 54px 0 20px;
    background:#202342;
    color:var(--text-muted);
    font-family:var(--font-family);
    font-size:18px;
    font-weight:500;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.topic-file-select.has-file{
    color:var(--text);
}
.topic-file-select[hidden]{
    display:none;
}
.topic-help{
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    box-shadow:inset 0 0 0 2px currentColor;
    color:var(--text);
    font-size:14px;
    line-height:1;
}
.topic-ai{
    width:220px;
    height:58px;
    border-radius:29px;
}
.topic-ai-prompt{
    margin-left:30px;
    color:var(--text-muted);
    font-size:14px;
    white-space:nowrap;
}
.topic-ai-prompt[hidden]{
    display:none;
}
.topic-guide{
    width:100%;
    font-size:14px;
}
.topic-panel{
    width:100%;
    border-radius:28px;
    background:var(--card-bg);
    padding:38px;
    margin-bottom:36px;
}
.topic-analysis-result{
    width:100%;
    max-width:80%;
    margin-bottom:28px;
}
.topic-analysis-result[hidden]{
    display:none;
}
.topic-analysis-card{
    width:100%;
    border-radius:18px;
    background:var(--card-bg);
    padding:28px 32px;
    box-sizing:border-box;
}
.topic-analysis-card strong{
    display:block;
    color:var(--text);
    font-size:20px;
    font-weight:400;
    line-height:1.35;
    margin:0 0 16px;
}
.topic-analysis-card p{
    margin:0;
    color:var(--text-soft);
    font-size:15px;
    font-weight:400;
    line-height:1.75;
    white-space:normal;
}
.topic-analysis-block{
    display:grid;
    gap:14px;
}
.topic-analysis-section-title{
    display:inline-flex;
    align-items:center;
    width:max-content;
    min-height:28px;
    border-radius:6px;
    padding:0 12px;
    background:rgba(255,255,255,.08);
    color:var(--text);
    font-size:13px;
    font-weight:400;
    line-height:1;
}
.topic-analysis-markdown{
    display:grid;
    gap:12px;
}
.topic-analysis-markdown h3{
    display:inline-flex;
    align-items:center;
    width:max-content;
    min-height:28px;
    margin:10px 0 0;
    border-radius:6px;
    padding:0 12px;
    background:rgba(255,255,255,.08);
    color:var(--text);
    font-size:14px;
    font-weight:500;
    line-height:1;
}
.topic-analysis-markdown h3:first-child{
    margin-top:0;
}
.topic-analysis-markdown ul{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:6px;
}
.topic-analysis-markdown li{
    position:relative;
    margin:0;
    padding-left:14px;
    color:var(--text-muted);
    font-size:16px;
    font-weight:400;
    line-height:1.4;
}
.topic-analysis-markdown li::before{
    content:"";
    position:absolute;
    left:0;
    top:.52em;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--primary);
}
.topic-analysis-badge{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    border-radius:6px;
    padding:2px 9px;
    margin:0 3px 2px 0;
    background:rgba(77,124,254,.18);
    color:#cfd8ff;
    font-size:12px;
    font-weight:400;
    vertical-align:middle;
    line-height: 100%;
}
.topic-analysis-guide-box{
    margin-top:22px;
    border-radius:10px;
    background:rgba(255,255,255,.045);
    padding:20px 20px;
}
.topic-analysis-guide-box .topic-analysis-section-title{
    margin-bottom:12px;
}
.topic-analysis-guide-box p{
    margin:0;
    color:var(--text-muted);
    font-size:14px;
    font-weight:400;
    line-height:1.65;
}
.topic-analysis-card em{
    display:block;
    margin-top:18px;
    color:var(--text-muted);
    font-size:14px;
    font-style:normal;
    font-weight:400;
    line-height:1.65;
}
.topic-panel-desc,
.topic-hint{
    margin:0;
    color:var(--text-muted);
    font-size:14px;
    line-height:1.45;
}
.topic-video-analysis-hint{
    margin:0px 0 0;
    color:var(--text-soft);
    font-size:15px;
    line-height:1.45;
}
.topic-option-group{
    margin-top:28px;
}
.topic-option-title{
    margin:0 0 14px;
    color:var(--text-muted);
    font-size:16px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:10px;
}
.topic-option-title img{
    width:18px;
    height:18px;
    display:block;
    flex:0 0 18px;
}
.topic-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.topic-chip{
    height:38px;
    padding:0 22px;
    border-radius:19px;
    background:#202342;
    color:var(--text);
    font-size:16px;
    font-weight:400;
    transition:background .2s ease, transform .2s ease;
}
.topic-chip:hover{
    transform:translateY(-1px);
}
.topic-chip.active{
    background:var(--primary);
}
.topic-hint{
    margin-top:16px;
}
.script-section{
    width:100%;
    max-width: 80%;
    margin-bottom:28px;
    min-height:0;
}
.gradient-border-flow{
    background:linear-gradient(var(--panel-bg),var(--panel-bg)) padding-box,linear-gradient(90deg,#4D7CFE 0%,#F75165 25%,#4D7CFE 50%,#F75165 75%,#4D7CFE 100%) border-box;
    background-size:100% 100%, 200% 100%;
    border:4px solid transparent;
    animation:flowing-border 4s linear infinite;
}
.script-card{
    border-radius:28px;
    padding:28px 38px;
}
.script-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}
.script-head h2{
    min-width:0;
    flex:1 1 auto;
    margin:0;
    color:var(--text);
    font-size:22px;
    font-weight:500;
    line-height: 1.4;
}
.script-badges{
    display:flex;
    flex:0 0 auto;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
}
.script-badges span{
    flex:0 0 auto;
    min-width:74px;
    height:34px;
    border-radius:18px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#343b68;
    color:var(--text);
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
}
.script-line{
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 70px;
    align-items:start;
    gap:20px;
    padding:14px 0;
    border-top:1px solid var(--line);
    align-items: center;
}

.script-line p{
    margin:0;
    color:var(--text-soft);
    font-size:16px;
    line-height:1.45;
    font-weight:300;
    font-style:italic;
    word-break: keep-all;
    outline:0;
    cursor:text;
    border-radius:8px;
    transition:background .18s ease;
}
.script-line p:focus{
    background:#202342;
    padding: 10px;
}
.script-line p[data-placeholder]:empty::before{
    content:attr(data-placeholder);
    color:var(--text-muted);
    pointer-events:none;
}
.script-cut-badge{
    min-width:28px;
    height:28px;
    padding:0 4px;
    align-self:center;
    border-radius:28px;
    background:var(--primary);
    color:var(--white);
    font-size:12px;
    font-weight:500;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
}

.script-line-time{
    color:var(--text-muted);
    font-size:13px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 18px;
    align-self:center;
    align-items:center;
    justify-self:end;
    column-gap:10px;
    text-align:right;
    width:100%;
    line-height:1;
}
.script-line-time span{
    min-width:0;
    display:block;
    text-align:right;
    white-space:nowrap;
}
.script-line-time img{
    width:18px;
    height:18px;
    display:block;
    justify-self:end;
}
.topic-actions{
    width:100%;
    display:flex;
    align-items:center;
    gap:40px;
}
.script-loading{
    min-height:248px;
    border-radius:28px;
    padding:4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:var(--text-muted);
    font-size:20px;
    font-weight:500;
}
.script-loading p{
    margin:0;
}
.script-loading-dots{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.script-loading-dots i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#4D7CFE;
    animation:loadingDotFlow 1.2s linear infinite;
}
.script-loading-dots i:nth-child(2){
    background:#9F66FF;
    animation-delay:-.8s;
}
.script-loading-dots i:nth-child(3){
    background:#FF759F;
    animation-delay:-.4s;
}
.filters{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:24px;
}
.pill{
    height:45px;
    padding:0 26px;
    flex:0 0 auto;
    border-radius:12px;
    background:#323961;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:400;
    color:#fff;
    white-space:nowrap;
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pill:hover{
    transform:translateY(-1px);
}
.pill.active{
    background:#4f7cff;
}
.image-page{
    width:100%;
}
.image-section{
    width:100%;
    margin-bottom:42px;
}
.image-preset-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill, var(--voice-card-w));
    gap:32px var(--voice-gap);
    align-items:start;
}
.image-preset-entry{
    width:var(--voice-card-w);
    min-width:var(--voice-card-w);
    display:flex;
    flex-direction:column;
    align-items:center;
}
.image-preset-entry[hidden]{
    display:none;
}
.image-preset-card{
    width:var(--voice-card-w);
    min-width:var(--voice-card-w);
    aspect-ratio:1;
    padding:0;
    border:4px solid transparent;
    border-radius:24px;
    background:#202342;
    color:var(--text);
    display:block;
    overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.image-preset-card[hidden]{
    display:none;
}
.image-preset-thumb{
    display:block;
    position:relative;
    width:100%;
    height:100%;
    aspect-ratio:1 / 1;
    border-radius:20px;
    overflow:hidden;
    background:var(--card-bg);
    border:0;
    line-height:0;
}
.image-preset-thumb > img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.news-image-page.is-vertical-presets .image-preset-card,
.news-image-page.is-vertical-presets .image-preset-thumb{
    aspect-ratio:2 / 3;
}

.news-image-page.is-vertical-presets .image-preset-thumb > img{
    object-position:center center;
}
.image-preset-card:hover:not(.active){
    border-color:var(--primary);
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(79,124,255,.2);
}
.image-preset-card.active{
    background:var(--primary);
    border-color:var(--primary);
}
.image-preset-name{
    display:block;
    width:100%;
    margin-top:10px;
    color:var(--text);
    font-size:16px;
    font-weight:400;
    line-height:1;
    text-align:center;
    word-break:keep-all;
    transition:color .2s ease;
}
.image-preset-card.active + .image-preset-name{
    color:var(--primary);
}
.image-preset-overlay,
.image-result-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    background:rgba(0,0,0,.42);
    opacity:0;
    transition:opacity .2s ease;
}
.image-preset-thumb > .image-preset-overlay{
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    transform:none;
}
.image-preset-overlay span{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
}
.image-preset-overlay img,
.image-result-overlay img{
    width:30px;
    height:30px;
    display:block;
}
.image-preset-card:hover .image-preset-overlay,
.image-result-item:hover .image-result-overlay{
    opacity:1;
}
.image-section-head{
    width:min(100%, 590px);
    display:flex;
    align-items:center;
    gap:18px;
}
.image-section-head > div{
    flex:1 1 auto;
}
.image-toggle{
    flex:0 0 auto;
    padding-bottom:0;
}
.character-keep-box{
    width:min(100%, 590px);
    min-height:150px;
    border:4px solid rgba(255,255,255,.26);
    border-radius:28px;
    padding:22px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 96px;
    gap:24px;
    align-items:center;
    background:rgba(15,18,39,.26);
    transition:border-color .2s ease;
}
.character-keep-box[hidden]{
    display:none;
}
.character-keep-box:focus-within{
    border-color:var(--primary);
}
.character-keep-box textarea{
    width:100%;
    min-height:86px;
    resize:vertical;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:16px;
    line-height:1.45;
    font-weight:400;
}
.character-keep-box textarea::placeholder {color: var(--text-muted);}
.character-dropzone{
    width:96px;
    aspect-ratio:1;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--card-bg);
}
.character-dropzone.is-loading{
    pointer-events:none;
}
.character-preview-button{
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    overflow:hidden;
    background:transparent;
    cursor:pointer;
}
.character-preview-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.character-preview-button .image-result-overlay{
    width:100%;
    height:100%;
    border-radius:0;
}
.character-preview-button .image-result-overlay img{
    width:30px;
    height:30px;
}
.character-preview-button:hover .image-result-overlay{
    opacity:1;
}
.image-result-section{
    width:min(100%, 760px);
    border-radius:28px;
    padding:24px 28px;
    margin:18px 0 28px;
}
.image-result-list{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:14px;
}
.image-result-entry{
    width:88px;
    flex:0 0 88px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
}
.image-result-item{
    width:88px;
    flex:0 0 88px;
    aspect-ratio:1;
    padding:0;
    border:0;
    border-radius:16px;
    background:#343b68;
    overflow:hidden;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:0;
}
.image-result-regenerate{
    width:100%;
    height:32px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:0;
    cursor:pointer;
    transition:transform .2s ease, opacity .2s ease;
    opacity: 0.4;
}
.image-result-regenerate:hover{
    transform:translateY(2px);
    opacity: 1;
}
.image-result-regenerate svg{
    width:20px;
    height:20px;
    display:block;
}
.image-result-item.is-failed{
    flex-direction:column;
    gap:0;
    color:#FF759F;
    font-size:12px;
    line-height:1.35;
    padding:12px;
    text-align:center;
    cursor:default;
}
.image-result-item.is-empty{
    flex-direction:column;
    gap:0;
    color:#9198b6;
    font-size:12px;
    line-height:1.35;
    padding:12px;
    text-align:center;
    cursor:default;
}
.image-result-item.is-failed > img{
    width:34px;
    height:34px;
    object-fit:contain;
    flex:0 0 auto;
}
.image-retry-text{
    display:block;
    margin-top:5px;
    color:#FF759F;
    font-size:12px;
    line-height:1;
    font-weight:500;
}
.image-result-item.is-empty .image-retry-text{
    color:#9198b6;
}
.image-result-item > img,
.image-result-item > video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.image-cut-badge{
    position:absolute;
    left:8px;
    top:8px;
    z-index:2;
    min-width:24px;
    height:24px;
    padding:0 4px;
    border-radius:12px;
    background:var(--primary);
    color:var(--white);
    font-size:12px;
    font-weight:500;
    line-height:24px;
    text-align:center;
    white-space:nowrap;
}
.image-result-item .image-result-overlay{
    width:100%;
    height:100%;
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.image-result-item .image-result-overlay img{
    width:30px;
    height:30px;
}
.image-result-item.is-loading{
    background:#343b68;
}
.image-actions{
    margin-top:0;
}
.category{
    margin-left:22px;
    display:flex;
    gap:8px;
    align-items:center;
    color:#9198b6;
    font-size:16px;
    font-weight:400;
}
.category:not(.is-visible){display:none}
.category-option{
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    transition:color .2s ease;
    cursor:pointer;
}
.category-option:hover,
.category-option.active{
    color:#fff;
    font-weight:500;
}
.voice-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, 150px);
    gap:14px 16px;
    margin-bottom: 20px
}
.voice-group-title{
    grid-column:1/-1;
    margin:24px 0 2px;
    color:var(--text-muted);
    font-size:18px;
    font-weight:400;
    line-height:1.3;
}
.voice-group-title:first-child{
    margin-top:0;
}
.voice-card-slot{
    position:relative;
    width:var(--voice-card-w);
    min-width:var(--voice-card-w);
    display:flex;
    flex-direction:column;
    padding-bottom:0;
    transition:padding-bottom .18s cubic-bezier(.2,.8,.2,1);
}
.voice-card-slot[hidden]{
    display:none;
}
.voice-card-slot.is-action-open{
    padding-bottom:60px;
}
.voice-card-slot.is-action-closing{
    padding-bottom:60px;
    transition:none;
}
.voice-card-slot .voice-card{
    position:relative;
    z-index:2;
}
.voice-card-generate{
    position:absolute;
    z-index:1;
    left:0;
    top:calc(100% - 50px);
    width:100%;
    height:50px;
    min-height:50px;
    margin:0;
    padding:0 8px;
    border:0;
    border-radius:var(--radius-lg);
    background:linear-gradient(135deg,#4D7CFE 0%,#F75165 100%);
    color:var(--white);
    font-size:15px;
    font-weight:500;
    opacity:0;
    overflow:hidden;
    transform:translate3d(0,0,0);
    pointer-events:none;
    transition:opacity .14s ease, transform .2s ease;
}
.voice-card-slot.is-action-open .voice-card-generate{
    opacity:1;
    pointer-events:auto;
}
.voice-card-slot.is-action-closing .voice-card-generate{
    opacity:0;
    transform:translate3d(0,0,0);
    transition:opacity .3s ease;
}
.voice-card-slot.is-action-open .voice-card-generate:hover{
    transform:translate3d(0,2px,0);
}
.voice-card-slot.is-action-open .voice-card-generate.is-loading:hover{
    transform:translate3d(0,0,0);
}
.voice-card-generate.is-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.voice-card-generate .generate-spinner{
    width:20px;
    height:20px;
}
.voice-grid.is-empty::after{
    content:"조건에 맞는 보이스가 없어요.";
    grid-column:1/-1;
    padding:40px 0;
    color:var(--muted);
    font-size:16px;
}
.voice-card[hidden]{display:none}
.voice-card{
    width:100%;
    max-width:var(--voice-card-w);
    height:var(--voice-card-h);
    border-radius:var(--radius-lg);
    background:var(--card-bg);
    box-shadow:var(--shadow-card);
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:12px 0px 17px;
    border:0;
    cursor:pointer;
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.voice-card:hover:not(.active):not(.menu-open){
    transform:translateY(-2px);
    box-shadow:inset 0 0 0 4px var(--card-active-border),0 16px 30px rgba(9,12,30,.3);
}
.voice-card.menu-open{
    box-shadow:var(--shadow-card);
}
.voice-card.active{
    background:var(--card-active);
    box-shadow:inset 0 0 0 4px rgba(39,48,92,.38);
}
.badge-cube{
    position:absolute;
    left:-5px;
    top:-5px;
}
.badge-star{
    position:absolute;
    left:-5px;
    top:-5px;
    z-index:4;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}
.badge-star img{
    width:100%;
    height:100%;
    display:block;
}
.dots{
    width:40px;
    height:40px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    position:relative;
    z-index:2;
}
.avatar{
    width:66px;
    height:66px;
    border-radius:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin-bottom:13px;
}
.avatar img {width: 100%; height:100%; object-fit: cover;}
.avatar-empty{
    background:rgba(255,255,255,.05);
    border:1px dashed rgba(255,255,255,.12);
}
.name{
    font-size:16px;
    font-weight:400;
    line-height:1.4;
}
.sub{
    margin-top:6px;
    color:#aab1d1;
    font-size:11px;
    font-weight:500;
}
.voice-card.active .sub{color:#cdd8ff}
.play-small{
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top: 15px;
    cursor:pointer;
}
.play-small:hover {opacity: 0.6}

.play-small.is-loading{cursor:wait}
.voice-play-spinner{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.25);
    border-top-color:#fff;
    border-radius:50%;
    animation:loadingSpinnerCycle 1.15s linear infinite;
}
.voice-menu{
    position:absolute;
    inset:0;
    z-index:6;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:inherit;
    background:#202342;
    color:#7b829d;
    font-size:15px;
    font-weight:400;
    line-height:1.7;
}
.voice-card.menu-open .voice-menu{
    display:flex;
}
.voice-menu-close{
    position:absolute;
    top:10px;
    left:50%;
    width:40px;
    height:40px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    transform:translateX(-50%);
}
.voice-menu-close img{
    width:40px;
    height:40px;
    display:block;
}
.voice-menu-list{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.voice-menu-item{
    color:#7b829d;
    background:transparent;
    font-size:15px;
    font-weight:400;
    line-height:1.7;
    opacity:.78;
    transition:color .2s ease, opacity .2s ease, transform .2s ease;
}
.voice-menu-item:hover{
    color:#fff;
    opacity:1;
    transform:translateY(-1px);
}

.voice-custom-modal{
    position:fixed;
    inset:0;
    z-index:1200;
    display:none;
    overflow-y:auto;
    scrollbar-width:none;
    padding:100px 24px;
}
.voice-custom-modal::-webkit-scrollbar{display:none}
.voice-custom-modal.is-open{
    display:flex;
    align-items:flex-start;
    justify-content:center;
}
.voice-custom-backdrop{
    position:fixed;
    inset:0;
    padding:0;
    background:rgba(0,0,0,.5);
}
.voice-custom-panel{
    position:relative;
    z-index:1;
    width:min(770px,calc(100vw - 48px));
    margin:auto 0;
    padding:30px 36px 38px;
    border-radius:24px;
    background:#202342;
    color:var(--text);
    box-shadow:var(--shadow-soft);
}
.voice-custom-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:28px}
.voice-custom-head h2{margin:0 0 8px;font-size:20px;font-weight:500;line-height:1.25}
.voice-custom-head p{margin:0;color:var(--text-muted);font-size:15px;line-height:1.45}
.voice-custom-close{width:40px;height:40px;padding:0;flex:0 0 40px;margin:-8px -13px 0 0;background:transparent}
.voice-custom-close img{width:40px;height:40px;display:block}
.voice-custom-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:42px;align-items:start}
.voice-custom-card .voice-card{max-width:150px;cursor:default}
.voice-custom-card .voice-card:hover,
.voice-custom-card .voice-card:hover:not(.active):not(.menu-open){
    transform:none;
    box-shadow:var(--shadow-card);
}
.voice-custom-card .dots{visibility:hidden}
.voice-custom-options{min-width:0}
.voice-custom-group{margin-bottom:24px}
.voice-custom-group h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--text-muted);font-size:16px;font-weight:500}
.voice-custom-group h3 img{width:20px;height:20px;display:block}
.voice-custom-speed-control{width:360px}
.voice-custom-speed-control input{
    --range-bg:var(--card-bg);
}
.voice-custom-chips{gap:8px}
.voice-custom-chips .topic-chip{height:42px;padding:0 18px;background:var(--card-bg);font-size:15px}
.voice-custom-chips .topic-chip.active{background:var(--primary)}
.voice-custom-actions{display:flex;align-items:center;gap:10px;margin-top:28px}
.voice-custom-actions button{width:168px;height:50px;display:flex;align-items:center;justify-content:center;gap:10px}
.voice-custom-actions button img{width:22px;height:22px}
.voice-custom-preview.is-loading .voice-play-spinner{
    border-color:rgba(77,124,254,.18);
    border-top-color:var(--primary);
}
.voice-custom-apply:disabled{opacity:.35;pointer-events:none}
.voice-card.is-custom .badge-cube{z-index:4;width:30px;height:30px}
.voice-card.is-custom .badge-cube img{width:100%;height:100%;display:block}

.bgm-section{
    margin-bottom:54px;
}
.bgm-grid{
    min-height:120px;
}
.bgm-list-state{
    grid-column:1/-1;
    margin:0;
    padding:38px 0;
    color:var(--text-muted);
    font-size:15px;
}
.bgm-card{
    min-height:220px;
    padding-bottom:18px;
}
.bgm-card .dots{
    margin-bottom:2px;
}
.bgm-card-wave.meta-voice-wave{
    width:86px;
    height:24px;
    flex:none;
    margin:12px 0 19px;
}
.bgm-card.active .bgm-card-wave i,
.bgm-card.active .bgm-card-wave i.is-played{
    background:#fff;
    opacity:1;
}
.bgm-card .sub{
    margin-top:10px;
}
.bgm-card .badge-cube{
    z-index:4;
    width:28px;
    height:28px;
}
.bgm-card .badge-cube img{
    width:100%;
    height:100%;
}
.bgm-create-section{
    margin-bottom:26px;
}
.bgm-builder{
    margin-bottom:0;
}
.bgm-player{
    max-width:100%;
}
.bgm-player .player-title{
    min-width:110px;
}
.bgm-actions{
    margin-top:0;
}
.bgm-player .wave{
    cursor:pointer;
}
.bgm-player .wave:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:4px;
}
.meta-bgm-controls{
    width:100%;
}
.meta-bgm-wave{
    cursor:pointer;
}
.meta-bgm-asset.is-loading{min-height:52px}

.finish-page{
    width:100%;
}
.finish-section{
    width:100%;
}
.finish-layout{
    display:grid;
    grid-template-columns:minmax(420px, 834px) 360px;
    gap:48px;
    align-items:start;
    justify-content:start;
    margin-top:34px;
}
.finish-left{
    min-width:0;
}
.finish-stage{
    position:relative;
    width:100%;
    max-width:834px;
    aspect-ratio:16 / 9;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#202342;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.finish-stage.ratio-vertical{
    max-width:834px;
    aspect-ratio:16 / 9;
}
.finish-start{
    width:168px;
    height:62px;
    border-radius:22px;
    background:var(--primary);
    color:#fff;
    font-size:20px;
    font-weight:400;
    transition:transform .2s ease, opacity .2s ease;
}
.finish-start:hover{
    transform:translateY(3px);
}
.finish-progress{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#fff;
}
.finish-progress[hidden]{
    display:none;
}
.finish-progress-bar{
    width:88px;
    height:12px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(79,124,255,.22);
}
.finish-progress-bar i{
    display:block;
    width:0%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(135deg, #4D7CFE 0%, #F75165 100%);
    transition:width .18s linear;
}
.finish-progress strong{
    font-size:20px;
    font-weight:600;
    line-height:1;
}
.finish-progress p{
    margin:0;
    color:var(--text-muted);
    font-size:16px;
    font-weight:500;
}
.finish-loading{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:var(--text-muted);
    font-size:15px;
    font-weight:500;
}
.finish-loading[hidden]{
    display:none;
}
.finish-loading p{
    margin:0;
    line-height:1.4;
}
.finish-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
}
.finish-downloads{
    width:100%;
    max-width:834px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    overflow:hidden;
    border-radius:0 0 15px 15px;
}
.finish-download{
    min-width:0;
    height:60px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#4D7CFE;
    color:#fff;
    font-size:clamp(14px, 1.1vw, 18px);
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    border-right:1px solid rgba(20,23,49,.55);
    transition:opacity .2s ease, transform .2s ease;
}
.finish-download:last-child{
    border-right:0;
    background:linear-gradient(135deg, #4D7CFE 0%, #F75165 100%);
}
.finish-download:disabled{
    opacity:.34;
    cursor:default;
}

.finish-download span{
    width:24px;
    height:24px;
    flex:0 0 24px;
    line-height:1;
}
.finish-download span svg{
    display:block;
}
.finish-info{
    padding-top:0;
}
.finish-info-group + .finish-info-group{
    margin-top:52px;
}
.finish-info h2{
    margin:0 0 24px;
    color:var(--text-muted);
    font-size:20px;
    font-weight:500;
}
.finish-fade-group p,
.finish-subtitle-group p{
    margin:-12px 0 18px;
    color:var(--text-muted);
    font-size:14px;
    line-height:1.55;
}
.finish-fade-options,
.finish-subtitle-options{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.script-editor-controls{
    justify-content:flex-end;
    margin-bottom:12px;
}
.finish-fade-options button,
.finish-subtitle-options button{
    min-width:74px;
    height:38px;
    padding:0 14px;
    border:0px solid rgba(255,255,255,.14);
    border-radius:19px;
    background:#202342;
    color:var(--text-muted);
    font-size:14px;
    font-weight:500;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.finish-subtitle-options button:disabled{
    cursor:default;
    opacity:.45;
}
.finish-fade-options button.is-active,
.finish-subtitle-options button.is-active{
    border-color:var(--primary);
    background:var(--primary);
    color:#fff;
}
.finish-info dl{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 34px;
    margin:0;
}
.finish-info dl div{
    display:flex;
    gap:5px;
    min-width:0;
    color:#fff;
    font-size:15px;
    font-weight:400;
    white-space:nowrap;
}
.finish-info dl div:has([data-render-info="gpu"]){
    grid-column:1 / -1;
}
.finish-info dt{
    color:#fff;
}
.finish-info dd{
    margin:0;
    color:var(--text-muted);
    overflow:hidden;
    text-overflow:ellipsis;
}
.finish-info [data-render-info="gpu"]{
    display:block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.finish-info dd.is-muted{
    color:var(--text-muted);
}
.finish-rerender{
    width:100%;
    max-width:230px;
    height:54px;
    margin-top:34px;
    border-radius:27px;
    background:#202342;
    color:#fff;
    font-size:16px;
    font-weight:500;
    transition:transform .2s ease, opacity .2s ease;
}
.finish-rerender:hover{
    transform:translateY(-3px);
}
.finish-actions{
    margin-top:40px;
}
.finish-reference{
    min-width:160px;
    height:60px;
    padding:0 30px;
    border-radius:70px;
    background:#202342;
    color:#fff;
    font-size:20px;
    font-weight:500;
    transition:transform .2s ease, opacity .2s ease;
}
.finish-actions .nav-buttons{
    flex-wrap:wrap;
}
.finish-actions .nav-buttons > button{
    white-space:nowrap;
}
.finish-new-project{
    width:auto;
    min-width:268px;
    padding:0 28px;
}
@media(max-width:960px){
    .finish-layout{
        grid-template-columns:1fr;
    }
    .finish-info{
        max-width:834px;
    }
}
.finish-reference:hover{
    transform:translateY(-3px);
}
.thumbnail-page,
.thumbnail-section{
    width:100%;
}
.thumbnail-editor{
    width:100%;
    max-width:834px;
    margin-top:34px;
}
.thumbnail-toolbar{
    position:relative;
    min-height:84px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 36px;
    border-radius:30px 30px 0 0;
    background:#30365f;
}
.thumbnail-tool,
.thumbnail-file{
    position:relative;
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:transparent;
    transition:background .2s ease, opacity .2s ease, transform .2s ease;
}
.thumbnail-tool:hover,
.thumbnail-tool.is-active,
.thumbnail-file:hover{
    background:rgba(255,255,255,.1);
}
.thumbnail-tool img,
.thumbnail-file img{
    width:20px;
    height:20px;
    display:block;
}
.thumbnail-file input,
.thumbnail-ai-upload input{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}
.thumbnail-slider{
    gap:8px;
    min-width:118px;
    --range-bg:rgba(255,255,255,.16);
}
.thumbnail-slider input{
    width:76px;
    flex:0 0 76px;
}
.thumbnail-slider .duration-value{
    width:28px;
    flex:0 0 28px;
    color:#fff;
    font-size:13px;
    font-weight:700;
}
.thumbnail-color{
    position:relative;
    width:34px;
    height:28px;
    flex:0 0 28px;
    border-radius:10px;
    overflow:visible;
    background:var(--thumbnail-picker-color,#ffffff);
    --thumbnail-picker-color:#ffffff;
}
.thumbnail-color .clr-field{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    color:transparent !important;
}
.thumbnail-color .clr-field button{
    display:none !important;
}
.thumbnail-color input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    border-radius:inherit;
    background:transparent !important;
    color:transparent;
    cursor:pointer;
    opacity:0;
}
.thumbnail-color input[type="color"]{
    appearance:none;
    -webkit-appearance:none;
}
.thumbnail-color input[type="color"]::-webkit-color-swatch-wrapper{
    padding:0;
}
.thumbnail-color input[type="color"]::-webkit-color-swatch{
    border:0;
    border-radius:10px;
}
.thumbnail-color input[type="color"]::-moz-color-swatch{
    border:0;
    border-radius:10px;
}
.clr-picker{
    z-index:5000 !important;
}
.thumbnail-save{
    width:76px;
    height:48px;
    margin-left:auto;
    border-radius:999px;
    background:#fff;
    color:#4D7CFE;
    font-size:16px;
    font-weight:700;
}
.thumbnail-editor-stage{
    max-width:834px;
    border-radius:0;
    background:#202342;
}
.thumbnail-konva-stage{
    position:absolute;
    inset:0;
}
.thumbnail-konva-stage canvas{
    display:block !important;
}
.thumbnail-text-panel{
    position:absolute;
    right:14px;
    top:14px;
    z-index:20;
    width:276px;
    padding:18px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
    background:rgba(32,35,66,.94);
    box-shadow:0 12px 30px rgba(0,0,0,.24);
    backdrop-filter:blur(10px);
}
.thumbnail-text-panel[hidden]{
    display:none;
}
.thumbnail-text-row{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    color:rgba(255,255,255,.68);
    font-size:12px;
    font-weight:500;
}
.thumbnail-text-row[hidden]{
    display:none !important;
}
.thumbnail-text-row > span{
    width:54px;
    flex:0 0 54px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.thumbnail-text-row > b{
    width:30px;
    flex:0 0 30px;
    color:#fff;
    font-size:12px;
    font-weight:600;
    text-align:right;
}
.thumbnail-weight-options{
    display:flex;
    flex:1;
    gap:6px;
    min-width:0;
}
.thumbnail-weight-options button{
    min-width:0;
    flex:1;
    height:28px;
    border-radius:8px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:500;
}
.thumbnail-weight-options button.is-active{
    background:#4D7CFE;
    color:#fff;
}
.thumbnail-shadow-toggle{
    cursor:pointer;
}
.thumbnail-shadow-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.thumbnail-shadow-toggle i{
    position:relative;
    width:42px;
    height:24px;
    border-radius:999px;
    display:block;
    background:rgba(255,255,255,.14);
    transition:background .18s ease;
}
.thumbnail-shadow-toggle i::before{
    content:"";
    position:absolute;
    left:3px;
    top:3px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    transition:transform .18s ease;
}
.thumbnail-shadow-toggle input:checked + i{
    background:#4D7CFE;
}
.thumbnail-shadow-toggle input:checked + i::before{
    transform:translateX(18px);
}
.thumbnail-text-row input[type="range"]{
    flex:1;
    min-width:0;
    height:20px;
    border-radius:999px;
    background:transparent;
    appearance:none;
    -webkit-appearance:none;
}
.thumbnail-text-row input[type="range"]::-webkit-slider-runnable-track{
    height:5px;
    border-radius:999px;
    background:linear-gradient(to right,var(--primary) 0%,var(--primary) var(--range-progress,0%),rgba(255,255,255,.14) var(--range-progress,0%),rgba(255,255,255,.14) 100%);
}
.thumbnail-text-row input[type="range"]::-webkit-slider-thumb{
    width:22px;
    height:14px;
    margin-top:-4px;
    border:0;
    border-radius:999px;
    background:var(--primary);
    appearance:none;
    -webkit-appearance:none;
    transition:transform .2s ease;
}
.thumbnail-text-row input[type="range"]:hover::-webkit-slider-thumb,
.thumbnail-text-row input[type="range"]:focus-visible::-webkit-slider-thumb{
    transform:scale(1.08);
}
.thumbnail-text-row input[type="range"]::-moz-range-track{
    height:5px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
}
.thumbnail-text-row input[type="range"]::-moz-range-progress{
    height:5px;
    border-radius:999px;
    background:var(--primary);
}
.thumbnail-text-row input[type="range"]::-moz-range-thumb{
    width:22px;
    height:14px;
    border:0;
    border-radius:999px;
    background:var(--primary);
    transition:transform .2s ease;
}
.thumbnail-text-row input[type="range"]:hover::-moz-range-thumb,
.thumbnail-text-row input[type="range"]:focus-visible::-moz-range-thumb{
    transform:scale(1.08);
}
.thumbnail-konva-empty{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    color:var(--text-muted);
    font-size:16px;
    text-align:center;
}
.thumbnail-konva-empty[hidden]{
    display:none;
}
.thumbnail-downloads{
    grid-template-columns:1fr;
}
.thumbnail-download{
    height:60px;
    border-right:0;
}
.thumbnail-ai{
    width:100%;
    max-width:834px;
    margin-top:48px;
}
.thumbnail-ai h2{
    margin:0 0 16px;
    color:var(--text-muted);
    font-size:22px;
    font-weight:500;
}
.thumbnail-ai-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 150px;
    gap:64px;
    align-items:start;
    margin-top:34px;
}
.thumbnail-ai-fields{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    width:100%;
    min-width:0;
}
.thumbnail-ai-fields .topic-input{
    width:100%;
    max-width:462px;
}
.thumbnail-ai-fields .topic-guide{
    width:100%;
    max-width:560px;
    margin:0;
}
.thumbnail-ai-fields .topic-input input,
.thumbnail-ai-fields .topic-guide input{
    max-width:none;
}
.thumbnail-ai-generate{
    width:auto;
    min-width:190px;
    margin-top:0;
    justify-content:center;
}
.thumbnail-ai-upload{
    position:relative;
    width:150px;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:4px dashed rgba(255,255,255,.32);
    border-radius:34px;
    overflow:hidden;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
}
.thumbnail-ai-upload.is-dragover{
    border-color:#4D7CFE;
    background:rgba(77,124,254,.12);
}
.thumbnail-ai-upload.has-preview{
    border-style:solid;
    border-color:rgba(255,255,255,.18);
}
.thumbnail-ai-upload span{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.thumbnail-ai-upload img{
    width:40px;
    height:40px;
    opacity:.86;
}
.thumbnail-ai-upload-preview{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    opacity:1 !important;
}
.thumbnail-ai-upload-preview[hidden],
.thumbnail-ai-upload-placeholder[hidden]{
    display:none;
}
.thumbnail-actions{
    max-width:834px;
    margin-top:28px;
}
@media(max-width:960px){
    .thumbnail-toolbar{
        flex-wrap:wrap;
        height:auto;
        padding:18px 22px;
    }
    .thumbnail-ai-grid{
        grid-template-columns:1fr;
        gap:28px;
    }
}
.youtube-video-slot{
    overflow:hidden;
    cursor:default;
}
.youtube-video-slot.has-reference{
    cursor:pointer;
    opacity:0;
    transform:translateY(18px) scale(.985);
    animation:youtubeReferenceIn .52s cubic-bezier(.2,.75,.22,1) forwards;
    animation-delay:calc(min(var(--slot-index, 0), 10) * 55ms);
    will-change:opacity, transform;
}
.youtube-video-slot img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.youtube-video-slot .youtube-reference-play{
    position:absolute;
    left:50%;
    top:50%;
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(20,23,49,.68);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    transform:translate(-50%,-50%);
}
@keyframes youtubeReferenceIn{
    0%{
        opacity:0;
        transform:translateY(18px) scale(.985);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}
@media(max-width:956px){
    .youtube-video-grid{
        column-width:auto;
        column-count:1;
        --youtube-masonry-single-column:1;
    }
}
@media(max-width:720px){
    .youtube-video-area{
        margin-top:42px;
    }
    .youtube-video-grid{
        --youtube-masonry-gap:16px;
        --youtube-masonry-min-column:150px;
    }
    .youtube-video-slot{
        border-radius:15px;
    }
}
.youtube-reference-delete{
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(20,23,49,.72);
    color:#fff;
    font-size:20px;
    line-height:1;
    transition:background .2s ease;
}
.youtube-reference-delete:hover{
    background:#F75165;
}
@media(max-width:720px){
    .voice-custom-modal{padding:72px 20px}
    .voice-custom-panel{padding:28px 22px}
    .voice-custom-body{grid-template-columns:1fr;gap:24px}
    .voice-custom-card{display:flex;justify-content:center}
    .voice-custom-actions button{width:50%}
}

.voice-player{
    width:100%;
    max-width: 768px;
    height:100px;
    border-radius:28px;
    padding:0 25px 0 34px;
    display:flex;
    align-items:center;
    gap:24px;
    margin:2px 0 20px;
}
.voice-player[hidden]{display:none}
.voice-player.is-loading{
    justify-content:center;
    padding:0;
}
.voice-generation-loading{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--text-muted);
    font-size:20px;
    font-weight:500;
}
.voice-generation-loading p{margin:0; margin-bottom: 15px; font-size: 18px;}
.player-title{
    min-width:65px;
    font-size:18px;
    font-weight:500;
}
.status{
    min-width:80px;
    height:34px;
    border-radius:17px;
    background:#343b68;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:14px;
    font-weight:400;
}
.time{
    display:flex;
    align-items:center;
    gap:9px;
    color:#7e86a5;
    font-size:13px;
    min-width:132px;
    font-weight: 500;
}
.clock{
    position:relative;
}

.wave{
    flex:1;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
}
.voice-player .wave,
.meta-voice-wave{
    cursor:pointer;
}
.voice-player .wave:focus-visible,
.meta-voice-wave:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:4px;
}
.wave i{
    width:2px;
    height:7px;
    border-radius:2px;
    background:#fff;
    display:block;
    opacity:.38;
    transition:height .2s ease,opacity .2s ease,background-color .2s ease;
}
.wave i.is-played{
    background:var(--primary);
    opacity:1;
}
.wave i:nth-child(2n){height:12px}
.wave i:nth-child(3n){height:18px}
.wave i:nth-child(4n){height:8px}
.wave i:nth-child(5n){height:22px}
    
.player-play{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#3b4272;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.more{
}
.actions{
    display:flex;
    align-items:center;
    width:100%;
    gap:40px;
}
.regen{
    width:auto;
    height:60px;
    border-radius:70px;
    background:linear-gradient(135deg,#4D7CFE 0%,#F75165 100%);
    font-size:18px;
    font-weight:500;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:19px;
    transition:transform .2s ease;
    padding: 0px 30px;
}
.regen:hover{
    transform:translateY(-2px);
}
.regen.is-generating{
    pointer-events:none;
    gap:12px;
}
.regen.is-generating:hover{
    transform:none;
}
.generate-spinner{
    width:22px;
    height:22px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.28);
    border-top-color:#fff;
    animation:loadingSpinnerCycle 1.15s linear infinite;
}
@keyframes loadingSpinnerCycle{
    0%{
        transform:rotate(0deg);
    }
    68%,
    100%{
        transform:rotate(360deg);
    }
}
.credit{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:18px;
    font-weight:500;
}
.credit img{
    transition:transform .25s ease;
}
.credit span {font-weight:500;}
.regen:hover .credit img{
    transform:rotate(45deg);
}

.nav-buttons{
    display:flex;
    gap:10px;
}
.next,.prev{
    width:112px;
    height:60px;
    border-radius:70px;
    font-size:20px;
    font-weight:500;
    transition:transform .2s ease;
    opacity:1;
}
.next:hover,
.prev:hover{
    transform:translateY(-2px);
}
.next:disabled{
    opacity:0.5;
    cursor:pointer;
}
.prev{
    background:#fff;
    color:#4f7cff;
}
.next{
    background:#4f7cff;
    color:#fff;
}
.preview{
    position:fixed;
    top:0;
    left:var(--nav-width);
    width:var(--preview-panel-width);
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    padding:40px 46px 40px 46px ;
    scrollbar-width:none;
    scrollbar-gutter:stable;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    background:var(--side-bg);
    z-index:9;
    transition:left .25s ease, width .25s ease;
}
.preview::-webkit-scrollbar{
    display:none;
}
.preview-title{
    font-size:var(--fs-title);
    font-weight:500;
    color:var(--text-muted);
    margin:0 0 15px;
}
.video-card{
    width:min(100%, var(--preview-width));
    height:var(--preview-height);
    margin:0 auto;
    border-radius:15px;
    overflow:hidden;
    position:relative;
    background:#1B1E3B;
    transition:width .25s ease, height .25s ease;
}
.video-preview-media{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#1B1E3B;
}
.video-preview-image,
.video-preview-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.video-preview-image{
    opacity:0;
    transform:scale(1);
    clip-path:inset(0);
    transition:opacity .16s ease, clip-path .22s cubic-bezier(.2,.8,.2,1);
}
.video-preview-video{
    z-index:3;
}
.video-card.preview-effect-none .video-preview-image{
    transition:none;
}
.video-card.preview-effect-slide .video-preview-image{
    clip-path:inset(0 0 0 100%);
}
.video-preview-image.is-front{
    opacity:1;
    z-index:1;
}
.video-preview-image.is-preview-entering{
    z-index:2;
}
.video-preview-image.is-preview-leaving{
    z-index:1;
}
.video-card.preview-effect-slide .video-preview-image.is-front{
    clip-path:inset(0);
}
.video-card.preview-effect-slide .video-preview-image.is-front:not(.is-slide-entering){
    transition:opacity .16s ease;
}
.video-preview-image.is-zooming{
    animation:video-preview-zoom var(--preview-cut-duration,7s) linear forwards;
}
.video-card:not(.is-preview-playing) .video-preview-image{
    animation-play-state:paused;
}
.video-card:not(.has-preview-image) .video-preview-media{
    display:none;
}
.video-preview-play{
    position:absolute;
    left:50%;
    top:50%;
    z-index:5;
    width:58px;
    height:58px;
    padding:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(20,23,49,.72);
    border:1px solid rgba(255,255,255,.16);
    transform:translate(-50%,-50%);
    backdrop-filter:blur(8px);
    transition:background .2s ease, transform .2s ease, opacity .2s ease;
}
.video-preview-play:hover{
    background:rgba(79,124,255,.9);
    transform:translate(-50%,-50%) scale(1.04);
}
.video-card.is-preview-playing .video-preview-play{
    opacity:0;
}
.video-card.is-preview-playing:hover .video-preview-play,
.video-card.is-preview-playing .video-preview-play:focus-visible{
    opacity:1;
}
.video-preview-play[hidden]{
    display:none;
}
.video-preview-open{
    position:absolute;
    right:12px;
    top:12px;
    z-index:8;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(20,23,49,.72);
    backdrop-filter:blur(8px);
    cursor:pointer;
    transition:background .2s ease, transform .2s ease, opacity .2s ease;
}
.video-preview-open:hover{
    background:rgba(79,124,255,.9);
    transform:translateY(-1px);
}
.video-preview-open img{
    width:20px;
    height:20px;
    display:block;
}
.video-preview-open[hidden]{
    display:none;
}
.video-preview-loading{
    position:absolute;
    left:50%;
    top:50%;
    z-index:6;
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(20,23,49,.72);
    border:1px solid rgba(255,255,255,.12);
    transform:translate(-50%,-50%);
    backdrop-filter:blur(8px);
}
.video-preview-loading[hidden]{
    display:none;
}
.video-preview-loading .script-loading-dots{
    margin:0;
}
.video-card.is-preview-loading .video-preview-play,
.video-card.is-preview-loading .video-preview-caption,
.video-card.is-preview-loading .video-preview-time{
    display:none;
}
.video-preview-caption{
    position:absolute;
    left:50%;
    bottom:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    height:var(--caption-box-height,auto);
    max-width:calc(100% - 36px);
    z-index:4;
    overflow:visible;
    box-sizing:border-box;
    padding:var(--caption-padding,0);
    border-radius:var(--caption-radius,0);
    background:var(--caption-background,transparent);
    color:var(--caption-color,var(--white));
    font-family:var(--caption-font-family,var(--font-family)),sans-serif;
    font-size:var(--caption-font-size,16px);
    font-weight:var(--caption-font-weight,500);
    line-height:1;
    letter-spacing:0;
    text-align:center;
    text-overflow:clip;
    text-shadow:var(--caption-shadow,0 2px 5px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.85));
    -webkit-text-stroke:var(--caption-stroke,0 transparent);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:geometricPrecision;
    transform:translateX(-50%);
    white-space:nowrap;
}
.meta-subtitle-asset{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:64px;
}
.meta-subtitle-sample{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    height:var(--caption-box-height,auto);
    max-width:100%;
    box-sizing:border-box;
    overflow:visible;
    padding:var(--caption-padding,0);
    border-radius:var(--caption-radius,0);
    background:var(--caption-background,transparent);
    color:var(--caption-color,var(--white));
    font-family:var(--caption-font-family,var(--font-family)),sans-serif;
    font-size:var(--caption-font-size,16px);
    font-weight:var(--caption-font-weight,500);
    line-height:1;
    text-align:center;
    text-shadow:var(--caption-shadow,none);
    -webkit-text-stroke:var(--caption-stroke,0 transparent);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:geometricPrecision;
    white-space:nowrap;
    padding-top: 15px; padding-bottom: 15px;
}
.video-preview-caption[hidden]{
    display:none;
}
.video-preview-time{
    position:absolute;
    right:14px;
    bottom:10px;
    z-index:4;
    display:flex;
    align-items:center;
    gap:4px;
    color:rgba(255,255,255,.66);
    font-size:10px;
    font-weight:400;
    line-height:1;
}
.video-preview-time[hidden]{
    display:none;
}
.video-card.has-preview-content .video-card-content{
    display:none;
}
body.is-preview-wide .video-card{
    width:min(100%, var(--preview-width));
    height:var(--preview-height);
}
.video-card.ratio-wide{
    aspect-ratio:16 / 9;
}
.video-card.ratio-vertical{
    aspect-ratio:9 / 16;
}
.video-card-badges{
    position:absolute;
    top:16px;
    left:16px;
    display:flex;
    align-items:center;
    gap:7px;
    z-index:2;
}
.video-card-badge{
    min-width:46px;
    height:27px;
    padding:0 10px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:var(--white);
    font-size:12px;
    font-weight:500;
    line-height:1;
}
.video-card-content{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:54px 20px 20px;
    text-align:center;
    pointer-events:none;
}
.video-card-content p{
    margin:0;
    color:var(--text-muted);
    font-size:13px;
    font-weight:400;
    line-height:1.55;
}
@keyframes video-preview-zoom{
    from{transform:scale(1)}
    to{transform:scale(1.075)}
}
.scene{
    position:absolute;
}
.caption{
    position:absolute;
    left:0;
    right:0;
    bottom:42px;
    text-align:center;
    color:#fff;
    font-size:20px;
    font-weight:500;
    text-shadow:0 2px 7px rgba(0,0,0,.45);
}
.meta{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
    padding:0;
    margin-top:30px;
}
.meta-item{
    width:100%;
    display:block;
    color:var(--text);
}
.meta-item-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}
.meta-item-head strong{
    color:var(--text-muted);
    font-size:16px;
    font-weight:500;
}
.meta-asset-count{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    font-size:11px;
    font-weight:400;
}
.meta-asset{
    min-height:48px;
    padding:15px 15px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:10px;
    overflow:hidden;
    background:#1B1E3B;
    color:var(--text-muted);
    font-size:13px;
    font-weight:400;
    line-height:1.5;
}
.meta-item.muted{
    color:var(--text-muted);
}
.meta-item.muted .meta-asset{
    color:var(--text-muted);
    background:#1B1E3B;
    justify-content: center;
    padding-top: 25px; padding-bottom: 25px;
}
.meta-empty-state{
    width:100%;
    min-height:38px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
}
.meta-empty-state img{
    width:24px;
    height:24px;
    display:block;
    opacity:.28;
}
.meta-empty-state .meta-text{
    margin:0;
}
.meta-empty-state:has(.meta-text[hidden]),
.meta-empty-state[hidden]{
    display:none;
}
.meta-preview-loading{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.meta-preview-loading[hidden]{
    display:none;
}
.meta-asset.is-loading{
    justify-content:center;
}
.meta-asset.is-loading .meta-preview-loading .script-loading-dots{
    margin:0;
}
.meta-item:not(.muted) .meta-script-asset .meta-empty-state{
    min-height:0;
    display:block;
    text-align:left;
}
.meta-item:not(.muted) .meta-script-asset .meta-empty-state[hidden]{
    display:none;
}
.meta-item:not(.muted) .meta-script-asset .meta-empty-state img{
    display:none;
}
.meta-script-asset .meta-text{
    margin:0;
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}
.meta-script-asset{
    cursor:pointer;
}
.meta-script-asset.is-expanded{
    align-items:flex-start;
    overflow:visible;
}
.meta-script-asset.is-expanded .meta-text{
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
}
.meta-voice-asset{
    min-height:52px;
    padding:15px 20px;
    border-width:2px;
    border-radius:12px;
}
.meta-voice-asset[hidden]{
    display:none;
}
.meta-title-value{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}
.meta-voice-controls{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
}
.meta-voice-controls[hidden]{
    display:none;
}
.meta-voice-play{
    width:28px;
    height:28px;
    flex:0 0 28px;
    padding:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
}
.meta-voice-play svg{
    width:15px;
    height:15px;
}
.meta-voice-wave{
    height:24px;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
}
.meta-voice-wave i{
    width:2px;
    height:var(--meta-wave-height,12px);
    border-radius:999px;
    display:block;
    background:var(--text-muted);
    transition:background .15s ease;
}
.meta-voice-wave i:nth-child(3n+1){--meta-wave-height:8px}
.meta-voice-wave i:nth-child(3n+2){--meta-wave-height:18px}
.meta-voice-wave i:nth-child(4n){--meta-wave-height:13px}
.meta-voice-wave i.is-played{
    background:var(--primary);
}
.meta-asset .meta-voice-wave{
    height:25px;
    gap:3px;
}
.meta-asset .meta-voice-wave i{
    width:3px;
    max-height:25px;
    border-radius:999px;
    background:linear-gradient(135deg,#4D7CFE 0%,#F75165 100%);
}
.meta-asset .meta-voice-wave i:nth-child(1){background:#4D7CFE}
.meta-asset .meta-voice-wave i:nth-child(2){background:#5877F9}
.meta-asset .meta-voice-wave i:nth-child(3){background:#6372F5}
.meta-asset .meta-voice-wave i:nth-child(4){background:#6E6DF0}
.meta-asset .meta-voice-wave i:nth-child(5){background:#7968EC}
.meta-asset .meta-voice-wave i:nth-child(6){background:#8463E7}
.meta-asset .meta-voice-wave i:nth-child(7){background:#8F5EE3}
.meta-asset .meta-voice-wave i:nth-child(8){background:#9A59DE}
.meta-asset .meta-voice-wave i:nth-child(9){background:#A554DA}
.meta-asset .meta-voice-wave i:nth-child(10){background:#B04FD5}
.meta-asset .meta-voice-wave i:nth-child(11){background:#BB4AD0}
.meta-asset .meta-voice-wave i:nth-child(12){background:#C645CC}
.meta-asset .meta-voice-wave i:nth-child(13){background:#D140C7}
.meta-asset .meta-voice-wave i:nth-child(14){background:#DC3BC3}
.meta-asset .meta-voice-wave i:nth-child(15){background:#E736BE}
.meta-asset .meta-voice-wave i:nth-child(16){background:#F231BA}
.meta-asset .meta-voice-wave i:nth-child(n+17){background:#F75165}
.meta-asset .meta-voice-wave i.is-played{
    background:var(--text-muted);
}
.meta-voice-name,
.meta-bgm-name{
    min-width:0;
    max-width:120px;
    flex:0 1 auto;
    overflow:hidden;
    color:var(--text-muted);
    font-size:13px;
    font-weight:400;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.meta-asset-detail{
    flex:0 0 auto;
    color:var(--text-muted);
    font-size:13px;
    
}

.meta-image-assets{
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
.meta-image-assets:empty{
    display:none;
}
.meta-image-assets .image-result-item{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:auto;
    width:100% !important;
    height:100px !important;
    min-width:100%;
    max-width:none !important;
    flex:none;
    border-radius:10px 10px 0 0;
    overflow:hidden;
}
.meta-image-assets .image-result-item > img{
    width:100% !important;
    height:100% !important;
    display:block;
    object-fit:cover !important;
}
.meta-image-assets .image-result-overlay img{
    width:22px;
    height:22px;
}
.meta-image-assets .image-result-item > img{
    border-radius:0;
}
.meta-image-asset{
    height:145px;
    padding:0;
}
.meta-image-detail{
    position:absolute;
    left:0;
    right:0;
    top:100px;
    bottom:auto;
    min-width:0;
    height:auto;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    box-sizing:border-box;
    padding:14px 16px 0;
    z-index:2;
    color:var(--text-muted);
    text-shadow:none;
    font-size:13px;
    font-weight:400;
    line-height:1.3;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.meta-image-detail i{
    color:rgba(255,255,255,.22);
    font-style:normal;
    margin:0 5px;
}
.meta-render-asset{
    padding:14px 15px;
}
.meta-render-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 12px;
}
.meta-render-grid[hidden]{
    display:none;
}
.meta-render-grid span{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.meta-render-grid b{
    color:var(--text-muted);
    font-size:13px;
    font-weight:400;
}
.meta-render-grid em{
    min-width:0;
    overflow:hidden;
    color:var(--text-soft);
    font-size:13px;
    font-style:normal;
    font-weight:400;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.preview-toggle{
    display:none;
}

.clr-dark {
    background-color:#202543 !important;
}

@keyframes flowing-border{
    0%{background-position:0 0, 0% 50%;}
    100%{background-position:0 0, -100% 50%;}
}

@keyframes flowing-gradient{
    0%{background-position:0% 50%;}
    100%{background-position:-100% 50%;}
}

@media (prefers-reduced-motion:reduce){
    .gradient-border-flow,
    .regen{
        animation:none;
    }
}

@media (max-width:1400px){
    .main{
        width:calc(var(--app-width) - var(--nav-width));
        margin-left:var(--nav-width);
    }
    .workspace-logo.project-workspace-logo{
        left:calc(var(--nav-width) + var(--content-pad-x));
    }
    .top{
        right:24px;
        width:auto;
    }
    .workspace{
        grid-template-columns:minmax(0,1fr);
    }
    .preview{
        position:fixed;
        inset:auto 24px 46px auto;
        width:auto;
        height:auto;
        overflow:visible;
        padding:0;
        z-index:30;
    }
    .preview-title,
    .meta{
        display:none;
    }
    .preview .video-card{
        position:absolute;
        right:0;
        bottom:76px;
        width:272px;
        height:var(--preview-height);
        margin-left:0;
        display:none;
    }
    body.is-preview-wide .preview .video-card{
        width:min(calc(100vw - 48px),420px);
        height:var(--preview-height);
    }
    .preview.is-open .video-card{
        display:block;
        box-shadow:0 28px 70px rgba(5,8,24,.34);
    }
    .preview-toggle{
        width:58px;
        height:58px;
        border-radius:50%;
        background:var(--primary);
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:var(--shadow-soft);
        transition:transform .2s ease;
    }
    .preview-toggle:hover{
        transform:translateY(-2px);
    }
    .script-section{
        max-width: 100%;
    }
}