.qr-tabs {display:flex;background:var(--qu-surface);padding:5px;border:1px solid var(--qu-border);border-radius:13px;margin-bottom:18px;gap:5px}
.qr-tabs button {flex:1;min-height:46px;border:0;border-radius:9px;background:transparent;color:var(--home-muted);font-size:15px;font-weight:650}
.qr-tabs button[aria-selected="true"] {background:var(--home-tint);color:var(--home-accent)}
.qr-card {margin-bottom:18px}
.drop-content {text-align:center;padding:14px 0 22px}
.drop-content svg {width:40px;height:40px;color:var(--home-accent);margin-bottom:15px}
.drop-content h2 {font-size:20px;letter-spacing:-.4px}
.drop-content p {font-size:14px;color:var(--home-muted);line-height:1.65;max-width:360px;margin:10px auto 0}
.qr-mobile-copy {display:none}
.qr-buttons {display:flex;flex-wrap:wrap;gap:9px;align-items:center}
#drop-zone .qr-buttons {justify-content:center}
.qr-button {display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:8px;min-height:46px;padding:10px 16px;font-size:14px;font-weight:650;line-height:1.4;border:1px solid var(--qu-border);border-radius:10px;background:var(--qu-surface);color:var(--qu-text-main);cursor:pointer}
.qr-button.primary {background:var(--home-accent);border-color:var(--home-accent);color:var(--qu-bg)}
.qr-button:hover {filter:brightness(.96)}
.qr-button:disabled {opacity:.55;cursor:wait}
#qr-file:focus-visible + button {outline:3px solid var(--home-focus)}
#drop-zone:has(#qr-file:focus-visible) {outline:3px solid var(--home-focus);outline-offset:3px}
#drop-zone.dragging {border-color:var(--home-accent);box-shadow:0 0 0 3px var(--home-tint)}
#reader {margin-top:20px;border-radius:12px;overflow:hidden;background:var(--qu-bg);scroll-margin:82px 0 calc(92px + env(safe-area-inset-bottom))}
#reader video,#reader img {max-width:100%;max-height:360px;object-fit:contain}
.result-top {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.eyebrow {font-size:13px;font-weight:650;color:var(--home-muted)}
.text-button {border:0;background:transparent;color:var(--home-muted);font-size:14px;min-height:44px;padding:8px}
#result-title {font-size:23px;letter-spacing:-.4px;overflow-wrap:anywhere;line-height:1.4;unicode-bidi:plaintext}
#result-fields {margin:18px 0}
#result-fields dt {font-size:13px;color:var(--home-muted);margin-top:12px}
#result-fields dd {font-size:16px;margin:5px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}
#result-fields .secret {display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.note {background:var(--qu-bg);border-left:3px solid var(--qu-border);padding:12px 14px;font-size:14px;line-height:1.6;border-radius:0 8px 8px 0;margin:10px 0}
.note.attention {border-color:#c58b28}
#result-notes {margin-bottom:20px}
.raw-details {margin-top:20px;border-top:1px solid var(--qu-border);padding-top:10px}
.raw-details summary {font-size:14px;color:var(--home-muted);padding:12px 0}
.raw-details pre {font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;background:var(--qu-bg);padding:14px;border-radius:10px}
#create-form label {display:block;font-size:14px;font-weight:650;margin:18px 0 8px}
#create-form>label:first-child {margin-top:0}
#create-form select,#create-form textarea,#create-form input:not([type="checkbox"]) {width:100%;min-width:0;min-height:46px;padding:12px;border:1px solid var(--qu-border);border-radius:10px;color:var(--qu-text-main);background:var(--qu-bg);font-size:16px}
#create-form textarea {resize:vertical}
#create-form input[type="file"] {padding:8px}
#create-form input[type="file"]::file-selector-button {min-height:36px;margin-right:10px;padding:7px 12px;border:1px solid var(--qu-border);border-radius:8px;background:var(--qu-surface);color:var(--qu-text-main);font:inherit;font-size:14px;cursor:pointer}
.image-selection {margin:10px 0 0;padding:10px 12px;border-radius:9px;background:var(--home-tint);color:var(--qu-text-main);font-size:14px;overflow-wrap:anywhere}
.image-upload-note {margin:10px 0 0;color:var(--home-muted);font-size:13px;line-height:1.6}
.password-row {display:flex;gap:8px}
.password-row input {flex:1}
#create-form .check-label {display:flex;gap:10px;align-items:center;font-weight:400;min-height:44px}
.check-label input {width:18px;height:18px;accent-color:var(--home-accent)}
.generate {width:100%;margin-top:22px}
#qr-output {text-align:center;border-top:1px solid var(--qu-border);margin-top:24px;padding-top:24px}
#qr-output,.result-card {scroll-margin:82px 0 calc(92px + env(safe-area-inset-bottom))}
#qrcode {display:table;padding:24px;background:#fff;margin:0 auto;border-radius:12px;max-width:100%}
#qrcode canvas,#qrcode img {width:240px;max-width:100%;height:auto;display:block;image-rendering:pixelated}
.qr-caption,.qr-privacy {font-size:13px;line-height:1.65;color:var(--home-muted);text-align:center}
.qr-caption {margin:16px 0}
.qr-output-actions {justify-content:center}
#status {font-size:14px;line-height:1.6;color:var(--home-muted);margin:12px 0;text-align:center;overflow-wrap:anywhere}
#status.error {color:#b45309}
html[data-theme="dark"] #status.error {color:#f6bf66}
@media(max-width:600px){.qr-desktop-copy{display:none}.qr-mobile-copy{display:inline}.drop-content .qr-mobile-copy{display:block}#drop-zone .qr-buttons{display:grid;grid-template-columns:1fr 1fr}#drop-zone .qr-button{width:100%;padding:10px}.qr-paste{display:none}.qr-output-actions .qr-button{flex:1}}
@media(max-width:400px){.qr-button{padding:10px 12px}#qrcode{padding:18px}.qr-tabs button{font-size:14px}}