:root{
font-family:Arial,"Microsoft YaHei",sans-serif;
color:#202938;
background:#fff;
--blue:#347ff0;
--blue2:#37b6ed;
--line:#e3e7ee;
--text2:#697589}
*{
box-sizing:border-box}
body{
margin:0;
background:#fff}
button,input,select{
font:inherit}
.app{
min-height:100vh;
display:flex}
.sidebar{
width:252px;
flex:none;
border-right:1px solid #e3e7ee;
background:#fff;
display:flex;
flex-direction:column}
.brand{
height:62px;
display:flex;
align-items:center;
padding:0 18px;
font-size:21px;
font-weight:700;
color:#111}
.brand-mark{
width:29px;
height:33px;
margin-right:7px;
background:linear-gradient(135deg,#0878ff,#3bbdf0);
clip-path:polygon(0 0,100% 50%,0 100%);
position:relative}
.brand-mark:after{
content:"";
position:absolute;
left:7px;
top:7px;
width:4px;
height:19px;
background:#fff;
opacity:.55}
.collapse{
margin-left:auto;
color:#647187;
font-size:18px}
.nav{
padding:8px 10px}
.nav-group{
color:#1e2b42;
font-size:14px;
padding:10px 14px;
display:flex;
align-items:center;
gap:10px}
.nav-group .chevron{
margin-left:auto;
color:#3482f3}
.nav a{
height:38px;
display:flex;
align-items:center;
gap:12px;
padding:0 34px;
color:#25324a;
text-decoration:none;
font-size:14px;
border-radius:6px;
margin:2px 0}
.nav a.active,.nav a:hover{
color:#2678f3;
background:#eaf2ff}
.side-bottom{
margin-top:auto;
padding:0 10px}
.login-promo{
background:#f1f7ff;
border:1px solid #d4e6ff;
border-radius:20px;
padding:15px 16px;
margin-bottom:12px;
color:#2674e8}
.login-promo h3{
color:#1d2b42;
font-size:14px;
margin:0 0 7px}
.login-promo p{
font-size:12px;
line-height:1.55;
margin:0 0 14px}
.login-promo .btn{
width:100%;
height:40px}
.side-link{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 14px;
font-size:13px}
.tag{
background:#fff2b9;
color:#d98500;
border-radius:12px;
padding:3px 10px;
font-size:11px}
.main{
flex:1;
min-width:0}
.topbar{
height:62px;
border-bottom:1px solid #edf0f4;
display:flex;
align-items:center;
padding:0 36px;
gap:36px}
.top-links{
display:flex;
gap:36px;
font-size:14px}
.top-links a{
color:#273248;
text-decoration:none}
.top-actions{
margin-left:auto;
display:flex;
gap:10px;
align-items:center}
.content{
max-width:1190px;
margin:auto;
padding:18px 30px 90px}
.hero{
text-align:center;
padding:0 0 24px}
.hero h1{
font-size:40px;
line-height:1.3;
margin:0 0 5px;
font-weight:600;
color:#282828}
.hero p{
font-size:16px;
margin:0;
color:#303030}
.workspace{
display:grid;
grid-template-columns:minmax(420px,1fr) minmax(420px,1fr);
gap:24px}
.workspace-card{
min-height:480px;
border:1px solid #e0e5ec;
border-radius:16px;
padding:24px;
box-shadow:0 8px 18px #1d314d12}
.upload-zone{
height:430px;
border:2px dashed #cad5e5;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
cursor:pointer;
position:relative;
padding:30px}
.upload-zone:hover{
border-color:#80aef7;
background:#fbfdff}
.upload-zone input{
display:none}
.upload-icon{
font-size:54px;
color:#488ff7}
.upload-zone h3{
font-size:16px;
margin:17px 0 10px}
.upload-zone p{
font-size:13px;
color:#778397;
margin:6px 0}
.choose{
margin-top:22px}
.btn{
border:1px solid #d3dae5;
background:#fff;
color:#334057;
border-radius:10px;
padding:9px 17px;
cursor:pointer}
.btn.primary{
background:linear-gradient(100deg,#286bf0,#3ab7ef);
border:0;
color:#fff}
.btn:disabled{
opacity:.5;
cursor:not-allowed}
.file-card{
border:1px solid var(--line);
border-radius:13px;
padding:18px;
margin-top:0;
display:flex;
align-items:center;
gap:12px}
.file-preview{
width:74px;
height:48px;
border-radius:6px;
object-fit:cover;
background:#eaf2ff}
.file-info{
min-width:0;
flex:1}
.file-name{
font-weight:600;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.file-size{
color:#718096;
font-size:12px;
margin-top:6px}
.remove{
border:0;
background:none;
color:#273248;
font-size:20px;
cursor:pointer}
.controls{
background:#fff}
.tabs{
height:36px;
background:#f3f4f6;
border-radius:8px;
padding:3px;
display:flex;
margin-bottom:24px}
.tabs button{
flex:1;
border:0;
background:transparent;
border-radius:6px;
color:#737d8d;
cursor:pointer}
.tabs button.active{
background:#fff;
color:#252d3b;
box-shadow:0 1px 3px #00000014;
font-weight:600}
.control-box{
border:1px solid var(--line);
border-radius:13px;
padding:20px;
margin-bottom:22px}
.field label{
display:block;
font-size:14px;
font-weight:600;
margin-bottom:15px}
.range-line{
display:flex;
align-items:center;
gap:14px}
.range-line input{
flex:1;
accent-color:#4189f4}
.range-line output{
width:88px;
border:1px solid #e1e5eb;
border-radius:10px;
padding:10px;
text-align:center;
color:#6e7784}
.field select{
width:100%;
height:40px;
border:1px solid #d6dde8;
border-radius:8px;
padding:0 10px;
background:#fff}
.options{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px}
.start{
display:block;
width:65%;
margin:0 auto;
height:42px;
font-size:16px}
.status{
min-height:24px;
margin:18px 0 10px;
font-size:14px;
text-align:center;
color:#344052}
.status.error{
color:#d34b4b}
.progress{
height:8px;
background:#e6eefc;
border-radius:5px;
overflow:hidden}
.progress i{
height:100%;
display:block;
background:#4b90f7;
transition:width .3s}
.result-box{
border:1px solid var(--line);
border-radius:13px;
padding:18px;
margin-top:18px}
.result-head{
display:flex;
align-items:center;
gap:14px}
.result-icon{
width:40px;
height:40px;
border-radius:9px;
background:#eaf2ff;
color:#347ff0;
display:grid;
place-items:center;
font-size:22px}
.result-head strong{
font-size:16px}
.result-head small{
display:block;
color:#718096;
margin-top:5px}
.result-actions{
display:flex;
justify-content:center;
gap:12px;
border-top:1px solid var(--line);
padding-top:15px;
margin-top:15px}
.below{
height:160px;
background:#fafafa;
margin:0 -30px -90px;
text-align:center;
padding:70px 0;
font-size:28px}
.modal-mask{
position:fixed;
inset:0;
background:#0008;
display:grid;
place-items:center;
z-index:5}
.modal{
width:480px;
background:#fff;
border-radius:15px;
padding:28px 32px;
box-shadow:0 20px 50px #0003}
.modal h2{
text-align:center;
margin:5px 0 20px}
.modal .notice{
background:#f1f7ff;
border:1px solid #d7e7ff;
padding:12px;
border-radius:8px;
color:#35527d;
font-size:13px}
.modal input{
width:100%;
height:44px;
border:1px solid var(--line);
border-radius:8px;
padding:0 12px;
margin-top:14px}
.modal .btn{
width:100%;
margin-top:16px}
.hidden{
display:none!important}
@media(max-width:850px){
.sidebar{
width:72px}
.brand{
padding:0 20px}
.brand-mark{
margin:0}
.brand-text,.collapse,.nav-group span,.nav a span,.side-bottom{
display:none}
.nav a{
padding:0;
justify-content:center}
.topbar{
padding:0 18px}
.top-links{
gap:15px}
.content{
padding:18px}
.workspace{
grid-template-columns:1fr}
.workspace-card{
min-height:0}
.below{
margin-left:-18px;
margin-right:-18px}
.hero h1{
font-size:31px}
}
@media(max-width:540px){
.top-actions .btn:first-child{
display:none}
.topbar{
gap:10px}
.workspace-card{
padding:15px}
.upload-zone{
height:330px}
.options{
grid-template-columns:1fr}
.modal{
width:calc(100% - 30px);
padding:22px}
}