/* QSupport Custom Themes and Utility Classes */
:root {
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-bg: #f8fafc;
  --color-text: #0f172a;
}

html.dark {
  --color-bg: #020617;
  --color-text: #f8fafc;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 10-Digit ID Custom Typography */
.id-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.15em;
  font-feature-settings: "tnum";
}

/* Remote Viewer Canvas */
.remote-screen-container {
  aspect-ratio: 16 / 9;
  background-color: #000000;
  cursor: crosshair;
}

/* Smooth modal transitions */
.modal-backdrop {
  backdrop-filter: blur(8px);
}

/* Cookie Banner & Modal Explicit Theme Support */
#qs-cookie-banner {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

html.dark #qs-cookie-banner {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #1e293b !important;
}

#qs-cookie-banner h4 {
  color: #0f172a !important;
}

html.dark #qs-cookie-banner h4 {
  color: #ffffff !important;
}

#qs-cookie-banner p {
  color: #64748b !important;
}

html.dark #qs-cookie-banner p {
  color: #94a3b8 !important;
}

#qs-cookie-modal {
  background-color: rgba(15, 23, 42, 0.4) !important;
}

html.dark #qs-cookie-modal {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

#qs-cookie-modal > div {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

html.dark #qs-cookie-modal > div {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #1e293b !important;
}