/* Appearance is a personal choice; every palette uses the same interface. */
:root[data-theme="pink"] {
  --bg: #f4bfd2;
  --surface: #f9d7e4;
  --surface-raised: #eeb0c7;
  --ink: #3b1727;
  --muted: #68374b;
  --line: #c3849d;
  --button: #742442;
  --button-ink: #fff4f8;
  --wash: #7424420b;
  --shadow: 0 20px 65px #5a203d1a;
  --soft: var(--surface-raised);
  --deep: var(--ink);
  --lime: var(--surface-raised);
  color-scheme: light;
}
:root[data-theme="pink"] .sidebar { background: #eeb3c8; }
:root[data-theme="pink"] .sidebar .nav-button.active { background: var(--surface); }
:root[data-theme="pink"] :is(.brand-wordmark img, .legal-brand img, .entry-invitation h1 img) { filter: invert(1); }
:root[data-theme="pink"] .grok-on-light { display: block; filter: none; }
:root[data-theme="pink"] .grok-on-dark { display: none; }
:root[data-theme="pink"] .discover-cinema::before { background: radial-gradient(ellipse at 87% 43%, #bd426d20, transparent 60%); }
:root[data-theme="pink"] .product-card:hover { box-shadow: 0 12px 35px #50213612; }
:root[data-theme="pink"] .engine-menu { box-shadow: 0 12px 38px #5021361c, 0 2px 8px #5021360a; }
:root[data-theme="pink"] dialog.history-panel { box-shadow: -20px 0 80px #5021361a; }
:root[data-theme="pink"] dialog.history-panel::backdrop { background: #39202a40; }
:root[data-theme="pink"] .history-panel :is(button, input):focus-visible { outline-color: var(--button); }
:root[data-theme="pink"] .history-panel-row[data-status="running"] .history-panel-icon { color: var(--button); border-color: var(--line); }
:root[data-theme="pink"] .search-signal { background: var(--button); box-shadow: 0 0 12px #74244220; }
:root[data-theme="pink"] .search-done .search-signal { background: #3f6a50; box-shadow: none; }
:root[data-theme="pink"] .search-orbit { border-color: var(--line); border-top-color: var(--button); }
:root[data-theme="pink"] .speed-badge { color: var(--button); border-color: var(--line); }
:root[data-theme="pink"] .personal-success { background: #eff8f1; border-color: #b8d3c1; }
:root[data-theme="pink"] :is(.personal-success p, .connected-pill) { color: #28583b !important; }
:root[data-theme="pink"] .form-error { color: #8b1f35; }
:root[data-theme="pink"] .gc-pointer-layer {
  color: #b51f62;
  --gc-pointer-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 0 12px rgba(181, 31, 98, .08);
}

/* The same explicit, keyboard-friendly picker is available in all themes. */
.theme-picker { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
#theme-toggle:hover { rotate: none; background: var(--surface-raised); }
#theme-toggle[aria-expanded="true"] { background: var(--surface-raised); border-color: var(--muted); }
.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 65;
  display: grid;
  width: 202px;
  max-width: calc(100vw - 32px);
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  text-align: left;
  transform-origin: top right;
}
.theme-menu[hidden] { display: none !important; }
.theme-menu-title { padding: 9px 10px 8px; color: var(--muted); font-size: 10px; line-height: 1.5; font-weight: 500; }
.theme-option { display: flex; align-items: center; gap: 12px; min-height: 44px; width: 100%; padding: 10px; border-radius: 10px; color: var(--ink); background: transparent; font-size: 12px; text-align: left; }
.theme-option:hover, .theme-option:focus-visible { background: var(--surface-raised); }
.theme-option:focus-visible { outline: 2px solid var(--muted); outline-offset: -2px; }
.theme-swatch { width: 19px; height: 19px; flex-shrink: 0; border: 1px solid #8886; border-radius: 50%; }
.theme-swatch-dark { background: #111216; }
.theme-swatch-light { background: #f5f5f2; }
.theme-swatch-pink { background: #e7a0bd; }
.theme-selected { width: 16px; height: 16px; margin-left: auto; opacity: 0; }
.theme-option[aria-checked="true"] .theme-selected { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .theme-menu:not([hidden]) { animation: theme-menu-in 160ms cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes theme-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
}