*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#2563eb;--primary-h:#1d4ed8;--surface:#f8fafc;--text:#1e293b;--t2:#64748b;--border:#e2e8f0;--green:#10b981;--red:#ef4444;--wx:#07c160}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#fff;color:var(--text);line-height:1.6}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:60px}
.nav-brand .brand-link{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:var(--primary)}
.brand-icon{font-size:24px}
.nav-menu{display:flex;align-items:center;gap:4px}
.nav-link{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:14px;color:var(--text);background:none;border:none;cursor:pointer;transition:.2s}
.nav-link:hover{background:var(--surface);color:var(--primary)}
.nav-link.active{color:var(--primary);font-weight:600;background:#eff6ff}
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.1);min-width:480px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;margin-top:6px}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer}
.nav-dropdown-item:hover{background:var(--surface);color:var(--primary)}
.arrow{font-size:11px}
.mobile-btn{display:none;background:none;border:none;font-size:24px;cursor:pointer}

.hero-blue{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;padding:70px 20px;text-align:center}
.hero-inner{max-width:800px;margin:0 auto}
.hero-blue h1{font-size:42px;font-weight:800;margin-bottom:16px}
.hero-sub{font-size:16px;opacity:.9;margin-bottom:30px;line-height:1.8}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:60px}
.btn-white{background:#fff;color:var(--primary);padding:14px 36px;border-radius:8px;font-weight:600;display:inline-block}
.btn-outline{background:transparent;color:#fff;padding:14px 36px;border-radius:8px;font-weight:600;border:2px solid rgba(255,255,255,.5);display:inline-block}
.stats{display:flex;justify-content:center;gap:80px;flex-wrap:wrap}
.stat{text-align:center}
.stat b{display:block;font-size:40px;font-weight:800}
.stat span{font-size:13px;opacity:.85}

.features{padding:60px 0;background:var(--surface)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:768px){.feature-grid{grid-template-columns:1fr}}
.feature{background:#fff;padding:28px;border-radius:12px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.f-icon{font-size:36px;display:block;margin-bottom:12px}
.feature h4{font-size:16px;margin-bottom:8px}
.feature p{font-size:13px;color:var(--t2)}

.tools{padding:60px 0}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{font-size:28px;font-weight:800;margin-bottom:8px}
.section-head p{color:var(--t2);font-size:14px}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tool-grid{grid-template-columns:1fr}}
.tool-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px;cursor:pointer;transition:.2s}
.tool-card:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(37,99,235,.1)}
.tool-card .t-icon{font-size:32px;margin-bottom:12px}
.tool-card h3{font-size:15px;margin-bottom:6px}
.tool-card p{font-size:12px;color:var(--t2)}

.workspace{padding:40px 0 60px}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:30px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.upload-zone{border:2px dashed #cbd5e1;border-radius:12px;padding:50px 20px;text-align:center;cursor:pointer;background:var(--surface);transition:.2s}
.upload-zone:hover,.upload-zone.drag{border-color:var(--primary);background:#eff6ff}
.upload-icon{font-size:44px;margin-bottom:10px}
.upload-zone h3{font-size:16px;margin-bottom:6px}
.upload-zone p{font-size:13px;color:var(--t2)}
.file-list{margin-top:14px}
.file-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-size:13px}
.file-item .info{flex:1}
.file-item .size{font-size:11px;color:var(--t2)}
.options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:600px){.options{grid-template-columns:1fr}}
.opt-group label{font-size:13px;color:var(--t2);margin-bottom:6px;display:block}
.opt-group select,.opt-group input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px}
.opt-group input[type=range]{padding:0}
.opt-group .val{float:right;color:var(--wx);font-weight:600}
.action-bar{text-align:center;margin-top:24px}
.btn-primary{background:var(--primary);color:#fff;border:none;padding:13px 48px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:.2s}
.btn-primary:hover{background:var(--primary-h)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.hint{margin-top:10px;font-size:12px;color:var(--t2)}
.hint b{color:var(--wx)}
.result-box{margin-top:20px}
.result-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px}
.result-item .info{flex:1}
.result-item .stats{font-size:12px;color:var(--t2);margin-top:2px}
.result-item .save{color:var(--green);font-weight:600}
.btn-dl{background:var(--wx);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:12px;text-decoration:none}
.meta-box{font-size:12px;background:var(--surface);padding:10px;border-radius:6px;margin-top:4px}
.color-row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.color-swatch{width:36px;height:36px;border-radius:6px;border:1px solid var(--border)}
.mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
.mask.show{display:flex}
.pay-card{background:#fff;border-radius:14px;width:100%;max-width:380px;overflow:hidden;animation:pop .2s}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.pay-hd{background:linear-gradient(135deg,#07c160,#06ad56);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.pay-x{background:rgba(255,255,255,.25);color:#fff;border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:16px}
.pay-bd{padding:24px;text-align:center}
.countdown{background:#fef2f2;color:var(--red);padding:6px;border-radius:6px;font-size:13px;margin-bottom:14px}
.price-row{margin-bottom:8px}
.price-now{font-size:40px;font-weight:800;color:var(--red)}
.price-old{font-size:14px;color:#999;text-decoration:line-through;margin-left:8px}
.flash{display:block;background:#fff7ed;color:#f97316;padding:6px 12px;border-radius:20px;font-size:12px;margin:0 auto 14px;width:max-content}
.qr-wrap{display:inline-block;padding:10px;border:1px solid var(--border);border-radius:10px}
.qr-wrap img{width:200px;height:200px;display:block}
.qr-tip{margin-top:12px;font-size:13px}
.pay-ok{margin-top:12px;padding:10px;border-radius:8px;background:#f0fdf4;color:var(--green);font-size:14px;display:none}
.pay-ok.show{display:block}
.spinner{width:28px;height:28px;border:3px solid #e2e8f0;border-top-color:var(--wx);border-radius:50%;margin:14px auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sec{display:flex;justify-content:center;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--t2)}
footer{text-align:center;padding:30px;color:var(--t2);font-size:12px;border-top:1px solid var(--border);margin-top:40px}
@media(max-width:768px){
.hero-blue h1{font-size:26px}
.stat b{font-size:26px}
.stats{gap:30px}
.nav-menu{display:none}
.nav-menu.open{display:flex;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;padding:10px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.mobile-btn{display:block}
.nav-dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;min-width:0;grid-template-columns:1fr;display:none}
.nav-dropdown.open .nav-dropdown-menu{display:grid}
}
/* 新增：预览缩略图 */
.preview-strip{display:none;flex-wrap:wrap;gap:10px;padding:12px 0}
.preview-thumb{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
/* 新增：前后对比 */
.compare{display:flex;gap:10px;margin:10px 0}
.cmp-col{flex:1;text-align:center}
.cmp-label{font-size:12px;color:var(--t2);margin-bottom:4px}
.cmp-img{width:100%;max-height:200px;object-fit:contain;border:1px solid var(--border);border-radius:6px}
.cmp-img.placeholder{height:120px;display:flex;align-items:center;justify-content:center;color:var(--t2)}
/* 新增：重付按钮 */
.btn-repay{display:block;margin:10px auto 0;padding:8px 20px;background:#fff;color:var(--primary);border:1px solid var(--primary);border-radius:20px;cursor:pointer;font-size:13px}
.btn-repay:hover{background:#eff6ff}
/* footer */
footer{background:#f8fafc;border-top:1px solid var(--border);padding:30px 20px;text-align:center;color:var(--t2);font-size:13px;margin-top:40px}
.footer-links{margin:8px 0}
.footer-links a{color:var(--primary);margin:0 8px}
.icp{font-size:12px;color:#94a3b8;margin-top:8px}
/* 移动端 */
@media(max-width:768px){
  .nav-menu{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;padding:10px;border-bottom:1px solid var(--border);box-shadow:0 10px 20px rgba(0,0,0,.08)}
  .nav-menu.open{display:flex}
  .mobile-btn{display:block}
  .nav-dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;grid-template-columns:1fr;margin-top:0;box-shadow:none;border:none;display:none}
  .nav-dropdown:hover .nav-dropdown-menu{display:grid}
  .tool-grid{grid-template-columns:repeat(2,1fr)!important}
  .hero-btns{flex-direction:column;align-items:center}
  .stats{flex-wrap:wrap}
  .options{grid-template-columns:1fr!important}
  .compare{flex-direction:column}
  .pay-card{margin:10px;width:calc(100% - 20px)!important;max-width:none!important}
}

/* 暗色模式 */
.dark body{background:#0f172a;color:#e2e8f0}
.dark .header{background:#1e293b;border-color:#334155}
.dark .nav-link{color:#e2e8f0}
.dark .nav-link:hover{background:#334155}
.dark .tool-card{background:#1e293b;border-color:#334155}
.dark .card{background:#1e293b}
.dark .feature{background:#1e293b}
.dark .upload-zone{background:#1e293b;border-color:#334155}
.dark .result-box{background:#1e293b}
.dark .pay-card{background:#1e293b}
.dark .option input,.dark .option select,.dark .opt-group input,.dark .opt-group select{background:#0f172a;color:#e2e8f0;border-color:#475569}


.chip-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{padding:8px 16px;border:1.5px solid #e2e8f0;border-radius:20px;background:#fff;font-size:14px;color:#475569;cursor:pointer;transition:all .2s}
.chip:hover{border-color:#2563eb;color:#2563eb}
.chip.active{background:#2563eb;color:#fff;border-color:#2563eb}
/* ===== 选项区域美化 ===== */
.options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.opt-group{display:flex;flex-direction:column;gap:8px}
.opt-group>label{font-size:14px;color:#334155;font-weight:500}
.opt-group input[type=number],.opt-group input[type=text]{padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;outline:none;transition:border-color .2s}
.opt-group input[type=number]:focus,.opt-group input[type=text]:focus{border-color:#2563eb}
.opt-group input[type=color]{width:100%;height:42px;border:1.5px solid #e2e8f0;border-radius:10px;cursor:pointer;padding:4px}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 18px !important;border:1.5px solid #e2e8f0 !important;border-radius:24px !important;background:#f8fafc !important;font-size:14px !important;color:#475569 !important;cursor:pointer !important;transition:all .2s !important;font-weight:500 !important;display:inline-block !important;margin:0 !important}
.chip:hover{border-color:#2563eb;color:#2563eb;background:#eff6ff}
.chip.active{background:#2563eb !important;color:#fff !important;border-color:#2563eb !important;box-shadow:0 4px 12px rgba(37,99,235,.4) !important;font-weight:600 !important}
input[type=range]{width:100%;height:6px;-webkit-appearance:none;background:linear-gradient(to right,#2563eb var(--val,50%),#e2e8f0 var(--val,50%));border-radius:3px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#2563eb;cursor:pointer;box-shadow:0 2px 6px rgba(37,99,235,.4);border:3px solid #fff}
.val{color:#2563eb;font-weight:600;font-size:13px}
@media(max-width:768px){.options{grid-template-columns:1fr}}