/* Shared by app, login and verification pages. */
* { -webkit-tap-highlight-color: transparent; }
/* Purple is the existing stylesheet baseline. New palettes reuse the semantic rules below. */
:root {
  color-scheme: dark;
  --theme-page: #1a1a23;
  --theme-chrome: #241d38;
  --theme-on-page: #e1e1e6;
  /* Content stays dark; fields and navigation use their own brighter surface. */
  --theme-surface: #292833;
  --theme-surface-soft: #33313d;
  --theme-ink: #ffffff;
  --theme-muted: #b5b0c0;
  --theme-field: #34313f;
  --theme-border: #5d536e;
  --theme-accent: #8f73d2;
  --theme-action: #7555b7;
  --theme-on-action: #ffffff;
  --theme-danger: #ff6b6b;
  --theme-on-danger: #321a20;
  --theme-success: #b7d2b6;
  --theme-warning: #f1ceaa;
}
/* Native browser affordances follow the same palette as shared controls. */
::selection { background: var(--theme-action); color: var(--theme-on-action); }
:is(input, textarea) { caret-color: var(--theme-ink); }
:is(button, input, textarea, select, a):focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }

/* Settings picker is shared by every theme. */
.theme-setting { min-width: 0; border: 1px solid var(--theme-border); border-radius: 12px; padding: 1rem; color: var(--theme-on-page); }
.theme-setting legend { padding: 0 0.4rem; font-weight: 600; }
.theme-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.theme-choice { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; text-align: left; min-width: 0; min-height: 110px; padding: 0.8rem; border: 2px solid transparent; border-radius: 12px; background: var(--theme-field); color: var(--theme-ink); font: inherit; cursor: pointer; }
.theme-choice > span:last-child { font-size: 0.75rem; line-height: 1.4; color: var(--theme-muted); }
.theme-choice[aria-pressed="true"] { border-color: var(--theme-accent); box-shadow: inset 0 0 0 1px var(--theme-accent); }
.theme-choice:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
.theme-swatches { display: flex; gap: 0.25rem; margin-bottom: 0.2rem; }
.theme-swatches span { width: 19px; height: 19px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); }
[data-theme-choice="purple"] .theme-swatches span:nth-child(1) { background: #201c2d; }
[data-theme-choice="purple"] .theme-swatches span:nth-child(2) { background: #7555b7; }
[data-theme-choice="purple"] .theme-swatches span:nth-child(3) { background: #b6a0e2; }
.theme-status { font-size: 0.8rem; margin-top: 0.7rem; color: var(--theme-on-page); opacity: 0.8; }

/* Ink retains a clear keyboard outline against the dark app surfaces. */
:root[data-theme] .app-container :is(button, input, textarea, select, a):focus-visible { outline: 2px solid var(--theme-ink); outline-offset: 3px; }

/* Text inputs match :focus-visible after touch too, so track actual keyboard use. */
:root[data-theme] .app-container:not([data-input-method="keyboard"]) :is(button,input,textarea,select,a):focus {
  outline: none;
}

/* Shared full-width selects: native picker, consistent inset and legible chevron. */
.app-container select:not(.list-filter):not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%23e1e1e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}