@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f6f5f1;--surface:#fff;--surface-alt:#edece8;
  --border:#d8d6d0;--border-light:#e8e7e3;
  --text:#1a1a1a;--text-dim:#7a7870;
  --accent:#e8590c;--accent-light:#fff4ef;--accent-glow:rgba(232,89,12,0.15);
  --success:#2b8a3e;--success-bg:#edf7ef;
  --danger:#c92a2a;--danger-bg:#fdf0f0;
}
:root[data-theme="dark"]{
  --bg:#08111e;--surface:#131c30;--surface-alt:#1c2741;
  --border:#1f2e4a;--border-light:#152038;
  --text:#d4dceb;--text-dim:#7d8ba2;
  --accent:#3aaeff;--accent-light:rgba(58,174,255,0.10);--accent-glow:rgba(58,174,255,0.3);
  --success:#3ddca3;--success-bg:rgba(61,220,163,0.12);
  --danger:#ff6b8a;--danger-bg:rgba(255,107,138,0.12);
}
body{font-family:'Zen Kaku Gothic New',sans-serif;background:var(--bg);color:var(--text);align-items:center}
.tool-hero{text-align:center;padding:50px 20px 24px;position:relative}
.tool-hero h1{font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:900;letter-spacing:-0.02em;color:var(--text)}
.tool-hero h1 span{color:var(--accent)}
.tool-hero p{margin-top:10px;color:var(--text-dim);font-size:0.92rem;font-weight:400;line-height:1.7}
.container{width:100%;max-width:720px;padding:0 20px 80px}

.drop-zone{border:2px dashed var(--border);border-radius:14px;padding:48px 30px;text-align:center;cursor:pointer;transition:all .25s;background:var(--surface);position:relative}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:var(--accent-light)}
.drop-zone-icon{font-size:2.8rem;margin-bottom:14px;display:block}
.drop-zone-text{font-size:0.95rem;color:var(--text-dim);line-height:1.8}
.drop-zone-text strong{color:var(--accent);font-weight:700}
.drop-zone-hint{font-size:0.78rem;color:var(--text-dim);margin-top:8px;opacity:0.7}
#fileInput{display:none}

.settings{background:var(--surface);border:1px solid var(--border-light);border-radius:12px;padding:20px 24px;margin-top:16px;display:none;animation:fadeUp .3s ease}
.settings.show{display:block}
.settings-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.settings-label{font-size:0.88rem;font-weight:500;white-space:nowrap}
.quality-slider{flex:1;min-width:120px;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;background:var(--surface-alt);outline:none;cursor:pointer}
.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 2px 8px var(--accent-glow)}
.quality-value{font-size:0.88rem;font-weight:700;color:var(--accent);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}

.convert-btn{display:none;width:100%;margin-top:16px;padding:16px;border:none;border-radius:12px;background:var(--accent);color:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .25s;letter-spacing:0.01em}
.convert-btn.show{display:block;animation:fadeUp .3s ease}
.convert-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--accent-glow)}
.convert-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.file-list{margin-top:16px;display:none;animation:fadeUp .3s ease}
.file-list.show{display:block}
.file-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.file-list-title{font-size:0.85rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em}
.file-count{font-size:0.8rem;color:var(--text-dim);background:var(--surface-alt);padding:3px 10px;border-radius:20px}
.file-items{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.file-items::-webkit-scrollbar{width:5px}
.file-items::-webkit-scrollbar-track{background:transparent}
.file-items::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.file-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border-light);border-radius:8px;padding:10px 14px;font-size:0.82rem;transition:border-color .2s}
.file-item.done{border-color:var(--success);background:var(--success-bg)}
.file-item.error{border-color:var(--danger);background:var(--danger-bg)}
.file-item-thumb{width:40px;height:40px;border-radius:4px;object-fit:cover;background:var(--surface-alt);flex-shrink:0}
.file-item-info{flex:1;min-width:0}
.file-item-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-item-size{color:var(--text-dim);font-size:0.75rem;margin-top:2px}
.file-item-status{font-size:0.75rem;font-weight:700;white-space:nowrap}
.file-item-status.pending{color:var(--text-dim)}
.file-item-status.processing{color:var(--accent)}
.file-item-status.done{color:var(--success)}
.file-item-status.error{color:var(--danger)}

.progress-area{display:none;margin-top:16px;animation:fadeUp .3s ease}
.progress-area.show{display:block}
.progress-bar-bg{width:100%;height:6px;background:var(--surface-alt);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;width:0%;background:var(--accent);border-radius:3px;transition:width .2s}
.progress-text{display:flex;justify-content:space-between;margin-top:8px;font-size:0.82rem;color:var(--text-dim)}

.result{display:none;background:var(--surface);border:1px solid var(--success);border-radius:12px;padding:24px;margin-top:16px;text-align:center;animation:fadeUp .4s ease}
.result.show{display:block}
.result-icon{font-size:2.2rem;margin-bottom:10px}
.result-title{font-size:1.05rem;font-weight:700;color:var(--success);margin-bottom:6px}
.result-summary{font-size:0.88rem;color:var(--text-dim);margin-bottom:18px;line-height:1.6}
.download-all-btn{display:inline-block;padding:13px 36px;border:none;border-radius:10px;background:var(--success);color:#fff;font-family:inherit;font-size:0.95rem;font-weight:700;cursor:pointer;transition:all .25s;text-decoration:none}
.download-all-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(43,138,62,0.2)}
.reset-btn{display:inline-block;margin-top:12px;padding:9px 20px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-dim);font-family:inherit;font-size:0.82rem;cursor:pointer;transition:all .2s}
.reset-btn:hover{border-color:var(--text-dim);color:var(--text)}

.error-msg{display:none;background:var(--danger-bg);border:1px solid var(--danger);border-radius:12px;padding:16px 20px;margin-top:16px;color:var(--danger);font-size:0.88rem;text-align:center}
.error-msg.show{display:block;animation:fadeUp .3s ease}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:36px}
.feature{background:var(--surface);border:1px solid var(--border-light);border-radius:10px;padding:16px 14px;text-align:center;transition:border-color .2s}
.feature:hover{border-color:var(--accent)}
.feature-icon{font-size:1.3rem;margin-bottom:6px;display:block}
.feature-text{font-size:0.75rem;color:var(--text-dim);line-height:1.5}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.tool-hero{padding:36px 16px 18px}.drop-zone{padding:32px 16px}.file-item{padding:8px 10px}}