/* Modal */
.modal-overlay{
  position:fixed; inset:0; background: rgba(3,8,20,.62); backdrop-filter: blur(8px);
  opacity:0; pointer-events:none; transition:.25s; z-index:50;
}
.modal-overlay.open{opacity:1; pointer-events:auto}
.modal{
  position:fixed; inset:0; z-index:51; display:grid; place-items:center; padding:16px;
  opacity:0; pointer-events:none; transition:.25s; overflow:auto;
}
.modal.open{opacity:1; pointer-events:auto}
.modal-panel{
  width:100%; max-width:720px; max-height:90vh; overflow:auto;
  background: linear-gradient(180deg, #0f1e3a, #0c1730);
  border:1px solid #26407a; border-radius:20px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: translateY(12px) scale(.98); transition:.25s;
}
.modal.open .modal-panel{transform: translateY(0) scale(1)}
.modal-head{
  position:sticky; top:0; z-index:2;
  background: linear-gradient(180deg, #0f1e3a, #0c1730);
  padding:18px 18px 0; border-radius:20px 20px 0 0;
}
.modal-head-top{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border)}
.modal-head h2{margin:0; font-size:16px; display:flex; align-items:center; gap:8px}
.modal-body{padding:16px 18px 18px; display:grid; gap:18px}
.modal-foot{padding:14px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:0; background: linear-gradient(180deg, #0c1730, #0f1e3a)}

/* Provider cards */
.provider-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.provider-card{
  padding:14px; border-radius:14px; background: var(--bg-soft); border:1px solid var(--border);
  cursor:pointer; transition:.2s; position:relative;
}
.provider-card.active{border-color: var(--primary); background: linear-gradient(180deg, rgba(91,124,255,.18), rgba(91,124,255,.06)); box-shadow: 0 8px 20px rgba(91,124,255,.18)}
.provider-card input{position:absolute; opacity:0; pointer-events:none}
.provider-card b{display:block; font-size:13px}
.provider-card span{font-size:11px; color:var(--text-muted)}
.provider-card .check{
  position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:999px; border:1px solid var(--border);
  display:grid; place-items:center; font-size:11px; background:#0f1c3a;
}
.provider-card.active .check{background: var(--primary); color:white; border-color: var(--primary)}

/* Key inputs */
.key-row{display:grid; gap:6px}
.key-row label{font-size:11px; color:var(--text-muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.key-input-wrap{display:flex; gap:8px; align-items:center; background: var(--bg-soft); border:1px solid var(--border); border-radius:12px; padding:4px}
.key-input-wrap input{
  flex:1; background:transparent; border:0; outline:0; color:var(--text); font-size:13px; padding:8px 10px;
}
.key-input-wrap .icon-btn{width:32px; height:32px; border-radius:9px; font-size:14px; flex-shrink:0}

/* Selects */
.field{display:grid; gap:6px}
.field label{font-size:12px; font-weight:600; color:var(--text-muted)}
.select, .text-input{
  background: var(--bg-soft); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:12px; font-size:13px; outline:0; width:100%;
}
.select:focus, .text-input:focus{border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,124,255,.18)}

/* Language */
.lang-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.lang-pill{
  padding:6px 10px; border-radius:999px; background: var(--bg-soft); border:1px solid var(--border);
  font-size:12px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:.15s;
}
.lang-pill.active{border-color: var(--primary); background: rgba(91,124,255,.18); color:white}
.lang-pill:hover{transform:translateY(-1px)}
.pill-remove{
  width:18px; height:18px; border-radius:999px; border:0; background:#1e2e5a; color:var(--text); cursor:pointer;
  display:grid; place-items:center; font-size:12px; line-height:1;
}
.add-lang-row{display:flex; gap:8px}
.add-lang-row .text-input{flex:1}

/* Toggle */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; background: var(--bg-soft); border:1px solid var(--border); border-radius:14px}
.toggle{display:flex; align-items:center; gap:10px}
.switch{
  width:42px; height:24px; border-radius:999px; background:#1e2e5a; border:1px solid var(--border);
  position:relative; cursor:pointer; transition:.2s; flex-shrink:0;
}
.switch input{opacity:0; position:absolute; inset:0; cursor:pointer}
.switch-thumb{
  position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:999px; background:white; transition:.2s; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.switch:has(input:checked){background: var(--primary)}
.switch:has(input:checked) .switch-thumb{transform:translateX(18px)}

/* Structure radio */
.radio-group{display:flex; gap:8px}
.radio-card{
  flex:1; padding:10px; border-radius:12px; background: var(--bg-soft); border:1px solid var(--border);
  cursor:pointer; text-align:center; font-size:12px; transition:.2s;
}
.radio-card.active{border-color: var(--primary); background: rgba(91,124,255,.18)}
.radio-card input{position:absolute; opacity:0; pointer-events:none}

/* Refinement */
.ref-track{
  display:grid; gap:10px;
}
@media(min-width:620px){ .ref-track{grid-template-columns:1fr 1fr} }
.ref-card{
  text-align:left; padding:12px; border-radius:14px; background: var(--bg-soft); border:1px solid var(--border);
  cursor:pointer; transition:.2s;
}
.ref-card.active{border-color: var(--primary); background: linear-gradient(180deg, rgba(91,124,255,.18), rgba(91,124,255,.06)); box-shadow: 0 8px 20px rgba(91,124,255,.12)}
.ref-title{font-size:12px; font-weight:700; margin-bottom:4px}
.ref-desc{font-size:11px; color:var(--text-muted); line-height:1.4}

/* Global Loader — Smart Modern FFmpeg Loading Screen */
.global-loader{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px;
  transition: opacity .6s ease, visibility .6s;
}
.global-loader.hidden{opacity:0; visibility:hidden; pointer-events:none}
.loader-backdrop{
  position:absolute; inset:0; background: radial-gradient(1200px 600px at 80% -10%, rgba(91,124,255,.22), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(0,229,204,.16), transparent 60%), rgba(7,13,28,.88);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.loader-mesh{
  position:absolute; inset:0; opacity:.35; background:
    radial-gradient(600px 300px at 30% 20%, rgba(91,124,255,.35), transparent 70%),
    radial-gradient(500px 400px at 80% 70%, rgba(123,91,255,.28), transparent 70%),
    radial-gradient(700px 500px at 50% 100%, rgba(0,229,204,.12), transparent 70%);
  animation: meshMove 8s ease-in-out infinite alternate;
}
@keyframes meshMove{ 0%{transform:scale(1)} 100%{transform:scale(1.05)} }
.loader-card{
  position:relative; width:100%; max-width:440px; padding:28px 22px 22px; text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), linear-gradient(180deg, #0f1e3a, #0c1730);
  border:1px solid rgba(91,124,255,.22); border-radius:22px; box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(91,124,255,.08) inset;
  backdrop-filter: blur(16px); transform: translateY(0) scale(1); animation: cardIn .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn{ from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }
.loader-logo-wrap{position:relative; width:72px; height:72px; margin:0 auto 14px; display:grid; place-items:center}
.loader-ring, .loader-ring2{
  position:absolute; inset:0; border-radius:50%; border:2px solid transparent;
}
.loader-ring{border-top-color: var(--primary); border-right-color: rgba(91,124,255,.35); animation: spin 1.1s linear infinite}
.loader-ring2{inset:8px; border-top-color: var(--accent); border-left-color: rgba(0,229,204,.3); animation: spin 1.7s linear reverse infinite; opacity:.8}
.loader-icon{
  width:42px; height:42px; border-radius:50%; background: linear-gradient(135deg, var(--primary), var(--primary-2)); display:grid; place-items:center; font-size:18px; color:white; box-shadow: 0 6px 18px rgba(91,124,255,.4); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
.loader-title{margin:4px 0 4px; font-size:20px; font-weight:800; letter-spacing:-.02em; background: linear-gradient(90deg, #fff, #a8b6ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.loader-sub{margin:0 0 18px; color:var(--text-muted); font-size:13px}
.loader-bar-wrap{display:flex; align-items:center; gap:10px; margin:0 0 8px}
.loader-bar{flex:1; height:8px; background:#0a1430; border-radius:999px; overflow:hidden; position:relative; border:1px solid rgba(91,124,255,.18)}
.loader-fill{height:100%; width:0%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius:999px; transition: width .3s ease; box-shadow: 0 0 12px rgba(91,124,255,.5)}
.loader-shimmer{position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.loader-percent{font-size:12px; font-weight:700; color:var(--primary); min-width:36px; text-align:right}
.loader-status{margin:2px 0 2px; font-size:13px; font-weight:600; color:var(--text); min-height:18px}
.loader-detail{margin:0 0 12px; font-size:11px; color:var(--text-muted)}
.loader-tips{display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 10px; background: rgba(91,124,255,.08); border:1px solid rgba(91,124,255,.14); border-radius:12px; font-size:11px; color:var(--text-muted); margin-bottom:10px}
.loader-tip-icon{font-size:12px}
.loader-dots{display:flex; justify-content:center; gap:6px; margin-top:6px}
.loader-dots span{width:6px; height:6px; border-radius:50%; background: var(--primary); opacity:.35; animation: dotBounce 1.2s infinite}
.loader-dots span:nth-child(2){animation-delay:.15s} .loader-dots span:nth-child(3){animation-delay:.3s}
@keyframes dotBounce{0%,80%,100%{transform:translateY(0); opacity:.35} 40%{transform:translateY(-6px); opacity:1} }
.loader-actions{margin-top:10px}
/* Process Overlay — Beautiful chunk processing stage */
.process-overlay{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px;
  transition: opacity .5s ease, visibility .5s; overflow:auto;
}
.process-overlay.hidden{opacity:0; visibility:hidden; pointer-events:none}
.process-backdrop{
  position:absolute; inset:0; background: rgba(5,10,24,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.process-card{
  position:relative; width:100%; max-width:640px; max-height:90vh; overflow:auto;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), linear-gradient(180deg, #0f1e3a, #0c1730);
  border:1px solid rgba(91,124,255,.22); border-radius:20px; box-shadow: 0 24px 64px rgba(0,0,0,.5);
  animation: cardIn .45s cubic-bezier(.2,.8,.2,1);
}
.process-header{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px 12px; background: linear-gradient(180deg, #0f1e3a, #0f1e3aaa); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border); border-radius:20px 20px 0 0;
}
.process-header h3{margin:0; font-size:14px; font-weight:800; display:flex; align-items:center; gap:8px}
.process-header p{margin:2px 0 0; font-size:11px; color:var(--text-muted)}
.process-header-actions{display:flex; gap:8px; align-items:center}
.process-stages{
  display:flex; align-items:center; justify-content:space-between; gap:6px; padding:14px 18px 10px;
}
.process-stage{flex:1; text-align:center; position:relative}
.process-stage-dot{
  width:28px; height:28px; border-radius:50%; margin:0 auto 6px; display:grid; place-items:center;
  font-size:12px; font-weight:700; border:1px solid var(--border); background: var(--bg-soft); color:var(--text-muted);
  transition:.25s;
}
.process-stage.active .process-stage-dot{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:white; border-color: transparent; box-shadow: 0 4px 14px rgba(91,124,255,.4); animation: pulse 1.5s infinite}
.process-stage.done .process-stage-dot{ background: var(--success); color:white; border-color: transparent}
.process-stage label{font-size:10px; font-weight:600; color:var(--text-muted); letter-spacing:.03em; text-transform:uppercase}
.process-stage.active label{color:var(--text)}
.process-stage-line{flex:0 0 24px; height:2px; background: var(--border); border-radius:999px; margin-bottom:18px; position:relative; overflow:hidden}
.process-stage-line.fill{ background: linear-gradient(90deg, var(--primary), var(--accent));}
.process-progress-wrap{padding:0 18px 12px; display:grid; gap:8px}
.process-progress-top{display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600}
.process-progress-top span:last-child{color:var(--primary)}
.process-progress-bar{height:8px; background:#0a1430; border-radius:999px; overflow:hidden; border:1px solid rgba(91,124,255,.18); position:relative}
.process-progress-fill{height:100%; width:0%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .4s ease; box-shadow: 0 0 10px rgba(91,124,255,.45)}
.process-progress-bar .loader-shimmer{position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-100%); animation: shimmer 1.3s infinite}
.process-meta{ display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--text-muted); padding:0 18px 4px }
.process-equalizer{display:flex; align-items:end; justify-content:center; gap:3px; height:18px; margin:4px 0}
.process-equalizer span{width:3px; background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius:999px; animation: eq 0.9s ease-in-out infinite}
.process-equalizer span:nth-child(2){animation-delay:.1s; height:12px} .process-equalizer span:nth-child(3){animation-delay:.2s; height:16px} .process-equalizer span:nth-child(4){animation-delay:.35s; height:10px} .process-equalizer span:nth-child(5){animation-delay:.05s; height:14px}
@keyframes eq{0%,100%{height:6px} 50%{height:16px}}
.process-grid{
  display:grid; gap:8px; padding:10px 18px 14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.proc-chunk{
  padding:10px 10px 8px; border-radius:14px; background: var(--bg-soft); border:1px solid var(--border);
  display:grid; gap:6px; transition:.25s; position:relative; overflow:hidden;
}
  .proc-chunk.pending{opacity:.85}
  .proc-chunk.waiting{ border-color: rgba(255,176,46,.32); background: rgba(255,176,46,.05); }
.proc-chunk.processing{ border-color: rgba(91,124,255,.45); background: linear-gradient(180deg, rgba(91,124,255,.14), rgba(91,124,255,.04)); box-shadow: 0 4px 14px rgba(91,124,255,.18); transform: translateY(-1px)}
.proc-chunk.done{ border-color: rgba(0,211,138,.35); background: linear-gradient(180deg, rgba(0,211,138,.14), rgba(0,211,138,.03)); }
.proc-chunk.retrying{ border-color: rgba(255,176,46,.42); background: rgba(255,176,46,.08)}
.proc-chunk.error{ border-color: rgba(255,84,112,.45); background: rgba(255,84,112,.08)}
.proc-chunk-head{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:12px}
.proc-chunk-num{font-size:11px; background:#0f1c3a; border:1px solid var(--border); padding:3px 7px; border-radius:999px}
.proc-chunk-icon{width:22px; height:22px; border-radius:50%; background:#0a1430; border:1px solid var(--border); display:grid; place-items:center; font-size:11px}
.proc-chunk.processing .proc-chunk-icon{ border-color: rgba(91,124,255,.4); color: var(--primary)}
.proc-chunk.done .proc-chunk-icon{ background: var(--success); color:white; border-color: transparent}
.proc-chunk-label{font-size:11px; color:var(--text-muted); font-weight:600}
.proc-chunk.done .proc-chunk-label{color: var(--success)}
.proc-mini-bar{height:4px; background:#0a1430; border-radius:999px; overflow:hidden}
.proc-mini-fill{height:100%; width:0%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .4s ease}
.proc-chunk.done .proc-mini-fill{ background: var(--success)}
.proc-chunk.done-pop{ animation: pop .5s ease }
@keyframes pop{0%{transform:scale(.97)} 50%{transform:scale(1.02)} 100%{transform:scale(1)}}
.proc-spinner{width:12px; height:12px; border:2px solid rgba(255,255,255,.2); border-top-color: var(--primary); border-radius:50%; display:inline-block; animation: spin .8s linear infinite}
.process-footer{padding:12px 18px 16px; border-top:1px solid var(--border); display:grid; gap:8px; background: linear-gradient(180deg, rgba(255,255,255,.01), transparent)}
.process-tip{display:flex; gap:8px; align-items:center; padding:8px 10px; background: rgba(91,124,255,.08); border:1px solid rgba(91,124,255,.14); border-radius:12px; font-size:11px; color:var(--text-muted)}
.queue-file-name{font-size:14px;font-weight:700;color:var(--text);overflow-wrap:anywhere;margin-bottom:6px}
.queue-card{border-color:rgba(0,211,138,.28);background:linear-gradient(135deg,rgba(0,211,138,.08),rgba(91,124,255,.04))}
.queue-actions{display:grid;gap:8px;margin-top:12px}
.queue-delete{color:#ff9aaa;border-color:rgba(255,84,112,.3)}
.queue-delete:hover{color:#ffd7df;border-color:rgba(255,84,112,.65);background:rgba(255,84,112,.1)}
.process-tip #processTip{ transition: opacity .25s}
@media (max-width: 560px){
  .process-card{max-width: 96vw; margin: 0 auto}
  .process-grid{grid-template-columns: repeat(2, 1fr)}
  .process-stages{gap:2px; padding:10px 12px}
  .process-stage-dot{width:24px; height:24px; font-size:11px}
  .process-stage label{font-size:9px}
  .process-stage-line{flex:0 0 14px}
}

/* WASM specific: when hidden, allow body scroll */
body.loading{overflow:hidden}

/* Toast */
.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(90px);
  background:#0f1e3a; border:1px solid var(--border); color:var(--text);
  padding:10px 14px; border-radius:999px; font-size:13px; box-shadow: var(--shadow);
  opacity:0; transition:.35s; z-index:60; display:flex; align-items:center; gap:8px; max-width:90vw;
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}