/* Colors come ONLY from the --c-* tokens of config.css (themes follow the gear). */
*{box-sizing:border-box}
html{min-height:100%;background:var(--c-bg);background-image:var(--c-grad,none);background-attachment:fixed}
body{margin:0;min-height:100vh;color:var(--c-text);font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;padding-bottom:44px}
.top{padding:12px 64px 4px 16px}
.top h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.2px}
.tabs{display:flex;gap:4px;padding:6px 16px 0;overflow-x:auto;scrollbar-width:thin}
.tabs button{flex:0 0 auto;background:var(--c-surface);color:var(--c-muted);border:1px solid var(--c-border);border-bottom:none;border-radius:8px 8px 0 0;padding:8px 14px;font:inherit;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--c-text)}
.tabs button[aria-selected="true"]{color:var(--c-text);border-color:var(--c-accent);box-shadow:inset 0 3px 0 var(--c-accent);font-weight:600}
main{padding:0 16px}
.panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:0 10px 10px 10px;padding:16px;max-width:1000px}
.panel[hidden]{display:none}
.intro{margin:0 0 12px;color:var(--c-muted)}
.hint{color:var(--c-muted);margin:8px 0 0;font-size:13px}
.lbl{display:block;margin:12px 0 4px;color:var(--c-muted);font-size:13px}

.dz{border:2px dashed var(--c-accent);border-radius:12px;padding:20px 12px;text-align:center;cursor:pointer;transition:background .15s,transform .15s;outline:none}
.dz b{display:block;font-size:16px}
.dz small{display:block;color:var(--c-muted);margin-top:4px;word-break:break-word}
.dz:hover,.dz:focus-visible{background:color-mix(in srgb,var(--c-accent) 10%,transparent)}
.dz.over{background:color-mix(in srgb,var(--c-accent) 22%,transparent);transform:scale(1.01)}
.dz.multi{padding:16px 12px}

.chip{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;border:1px solid var(--c-border);border-radius:8px;background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
.chip[hidden]{display:none}
.chip .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .sz{color:var(--c-muted);font-size:12px}
.chip .tag{font-size:11px;border:1px solid var(--c-accent);color:var(--c-accent);border-radius:10px;padding:0 6px}

.row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:12px}
.row label{display:flex;gap:6px;align-items:center}
.params{border:1px solid var(--c-border);border-radius:10px;margin:12px 0 0;padding:8px 12px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 16px}
.params legend{color:var(--c-muted);padding:0 6px;font-size:13px}
.params label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--c-muted)}
input,select{font:inherit;color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border);border-radius:6px;padding:6px 8px;min-width:0}
input[type=number]{width:100%}
input:focus,select:focus{outline:2px solid var(--c-accent);outline-offset:1px}
.btn{font:inherit;cursor:pointer;color:var(--c-text);background:transparent;border:1px solid var(--c-border);border-radius:8px;padding:7px 14px}
.btn:hover{border-color:var(--c-accent)}
.btn.go{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-bg);font-weight:700}
.btn:disabled{opacity:.5;cursor:not-allowed}
a.btn{text-decoration:none;display:inline-block}
.badge{color:var(--c-muted);font-size:13px;margin-left:auto}

.prog{position:relative;height:22px;margin-top:14px;border:1px solid var(--c-border);border-radius:11px;overflow:hidden;background:var(--c-bg)}
.prog .bar{height:100%;width:0;background:var(--c-accent);transition:width .25s}
.prog.busy .bar{background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%);background-size:28px 28px;animation:mv 1s linear infinite}
@keyframes mv{to{background-position:28px 0}}
.prog .ptxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;mix-blend-mode:normal;color:var(--c-text);text-shadow:0 0 3px var(--c-bg),0 0 3px var(--c-bg)}
.prog.err .bar{background:#e5484d}

.log{margin:0;min-height:90px;max-height:300px;overflow:auto;background:var(--c-bg);border:1px solid var(--c-border);border-radius:8px;padding:8px 10px;font:12.5px/1.45 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.results{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.results .res{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:1px solid var(--c-border);border-radius:8px;padding:6px 10px}
.results .res .nm{flex:1;min-width:140px;overflow:hidden;text-overflow:ellipsis}
.results .res .sz{color:var(--c-muted);font-size:12px}
.results .msg{color:var(--c-muted)}
.results .msg.err{color:#ff7b80}

.queue{list-style:none;margin:10px 0 0;padding:0;max-height:260px;overflow:auto;border:1px solid var(--c-border);border-radius:8px;background:var(--c-bg)}
.queue:empty{display:none}
.queue li{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid var(--c-border)}
.queue li:last-child{border-bottom:none}
.queue .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue .sz{color:var(--c-muted);font-size:12px}
.queue .st{width:1.4em;text-align:center}
.queue .tag{font-size:11px;border:1px solid var(--c-border);color:var(--c-muted);border-radius:10px;padding:0 6px}
.queue button{background:transparent;color:var(--c-text);border:1px solid var(--c-border);border-radius:6px;cursor:pointer;padding:1px 7px;font:inherit}
.queue button:hover{border-color:var(--c-accent)}
.queue button:disabled{opacity:.3;cursor:default}

.status{position:fixed;left:0;right:0;bottom:0;padding:7px 16px;background:var(--c-surface);border-top:1px solid var(--c-border);color:var(--c-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dragging-file .dz{border-style:solid}

@media (max-width:560px){
  .top{padding-left:12px}
  main{padding:0 8px}
  .panel{padding:12px;border-radius:0 0 10px 10px}
  .row{gap:8px}
  .badge{margin-left:0}
}