:root{color-scheme:light dark;--bg:#fbfbfd;--fg:#16181d;--mut:#6b7280;--line:#e3e5ea;
--card:#fff;--accent:#2f5fd0;--danger:#b3261e}
@media(prefers-color-scheme:dark){:root{--bg:#0f1116;--fg:#e8eaee;--mut:#9aa1ad;
--line:#262a33;--card:#171a21;--accent:#7aa2f7;--danger:#f2777a}}
*{box-sizing:border-box}
body{margin:0;padding:2rem 1rem;background:var(--bg);color:var(--fg);
font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:900px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.5rem;
max-width:400px;margin:4rem auto}
h1{font-size:1.25rem;margin:0 0 1rem}
label{display:block;font-size:.8rem;color:var(--mut);margin:.75rem 0 .25rem}
input[type=text],input[type=password]{width:100%;padding:.55rem .7rem;border:1px solid var(--line);
border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
button{padding:.5rem .9rem;border:1px solid var(--line);border-radius:8px;background:var(--accent);
color:#fff;font:inherit;cursor:pointer}
button.sec{background:transparent;color:var(--fg)}
button.del{background:transparent;color:var(--danger);border-color:transparent;padding:.2rem .4rem}
.full{width:100%;margin-top:1rem;padding:.6rem}
.err{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);
border-radius:8px;padding:.6rem .8rem;font-size:.85rem;margin-bottom:1rem}
.crumbs{font-size:.9rem;margin-bottom:1rem}.crumbs span{color:var(--mut)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--line);font-size:.9rem}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right;white-space:nowrap;color:var(--mut)}
.bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:1rem;
flex-wrap:wrap}
.tools{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}
.tools form{display:flex;gap:.4rem;align-items:center;background:var(--card);
border:1px solid var(--line);border-radius:10px;padding:.5rem}
.tools input[type=text]{width:150px}
.who{color:var(--mut);font-size:.85rem}
.dz{border:2px dashed var(--line);border-radius:12px;padding:1.4rem;text-align:center;
color:var(--mut);background:var(--card);margin-top:1.25rem;transition:border-color .15s,background .15s}
.dz.over{border-color:var(--accent);color:var(--fg);
background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.dz .pick{color:var(--accent);cursor:pointer;text-decoration:underline}
.up{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;
margin-top:.6rem;display:grid;grid-template-columns:1fr auto;gap:.45rem .8rem;align-items:center}
.up-h{grid-column:1;display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;min-width:0}
.up-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-s{color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.8rem}
.up-t{grid-column:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.up-b{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .2s linear}
.up-x{grid-column:2;grid-row:1/3;padding:.3rem .6rem;font-size:.8rem}
.up.ok .up-b{background:#2e7d32}.up.ok .up-s{color:#2e7d32}
.up.bad .up-b{background:var(--danger)}.up.bad .up-s{color:var(--danger)}
.note{font-size:.85rem;color:var(--mut);margin-top:.6rem}