:root { --bg:#0d1117; --panel:#161b22; --line:#30363d; --text:#e6edf3; --muted:#8b949e; --accent:#3fb950; --flag:#f0883e; --err:#f85149; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: ui-monospace, Consolas, monospace; }
.wrap { max-width:820px; margin:0 auto; padding:24px 16px; }
header { display:flex; justify-content:space-between; align-items:center; }
h1 { font-size:20px; margin:0; }
.bytes { font-size:32px; margin:16px 0 4px; }
.rate { color:var(--muted); margin-bottom:24px; }
.bar-wrap { position:relative; margin:40px 0 48px; }
.bar { height:22px; background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.fill { height:100%; width:0; background:var(--accent); transition: width .4s; }
.pct { position:absolute; right:0; top:-24px; font-size:14px; }
.ms { position:absolute; top:-6px; height:34px; border-left:2px dashed var(--flag); }
.ms span { position:absolute; top:36px; left:-30px; width:64px; text-align:center; font-size:12px; color:var(--flag); }
.ms.end span { left:auto; right:0; text-align:right; }
.scale { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin-top:22px; }
.row { display:grid; grid-template-columns: 1fr 110px 90px 210px; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px; margin-bottom:8px; }
.row small { color:var(--muted); display:block; }
button { background:#238636; color:#fff; border:0; border-radius:4px; padding:8px; font-family:inherit; cursor:pointer; }
button:disabled { background:var(--line); color:var(--muted); cursor:default; }
.row button { position:relative; overflow:hidden; }
.row button .step { position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(255,255,255,.22); transition: width .2s; }
.row button .label { position:relative; }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); }
.flags { border:1px solid var(--flag); color:var(--flag); border-radius:6px; padding:12px; margin-bottom:16px; word-break:break-all; }
.status { color:var(--err); min-height:1.4em; margin-top:12px; font-size:13px; word-break:break-all; }
.hidden { display:none; }
@media (max-width:600px) { .row { grid-template-columns:1fr 1fr; } }