/*
 * Account 2FA uses the existing Signal form/button styles.
 */
html.qs-signal .qs-two-factor .qs-label { display: grid; gap: 6px; margin: 12px 0; }
html.qs-signal .qs-two-factor-qr { display: block; width: 240px; max-width: 100%; height: auto; background: #fff; border-radius: 8px; margin: 12px 0; }
html.qs-signal .qs-two-factor-qr[hidden] { display: none; }
html.qs-signal .qs-two-factor-secret { display: block; overflow-wrap: anywhere; user-select: all; margin: 12px 0; }
html.qs-signal .qs-two-factor-codes { width: 100%; box-sizing: border-box; font-family: monospace; resize: vertical; }
html.qs-signal .qs-two-factor .qs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/*
 * Signal / Phase 1
 * Load after existing stylesheets. All rules require the theme bootstrap class.
 * Page layouts opt in with .qs-signal-page; signal-pages.css adapts their legacy selectors.
 * Admin does not load this stylesheet.
 */

/* 1. Semantic tokens. Dark is the compatibility default for existing pages. */
html.qs-signal {
  --signal-brand: #7a63ff;
  --signal-bg: #131316;
  --signal-surface: #1c1c21;
  --signal-raised: #24242b;
  --signal-soft: #2a2a32;
  --signal-text: #f3f3f7;
  --signal-muted: #b0b0be;
  --signal-line: #6e6e7d;
  --signal-divider: #393940;
  --signal-line-hover: #8d8d9d;
  --signal-primary: #bbacff;
  --signal-primary-hover: #cbbfff;
  --signal-primary-active: #ad98f5;
  --signal-on-primary: #23183c;
  --signal-accent-soft: #2e2546;
  --signal-success: #95dfb7;
  --signal-success-bg: #22382c;
  --signal-warning: #f0cd8c;
  --signal-warning-bg: #3c3020;
  --signal-danger: #ffb5c2;
  --signal-danger-bg: #3e232b;
  --signal-focus: #bbacff;
  --signal-backdrop: rgb(9 8 15 / 74%);
  --signal-shadow: 0 18px 56px rgb(0 0 0 / 24%);
  --signal-color-scheme: dark;
  --signal-font: "Segoe UI", Arial, sans-serif;
  --signal-text-sm: 0.8125rem;
  --signal-text-base: 0.9375rem;
  --signal-text-title: 1.25rem;
  --signal-space-1: 4px;
  --signal-space-2: 8px;
  --signal-space-3: 12px;
  --signal-space-4: 16px;
  --signal-space-6: 24px;
  --signal-space-8: 32px;
  --signal-radius-control: 8px;
  --signal-radius-card: 16px;
}

/* Passive connection feedback and the existing Sound tab; no Admin selectors. */
html.qs-signal .qs-connection-status { position: fixed; z-index: 900; bottom: 12px; left: 12px; right: 12px; max-width: 760px; margin: auto; padding: 12px 16px; background: var(--signal-warning-bg); color: var(--signal-warning); border: 1px solid var(--signal-warning); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 12px; }
html.qs-signal .qs-connection-status[hidden] { display: none; }
html.qs-signal .qs-connection-status a { color: inherit; text-decoration: underline; }
html.qs-signal .qs-audio-preference { margin: 12px 0; padding: 12px; border: 1px solid var(--signal-divider); border-radius: 10px; }
html.qs-signal .qs-audio-preference-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html.qs-signal .qs-audio-preference-row > span { margin-right: auto; }
html.qs-signal .qs-audio-preference p { font-size: 12px; color: var(--signal-muted); }
html.qs-signal a.qs-signal-brand { color: var(--signal-muted); text-decoration: none; }
html.qs-signal a.qs-signal-brand:focus-visible { outline: 2px solid var(--signal-focus); outline-offset: 3px; }

html.qs-signal[data-qs-theme="light"] {
  --signal-bg: #f5f6f9;
  --signal-surface: #ffffff;
  --signal-raised: #f0f1f6;
  --signal-soft: #eceef4;
  --signal-text: #20222b;
  --signal-muted: #606778;
  --signal-line: #848a99;
  --signal-divider: #dadde6;
  --signal-line-hover: #606778;
  --signal-primary: #5e43cf;
  --signal-primary-hover: #5036b8;
  --signal-primary-active: #442b9f;
  --signal-on-primary: #ffffff;
  --signal-accent-soft: #efebff;
  --signal-success: #24684e;
  --signal-success-bg: #eaf5ee;
  --signal-warning: #805520;
  --signal-warning-bg: #faf1df;
  --signal-danger: #a13345;
  --signal-danger-bg: #fbeef0;
  --signal-focus: #5e43cf;
  --signal-backdrop: rgb(9 8 15 / 56%);
  --signal-shadow: 0 18px 56px rgb(28 32 48 / 12%);
  --signal-color-scheme: light;
}

/* 2. New components and local compatibility aliases, not a global reset. */
html.qs-signal :is(
  .qs-signal-page, .qs-signal-card, .qs-signal-dialog,
  .qs-settings, .qs-modal, .qs-forcepw-modal, .qs-join-card,
  .qs-pill-popover, .topbar, .site-footer
) {
  --bg: var(--signal-bg);
  --panel: var(--signal-surface);
  --panel2: var(--signal-raised);
  --border: var(--signal-divider);
  --border2: var(--signal-line-hover);
  --text: var(--signal-text);
  --muted: var(--signal-muted);
  --accent: var(--signal-primary);
  --accentBorder: var(--signal-primary);
  font-family: var(--signal-font);
  color: var(--signal-text);
  color-scheme: var(--signal-color-scheme);
}

html.qs-signal .qs-signal-page {
  background: var(--signal-bg);
  font-size: var(--signal-text-base);
}

html.qs-signal :is(.qs-signal-card, .qs-signal-dialog) {
  padding: var(--signal-space-6);
  background: var(--signal-surface);
  border: 1px solid var(--signal-divider);
  border-radius: var(--signal-radius-card);
}

html.qs-signal .qs-signal-heading {
  margin: 0;
  color: var(--signal-text);
  font-size: var(--signal-text-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.35px;
}

html.qs-signal .qs-signal-description {
  margin: var(--signal-space-3) 0;
  color: var(--signal-muted);
  font-size: var(--signal-text-sm);
  line-height: 1.65;
}

html.qs-signal .qs-signal-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--signal-space-3);
}

html.qs-signal .qs-signal-stack {
  display: grid;
  gap: var(--signal-space-4);
}

/* 3. Shared controls. No .btn, .card or gameplay-button catch-all. */
html.qs-signal :is(
  .qs-signal-btn, .qs-btn, .qs-nav-item, .qs-icon-btn, .icon-btn,
  .topReturnBtn, .qs-play-btn, .qs-sound-toggle, .qs-pill-action-btn, .qs-join-btn
) {
  appearance: none;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-control);
  background: var(--signal-surface);
  color: var(--signal-text);
  font-family: var(--signal-font);
  font-size: var(--signal-text-sm);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

html.qs-signal :is(.qs-signal-btn, .qs-btn, .qs-join-btn) {
  min-height: 42px;
  padding: 10px 14px;
}

html.qs-signal .qs-signal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--signal-space-2);
}

html.qs-signal :is(
  .qs-signal-btn, .qs-btn, .qs-nav-item, .qs-icon-btn, .icon-btn,
  .topReturnBtn, .qs-play-btn, .qs-sound-toggle, .qs-pill-action-btn, .qs-join-btn
):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--signal-raised);
  color: var(--signal-text);
  border-color: var(--signal-line-hover);
}

html.qs-signal :is(.qs-signal-btn, .qs-btn):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--signal-soft);
  color: var(--signal-text);
}

html.qs-signal :is(
  .qs-signal-btn--primary, .qs-btn-primary, .qs-pill-action-btn.is-primary, .qs-join-btn
) {
  background: var(--signal-primary);
  color: var(--signal-on-primary);
  border-color: var(--signal-primary);
}

html.qs-signal :is(
  .qs-signal-btn--primary, .qs-btn-primary, .qs-pill-action-btn.is-primary, .qs-join-btn
):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--signal-primary-hover);
  color: var(--signal-on-primary);
  border-color: var(--signal-primary-hover);
}

html.qs-signal :is(
  .qs-signal-btn--primary, .qs-btn-primary, .qs-pill-action-btn.is-primary, .qs-join-btn
):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--signal-primary-active);
  color: var(--signal-on-primary);
  border-color: var(--signal-primary-active);
}

html.qs-signal :is(.qs-nav-item.is-active, .qs-theme-choice[aria-pressed="true"]):not(:disabled):not([aria-disabled="true"]),
html.qs-signal :is(.qs-nav-item.is-active, .qs-theme-choice[aria-pressed="true"]):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--signal-accent-soft);
  color: var(--signal-primary);
  border-color: var(--signal-primary);
}

html.qs-signal .qs-signal-btn--danger,
html.qs-signal .qs-signal-btn--danger:hover:not(:disabled) {
  background: var(--signal-danger-bg);
  color: var(--signal-danger);
  border-color: var(--signal-danger);
}

html.qs-signal :is(
  .qs-signal-btn, .qs-btn, .qs-nav-item, .qs-icon-btn, .icon-btn,
  .topReturnBtn, .qs-play-btn, .qs-sound-toggle, .qs-pill-action-btn, .qs-join-btn
):is(:disabled, [aria-disabled="true"]) {
  background: var(--signal-soft);
  color: var(--signal-muted);
  border-color: var(--signal-divider);
  opacity: 1;
  cursor: default;
}

/* All states retain paired foreground/background values, including focus. */
html.qs-signal :is(
  .qs-signal-btn, .qs-btn, .qs-nav-item, .qs-icon-btn, .icon-btn,
  .topReturnBtn, .qs-play-btn, .qs-sound-toggle, .qs-pill-action-btn, .qs-join-btn
):focus-visible {
  outline: 3px solid var(--signal-focus);
  outline-offset: 3px;
}

/* 4. Form primitives and the existing shared account/password/Join fields. */
html.qs-signal .qs-signal-field {
  display: grid;
  gap: var(--signal-space-2);
  color: var(--signal-muted);
  font-size: var(--signal-text-sm);
}

html.qs-signal .qs-signal-input,
html.qs-signal :is(.qs-settings, #accountBackdrop, #forcePwBackdrop, .qs-join-card)
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background: var(--signal-surface);
  color: var(--signal-text);
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-control);
  font-family: var(--signal-font);
  font-size: var(--signal-text-base);
  line-height: 1.5;
}

html.qs-signal .qs-signal-input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
}

html.qs-signal .qs-signal-input::placeholder,
html.qs-signal :is(.qs-settings, #accountBackdrop, #forcePwBackdrop, .qs-join-card) input::placeholder {
  color: var(--signal-muted);
  opacity: 1;
}

html.qs-signal .qs-signal-input:focus-visible,
html.qs-signal :is(.qs-settings, #accountBackdrop, #forcePwBackdrop, .qs-join-card)
  :is(input, select, textarea):focus-visible {
  background: var(--signal-surface);
  color: var(--signal-text);
  outline: 3px solid var(--signal-focus);
  outline-offset: 2px;
  border-color: var(--signal-primary);
  box-shadow: none;
}

html.qs-signal :is(.qs-settings, #accountBackdrop, #forcePwBackdrop, .qs-join-card)
  :is(input, select, textarea):disabled,
html.qs-signal .qs-signal-input:disabled {
  background: var(--signal-soft);
  color: var(--signal-muted);
  border-color: var(--signal-divider);
  opacity: 1;
}

html.qs-signal :is(.qs-settings, #accountBackdrop, #forcePwBackdrop, .qs-join-card)
  input:-webkit-autofill {
  -webkit-text-fill-color: var(--signal-text);
  -webkit-box-shadow: 0 0 0 1000px var(--signal-surface) inset;
  box-shadow: 0 0 0 1000px var(--signal-surface) inset;
  border-color: var(--signal-line);
}

/* 5. Existing modal surfaces: preserve all visibility, role and event classes. */
html.qs-signal :is(.qs-settings, .qs-modal, .qs-forcepw-modal, .qs-join-card, .qs-pill-popover) {
  background: var(--signal-surface);
  color: var(--signal-text);
  border: 1px solid var(--signal-divider);
  border-radius: var(--signal-radius-card);
  box-shadow: var(--signal-shadow);
  backdrop-filter: none;
}

html.qs-signal :is(.qs-settings, .qs-modal, .qs-forcepw-modal, .qs-join-card) {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

html.qs-signal .qs-modal-backdrop {
  background: var(--signal-backdrop);
}

html.qs-signal :is(.qs-settings-head, .qs-settings-nav, .qs-divider, .qs-forcepw-head) {
  border-color: var(--signal-divider);
}

html.qs-signal .qs-settings-nav {
  background: var(--signal-raised);
}

html.qs-signal :is(.qs-settings, .qs-modal, .qs-forcepw-modal, .qs-join-card, .qs-pill-popover)
  :is(h2, h3, .qs-form-title, .qs-card-title, .qs-check-text, .qs-join-title, .qs-forcepw-title) {
  color: var(--signal-text);
}

html.qs-signal :is(.qs-settings, .qs-modal, .qs-forcepw-modal, .qs-join-card, .qs-pill-popover)
  :is(.muted, .qs-label, .qs-k, .qs-join-label, .qs-forcepw-subtitle, .qs-pill-hint, .qs-pill-lines) {
  color: var(--signal-muted);
}

html.qs-signal :is(.qs-settings, .qs-modal, .qs-forcepw-modal, .qs-pill-popover) a {
  color: var(--signal-primary);
}

html.qs-signal .qs-settings .qs-col {
  min-width: 0;
}

html.qs-signal .qs-settings-content {
  min-width: 0;
}

html.qs-signal :is(.qs-card, .qs-check, .qs-sound-row, .qs-sound-consent) {
  background: var(--signal-raised);
  color: var(--signal-text);
  border-color: var(--signal-divider);
}

html.qs-signal .qs-check:hover {
  background: var(--signal-soft);
  border-color: var(--signal-line-hover);
}

html.qs-signal .qs-check-box {
  background: var(--signal-surface);
  border-color: var(--signal-line);
  box-shadow: none;
}

html.qs-signal .qs-check input:checked + .qs-check-box {
  background: var(--signal-primary);
  border-color: var(--signal-primary);
  box-shadow: none;
}

html.qs-signal .qs-check-box::after {
  border-color: var(--signal-on-primary);
}

html.qs-signal .qs-check:focus-within {
  outline: 3px solid var(--signal-focus);
  outline-offset: 2px;
}

/* Audio state classes stay in place; disabled controls remain natively disabled. */
html.qs-signal .qs-sound-row.is-disabled {
  opacity: 1;
  filter: none;
}

html.qs-signal .qs-sound-toggle.is-off,
html.qs-signal .qs-sound-toggle.is-off:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--signal-soft);
  color: var(--signal-muted);
  opacity: 1;
}

html.qs-signal .qs-sound-slider {
  accent-color: var(--signal-primary);
}

html.qs-signal .qs-settings input.qs-sound-slider {
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html.qs-signal .qs-sound-slider::-webkit-slider-runnable-track {
  background: var(--signal-line);
}

html.qs-signal .qs-sound-slider::-moz-range-track {
  background: var(--signal-line);
}

html.qs-signal .qs-sound-slider::-webkit-slider-thumb {
  background: var(--signal-primary);
  box-shadow: none;
}

html.qs-signal .qs-sound-slider::-moz-range-thumb {
  background: var(--signal-primary);
  border-color: var(--signal-primary);
  box-shadow: none;
}

html.qs-signal .qs-switch span {
  color: var(--signal-text);
}

html.qs-signal :is(.qs-settings, .qs-forcepw-modal) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--signal-primary);
}

/* 6. Shared header/footer and status colours (including dynamically styled pills). */
html.qs-signal :is(.topbar, .site-footer, .dropdown) {
  background: var(--signal-surface);
  color: var(--signal-text);
  border-color: var(--signal-divider);
  backdrop-filter: none;
}

html.qs-signal :is(.topbar, .qs-settings, .qs-modal, .qs-forcepw-modal, .qs-pill-popover) .icon,
html.qs-signal :is(.topbar, .qs-settings, .qs-modal, .qs-forcepw-modal, .qs-pill-popover) .icon * {
  fill: currentColor;
}

/* Settings is an outline icon; generic .icon fills must not paint its centre. */
html.qs-signal .topbar #settingsBtn > svg.icon {
  display: block;
  width: 18px;
  height: 18px;
}

html.qs-signal .topbar #settingsBtn > svg.icon,
html.qs-signal .topbar #settingsBtn > svg.icon * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.qs-signal :is(.topbar .pill, .qs-badge) {
  background: var(--signal-soft);
  color: var(--signal-muted);
  border-color: var(--signal-divider);
}

/* Existing topbar.js injects !important backgrounds; override only those states. */
html.qs-signal .topbar .pill.qs-pill-gray {
  background: var(--signal-soft) !important;
  border-color: var(--signal-divider) !important;
  color: var(--signal-muted);
}

html.qs-signal .topbar .pill.qs-pill-green,
html.qs-signal .qs-badge.ok {
  background: var(--signal-success-bg) !important;
  border-color: var(--signal-success) !important;
  color: var(--signal-success);
}

html.qs-signal .topbar .pill.qs-pill-yellow,
html.qs-signal .qs-badge.warn {
  background: var(--signal-warning-bg) !important;
  border-color: var(--signal-warning) !important;
  color: var(--signal-warning);
}

html.qs-signal .topbar .pill.qs-pill-red,
html.qs-signal .qs-badge.bad {
  background: var(--signal-danger-bg) !important;
  border-color: var(--signal-danger) !important;
  color: var(--signal-danger);
}

html.qs-signal .dropdown button {
  color: var(--signal-text);
}

html.qs-signal .dropdown button:hover {
  background: var(--signal-raised);
  color: var(--signal-text);
}

html.qs-signal .dropdown button:focus-visible,
html.qs-signal .site-footer a:focus-visible {
  outline: 3px solid var(--signal-focus);
  outline-offset: 3px;
}

html.qs-signal .dropdown .sep,
html.qs-signal .qs-divider {
  background: var(--signal-divider);
}

html.qs-signal .dropdown .danger,
html.qs-signal .dropdown .danger:hover {
  color: var(--signal-danger);
}

html.qs-signal .dropdown .btn-success,
html.qs-signal .dropdown .btn-success:hover {
  color: var(--signal-success);
}

html.qs-signal .site-footer {
  align-items: center;
  font-family: var(--signal-font);
  font-size: var(--signal-text-sm);
}

html.qs-signal .site-footer a {
  color: var(--signal-primary);
}

/* 7. Theme choice and unmodified LGE asset. */
html.qs-signal .qs-theme-panel {
  display: grid;
  gap: var(--signal-space-3);
  padding: var(--signal-space-2) 0;
}

html.qs-signal .qs-theme-options {
  display: flex;
  gap: var(--signal-space-3);
  flex-wrap: wrap;
}

html.qs-signal .qs-theme-choice {
  min-width: 104px;
}

html.qs-signal .qs-signal-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--signal-space-3);
  color: var(--signal-muted);
  font-family: var(--signal-font);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Alpha bounds of the supplied transparent original: (146,67)–(418,350). */
html.qs-signal .qs-signal-logo-frame { display: block; position: relative; flex: 0 0 48px; width: 48px; height: 50px; overflow: hidden; }
html.qs-signal .qs-signal-brand .qs-signal-logo-frame img { position: absolute; display: block; width: 207.7206%; height: 155.8304%; max-width: none; left: -53.6765%; top: -23.6749%; object-fit: fill; border-radius: 0; }
html.qs-signal[data-qs-theme="light"] .qs-signal-logo-frame img { filter: brightness(.32); }
html.qs-signal .site-footer { column-gap: 18px; row-gap: 12px; }
html.qs-signal .site-footer .qs-signal-brand { margin-left: 8px; gap: 10px; }

html.qs-signal .qs-theme-panel .qs-signal-brand {
  padding-top: var(--signal-space-4);
  border-top: 1px solid var(--signal-divider);
}

@media (max-width: 640px) {
  html.qs-signal .qs-settings-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  html.qs-signal .qs-settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--signal-divider);
  }

  html.qs-signal .qs-settings-nav .qs-nav-item {
    width: auto;
  }

  html.qs-signal .qs-sound-row {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: var(--signal-space-2);
  }

  html.qs-signal .qs-sound-row > .qs-sound-toggle {
    grid-column: 1;
    grid-row: 1;
  }

  html.qs-signal .qs-sound-row > .qs-play-btn {
    grid-column: 3;
    grid-row: 1;
  }

  html.qs-signal .qs-sound-row > .qs-sound-slider {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  html.qs-signal .qs-sound-consent {
    flex-direction: column;
    align-items: flex-start;
  }

  html.qs-signal #sndConsentEnable {
    margin-left: 0;
    white-space: normal;
  }
}

@media (pointer: coarse) {
  html.qs-signal :is(
    .qs-signal-btn, .qs-btn, .qs-nav-item, .qs-icon-btn, .icon-btn,
    .topReturnBtn, .qs-play-btn, .qs-sound-toggle, .qs-pill-action-btn, .qs-join-btn
  ) {
    min-height: 44px;
  }

  html.qs-signal :is(.qs-icon-btn, .icon-btn, .qs-play-btn, .qs-sound-toggle) {
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.qs-signal :is(
    .qs-signal-page, .qs-signal-btn, .qs-settings, .qs-modal, .qs-forcepw-modal,
    .qs-join-card, .topbar, .site-footer, .qs-pill-popover
  ),
  html.qs-signal :is(.qs-settings, .qs-modal, .qs-forcepw-modal, .qs-join-card, .qs-pill-popover) * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
}