/* ---- Over/Under Auto: floating O/U switch + scanner picker (src/components/ou-auto.js) ---- */
.ouauto { position: fixed; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; row-gap: 3px; width: max-content; max-width: calc(100vw - 16px);
  padding: 3px 4px 3px 5px; border-radius: 16px; background: rgba(26,14,18,.92); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md);
  touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--font); }
.ouauto.is-on { border-color: var(--accent-line); box-shadow: var(--shadow-md), 0 0 14px var(--accent-glow); }
.ouauto.is-dragging { opacity: .9; } .ouauto.is-dragging .ouauto__handle { cursor: grabbing; }
.ouauto [hidden] { display: none !important; }
.ouauto__handle { display: inline-flex; align-items: center; gap: 5px; padding: 2px 5px; cursor: grab; }
.ouauto__tag { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); }
.ouauto__light { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); transition: background var(--fast), box-shadow var(--fast); }
.ouauto__light.is-active { background: #2dd4a3; box-shadow: 0 0 6px #2dd4a3; animation: ouauto-blink 1.6s ease-in-out infinite; }
.ouauto__toggle { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 3px; border-radius: 999px; font: inherit; font-size: 8.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--text-dim); background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); cursor: pointer; white-space: nowrap; }
.ouauto__knob { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); transition: background .2s; }
.ouauto__toggle.is-on { color: #fff; border-color: var(--red-300); background: var(--accent-soft); }
.ouauto__toggle.is-on .ouauto__knob { background: #2dd4a3; box-shadow: 0 0 6px #2dd4a3; }
.ouauto__toggle:disabled { opacity: .45; cursor: not-allowed; }
.ouauto__toggle:focus-visible, .ouauto__stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ouauto__stop { padding: 3px 8px; border-radius: 999px; font: inherit; font-size: 9px; font-weight: 800; color: #fff; background: var(--red-500); border: none; cursor: pointer; }
@keyframes ouauto-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ouauto__light.is-active { animation: none; } }
:root[data-theme="light"] .ouauto { background: rgba(255,255,255,.96); }
:root[data-theme="light"] .ouauto__toggle.is-on { color: var(--red-500); }
@media (max-width: 600px) { .ouauto { transform: scale(.92); transform-origin: left top; } }

/* Picker dialog: above the pill, the drawers and the scan dialogs' backdrops. */
.ouauto-pick__backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgba(6,2,4,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ouauto-fade .18s var(--ease); }
.ouauto-pick__card { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px 18px 16px; border-radius: 16px;
  border: 1px solid #5b1f2b; background: linear-gradient(180deg, #24070d, #120306); box-shadow: var(--shadow-lg); color: var(--text); font-family: var(--font); }
.ouauto-pick__close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #5b1f2b; background: rgba(255,255,255,.04);
  color: #fff; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.ouauto-pick__title { margin: 0 36px 6px 0; font-size: 19px; line-height: 1.15; color: #fff; }
.ouauto-pick { display: grid; gap: 12px; }
.ouauto-pick__lede { margin: 0; color: #d9b8bf; font-size: 13px; line-height: 1.45; }
.ouauto-pick__opts { display: grid; gap: 8px; }
.ouauto-pick__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 12px; text-align: left;
  font: inherit; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid #5b1f2b; cursor: pointer; transition: border-color var(--fast), background var(--fast); }
.ouauto-pick__opt > span { display: grid; gap: 2px; min-width: 0; }
.ouauto-pick__opt strong { font-size: 14px; color: #fff; } .ouauto-pick__opt small { font-size: 11.5px; color: #b08a92; }
.ouauto-pick__opt i { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 900;
  border: 1px solid #5b1f2b; color: #fff; }
.ouauto-pick__opt:hover:not(:disabled) { border-color: var(--accent-line); }
.ouauto-pick__opt.is-selected { border-color: var(--red-400, #f8394f); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.ouauto-pick__opt.is-selected i { background: #f8394f; border-color: #f8394f; }
.ouauto-pick__opt:disabled { opacity: .5; cursor: not-allowed; }
.ouauto-pick__note { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.4; color: #ffcfd4; background: rgba(248,57,79,.08); border: 1px solid rgba(248,57,79,.22); }
.ouauto-pick__actions { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.4fr); gap: 10px; }
.ouauto-pick__actions button { min-height: 46px; border-radius: 12px; font: inherit; font-weight: 800; font-size: 13.5px; letter-spacing: .04em; cursor: pointer; }
.ouauto-pick__cancel { color: #f2d6da; background: rgba(255,255,255,.04); border: 1px solid #5b1f2b; }
.ouauto-pick__start { color: #fff; background: linear-gradient(135deg, #f8394f, #c3132b); border: 1px solid #ff8a95; box-shadow: 0 9px 20px rgba(225,29,52,.3); }
.ouauto-pick__start:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ouauto-pick__card button:focus-visible { outline: 2px solid #ff8a95; outline-offset: 2px; }
@keyframes ouauto-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ouauto-pick__backdrop { animation: none; } }
@media (max-width: 480px) {
  .ouauto-pick__backdrop { padding: 10px; } .ouauto-pick__card { padding: 18px 14px 14px; }
  .ouauto-pick__actions { grid-template-columns: 1fr; } .ouauto-pick__cancel { grid-row: 2; }
}