/* Everyday utility controls extend the site's existing colors and components. */
.tools-utility-options{margin:22px 0 16px;border:1px solid #334155;border-radius:10px;padding:0 16px;background:#0f172a66}
.tools-utility-options>summary{min-height:48px;padding:13px 0;cursor:pointer;color:#cbd5e1;font-size:.88rem;font-weight:600;line-height:1.6}
.tools-utility-options>summary:focus-visible{outline:2px solid #60a5fa;outline-offset:5px;border-radius:3px}
.tools-utility-options[open]{padding-bottom:12px}
.tools-utility-options>.tools-note{margin-top:0}
.tools-qr-type-hint{margin-top:-4px}
.tools-qr-controls>.tools-grid>.tools-field:only-child,.tools-qr-controls>.tools-grid>.tools-field:has(textarea){grid-column:1/-1}
.tools-qr-controls textarea{min-height:110px;font-family:inherit}
.tools-qr-output{align-self:start;padding:22px;border:1px solid #334155;border-radius:12px;background:#03071255}
.tools-qr-output h2{margin-bottom:8px}
.tools-qr-output .tools-qr-preview{position:static;min-height:260px;margin:14px 0;padding:18px;background:#0f172a;border-color:#33415580}
.tools-qr-preview canvas{display:block;width:min(100%,320px)}
.tools-qr-placeholder{text-align:center;max-width:265px;color:#cbd5e1}
.tools-qr-placeholder-icon{display:grid;place-items:center;width:58px;height:58px;border:1px solid #334155;border-radius:16px;margin:0 auto 18px;color:#60a5fa;background:#1e3a5f55;font-size:2rem;line-height:1}
.tools-qr-placeholder strong{display:block;font-size:.95rem;line-height:1.5}
.tools-qr-placeholder .tools-note{font-size:.8rem;margin-bottom:0}
.tools-qr-output>.tools-row{align-items:stretch;flex-direction:column;margin-bottom:8px}
.tools-qr-destination{padding:10px 12px;border-radius:8px;background:#17255466;color:#bfdbfe}
.tools-qr-colors{grid-column:1/-1;min-width:0;border-top:1px solid #334155;padding-top:18px}
.tools-qr-colors>.tools-field{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px 14px;margin-bottom:0}
.tools-qr-colors>.tools-field>.tools-label{grid-column:1/-1;margin-bottom:0}
.tools-qr-colors input[type=color]{width:64px;height:48px;padding:5px;cursor:pointer}
.tools-qr-applied-color{display:flex;align-items:center;gap:8px;min-width:0;font-size:.75rem;color:#bdcce0;overflow-wrap:anywhere}
.tools-qr-color-dot{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid #cbd5e166}
.tools-qr-color-help{font-size:.78rem;line-height:1.6;margin:10px 0 20px;color:#a9c7e9}
.tools-qr-backgrounds{border:0;padding:0;margin:0;min-width:0}
.tools-qr-backgrounds>.tools-note{font-size:.75rem;margin:4px 0 12px;line-height:1.6}
.tools-qr-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tools-qr-background{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:76px;padding:9px 5px;border:1px solid #3d4c63;border-radius:9px;background:#0b1424;color:#b6c6dc;font-size:.71rem;line-height:1.3;cursor:pointer}
.tools-qr-background-swatch{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;border:1px solid #94a3b855;font-size:1rem;font-weight:700}
.tools-qr-background-swatch>span{visibility:hidden}
.tools-qr-background[aria-pressed=true]{border-color:#60a5fa;box-shadow:0 0 0 1px #60a5fa;background:#142641;color:#e2efff}
.tools-qr-background[aria-pressed=true] .tools-qr-background-swatch>span{visibility:visible}
.tools-qr-background:hover{border-color:#93c5fd}
.tools-qr-background:focus-visible{outline:2px solid #93c5fd;outline-offset:3px}
.tools-password-panel{max-width:850px;margin-inline:auto}
.tools-password-panel .tools-password-value{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(1.05rem,2.5vw,1.6rem);letter-spacing:.06em;padding:20px 16px;border-color:#2563eb99;background:#030712;min-height:72px}
.tools-password-panel input[type=number]{max-width:170px}
.tools-password-panel>.tools-row{margin-top:12px}
.tools-password-panel .tools-utility-options .tools-field{margin-bottom:0}
.tools-password-panel .tools-utility-options label{font-weight:400}
@media(max-width:760px){.tools-qr-output{padding:18px}.tools-qr-output .tools-qr-preview{min-height:220px}.tools-qr-output>.tools-row>.tools-button,.tools-qr-output>.tools-row>.tools-button-secondary{width:100%}}
@media(max-width:440px){.tools-password-panel .tools-password-value{font-size:1.05rem;letter-spacing:.025em;padding:16px 10px}.tools-utility-options{padding-inline:12px}.tools-qr-output{padding:14px}}