/* Scoped to the QR generator: no shared styles or other tools change. */
#tool .tool-aside {background:#172033;color:#f1f5f9;padding:24px;border:1px solid #334155;box-shadow:0 12px 32px #0f172a12}
#tool .tool-aside::before {display:none}
#tool .aside-title,#tool .input-label,#tool .checkbox-group label,#tool .settings-header {color:#f1f5f9}
#tool .aside-sub,#tool .help-note,#tool .range-display {color:#cbd5e1;line-height:1.65}
#tool .help-note a {color:#a5d8ff;text-decoration:underline}
#tool .seg {background:#0f172a;border:1px solid #475569;padding:4px;gap:4px}
#tool .seg button {color:#e2e8f0;background:transparent;min-height:42px;border-radius:8px;white-space:normal}
#tool .seg button.active {color:#fff;background:#4338ca}
#tool .seg button:hover {background:#334155;color:#fff}
#tool .seg button.active:hover {background:#3730a3}
#tool .btn-secondary {background:#fff;color:#1e293b;border:1px solid #64748b}
#tool .btn-primary {background:#4338ca;color:#fff}
#tool button:disabled {opacity:1;background:#e2e8f0;color:#475569;border-color:#94a3b8;cursor:not-allowed;box-shadow:none;transform:none}
#tool .tool-aside button:disabled {background:#334155;color:#cbd5e1}
#tool button:focus-visible,#tool input:focus-visible,#tool [tabindex]:focus-visible {outline:3px solid #f59e0b;outline-offset:3px}
#tool input[type=color] {min-height:44px;min-width:64px;background:#fff;border:1px solid #94a3b8;border-radius:8px;margin:6px 0 12px}
#tool input[type=range],#tool input[type=checkbox] {accent-color:#818cf8}
#tool .stage-card {overflow:hidden;background:#fff;color:#172033}
#tool .stage-card-head {gap:12px;flex-wrap:wrap}
#tool .dim-pill {background:#e2e8f0;color:#334155;white-space:normal;line-height:1.5;max-width:100%}
#tool .preview-container {min-height:280px;padding:20px;background:#e2e8f0}
#tool .preview-empty {color:#475569}
#tool .preview-canvas {max-width:100%;max-height:520px;width:auto;height:auto;object-fit:contain;border:1px solid #94a3b8;border-radius:8px}
#tool .action-buttons {display:flex;flex-wrap:wrap;gap:10px}
#tool [hidden] {display:none!important}
#tool .upload-zone {background:#f8fafc;border-color:#64748b;color:#172033}
#tool .upload-title {color:#172033}
#tool .upload-subtitle,#tool .upload-hint {color:#475569}
@media(max-width:700px) {#tool .tool-aside {padding:18px} #tool .action-buttons .btn {width:100%;white-space:normal} #tool .preview-container {min-height:220px;padding:12px} #tool .stage-card-head {align-items:flex-start}}


#tool .btn-ghost {background:#fff;color:#1e293b;border:1px solid #64748b}
#tool #backdrop-row {padding:12px 16px;color:#334155}
#tool .stage-card-head h2 span {color:#475569!important}


#tool textarea,#tool select {background:#0f172a;color:#f1f5f9;border:1px solid #64748b;max-width:100%}
#tool textarea::placeholder {color:#cbd5e1}
#tool .quick-action-btn {color:#f1f5f9;background:#334155;border-color:#64748b}
#tool #qr-canvas {width:320px;height:auto;max-width:100%;border-radius:0;image-rendering:pixelated}
#tool #scan-warn {background:#fffbeb;color:#78350f;line-height:1.65}
#tool .center-stage > .help-note {color:#334155;background:#f1f5f9}

/* Code types (URL / Wi-Fi / vCard / WhatsApp) and error correction */
#tool .qr-type-seg {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#tool .qr-type-seg button {min-height:44px;padding:8px 6px;font-size:13px;line-height:1.25}
@media (min-width:641px) and (max-width:1024px) {#tool .qr-type-seg {grid-template-columns:repeat(4,minmax(0,1fr))}}
#tool .qr-type-group .input-group {margin-bottom:14px}
#tool .qr-type-group input[type=text],#tool .qr-type-group input[type=tel],#tool .qr-type-group input[type=email],#tool .qr-type-group input[type=url],#tool .qr-type-group input[type=password] {width:100%;min-height:44px;padding:10px 12px;font:inherit;font-size:14px;background:#0f172a;color:#f1f5f9;border:1px solid #64748b;border-radius:8px}
#tool .qr-type-group input::placeholder {color:#94a3b8}
#tool .qr-type-group select,#tool #ec {min-height:44px}
#tool .qr-pw-row {display:flex;gap:8px;align-items:stretch}
#tool .qr-pw-row input {flex:1 1 auto;min-width:0}
#tool .qr-pw-toggle {flex:0 0 auto;min-width:64px;min-height:44px;padding:0 12px;border:1px solid #64748b;border-radius:8px;background:#334155;color:#f1f5f9;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#tool .qr-pw-toggle:hover {background:#475569}
#tool .qr-type-group .checkbox-group {padding:0 13px;margin:0 0 14px}
#tool .qr-type-group .checkbox-group label {flex:1;min-height:44px;display:flex;align-items:center}
#tool .qr-vcf-btn {width:100%;min-height:44px;margin-top:14px}
#tool select:focus-visible,#tool textarea:focus-visible {outline:3px solid #f59e0b;outline-offset:3px}
/* .settings-content clips overflow, so draw the ring inside the select there */
#tool .settings-content select:focus-visible {outline-offset:-3px}
@media (max-width:640px) {#tool .qr-type-group input:not([type=checkbox]),#tool .qr-type-group select,#tool .qr-type-group textarea,#tool #ec {font-size:16px}}