.qr-shell{--qr-border:var(--border,#dbe4ea);--qr-surface:var(--bg-base,#ffffff);--qr-muted:var(--text-secondary,#60717a);--qr-ink:var(--text-primary,#1f2933);--qr-action:var(--action,#2563eb);--qr-soft:var(--bg-surface,#f8fafc);border:1px solid var(--qr-border);border-radius:18px;background:var(--qr-surface);box-shadow:0 10px 30px rgba(20,57,74,.08);overflow:hidden;font-family:inherit;font-size:15px}.qr-shell *{box-sizing:border-box}.qr-topbar{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;padding:1.5rem;background:linear-gradient(135deg,#173f5f,#2563eb);color:#fff}.qr-kicker,.qr-eyebrow{margin:0 0 .3rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#8ce1df}.qr-title{margin:0;font-size:1.3rem;letter-spacing:-.02em}.qr-subtitle{margin:.5rem 0 0;max-width:62ch;color:#d9eef2;font-size:.9rem;line-height:1.5}.qr-local-status{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.45rem .7rem;white-space:nowrap;font-size:.78rem;font-weight:700}.qr-status-dot{width:.55rem;height:.55rem;border-radius:50%;background:#84e1a7;box-shadow:0 0 0 4px rgba(132,225,167,.18)}.qr-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:1rem;padding:1.25rem}.qr-controls,.qr-results{border:1px solid var(--qr-border);border-radius:14px;padding:1rem;background:var(--qr-surface)}.qr-heading{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.9rem}.qr-heading h3{margin:0;font-size:1rem;color:var(--qr-ink)}.qr-note,.qr-result-label{font-size:.72rem;color:var(--qr-muted)}.qr-result-label{padding:.3rem .55rem;border-radius:999px;background:var(--qr-soft);font-weight:700}.qr-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:1rem}.qr-type{display:flex;align-items:center;gap:.45rem;border:1px solid var(--qr-border);border-radius:9px;background:var(--qr-surface);color:var(--qr-ink);padding:.55rem .6rem;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}.qr-type strong{color:var(--qr-action);font-size:1rem}.qr-type:hover,.qr-type:focus-visible{border-color:var(--qr-action);outline:2px solid rgba(23,107,140,.18);outline-offset:1px}.qr-type.is-active{border-color:var(--qr-action);background:rgba(37,99,235,.14);color:var(--qr-action)}.qr-fields{display:grid;gap:.7rem}.qr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.qr-field{display:flex;flex-direction:column;gap:.35rem;color:var(--qr-ink);font-size:.8rem;font-weight:700}.qr-field input[type=text],.qr-field input[type=url],.qr-field input[type=email],.qr-field input[type=tel],.qr-field input[type=number],.qr-field input[type=datetime-local],.qr-field textarea,.qr-field select{width:100%;border:1px solid var(--qr-border,#e2e8f0);border-radius:8px;background:var(--qr-surface);color:var(--qr-ink);padding:.65rem .7rem;font:inherit;font-size:.82rem}.qr-field textarea{min-height:88px;resize:vertical}.qr-field small{color:var(--qr-muted);font-size:.68rem;font-weight:400;line-height:1.4}.qr-char-count{color:var(--qr-muted);font-size:.68rem;font-weight:400;text-align:right}.qr-color{display:grid;grid-template-columns:2.3rem 1fr;gap:.4rem}.qr-color input[type=color]{width:2.3rem;height:2.3rem;border:1px solid var(--qr-border);border-radius:7px;padding:.15rem;background:var(--qr-surface);cursor:pointer}.qr-advanced{border-top:1px solid var(--qr-border);padding-top:.7rem;margin-top:1rem}.qr-advanced summary{cursor:pointer;color:var(--qr-action);font-weight:800;font-size:.8rem}.qr-advanced-body{display:grid;gap:.75rem;padding-top:.75rem}.qr-range{width:100%;accent-color:var(--qr-action);margin-top:.4rem}.qr-field output{align-self:flex-end;margin-top:-1.3rem;color:var(--qr-action);font-family:var(--mono,ui-monospace,monospace);font-size:.76rem}.qr-link-button{border:0;background:none;color:var(--qr-action);font:inherit;font-size:.75rem;font-weight:800;cursor:pointer;padding:.2rem}.qr-generate{width:100%;margin-top:1rem;border:0;border-radius:10px;background:var(--qr-action,#2563eb);color:#fff;padding:.8rem 1.2rem;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;letter-spacing:.01em;box-shadow:0 4px 12px rgba(37,99,235,.25)}.qr-generate:hover{filter:brightness(1.08)}.qr-error{margin:.65rem 0 0;padding:.65rem .75rem;border-radius:8px;background:#fff0f0;color:#9b3030;font-size:.8rem}.qr-preview-card{border:1px solid var(--qr-border);border-radius:12px;padding:.8rem;background:var(--qr-soft)}.qr-preview{display:grid;place-items:center;min-height:320px;border:1px solid var(--qr-border);border-radius:9px;background:#eef4f6;padding:1rem;overflow:hidden}.qr-preview svg{display:block;width:min(100%,320px);height:auto;box-shadow:0 8px 20px rgba(15,64,93,.14)}.qr-empty{text-align:center;padding:3rem .8rem;color:var(--qr-muted)}.qr-empty span{display:block;font-size:2.8rem;color:#8dcbd3}.qr-empty p{margin:.4rem 0 .15rem;font-weight:750;color:var(--qr-ink);font-size:.85rem}.qr-empty small{font-size:.7rem}.qr-preview-meta{margin:.65rem 0 0;text-align:center;font-size:.72rem;color:var(--qr-muted)}.qr-scan-note{margin:.35rem 0 0;text-align:center;font-size:.68rem;color:var(--qr-muted);line-height:1.4}.qr-action-row{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.8rem}.qr-action{border:1px solid var(--qr-border);border-radius:7px;background:var(--qr-surface);color:var(--qr-ink);padding:.58rem .72rem;font:inherit;font-size:.75rem;font-weight:750;cursor:pointer}.qr-action.primary{background:var(--qr-action);border-color:var(--qr-action);color:#fff}.qr-action:disabled{opacity:.45;cursor:not-allowed}.qr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-top:.8rem}.qr-stats div{padding:.55rem;border-radius:8px;background:var(--qr-soft);text-align:center}.qr-stats small{display:block;color:var(--qr-muted);font-size:.65rem}.qr-stats strong{display:block;margin-top:.15rem;color:var(--qr-ink);font-size:.82rem}.qr-privacy{display:flex;align-items:flex-start;gap:.7rem;margin:0 1.25rem 1.25rem;padding:.8rem;border-radius:12px;background:#edf8f5;border:1px solid #c8eadf;color:#24554b}.qr-privacy h3{font-size:.8rem;margin:0}.qr-privacy p{font-size:.73rem;margin:.25rem 0 0;line-height:1.5}.qr-privacy-icon{display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:#2e9b75;color:#fff;font-weight:900;flex:none}@media(max-width:800px){.qr-topbar,.qr-grid{display:block}.qr-topbar .qr-local-status{display:inline-flex;margin-top:1rem}.qr-results{margin-top:1rem}.qr-type-grid{grid-template-columns:repeat(3,1fr)}.qr-form-grid{grid-template-columns:1fr}.qr-grid{padding:.8rem}.qr-privacy{margin-left:.8rem;margin-right:.8rem}}@media(max-width:480px){.qr-type-grid{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){.qr-type,.qr-action{transition:none}}
[data-theme=dark] .qr-shell{--qr-border:var(--border,#334155);--qr-surface:var(--bg-base,#0f172a);--qr-ink:var(--text-primary,#f1f5f9);--qr-muted:var(--text-secondary,#94a3b8);--qr-action:var(--action,#3b82f6);--qr-soft:var(--bg-surface,#1e293b)}[data-theme=dark] .qr-shell input,[data-theme=dark] .qr-shell select,[data-theme=dark] .qr-shell textarea{background:var(--bg-surface,#1e293b);color:var(--text-primary,#f1f5f9);border-color:var(--border,#334155)}

/* Dark mode (S118-QR): active type button + hardcoded light chips. Rule: any selected/active state must set BOTH background and text color together, never rely on inherited ink over a fixed light background. .qr-preview intentionally stays light so the QR itself previews on a scannable backdrop. */
:root[data-theme=dark] .qr-shell .qr-type.is-active{background:rgba(59,130,246,.22);border-color:#60a5fa;color:#93c5fd}
:root[data-theme=dark] .qr-shell .qr-type.is-active strong{color:#93c5fd}
:root[data-theme=dark] .qr-shell .qr-error{background:rgba(239,68,68,.14);color:#fca5a5}
:root[data-theme=dark] .qr-privacy{background:rgba(46,155,117,.14);border-color:rgba(46,155,117,.35);color:#a7e3c9}
:root[data-theme=dark] .qr-privacy h3{color:#d1fae5}