@import url("/assets/css/tokens.css");

@import url("/assets/css/base.css");

@import url("/assets/css/components.css");

@import url("/assets/css/states.css");

@import url("/assets/css/layout.css");

.brand-icon{
width:29px;
margin-right:7px;
color:#0878ff;
font-size:29px}

.nav .layui-icon{
width:16px;
text-align:center;
font-size:16px}

.nav .layui-icon-folder,
.nav .layui-icon-video,
.nav .layui-icon-picture{
position:relative;
font-size:0;
display:inline-block;
width:18px;
height:18px;
flex:none}

.nav .layui-icon-folder:before{
content:"";
position:absolute;
left:1px;
top:5px;
width:15px;
height:10px;
border:1px solid currentColor;
border-radius:2px}

.nav .layui-icon-folder:after{
content:"";
position:absolute;
left:2px;
top:3px;
width:7px;
height:3px;
border:1px solid currentColor;
border-bottom:0;
border-radius:2px 2px 0 0}

.nav .layui-icon-video:before{
content:"";
position:absolute;
left:1px;
top:4px;
width:12px;
height:10px;
border:1px solid currentColor;
border-radius:2px}

.nav .layui-icon-video:after{
content:"";
position:absolute;
right:0;
top:7px;
border-width:3px 0 3px 4px;
border-style:solid;
border-color:transparent transparent transparent currentColor}

.nav .layui-icon-picture{
border:1px solid currentColor;
border-radius:2px;
overflow:hidden}

.nav .layui-icon-picture:before{
content:"";
position:absolute;
right:3px;
top:3px;
width:3px;
height:3px;
border-radius:50%;
background:currentColor}

.nav .layui-icon-picture:after{
content:"";
position:absolute;
left:2px;
bottom:-4px;
width:10px;
height:10px;
border-left:1px solid currentColor;
border-top:1px solid currentColor;
transform:rotate(45deg)}

.chevron .layui-icon{
font-size:16px}

.sidebar,.main{
transition:width .2s ease,margin-left .2s ease}

.main{
padding-top:62px}

.topbar{
position:fixed;
top:0;
right:0;
left:252px;
z-index:2;
background:#fff;
transition:left .2s ease}

.sidebar-toggle{
margin-top:auto;
width:100%;
height:48px;
flex:none;
border:0;
border-top:1px solid #edf0f4;
background:#fff;
color:#58667a;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
cursor:pointer;
font-size:13px}

.sidebar-toggle:hover{
background:#f7f9fc;
color:#2678f3}

.sidebar-toggle-icon{
width:16px;
height:16px;
position:relative;
flex:none}

.sidebar-toggle-icon:before{
content:"";
position:absolute;
left:5px;
top:3px;
width:7px;
height:7px;
border-left:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform:rotate(45deg)}

.app.sidebar-collapsed .sidebar{
width:72px}

.app.sidebar-collapsed .main{
margin-left:72px}

.app.sidebar-collapsed .topbar{
left:72px}

.app.sidebar-collapsed .brand{
padding:0;
justify-content:center}

.app.sidebar-collapsed .brand-icon{
margin:0}

.app.sidebar-collapsed .brand-text,.app.sidebar-collapsed .nav-group span,.app.sidebar-collapsed .nav a span,.app.sidebar-collapsed .sidebar-toggle-label{
display:none}

.app.sidebar-collapsed .nav{
padding-left:10px;
padding-right:10px}

.app.sidebar-collapsed .nav-group{
justify-content:center;
padding-left:0;
padding-right:0}

.app.sidebar-collapsed .nav-group .chevron{
display:none}

.app.sidebar-collapsed .nav a{
padding:0;
justify-content:center}

.app.sidebar-collapsed .sidebar-toggle-icon:before{
left:3px;
transform:rotate(225deg)}

.upload-icon .layui-icon{
font-size:54px}

.remove .layui-icon{
font-size:18px}

.result-icon .layui-icon{
font-size:22px}

.file-card.video-file{
position:relative}

.video-file .file-info{
padding-right:42px}

.video-file .remove{
position:absolute;
bottom:10px;
right:14px;
width:28px;
height:28px;
padding:0;
display:grid;
place-items:center;
outline:0}

.result-head .btn{
text-decoration:none}

.result-head{
gap:10px}

.result-head>div:nth-child(2){
min-width:0;
flex:1;
white-space:nowrap}

.result-head>.btn{
flex:none;
white-space:nowrap;
min-width:78px;
padding:8px 10px;
font-size:13px}

.result-head .result-actions{
display:flex;
gap:8px}

.workspace-card>.btn{
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
text-decoration:none}

.choose{
width:156px;
height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:2px;
padding:0 14px;
white-space:nowrap}

.choose .layui-icon{
font-size:16px;
line-height:1}

.range-line input[type=number]{
flex:0 0 88px;
width:88px;
height:46px;
border:1px solid #e1e5eb;
border-radius:10px;
padding:0 10px;
text-align:center;
color:#6e7784;
accent-color:auto}

.control-box#basicOptions .field{
display:flex;
align-items:center;
gap:24px}

.control-box#basicOptions .field>label{
flex:0 0 auto;
margin:0;
white-space:nowrap}

.control-box#basicOptions .range-line{
flex:1;
min-width:0;
gap:14px}

.control-box#basicOptions .range-line input[type=range]{
min-width:80px}

.control-box#basicOptions .range-line input[type=number]{
flex-basis:98px;
width:98px;
height:42px;
border-color:#347ff0;
color:#273248}

.control-box#basicOptions .range-line>span{
white-space:nowrap}

.quality-presets{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px}

.quality-preset{
min-height:58px;
border:1px solid #dbe3ee;
border-radius:8px;
background:#fff;
color:#273248;
text-align:left;
padding:10px 12px;
cursor:pointer}

.quality-preset strong,.quality-preset small{
display:block}

.quality-preset strong{
font-size:14px;
font-weight:600;
margin-bottom:3px}

.quality-preset small{
font-size:12px;
color:#718096;
line-height:1.35}

.quality-preset.active{
border:2px solid #347ff0;
background:#f2f6ff;
padding:9px 11px}

.quality-preset.active small{
color:#60718d}

.cancel{
display:block;
margin:10px auto 0;
color:#c24848;
border-color:#efcaca}

.cancel .layui-icon{
font-size:14px}

.result-actions .cancel-action{
color:#c24848;
border-color:#efcaca}

.top-actions .language-picker{
margin:0;
padding:7px 10px;
border:1px solid #dfe5ee;
border-radius:8px;
background:#fff;
display:flex;
align-items:center;
gap:7px;
color:#58667a;
box-shadow:0 1px 2px #1d314d0a}

.top-actions .language-picker:hover{
border-color:#9bbcf4;
background:#f8fbff}

.top-actions .language-picker-icon{
font-size:12px;
font-weight:700;
letter-spacing:0;
color:#347ff0}

.top-actions .language-picker select{
min-width:96px;
padding:0 16px 0 0;
border:0;
background:transparent;
color:#273248;
outline:0;
cursor:pointer;
font-size:13px}

.mode-confirm-mask{
z-index:10}

.mode-confirm{
width:min(420px,calc(100% - 30px));
padding:24px}

.mode-confirm h2{
font-size:18px;
margin:0 0 16px}

.mode-confirm .notice{
line-height:1.6}

.mode-confirm-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:20px}

.mode-confirm-actions .btn{
min-width:76px}

.mode-confirm-close{
float:right;
padding:0;
font-size:18px}

.media-preview-mask{
z-index:20}

.media-preview{
position:relative;
width:min(860px,calc(100% - 30px));
max-height:calc(100vh - 40px);
padding:24px;
overflow:auto}

.media-preview h2{
margin:0 32px 18px 0;
text-align:left;
font-size:18px}

.media-preview-close{
position:absolute;
right:14px;
top:12px;
padding:2px 6px}

.media-preview video,.media-preview img{
display:block;
width:100%;
max-height:72vh;
object-fit:contain;
background:#101722;
border-radius:8px}

.media-preview img{
background:#f4f7fb}
.result-actions{
align-items:center}
.result-retention{
display:block;
width:100%;
margin:12px 0 0;
padding-top:10px;
border-top:1px solid var(--line);
font-size:12px;
line-height:1.5;
text-align:center;
color:#c24141}
.result-actions #download,
.result-actions #previewResult{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:110px;
text-decoration:none}
.preview-eye{
display:inline-block;
width:16px;
height:10px;
border:1.5px solid currentColor;
border-radius:80% 20%;
transform:rotate(-45deg);
position:relative}
.preview-eye::after{
content:"";
position:absolute;
width:4px;
height:4px;
border-radius:50%;
background:currentColor;
left:4px;
top:1px}

@media(max-width:540px){
.control-box#basicOptions .field{
align-items:stretch;
flex-wrap:wrap;
gap:12px}
.control-box#basicOptions .range-line{
flex-basis:100%}
.control-box#basicOptions .field>label{
flex-basis:100%}
}

@media(max-width:540px){
.quality-presets{
grid-template-columns:1fr}
.quality-preset{
min-height:0}
}

@media(max-width:850px){
.topbar{
left:72px}
.app:not(.sidebar-collapsed) .sidebar{
width:252px;
box-shadow:8px 0 24px #1d314d1f}
.app:not(.sidebar-collapsed) .main{
margin-left:252px}
.app:not(.sidebar-collapsed) .topbar{
left:252px}
.app:not(.sidebar-collapsed) .brand{
padding:0 18px}
.app:not(.sidebar-collapsed) .brand-icon{
margin-right:7px}
.app:not(.sidebar-collapsed) .brand-text,.app:not(.sidebar-collapsed) .nav-group span,.app:not(.sidebar-collapsed) .nav a span,.app:not(.sidebar-collapsed) .sidebar-toggle-label{
display:inline}
.app:not(.sidebar-collapsed) .nav a{
padding:0 34px;
justify-content:flex-start}
}

.start{
display:block!important;
width:min(65%,360px);
margin:0 auto!important;
float:none!important;
text-align:center}

.controls>.start{
position:static;
left:auto;
transform:none}

.result-head>div:nth-child(2) small{
line-height:1.45;
overflow:hidden;
text-overflow:ellipsis}

@media(max-width:980px) and (min-width:851px){
.workspace{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px}
.workspace-card{
padding:18px}
.content{
padding-left:20px;
padding-right:20px}
}

@media(max-width:850px){
.result-head{
flex-wrap:wrap}
.result-head>div:nth-child(2){
flex:1 1 calc(100% - 54px)}
.result-head>.btn{
margin-left:0!important}
.result-head .result-actions{
flex:1 1 100%;
flex-wrap:wrap}
.result-actions .btn{
white-space:nowrap}
}

@media(max-width:540px){
.result-head>div:nth-child(2){
white-space:normal}
.result-head>.btn{
flex:1 1 calc(50% - 4px);
min-width:0}
.result-actions .btn{
flex:1 1 100%}
.hero p{
line-height:1.6}
.below{
font-size:22px}
}
@media(max-width:540px){
.result-actions #download,
.result-actions #previewResult,
.result-actions #again,
.result-actions #next{
flex:0 1 auto;
width:auto}
}
.image-page .content{
padding-top:10px;
padding-bottom:18px}
.image-page .hero{
padding-bottom:14px}
.image-page .upload-zone{
height:280px}
.image-page .workspace-card{
min-height:0}
@media(max-width:850px){
.image-page .content{
padding-top:18px;
padding-bottom:40px}
.image-page .upload-zone{
height:320px}
}