/* ══════════════════════════════════════════
   Picturium — Dark theme  v2
   ──────────────────────────────────────────
   Colors from colors.ts (dark palette).

   IMPORTANT — uses html[data-theme="dark"]
   (specificity 0,1,1) to beat the :root
   blocks in shared-detail.css and site.css
   that both have specificity 0,1,0.
   ══════════════════════════════════════════ */

/* ── Smooth transition on toggle ─────────── */

.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition:
    background-color 0.35s ease,
    color 0.25s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    fill 0.25s ease,
    stroke 0.25s ease !important;
}

/* ═══════════════════════════════════════════
   1.  CSS VARIABLE OVERRIDES
   All values from colors.ts → dark
   ═══════════════════════════════════════════ */

html[data-theme="dark"] {
  /* ── brand (commonColor) ────────────────── */
  --primary: #c44536;
  --primary-light: rgba(196, 69, 54, 0.12);
  --primary-hover: #a83a2d;
  --accent: #d4a574; /* accentSecondary */

  /* ── backgrounds ────────────────────────── */
  --bg: #1a1716; /* background */
  --bg-card: #2c2520; /* cardBackground */
  --bg-subtle: #3a3330; /* headerBlock */
  --bg-hover: #4a423d; /* avatarBackground */

  /* ── text ───────────────────────────────── */
  --text: #f5f1ed; /* text */
  --text-2: #a89b8e; /* secondaryText */
  --text-3: #8b7e74; /* label */
  --text-4: #6b625a; /* placeholder */

  /* ── borders ────────────────────────────── */
  --border: #3a3330; /* border */
  --border-light: #2c2520; /* separator */

  /* ── shadows ────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card:
    0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-card-hover:
    0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);

  /* ── shared-detail.css tokens ───────────── */
  --card: #2c2520; /* cardBackground */
  --surface: #3a3330; /* headerBlock */
  --shadow-c: 0, 0, 0;
  --liked: #ff5f6d;
  --card-radius: 24px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.25s;
  --placeholder: #6b625a; /* placeholder */
  --accent-2nd: #d4a574; /* accentSecondary */

  /* ── breadcrumb.css vars (--color-*) ───── */
  --color-text-primary: #f5f1ed;
  --color-text-secondary: #a89b8e;
  --color-text-muted: #6b625a;
  --color-primary: #c44536;

  /* ── nav-path.css vars (--color-*) ──────── */
  --color-surface: #3a3330;
  --color-surface-hover: #4a423d;

  /* ── gallery-additions.css vars (--clr-*) ─ */
  --clr-border: #3a3330;
  --clr-bg-input: #2c2520;
  --clr-text-muted: #6b625a;
  --clr-text: #f5f1ed;
  --clr-primary: #c44536;
  --clr-primary-dark: #a83a2d;
  --clr-danger: #e74c3c;

  color-scheme: dark;
}

/* ═══════════════════════════════════════════
   2.  COMPONENT OVERRIDES
   Hardcoded colors that vars can't reach
   ═══════════════════════════════════════════ */

/* ── Header ──────────────────────────────── */

html[data-theme="dark"] .header {
  background: rgba(26, 23, 22, 0.85);
  border-bottom-color: rgba(58, 51, 48, 0.5);
}

html[data-theme="dark"] .header__logo-text {
  color: #f5f1ed;
}

html[data-theme="dark"] .header__link {
  color: #a89b8e;
}
html[data-theme="dark"] .header__link:hover {
  color: #f5f1ed;
  background: #3a3330;
}
html[data-theme="dark"] .header__link.is-active {
  color: #c44536;
  background: rgba(196, 69, 54, 0.12);
}

/* ── Toolbar chips (Популярные, Новые…) ──── */

html[data-theme="dark"] .chip {
  background: #2c2520;
  border-color: #3a3330;
  color: #a89b8e;
}
html[data-theme="dark"] .chip:hover {
  border-color: #4a423d;
  color: #f5f1ed;
  background: #3a3330;
}
html[data-theme="dark"] .chip--on {
  background: #f5f1ed;
  border-color: #f5f1ed;
  color: #1a1716;
}
html[data-theme="dark"] .chip--on:hover {
  background: #a89b8e;
  border-color: #a89b8e;
  color: #1a1716;
}
html[data-theme="dark"] .chip--reset {
  color: #c44536;
  border-color: rgba(196, 69, 54, 0.3);
  background: rgba(196, 69, 54, 0.06);
}
html[data-theme="dark"] .chip--reset:hover {
  background: rgba(196, 69, 54, 0.12);
  border-color: #c44536;
}

/* ── Filter panel ────────────────────────── */

html[data-theme="dark"] .fpanel__body {
  background: #2c2520;
  border-color: #3a3330;
}
html[data-theme="dark"] .fselect {
  background-color: #1a1716;
  border-color: #3a3330;
  color: #f5f1ed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B625A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .fselect:hover {
  border-color: #4a423d;
}
html[data-theme="dark"] .fselect:focus {
  border-color: #c44536;
  box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.15);
}

/* ── Toolbar filter button ───────────────── */

html[data-theme="dark"] .toolbar__fbtn {
  color: #a89b8e;
  background: #2c2520;
  border-color: #3a3330;
}
html[data-theme="dark"] .toolbar__fbtn:hover {
  border-color: #4a423d;
  color: #f5f1ed;
  background: #3a3330;
}

/* ── Card ────────────────────────────────── */

html[data-theme="dark"] .card {
  background: #2c2520;
}
html[data-theme="dark"] .card__visual {
  background: #3a3330;
}
html[data-theme="dark"] .card__badge {
  background: rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .card__author-link:hover {
  background: #3a3330;
}
html[data-theme="dark"] .card__author {
  color: #a89b8e;
}

/* ── Pagination ──────────────────────────── */

html[data-theme="dark"] .pager__btn {
  background: #2c2520;
  border-color: #3a3330;
  color: #a89b8e;
}
html[data-theme="dark"] .pager__btn:hover {
  border-color: #4a423d;
  color: #f5f1ed;
  background: #3a3330;
}
html[data-theme="dark"] .pager__btn.is-active {
  background: #f5f1ed;
  border-color: #f5f1ed;
  color: #1a1716;
}

/* ── Gallery search ──────────────────────── */

html[data-theme="dark"] .g-search {
  border-color: #3a3330;
  background: #2c2520;
}
html[data-theme="dark"] .g-search__input {
  color: #f5f1ed;
}
html[data-theme="dark"] .g-search__input::placeholder {
  color: #6b625a;
}
html[data-theme="dark"] .g-search:focus-within {
  border-color: #c44536;
  box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.15);
}
html[data-theme="dark"] .g-search__clear:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f1ed;
}

/* ── Active filter chips ─────────────────── */

html[data-theme="dark"] .achip {
  background: #c44536;
  color: #fff;
}
html[data-theme="dark"] .achip:hover {
  background: #a83a2d;
}
html[data-theme="dark"] .achip--reset {
  background: transparent;
  color: #e74c3c;
  border-color: #e74c3c;
}
html[data-theme="dark"] .achip--reset:hover {
  background: #e74c3c;
  color: #fff;
}

/* ── Footer ──────────────────────────────── */

html[data-theme="dark"] .footer {
  border-top-color: #3a3330;
}
html[data-theme="dark"] .footer__brand {
  color: #a89b8e;
}
html[data-theme="dark"] .footer__sep {
  color: #3a3330;
}
html[data-theme="dark"] .footer__text {
  color: #8b7e74;
}
html[data-theme="dark"] .footer__link {
  color: #c44536;
}
html[data-theme="dark"] .footer__copy {
  color: #6b625a;
}

/* ═══════════════════════════════════════════
   3.  SHARED-DETAIL.CSS OVERRIDES
   ═══════════════════════════════════════════ */

/* ── UserAvatar ──────────────────────────── */

html[data-theme="dark"] .ua__ph {
  background: linear-gradient(135deg, #c44536, #d4a574);
}

/* ── Back link ───────────────────────────── */

html[data-theme="dark"] .back-link {
  color: #a89b8e;
}
html[data-theme="dark"] .back-link:hover {
  color: #f5f1ed;
}

/* ── Sections ────────────────────────────── */

html[data-theme="dark"] .section {
  border-bottom-color: #3a3330;
}
html[data-theme="dark"] .section__label {
  color: #8b7e74;
}
html[data-theme="dark"] .section__value {
  color: #f5f1ed;
}

/* ── Zoom hint ───────────────────────────── */

html[data-theme="dark"] .zoom-hint {
  background: rgba(44, 37, 32, 0.9);
  color: #f5f1ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════
   4.  ARTWORK-DETAIL.CSS OVERRIDES
   ═══════════════════════════════════════════ */

/* ── Main card ───────────────────────────── */

html[data-theme="dark"] .pin__card {
  background: #2c2520;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.25);
}

/* ── Image column ────────────────────────── */

html[data-theme="dark"] .pin__image-col {
  background: #3a3330;
}

/* ── Likes pill — hardcoded #fff0ed ──────── */

html[data-theme="dark"] .likes-pill {
  background: rgba(255, 95, 109, 0.12);
  border-color: rgba(255, 95, 109, 0.2);
}
html[data-theme="dark"] .likes-pill span {
  color: #f5f1ed;
}

/* ── Author hover ────────────────────────── */

html[data-theme="dark"] .author:hover {
  background: #3a3330;
}
html[data-theme="dark"] .author__name {
  color: #f5f1ed;
}

/* ── Title / description ─────────────────── */

html[data-theme="dark"] .pin__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .pin__desc {
  color: #a89b8e;
}

/* ── Book card inside artwork ────────────── */

html[data-theme="dark"] .book {
  background: #3a3330;
}
html[data-theme="dark"] .book:hover {
  border-color: #4a423d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .book__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .book__author {
  color: #8b7e74;
}
html[data-theme="dark"] .book__page {
  color: #6b625a;
}
html[data-theme="dark"] .book__arrow {
  color: #6b625a;
}
html[data-theme="dark"] .book__cover {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ── Material chips (on detail page) ─────── */

html[data-theme="dark"] .mat-group__type {
  color: #a89b8e;
}

html[data-theme="dark"] .chip[data-tip]:hover {
  border-color: #c44536;
  color: #c44536;
  background: rgba(196, 69, 54, 0.1);
}
html[data-theme="dark"] .chip[data-tip]::after {
  background: #f5f1ed;
  color: #1a1716;
}

/* ── Footer row ──────────────────────────── */

html[data-theme="dark"] .pin__footer {
  border-top-color: #3a3330;
  color: #6b625a;
}

/* ═══════════════════════════════════════════
   5.  BOOK-DETAIL.CSS OVERRIDES
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .bk__card {
  background: #2c2520;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .bk__cover-col {
  background: #3a3330;
}
html[data-theme="dark"] .bk__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .bk__author {
  color: #a89b8e;
}

/* ── Rating stars ─────────────────────────── */

html[data-theme="dark"] .star:not(.star--full):not(.star--half) {
  fill: #4a423d;
}
html[data-theme="dark"] .star.star--full {
  fill: #f59e0b;
}
html[data-theme="dark"] .star.star--half {
  fill: url(#half-star-gradient);
}
html[data-theme="dark"] .rating-value {
  color: #f5f1ed;
}
html[data-theme="dark"] .rating-count {
  color: #8b7e74;
}

/* ── Tags — hardcoded backgrounds ────────── */

html[data-theme="dark"] .tag--genre {
  background: rgba(109, 40, 217, 0.18);
  color: #b794f6;
}
html[data-theme="dark"] .tag--genre .tag__icon {
  stroke: #b794f6;
}

html[data-theme="dark"] .tag--type {
  background: rgba(52, 152, 219, 0.18);
  color: #7db4ff;
}
html[data-theme="dark"] .tag--type .tag__icon {
  stroke: #7db4ff;
}

html[data-theme="dark"] .tag--diff {
  background: #3a3330;
  color: #a89b8e;
}

html[data-theme="dark"] .tag--diff-easy {
  background: rgba(39, 174, 96, 0.18);
  color: #6ee7b7;
}
html[data-theme="dark"] .tag--diff-easy .tag__icon {
  stroke: #6ee7b7;
}
html[data-theme="dark"] .tag--diff-medium {
  background: rgba(243, 156, 18, 0.18);
  color: #fcd34d;
}
html[data-theme="dark"] .tag--diff-medium .tag__icon {
  stroke: #fcd34d;
}
html[data-theme="dark"] .tag--diff-hard {
  background: rgba(231, 76, 60, 0.18);
  color: #fca5a5;
}
html[data-theme="dark"] .tag--diff-hard .tag__icon {
  stroke: #fca5a5;
}

/* ── Artworks grid ───────────────────────── */

html[data-theme="dark"] .bk-artworks__heading {
  color: #f5f1ed;
}
html[data-theme="dark"] .bk-artworks__all {
  color: #c44536;
}
html[data-theme="dark"] .art-card {
  background: #3a3330;
}

/* ── Book shelf ──────────────────────────── */

html[data-theme="dark"] .bk-shelf__heading {
  color: #f5f1ed;
}
html[data-theme="dark"] .shelf-card__cover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .shelf-card__cover--ph {
  background: linear-gradient(145deg, #3a3330, #4a423d);
  color: #6b625a;
}
html[data-theme="dark"] .shelf-card__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .shelf-card__author {
  color: #8b7e74;
}

/* ═══════════════════════════════════════════
   6.  BREADCRUMB.CSS OVERRIDES
   (uses --color-* vars → now defined above,
    plus direct overrides for safety)
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .breadcrumb__item {
  color: #6b625a;
}
html[data-theme="dark"] .breadcrumb__item:not(:last-child)::after {
  color: #6b625a;
}
html[data-theme="dark"] .breadcrumb__link {
  color: #a89b8e;
}
html[data-theme="dark"] .breadcrumb__link:hover {
  color: #c44536;
}
html[data-theme="dark"] .breadcrumb__current {
  color: #f5f1ed;
}

/* ═══════════════════════════════════════════
   7.  NAV-PATH.CSS OVERRIDES
   (uses --color-* vars → now defined above,
    plus direct overrides for safety)
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .nav-path__item {
  background: #3a3330;
  color: #a89b8e;
}
html[data-theme="dark"] .nav-path__item:hover {
  background: #4a423d;
  color: #c44536;
}
html[data-theme="dark"] .nav-path__current {
  background: #3a3330;
  color: #f5f1ed;
}
html[data-theme="dark"] .nav-path__sep {
  color: #6b625a;
}
html[data-theme="dark"] .nav-path__icon {
  opacity: 0.4;
}

/* ═══════════════════════════════════════════
   8.  COMMENTS.CSS OVERRIDES
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .comments__heading {
  color: #f5f1ed;
}
html[data-theme="dark"] .comments-section > .cmt + .cmt {
  border-top-color: #3a3330;
}
html[data-theme="dark"] .cmt__name {
  color: #f5f1ed;
}
html[data-theme="dark"] .cmt__name:hover {
  color: #c44536;
}
html[data-theme="dark"] .cmt__time {
  color: #6b625a;
}
html[data-theme="dark"] .cmt__text {
  color: #a89b8e;
}
html[data-theme="dark"] .cmt__replies {
  border-left-color: #3a3330;
}
html[data-theme="dark"] .cmt--reply + .cmt--reply {
  border-top-color: #3a3330;
}

/* ═══════════════════════════════════════════
   9.  LIBRARY.CSS OVERRIDES
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .bcard {
  background: #2c2520;
}
html[data-theme="dark"] .bcard__cover {
  background: #3a3330;
}
html[data-theme="dark"] .bcard__placeholder {
  color: #6b625a;
}
html[data-theme="dark"] .bcard__rating {
  background: rgba(0, 0, 0, 0.6);
  color: #fbbf24;
}
html[data-theme="dark"] .bcard__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .bcard__author {
  color: #a89b8e;
}
html[data-theme="dark"] .bcard__meta {
  color: #6b625a;
}

/* ═══════════════════════════════════════════
   10.  PROFILE.CSS OVERRIDES
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .prof-hero::before {
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(196, 69, 54, 0.08) 0%,
      transparent 70%
    ),
    linear-gradient(180deg, #3a3330 0%, #1a1716 100%);
}
html[data-theme="dark"] .prof-hero::after {
  opacity: 0.15;
}

html[data-theme="dark"] .prof-card {
  background: #2c2520;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .prof-avatar__ring {
  box-shadow:
    0 8px 32px rgba(196, 69, 54, 0.2),
    0 0 0 6px rgba(26, 23, 22, 0.7);
  animation-name: prof-pulse-dark;
}

@keyframes prof-pulse-dark {
  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(196, 69, 54, 0.2),
      0 0 0 6px rgba(26, 23, 22, 0.7);
  }
  50% {
    box-shadow:
      0 8px 40px rgba(196, 69, 54, 0.35),
      0 0 0 6px rgba(26, 23, 22, 0.8);
  }
}

html[data-theme="dark"] .prof-avatar__ph {
  background: linear-gradient(135deg, #3a3330, #4a423d);
}
html[data-theme="dark"] .prof-name {
  color: #f5f1ed;
}
html[data-theme="dark"] .prof-bio {
  color: #a89b8e;
}
html[data-theme="dark"] .prof-bio__sep {
  color: #6b625a;
}

html[data-theme="dark"] .prof-gallery__header {
  border-bottom-color: rgba(58, 51, 48, 0.3);
}
html[data-theme="dark"] .prof-gallery__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .prof-gallery__count {
  color: #c44536;
  background: rgba(196, 69, 54, 0.12);
}

html[data-theme="dark"] .prof-empty__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .prof-empty__text {
  color: #6b625a;
}
html[data-theme="dark"] .prof-empty__icon {
  background: rgba(196, 69, 54, 0.12);
}

/* ═══════════════════════════════════════════
   11.  SITE.CSS — DETAIL PAGE OVERRIDES
   (the .detail__* classes in site.css)
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .detail__user {
  background: #3a3330;
}
html[data-theme="dark"] .detail__user:hover {
  background: #4a423d;
}
html[data-theme="dark"] .detail__user-name {
  color: #f5f1ed;
}
html[data-theme="dark"] .detail__user-date {
  color: #8b7e74;
}
html[data-theme="dark"] .detail__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .detail__desc {
  color: #a89b8e;
}
html[data-theme="dark"] .detail__stats {
  border-top-color: #3a3330;
  border-bottom-color: #3a3330;
}
html[data-theme="dark"] .detail__stat {
  color: #a89b8e;
}
html[data-theme="dark"] .detail__stat strong {
  color: #f5f1ed;
}
html[data-theme="dark"] .detail__stat svg {
  color: #6b625a;
}
html[data-theme="dark"] .detail__label {
  color: #6b625a;
}
html[data-theme="dark"] .detail__img-wrap {
  background: #3a3330;
}

/* ── Book mini-card ──────────────────────── */

html[data-theme="dark"] .book-card {
  background: #3a3330;
}
html[data-theme="dark"] .book-card__cover {
  background: #4a423d;
}
html[data-theme="dark"] .book-card__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .book-card__author {
  color: #8b7e74;
}

/* ── Chip tag (materials) ────────────────── */

html[data-theme="dark"] .chip-tag {
  background: #3a3330;
  color: #a89b8e;
}

/* ── Comments in site.css ────────────────── */

html[data-theme="dark"] .comments__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .cmt__avatar-ph {
  background: linear-gradient(135deg, #c44536, #d4a574);
}

/* ── Page head ───────────────────────────── */

html[data-theme="dark"] .page-head__title {
  color: #f5f1ed;
}
html[data-theme="dark"] .page-head__sub {
  color: #8b7e74;
}

/* ── Empty state ─────────────────────────── */

html[data-theme="dark"] .empty {
  color: #8b7e74;
}
html[data-theme="dark"] .empty__title {
  color: #a89b8e;
}

/* ═══════════════════════════════════════════
   12.  IMAGES — keep vivid on dark bg
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .card__img,
html[data-theme="dark"] .pin__img,
html[data-theme="dark"] .bk__cover-img,
html[data-theme="dark"] .art-card__img {
  filter: brightness(0.96);
}

/* ═══════════════════════════════════════════
   13b. USERS PAGE OVERRIDES
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .user-card:hover {
  background: #3a3330;
}

html[data-theme="dark"] .user-card__name {
  color: #f5f1ed;
}

html[data-theme="dark"] .user-card__city {
  color: #8b7e74;
}

html[data-theme="dark"] .user-card__stat {
  color: #6b625a;
}

/* ── City autocomplete ── */

html[data-theme="dark"] .city-ac__input {
  background: #2c2520;
  border-color: #3a3330;
  color: #f5f1ed;
}

html[data-theme="dark"] .city-ac__input::placeholder {
  color: #6b625a;
}

html[data-theme="dark"] .city-ac__input:focus {
  border-color: #c44536;
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.15);
}

html[data-theme="dark"] .city-ac__icon {
  color: #6b625a;
}

html[data-theme="dark"] .city-ac__clear {
  color: #6b625a;
}

html[data-theme="dark"] .city-ac__clear:hover {
  color: #f5f1ed;
}

html[data-theme="dark"] .city-ac__list {
  background: #2c2520;
  border-color: #3a3330;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .city-ac__item {
  color: #a89b8e;
}

html[data-theme="dark"] .city-ac__item:hover,
html[data-theme="dark"] .city-ac__item.is-active {
  background: #3a3330;
  color: #f5f1ed;
}

/* ═══════════════════════════════════════════
   13.  GLIGHTBOX — dark backdrop
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .glightbox-clean .goverlay {
  background: rgba(10, 8, 6, 0.92);
}

/* ═══════════════════════════════════════════
   14.  THEME TOGGLE SWITCH
   ═══════════════════════════════════════════ */

.theme-toggle {
  --toggle-w: 52px;
  --toggle-h: 28px;
  --toggle-pad: 3px;
  --knob: calc(var(--toggle-h) - var(--toggle-pad) * 2);

  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}

.theme-toggle__track {
  position: relative;
  width: var(--toggle-w);
  height: var(--toggle-h);
  border-radius: 100px;
  background: #ddd5cc;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle__track:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Night gradient behind track */
.theme-toggle__track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #3a3330 0%, #1a1716 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

html[data-theme="dark"] .theme-toggle__track {
  background: #3a3330;
}
html[data-theme="dark"] .theme-toggle__track::before {
  opacity: 1;
}

/* Knob */
.theme-toggle__knob {
  position: absolute;
  top: var(--toggle-pad);
  left: var(--toggle-pad);
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.68, -0.15, 0.27, 1.15),
    background 0.3s ease,
    box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-theme="dark"] .theme-toggle__knob {
  transform: translateX(
    calc(var(--toggle-w) - var(--knob) - var(--toggle-pad) * 2)
  );
  background: #1a1716;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Sun */
.theme-toggle__sun {
  position: absolute;
  width: 14px;
  height: 14px;
  color: #e67e22;
  transition:
    opacity 0.25s ease,
    transform 0.35s ease;
}
html[data-theme="dark"] .theme-toggle__sun {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

/* Moon */
.theme-toggle__moon {
  position: absolute;
  width: 12px;
  height: 12px;
  color: #d4a574;
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
  transition:
    opacity 0.25s ease,
    transform 0.35s ease;
}
html[data-theme="dark"] .theme-toggle__moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Stars on track */
.theme-toggle__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
}
html[data-theme="dark"] .theme-toggle__stars {
  opacity: 1;
}

.theme-toggle__star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #f5f1ed;
  border-radius: 50%;
  animation: twinkle 2s ease-in-out infinite alternate;
}
.theme-toggle__star:nth-child(1) {
  top: 7px;
  left: 12px;
}
.theme-toggle__star:nth-child(2) {
  top: 14px;
  left: 20px;
  width: 1.5px;
  height: 1.5px;
  animation-delay: 0.7s;
}
.theme-toggle__star:nth-child(3) {
  top: 9px;
  left: 27px;
  width: 1px;
  height: 1px;
  animation-delay: 1.3s;
}

@keyframes twinkle {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

/* Hover glow */
@media (hover: hover) {
  .theme-toggle__track:hover .theme-toggle__knob {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.15),
      0 0 8px rgba(230, 126, 34, 0.25);
  }
  html[data-theme="dark"] .theme-toggle__track:hover .theme-toggle__knob {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.3),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 8px rgba(212, 165, 116, 0.2);
  }
}

/* Responsive */
@media (max-width: 480px) {
  .theme-toggle {
    --toggle-w: 44px;
    --toggle-h: 24px;
    margin-left: 8px;
  }
  .theme-toggle__sun {
    width: 12px;
    height: 12px;
  }
  .theme-toggle__moon {
    width: 10px;
    height: 10px;
  }
}