/* Панель «Тема и цвет» (theme.js) — общая для сайта и личного кабинета */
.theme-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px;
  background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; font-size: 19px; cursor: pointer;
  transition: transform .2s;
}
.theme-btn:hover { transform: rotate(-12deg) scale(1.06); }
.theme-panel {
  position: absolute; z-index: 50; width: 252px; padding: 14px; border-radius: 16px;
  background: var(--surface, var(--card, #fff)); color: var(--text, #111);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: 0 18px 50px rgba(15, 23, 41, .22); animation: theme-pop .2s ease-out;
}
@keyframes theme-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.theme-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin: 2px 0 8px; }
.theme-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.theme-row:last-child { margin-bottom: 0; }
.theme-opt {
  flex: 1; padding: 8px 6px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 10px;
  background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.theme-opt[aria-pressed="true"] { background: var(--accent, var(--btn)); color: var(--accent-ink, #fff); border-color: transparent; }
.theme-dot {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 0 0 1px rgba(128, 128, 128, .35); transition: transform .15s;
}
.theme-dot:hover { transform: scale(1.1); }
.theme-dot[aria-pressed="true"] { border-color: var(--text, #111); }