:root { color-scheme: light dark; --bg:#fff; --fg:#161616; --muted:#525252; --line:#8d8d8d; --accent:#0f62fe; --accent-fg:#fff; --err:#a2191f; --card:#f4f4f4; }
@media (prefers-color-scheme: dark) { :root { --bg:#161616; --fg:#f4f4f4; --muted:#c6c6c6; --line:#6f6f6f; --accent:#78a9ff; --accent-fg:#161616; --err:#ff8389; --card:#262626; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:18px/1.45 system-ui, sans-serif; }
main { max-width: 42rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
.top { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.top form { display:flex; align-items:center; gap:.5rem; }
.who, .hint { color: var(--muted); font-size: .9rem; }
button, .button { font: inherit; min-height: 48px; min-width: 48px; padding: .5rem 1rem; border: 2px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; display:inline-flex; align-items:center; justify-content:center; }
button.primary, .button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
button.big { width: 100%; margin-top: 1rem; font-size: 1.2rem; min-height: 56px; }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input:not([type=radio]):not([type=file]) { width:100%; font:inherit; min-height:48px; padding:.4rem .6rem; border:2px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
label { display:block; margin:.8rem 0 .3rem; }
.card { background: var(--card); padding: 1rem; border-radius: 8px; }
.card button { margin-top: 1rem; width: 100%; }
.drop { border: 3px dashed var(--line); border-radius: 8px; padding: 1.2rem; text-align: center; }
.drop.over { border-color: var(--accent); background: var(--card); }
.files { list-style:none; margin: 1rem 0; padding:0; }
.files li { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.5rem; border:1px solid var(--line); border-radius:6px; margin-bottom:.5rem; }
.files .name { flex: 1 1 12rem; min-width:0; overflow-wrap:anywhere; }
.files .meta { color: var(--muted); font-size:.85rem; }
.files .actions { display:flex; gap:.4rem; }
.modes { border:1px solid var(--line); border-radius:6px; margin:0; }
.modes label { display:flex; align-items:center; gap:.6rem; min-height:44px; margin:.2rem 0; }
.modes input { width:24px; height:24px; }
.msg { padding:.6rem .8rem; border-left:6px solid var(--accent); background:var(--card); }
.msg.error { border-left-color: var(--err); color: var(--err); font-weight:600; }
.files li.bad { border-color: var(--err); }
.thumb { width:96px; height:96px; flex:0 0 96px; display:flex; align-items:center; justify-content:center; background:var(--card); border-radius:4px; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:contain; transition: transform .2s; }
.thumb .spin { width:28px; height:28px; border:4px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation: spin 1s linear infinite; }
.thumb .none { font-size:1.6rem; color:var(--err); }
@keyframes spin { to { transform: rotate(360deg); } }
.files .status { font-size:.85rem; color:var(--muted); }
.files .status.error { color:var(--err); font-weight:600; }
.progress { margin-top:1rem; padding:.6rem .8rem; background:var(--card); border-radius:6px; }
.progress[hidden] { display:none; }
.bar { height:16px; border:2px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bg); margin:.4rem 0 .6rem; }
.fill { height:100%; width:0; background:var(--accent); }
.bar.indet .fill { width:35%; animation: slide 1.4s ease-in-out infinite alternate; }
@keyframes slide { from { margin-left:0; } to { margin-left:65%; } }
.gorow { display:flex; gap:.6rem; }
.gorow button { flex:1; }
@media (prefers-reduced-motion: reduce) { .thumb .spin, .bar.indet .fill, .thumb img { animation:none; transition:none; } }