/* ═══════════════════════════════════════════════════════════
   R33 — پنل تنظیمات تم و انیمیشن
   ═══════════════════════════════════════════════════════════ */
.site-settings {
  position: fixed;
  z-index: 950;
  inset-inline-start: clamp(.9rem, 2.2vw, 1.5rem);
  bottom: clamp(.9rem, 2.2vw, 1.5rem);
  direction: rtl;
  font-family: inherit;
}

.site-settings__trigger {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-gold) 42%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--glass-bg) 92%, transparent);
  color: var(--text);
  box-shadow: 0 .7rem 2rem rgba(0,0,0,.18), 0 0 1.6rem rgba(240,180,41,.12);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition: transform .35s var(--ease-out), border-color .35s, color .35s, box-shadow .35s;
}
.site-settings__trigger:hover,
.site-settings__trigger[aria-expanded="true"] {
  color: var(--c-gold);
  border-color: color-mix(in srgb, var(--c-gold) 75%, transparent);
  transform: rotate(18deg) scale(1.04);
  box-shadow: 0 .8rem 2.2rem rgba(0,0,0,.2), 0 0 2rem rgba(240,180,41,.22);
}
.site-settings__trigger svg {
  width: 1.42rem;
  height: 1.42rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-settings__panel {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(100% + .75rem);
  width: min(23rem, calc(100vw - 1.8rem));
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
  color: var(--text);
  box-shadow: 0 1.2rem 4rem rgba(0,0,0,.26);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  transform-origin: bottom left;
  animation: settings-panel-in .34s var(--ease-out) both;
}
.site-settings__panel[hidden] { display: none; }

@keyframes settings-panel-in {
  from { opacity: 0; transform: translateY(.6rem) scale(.96); }
  to { opacity: 1; transform: none; }
}

.site-settings__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.site-settings__head div { display: grid; gap: .2rem; }
.site-settings__head strong { font-size: 1.02rem; font-weight: 850; }
.site-settings__head span { color: var(--text-faint); font-size: .75rem; }
.site-settings__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.site-settings__close:hover { color: var(--c-spark); background: var(--bg-soft); }

.site-settings__group {
  min-width: 0;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}
.site-settings__group legend {
  margin-bottom: .55rem;
  color: var(--text-dim);
  font-size: .82rem;
  font-weight: 750;
}
.site-settings__segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .38rem;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--bg-soft);
}
.site-settings__segments--two { grid-template-columns: repeat(2, 1fr); }
.site-settings__segments label { position: relative; cursor: pointer; }
.site-settings__segments input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.site-settings__segments span {
  display: grid;
  place-items: center;
  min-height: 2.35rem;
  padding: .45rem .55rem;
  border-radius: .62rem;
  color: var(--text-dim);
  font-size: .82rem;
  font-weight: 730;
  transition: background-color .28s, color .28s, box-shadow .28s, transform .28s;
}
.site-settings__segments input:checked + span {
  background: var(--bg-card);
  color: var(--c-gold);
  box-shadow: 0 .25rem .9rem rgba(0,0,0,.12);
}
.site-settings__segments input:focus-visible + span {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}
.site-settings__segments label:hover span { transform: translateY(-1px); color: var(--text); }
.site-settings__hint {
  margin: .55rem .2rem 0;
  color: var(--text-faint);
  font-size: .72rem;
  line-height: 1.7;
}
.site-settings__group.is-disabled {
  opacity: .42;
  pointer-events: none;
}


@media (max-width: 560px) {
  .site-settings { inset-inline: .85rem auto; bottom: .85rem; }
  .site-settings__panel { width: calc(100vw - 1.7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .site-settings__panel { animation: none; }
  .site-settings__trigger { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   R33 — نمایش آیکون هدر در حالت دستی و گزینه‌های ثابت در حالت ثابت
   ═══════════════════════════════════════════════════════════ */
.site-settings__group[hidden] { display: none !important; }

html[data-performance-tier="low"] [data-animation-settings] {
  display: none !important;
}

/* قاعده R32 که آیکون تم را همیشه حذف می‌کرد خنثی می‌شود. */
.theme-toggle { display: grid !important; }
[data-theme-control="fixed"] .theme-toggle,
.theme-toggle[hidden] { display: none !important; }

.site-settings__group--nested {
  margin-top: .7rem;
  padding: .75rem;
  border: 1px dashed color-mix(in srgb, var(--c-gold) 28%, var(--line));
  border-radius: .9rem;
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
}
.site-settings__group--nested legend {
  padding-inline: .35rem;
}