:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #10131a; color: #edf2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; }
main { width: min(680px, 100%); }
h1 { margin: 0; font-size: 2.5rem; letter-spacing: -.08em; } h2 { margin-top: 0; } p { line-height: 1.55; color: #b9c3d9; }
.tabs, .controls { display: flex; gap: 10px; margin: 24px 0 16px; }
button, input { font: inherit; border-radius: 8px; border: 1px solid #38445d; padding: 10px 13px; background: #1d2636; color: inherit; }
button { cursor: pointer; } button:hover:not(:disabled), .tab.active { background: #7567ff; border-color: #9187ff; } button:disabled { opacity: .45; cursor: not-allowed; }
label { display: flex; align-items: center; gap: 12px; color: #b9c3d9; } input { width: 70px; padding: 7px; }
.file-input { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .file-input input { width: auto; max-width: 230px; } .hint { font-size: .8rem; margin-bottom: 0; }
.panel { display: none; padding: 25px; border: 1px solid #2e384d; border-radius: 14px; background: #151b27; } .panel.active { display: block; }
#qr-wrap { width: min(100%, 520px); aspect-ratio: 1; display: grid; place-items: center; background: white; border-radius: 8px; padding: 15px; margin: 20px auto; }
#qrcode canvas, #qrcode img { display: block; max-width: 100%; height: auto !important; }
video { display: block; width: 100%; max-height: 440px; object-fit: cover; background: #080b11; border-radius: 8px; transform: scaleX(-1); }
.status { min-height: 1.6em; color: #95edbf; } footer { margin: 18px 4px; color: #77839a; font-size: .78rem; }