:root{
  --bg-header:#C2C2C2;--bg-main:#E0E0E0;--bg-footer:#D6D6D6;
  --dark:#383838;--black:#000000;--gray:#808080;--gray-l:#A6A6A6;
  --line:#D4D4D4;--white:#FFFFFF;--brand:#0050AB;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg-main);color:var(--black);display:flex;flex-direction:column;min-height:100vh}
button{font-family:inherit;cursor:pointer;border:none;background:none}
svg{display:block}

/* ===== Header ===== */
header{background:var(--bg-header);padding:0 40px;height:58px;min-height:58px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:50}
.logo{font-size:21px;font-weight:800;letter-spacing:-0.3px;cursor:pointer;user-select:none;display:flex;align-items:center;}
.brand-shift{color:#0050AB;}
.brand-imgs{color:var(--black);}
.brand-com{font-weight:100;color:var(--black);}
.hd-right{display:flex;align-items:center;gap:26px}
.hd-btn{display:flex;align-items:center;gap:7px;color:#4A4A4A;font-size:14px;padding:6px;border-radius:8px;transition:background .2s}
.hd-btn:hover{background:rgba(0,0,0,.08)}
/* 语言下拉 */
.lang-wrap{position:relative}
.lang-menu{position:absolute;top:44px;right:0;width:190px;max-height:320px;overflow-y:auto;background:rgba(28,28,28,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:14px;padding:8px;display:none;z-index:120;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.lang-menu.open{display:block}
.lang-item{display:flex;align-items:center;justify-content:space-between;width:100%;color:#F0F0F0;font-size:13.5px;padding:9px 12px;border-radius:8px;text-align:left;transition:background .15s}
.lang-item:hover{background:rgba(255,255,255,.12)}
.lang-item .ck{visibility:hidden;color:#fff}
.lang-item.on .ck{visibility:visible}

/* ===== Main ===== */
main{flex:1;background:var(--bg-main);width:100%}
.view{display:none}
.view.on{display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px}

/* ===== 首页 Hero ===== */
.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding:96px 0 120px}
.hero-left .badge{display:inline-flex;align-items:center;gap:7px;background:var(--dark);color:#fff;font-size:13px;padding:7px 15px;border-radius:999px;margin-bottom:26px}
.hero-left h1{font-size:46px;line-height:1.25;font-weight:700;letter-spacing:-.5px}
.hero-left h1 .light{font-weight:400;color:#666666}
.hero-tags{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.hero-tags i{font-style:normal;background:var(--white);border:1px solid var(--line);color:#666;font-size:12.5px;padding:5px 12px;border-radius:7px}
/* 上传框 */
.drop{background:#F2F2F2;border:2px dashed #B0B0B0;border-radius:26px;padding:52px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:background .2s ease,border-color .2s ease;min-height:340px}
.drop:hover{border-color:#8A8A8A;background:#EAEAEA}
.drop.drag{border-color:var(--dark)}
.up-icon{width:76px;height:76px;border-radius:18px;background:#D9D9D9;display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:background .2s}
.up-icon svg{stroke:#7A7A7A}
.drop-title{font-size:20px;font-weight:700;color:#3A3A3A;margin-bottom:10px}
.drop-sub{font-size:13.5px;color:var(--gray);margin-bottom:26px}
.pick-btn{background:var(--gray-l);color:#fff;font-size:14px;font-weight:500;padding:10px 26px;border-radius:8px;transition:background .2s}
.drop:hover .pick-btn{background:var(--dark)}
.hidden-input{display:none}

/* ===== 弹窗通用 ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.on{display:flex}
.modal{background:var(--white);border-radius:20px;width:380px;max-width:100%;padding:22px 24px 24px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{font-size:16px;font-weight:700}
.m-close{position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:50%;background:#EDEDED;color:#666;font-size:14px;display:flex;align-items:center;justify-content:center;line-height:1}
.m-close:hover{background:#E0E0E0;color:#000}
/* 工具弹窗 */
.tabs{display:flex;gap:8px;margin:18px 0 16px}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;color:#333;font-size:13px;font-weight:500;padding:9px 4px;border-radius:9px;transition:all .15s;white-space:nowrap}
.tab.on{background:var(--dark);border-color:var(--dark);color:#fff}
.opt-list{margin-bottom:18px}
.opt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 10px;font-size:13.5px;color:#2A2A2A;border-bottom:1px dashed var(--line);text-align:left;transition:background .15s}
.opt:last-child{border-bottom:none}
.opt:hover{background:#F5F5F5}
.opt.on{background:var(--bg-main)}
.radio{width:17px;height:17px;border-radius:50%;border:1.5px solid #C2C2C2;flex:none;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.opt.on .radio{border-color:var(--dark)}
.radio i{width:9px;height:9px;border-radius:50%;background:var(--dark);transform:scale(0);transition:transform .15s}
.opt.on .radio i{transform:scale(1)}
.confirm-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto;background:#C9C9C9;color:#fff;font-size:14px;font-weight:500;padding:10px 34px;border-radius:999px;transition:background .2s;cursor:not-allowed}
.confirm-btn.on{background:var(--dark);cursor:pointer}
.confirm-btn.on:hover{background:#2A2A2A}
/* 自定义尺寸 */
.custom-box{background:var(--white);border-radius:20px;width:340px;max-width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);z-index:130}
.custom-box h3{font-size:15px;font-weight:700;text-align:center;margin-bottom:18px}
.dim-row{display:flex;gap:12px;margin-bottom:22px}
.dim-field{flex:1;position:relative}
.dim-field input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 40px 11px 12px;font-size:14px;outline:none;background:#FAFAFA}
.dim-field input:focus{border-color:var(--dark);background:#fff}
.dim-field::after{content:"px";position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--gray-l)}

/* ===== 结果页 ===== */
.res-head{padding-top:64px}
.res-head h2{font-size:23px;font-weight:700;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mini-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#FFFFFF;background: var(--dark);border-radius:999px;padding:3px 10px;font-weight:400;white-space:nowrap}
.res-sub{font-size:14px;color:var(--dark);margin-top:12px}
.grid{display:flex;flex-wrap:wrap;gap:22px;margin-top:30px}
.card{width:196px;background:var(--white);border-radius:9px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.10);position:relative}
.thumb{position:relative;height:130px;background:#EEE;overflow:hidden;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .2s,opacity .2s}
.thumb .veil{position:absolute;inset:0;background:rgba(255,255,255,.55);opacity:0;transition:opacity .2s;pointer-events:none}
.thumb .x-btn{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,background .2s;line-height:1;z-index:2}
.thumb .dl-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;background:rgba(166,166,166,.7);color:#fff;font-size:12.5px;padding:7px 14px;border-radius:8px;opacity:0;transition:opacity .2s,background .2s;white-space:nowrap}
.thumb:hover img{filter:contrast(.5)}
.thumb:hover .veil,.thumb:hover .x-btn,.thumb:hover .dl-btn{opacity:1}
.x-btn:hover{background:rgba(166,166,166,.45)}
.dl-btn:hover{background:rgba(0,0,0,.7)}
.card-info{padding:10px 12px 12px}
.card-name{font-size:12.5px;font-weight:700;color:#1A1A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px;font-size:10.5px;color:var(--gray);white-space:nowrap}
.card-meta .accent{color:var(--brand);font-weight:600}
.res-actions{border-top:1px dashed #C9C9C9;margin-top:40px;padding:30px 0 10px;display:flex;align-items:center;justify-content:center;gap:34px}
.zip-btn{display:flex;align-items:center;gap:8px;background:var(--dark);color:#fff;font-size:14px;font-weight:600;padding:11px 24px;border-radius:9px;transition:background .2s}
.zip-btn:hover{background:#2A2A2A}
.txt-btn{color:#9A9A9A;font-size:13.5px;transition:color .2s}
.txt-btn:hover{color:#4A4A4A}
.coffee-line{text-align:center;font-size:13.5px;color:#555;padding:26px 0 8px}
.coffee-line button{color:var(--brand);font-size:13.5px;display:inline-flex;align-items:center;gap:5px;font-weight:500}
.coffee-line button:hover{text-decoration:underline}

/* ===== FAQ ===== */
.faq{max-width:780px;margin:0 auto;padding:70px 40px 90px}
.faq-head{text-align:center;margin-bottom:50px}
.faq-head h2{font-size:20px;font-weight:700;margin-top:18px;color:var(--dark)}
.qa{padding:22px 4px;border-bottom:1px dashed var(--line)}
.qa:last-child{border-bottom:none}
.qa .q{font-size:15px;font-weight:700;margin-bottom:10px}
.qa .a{font-size:14px;color:#555;line-height:1.7}

/* ===== Footer ===== */
footer{background:var(--bg-footer);padding:20px 40px;display:flex;align-items:center;justify-content:center;gap:56px}
.ft-btn{display:flex;align-items:center;gap:7px;color:#6E6E6E;font-size:13.5px;transition:color .2s}
.ft-btn:hover{color:#2A2A2A}
/* 联系/咖啡弹窗 */
.mini-modal{background:var(--white);border-radius:18px;width:320px;max-width:100%;padding:26px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.mini-modal h3{font-size:15px;font-weight:700;margin-bottom:16px}
.mini-modal .email{font-size:15px;color:var(--brand);font-weight:600;margin-bottom:20px;word-break:break-all}
.copy-btn{display:inline-flex;align-items:center;gap:6px;background:var(--dark);color:#fff;font-size:13.5px;padding:9px 24px;border-radius:999px;transition:background .2s}
.copy-btn:hover{background:#2A2A2A}
.qr-row{display:flex;gap:14px;justify-content:center;margin-bottom:20px}
.qr{width:120px}
.qr .ph{width:120px;height:120px;background:#F4F4F4;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#B5B5B5;font-size:11px;margin-bottom:7px}
.qr-img{width:120px;height:120px;object-fit:contain;border-radius:10px;background:#F4F4F4;margin-bottom:7px}
.qr p{font-size:12px;color:#666}

/* ===== Toast ===== */
#toast{position:fixed;left:50%;bottom:52px;transform:translateX(-50%) translateY(16px);background:rgba(20,20,20,.85);color:#fff;font-size:13.5px;padding:11px 22px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:300;max-width:86vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 响应式 ===== */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;gap:40px;padding:64px 0 80px}
  .hero-left h1{font-size:40px}
}
@media (max-width:768px){
  header{padding:0 20px}
  .wrap{padding:0 22px}
  .hero{padding:48px 0 64px}
  .hero-left h1{font-size:32px}
  .drop{min-height:280px;padding:40px 20px}
  .grid{gap:16px}
  .card{width:calc(50% - 8px)}
  .res-actions{flex-wrap:wrap;gap:20px}
  footer{gap:18px;padding:18px 14px;flex-wrap:wrap}
  .hd-btn span{display:none}
}

/* ===== 全局 Loading 遮罩 ===== */
.loading-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column;color:#fff;font-size:16px;font-weight:500;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.loading-mask.on{display:flex}