.theme-picker { position: relative; }

.theme-toggle__icon { display: none; }
:root[data-theme-mode="system"] .theme-toggle__icon--system,
:root[data-theme-mode="dark"] .theme-toggle__icon--dark,
:root[data-theme-mode="light"] .theme-toggle__icon--light { display: block; }

.theme-toggle__chevron {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.theme-toggle[aria-expanded="true"] .theme-toggle__chevron { transform: rotate(180deg); }

.theme-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-menu);
  width: max-content;
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
}

.theme-option {
  display: grid;
  width: 100%;
  grid-template-columns: 1.25rem 1fr 1rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: left;
}

.theme-option:hover { background: var(--color-surface-hover); color: var(--color-text); }
.theme-option[aria-checked="true"] { color: var(--color-text); font-weight: 750; }
.theme-option svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theme-option__check { visibility: hidden; }
.theme-option[aria-checked="true"] .theme-option__check { visibility: visible; color: var(--color-accent); }

@media (max-width: 40rem) {
  .theme-toggle__label,
  .theme-toggle__chevron { display: none; }
}