:root { --bg:#f3f4f6; --card:#fff; --text:#111827; --muted:#4b5563; --line:#d1d5db; --accent:#1d4ed8; --accent-text:#fff; --error:#b91c1c; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#111418; --card:#1c2128; --text:#f3f4f6; --muted:#a8b0ba; --line:#3a424d; --accent:#6d9bff; --accent-text:#0b1220; --error:#ff9b9b; } }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
.centered, .centered-fill { display: flex; align-items: center; justify-content: center; padding: 16px; }
.centered { min-height: 100%; }
.centered-fill { flex: 1; }
.card { width: 100%; max-width: 380px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
h1 { margin: 0 0 16px; font-size: 1.4rem; }
.card p { margin: 0 0 16px; color: var(--muted); }
.card .error, .error { color: var(--error); }
.card .hint { margin: -8px 0 14px; font-size: .875rem; }
input[type=file] { padding: 7px 8px; }
label { display: block; margin-bottom: 14px; font-weight: 600; font-size: .95rem; }
input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; }
button { padding: 9px 14px; font: inherit; font-weight: 600; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; }
.card button { width: 100%; }
button:disabled { opacity: .6; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.desktop { display: flex; flex-direction: column; overflow: hidden; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.bar form { margin: 0; }
.bar button { padding: 4px 10px; font-size: .9rem; }
#display { flex: 1; min-height: 0; overflow: hidden; background: #000; outline: none; }
[hidden] { display: none !important; }