:root{--ink:#17212b;--muted:#5b6a7a;--surface:#fff;--page:#f4f7fa;--accent:#bd2b3d;--focus:#005fcc;--border:#c9d3dd;--pick:#eaf2fb;--pickink:#12456f}
*{box-sizing:border-box}
body{margin:0;padding:.9rem;background:var(--page);color:var(--ink);font:15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.card{width:min(100%,380px);margin:0 auto;padding:.85rem;background:var(--surface);border:1px solid var(--border);border-radius:.9rem}
.bar{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.7rem}
h1{margin:0;font-size:1.05rem;font-weight:700}
.version{color:#8593a3;font-size:.7rem}
input[type=url]{width:100%;padding:.5rem .6rem;border:1px solid #8996a4;border-radius:.4rem;font:inherit}
.row{display:flex;gap:.4rem;margin-top:.45rem}
.grow{flex:1}
fieldset.seg{display:flex;margin:0;padding:0;border:1px solid var(--border);border-radius:.4rem;overflow:hidden}
.seg label{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:.42rem .55rem;font-size:.83rem;color:var(--muted);cursor:pointer}
.seg label+label{border-left:1px solid var(--border)}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg input:checked+span{font-weight:700;color:var(--pickink)}
.seg label:has(input:checked){background:var(--pick)}
.seg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
.folder{align-items:center;padding:.28rem .28rem .28rem .55rem;border:1px solid var(--border);border-radius:.4rem}
#destination{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;direction:rtl;text-align:left;font-size:.8rem;color:var(--muted)}
button{width:100%;margin-top:.55rem;padding:.6rem 1rem;border:0;border-radius:.4rem;background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}
button:hover:not(:disabled){background:#9d2233}
button:disabled{opacity:.6;cursor:wait}
button.ghost{width:auto;margin:0;padding:.35rem .7rem;background:transparent;border:1px solid var(--border);color:var(--ink);font-size:.8rem;font-weight:600}
button.ghost:hover:not(:disabled){background:#eef2f6}
.progress{margin-top:.6rem}
.labels{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted)}
.track{height:5px;margin-top:.25rem;background:#dfe6ee;border-radius:3px;overflow:hidden}
#fill{width:0;height:100%;background:var(--accent);transition:width .25s linear}
.status{min-height:1.3em;margin:.5rem 0 0;font-size:.8rem;text-align:center;color:var(--muted)}
.status.bad{color:#9d1f31;font-weight:600}
.status.good{color:#1d6b48;font-weight:600}
input:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

[hidden] { display: none !important; }
