:root { --canvas:#f4f7f7; --surface:#fff; --surface-soft:#f8fafa; --ink:#142928; --muted:#6c7e7d; --line:#dfe8e7; --brand:#087b78; --brand-dark:#05625f; --brand-soft:#e8f5f4; --success:#168260; --danger:#c84f57; --shadow:0 18px 50px rgba(14,66,64,.09); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--canvas); font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,select { font:inherit; }
.topbar { width:min(940px,calc(100% - 36px)); height:88px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }
.brand-logo { width:46px; height:46px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:0 5px 18px rgba(14,66,64,.08); }
.brand-logo img { width:100%; height:100%; object-fit:cover; transform:scale(1.55); }
.brand strong,.brand small { display:block; }
.brand strong { font-size:.98rem; letter-spacing:-.01em; }
.brand small { margin-top:4px; color:var(--muted); font-size:.72rem; }
.secure-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.8rem; }
.secure-note i { width:7px; height:7px; border-radius:50%; background:#2daf7f; box-shadow:0 0 0 4px #e1f4ed; }
.container { width:min(940px,calc(100% - 36px)); margin:18px auto 72px; }
.workspace { padding:30px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--shadow); }
.workspace-head { margin-bottom:22px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.workspace-head h1 { margin:6px 0 0; font-size:clamp(1.45rem,3vw,1.85rem); line-height:1.2; letter-spacing:-.025em; }
.section-label { color:var(--brand); font-size:.68rem; font-weight:700; letter-spacing:.12em; }
.file-limit { color:var(--muted); font-size:.76rem; }
.upload-zone { padding:44px 24px; border:1.5px dashed #a9c6c4; border-radius:18px; background:linear-gradient(180deg,#fbfdfd,#f7fbfa); display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.upload-zone:hover,.upload-zone.dragover { border-color:var(--brand); background:var(--brand-soft); transform:translateY(-1px); }
.upload-icon { width:52px; height:52px; margin-bottom:15px; display:grid; place-items:center; border-radius:15px; color:white; background:var(--brand); box-shadow:0 8px 20px rgba(8,123,120,.2); font-size:1.55rem; font-weight:600; }
.upload-zone>strong { font-size:1rem; }
.upload-zone>span:not(.upload-icon) { margin-top:8px; color:var(--muted); font-size:.82rem; }
.choose-btn { margin-top:18px; padding:10px 18px; border:1px solid #b9cfcd; border-radius:10px; color:var(--brand-dark); background:white; font-size:.84rem; font-weight:600; cursor:pointer; transition:.2s; }
.choose-btn:hover { border-color:var(--brand); background:var(--brand-soft); }
.language-picker { margin-top:20px; padding:17px; display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:end; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); }
.field-group label { display:block; margin-bottom:8px; color:var(--muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
select { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:white; outline:none; cursor:pointer; }
select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.swap-btn { width:42px; height:42px; border:1px solid #b9cfcd; border-radius:50%; color:var(--brand); background:white; cursor:pointer; font-size:1.1rem; transition:.2s; }
.swap-btn:hover { border-color:var(--brand); background:var(--brand-soft); transform:rotate(180deg); }
.queue-card { margin-top:20px; overflow:hidden; border:1px solid var(--line); border-radius:15px; }
.empty-state { padding:23px; text-align:center; color:var(--muted); font-size:.82rem; }
.queue-head { padding:14px 17px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.queue-head strong,.queue-head span { display:block; }
.queue-head strong { font-size:.86rem; }
.queue-head span { margin-top:3px; color:var(--muted); font-size:.72rem; }
.text-btn { border:0; color:var(--danger); background:transparent; cursor:pointer; font-size:.76rem; }
.text-btn:disabled { opacity:.45; }
.overall-progress { padding:13px 17px; border-bottom:1px solid var(--line); background:var(--surface-soft); }
.overall-progress>div:first-child { margin-bottom:8px; display:flex; justify-content:space-between; color:var(--muted); font-size:.72rem; }
.overall-progress strong { color:var(--brand); }
.progress-track { height:5px; overflow:hidden; border-radius:999px; background:#e4eceb; }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--brand); transition:width .25s ease; }
.file-row { min-width:0; padding:14px 17px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:13px; align-items:center; }
.file-row+.file-row { border-top:1px solid var(--line); }
.file-badge { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:var(--brand); background:var(--brand-soft); font-size:.58rem; font-weight:700; }
.file-meta { margin-bottom:8px; display:flex; justify-content:space-between; gap:12px; }
.file-meta strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; }
.file-meta span,.file-main small { flex:none; color:var(--muted); font-size:.69rem; }
.file-main small { display:block; margin-top:6px; }
.file-row.done .progress-track span { background:var(--success); }
.file-row.error .progress-track span { background:var(--danger); }
.file-row.error .file-main small { color:var(--danger); }
.remove-btn,.download-btn { border:0; cursor:pointer; }
.remove-btn { width:30px; height:30px; border-radius:8px; color:var(--muted); background:#edf2f1; font-size:1.15rem; }
.download-btn { padding:8px 11px; border-radius:8px; color:var(--success); background:#e7f5f0; font-size:.72rem; font-weight:600; }
.primary-btn { width:100%; margin-top:20px; padding:14px 18px; border:0; border-radius:11px; color:white; background:var(--brand); box-shadow:0 8px 20px rgba(8,123,120,.16); font-weight:700; cursor:pointer; transition:.2s; }
.primary-btn:not(:disabled):hover { background:var(--brand-dark); transform:translateY(-1px); }
.primary-btn:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }
.form-note { margin:10px 0 0; color:var(--muted); text-align:center; font-size:.72rem; }
.toast { position:fixed; right:24px; bottom:24px; max-width:360px; padding:15px 18px; display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:var(--shadow); z-index:10; }
.toast span { color:var(--muted); font-size:.8rem; }
.hidden { display:none!important; }
@media (max-width:640px) {
  .topbar { height:78px; }
  .secure-note,.file-limit { display:none; }
  .container { margin-top:10px; }
  .workspace { padding:18px; border-radius:18px; }
  .workspace-head { margin-bottom:17px; }
  .language-picker { grid-template-columns:1fr auto; }
  .language-picker .field-group:last-child { grid-column:1/-1; }
  .swap-btn { grid-column:2; grid-row:1; }
  .upload-zone { padding:34px 14px; }
  .file-row { grid-template-columns:38px minmax(0,1fr) auto; padding:12px; gap:10px; }
  .file-badge { width:38px; height:38px; }
  .file-meta span { display:none; }
  .toast { left:18px; right:18px; bottom:18px; }
}