/* ============================================================
   Member site skins — whole-site palettes for home and nav pages
   ============================================================ */

html[data-skin="aurum"] {
  --bg: #100d09;
  --bg-elevated: #17120c;
  --surface: #1b1510;
  --surface-raised: #221a13;
  --surface-subtle: #292016;
  --surface-deep: #33271a;
  --ink: #f4e8d2;
  --ink-soft: #d4c3a5;
  --muted: #aa987c;
  --muted-light: #7e6f5b;
  --line: rgba(232, 211, 172, 0.13);
  --line-strong: rgba(232, 211, 172, 0.26);
  --accent: #c6a15f;
  --accent-hover: #d8b77e;
  --accent-soft: #332719;
  --accent-ink: #e9c98f;
  --gold: #d2ad6e;
  --gold-soft: #3b2e1c;
  --green: #a6b08e;
  --green-soft: #293024;
  --blue: #96a8b8;
  --selection: rgba(198, 161, 95, 0.28);
  color-scheme: dark;
}

html[data-skin="celadon"] {
  --bg: #e8eee7;
  --bg-elevated: #f4f8f2;
  --surface: #f5f9f3;
  --surface-raised: #fbfdf9;
  --surface-subtle: #dfe9de;
  --surface-deep: #d1dfd1;
  --ink: #26362f;
  --ink-soft: #4c6257;
  --muted: #71877c;
  --muted-light: #98aaa0;
  --line: rgba(46, 72, 60, 0.13);
  --line-strong: rgba(46, 72, 60, 0.25);
  --accent: #557d6b;
  --accent-hover: #446b59;
  --accent-soft: #dbe9df;
  --accent-ink: #3e6654;
  --gold: #8f8156;
  --gold-soft: #e6e1c9;
  --green: #5f7e69;
  --green-soft: #dce9df;
  --blue: #5c7888;
  --selection: rgba(85, 125, 107, 0.2);
  color-scheme: light;
}

html[data-skin="crimson"] {
  --bg: #190c0f;
  --bg-elevated: #211116;
  --surface: #27151a;
  --surface-raised: #301a20;
  --surface-subtle: #382027;
  --surface-deep: #45282f;
  --ink: #f8e9dd;
  --ink-soft: #ddc3b7;
  --muted: #b2958b;
  --muted-light: #856a63;
  --line: rgba(246, 215, 196, 0.13);
  --line-strong: rgba(246, 215, 196, 0.25);
  --accent: #d6a15b;
  --accent-hover: #e5b979;
  --accent-soft: #3b211f;
  --accent-ink: #f0c990;
  --gold: #d7b078;
  --gold-soft: #3e2b22;
  --green: #9eb18e;
  --green-soft: #293026;
  --blue: #a5a8bd;
  --selection: rgba(214, 161, 91, 0.25);
  color-scheme: dark;
}

html[data-skin="starlight"] {
  --bg: #090f1d;
  --bg-elevated: #0f1729;
  --surface: #121c31;
  --surface-raised: #17233c;
  --surface-subtle: #1d2b47;
  --surface-deep: #253653;
  --ink: #e9efff;
  --ink-soft: #bcc9e6;
  --muted: #8f9fbe;
  --muted-light: #657491;
  --line: rgba(190, 211, 255, 0.13);
  --line-strong: rgba(190, 211, 255, 0.26);
  --accent: #93b4ff;
  --accent-hover: #b1c8ff;
  --accent-soft: #1e2c4c;
  --accent-ink: #bed0ff;
  --gold: #d9c48d;
  --gold-soft: #2e2b42;
  --green: #8db8a0;
  --green-soft: #1d302c;
  --blue: #8fb6df;
  --selection: rgba(147, 180, 255, 0.25);
  color-scheme: dark;
}

html[data-skin] body {
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

html[data-skin="aurum"] body {
  background:
    radial-gradient(1000px 620px at 82% -8%, rgba(198, 161, 95, 0.18), transparent 64%),
    radial-gradient(800px 500px at 0% 34%, rgba(128, 61, 36, 0.16), transparent 70%),
    var(--bg);
}

html[data-skin="celadon"] body {
  background:
    radial-gradient(950px 620px at 88% -4%, rgba(94, 127, 111, 0.14), transparent 66%),
    radial-gradient(760px 520px at 0% 48%, rgba(170, 190, 170, 0.2), transparent 70%),
    var(--bg);
}

html[data-skin="crimson"] body {
  background:
    radial-gradient(1000px 600px at 82% -8%, rgba(168, 64, 66, 0.2), transparent 64%),
    radial-gradient(780px 520px at 0% 36%, rgba(214, 161, 91, 0.08), transparent 70%),
    var(--bg);
}

html[data-skin="starlight"] body {
  background:
    radial-gradient(1000px 620px at 82% -8%, rgba(111, 139, 220, 0.2), transparent 64%),
    radial-gradient(760px 520px at 0% 42%, rgba(147, 180, 255, 0.08), transparent 70%),
    var(--bg);
}

html[data-skin] .announcement {
  background: #11100d;
  color: #e9deca;
}

html[data-skin="celadon"] .announcement {
  background: #1f3029;
}

html[data-skin="crimson"] .announcement {
  background: #260e13;
}

html[data-skin="starlight"] .announcement {
  background: #0b1221;
}

html[data-skin] .site-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom-color: var(--line);
}

html[data-skin] .site-header.is-scrolled {
  border-bottom-color: var(--line-strong);
  box-shadow: 0 16px 44px -34px rgba(0, 0, 0, 0.7);
}

html[data-skin] .site-footer {
  background:
    radial-gradient(900px 400px at 85% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    #15130f;
  color: #d9cfbe;
}

html[data-skin="celadon"] .site-footer {
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(85, 125, 107, 0.18), transparent 70%),
    #1f2b26;
}

html[data-skin="crimson"] .site-footer {
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(214, 161, 91, 0.14), transparent 70%),
    #1d0f13;
}

html[data-skin="starlight"] .site-footer {
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(147, 180, 255, 0.15), transparent 70%),
    #0b1324;
}

html[data-skin] .page-hero {
  border-bottom-color: var(--line-strong);
}

html[data-skin] .page-hero::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
}

html[data-skin] .panel,
html[data-skin] .account-section,
html[data-skin] .admin-card {
  border-color: var(--line);
}

html[data-skin] .book-cover {
  box-shadow: 0 28px 55px -26px rgba(0, 0, 0, 0.62), 0 3px 9px rgba(0, 0, 0, 0.18);
}

html[data-skin] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff8ed;
}

html[data-skin] .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --------------------------- skin picker --------------------------- */

.skin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.skin-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 4px 15px 15px 15px;
  background: var(--bg-elevated);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.skin-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.skin-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.skin-card.is-locked {
  cursor: pointer;
}

.skin-preview {
  position: relative;
  display: block;
  min-height: 76px;
  overflow: hidden;
  border-radius: 2px 9px 9px 9px;
  background: linear-gradient(140deg, #f4efe5 0 46%, #d9cfbd 46% 100%);
}

.skin-preview i {
  position: absolute;
  display: block;
  border-radius: 2px;
}

.skin-preview i:nth-child(1) {
  left: 12px;
  top: 14px;
  width: 30%;
  height: 8px;
  background: currentColor;
  opacity: 0.65;
}

.skin-preview i:nth-child(2) {
  left: 12px;
  bottom: 15px;
  width: 42%;
  height: 4px;
  background: currentColor;
  opacity: 0.25;
}

.skin-preview i:nth-child(3) {
  right: 12px;
  top: 18px;
  width: 36px;
  height: 43px;
  border: 1px solid currentColor;
  opacity: 0.55;
  transform: rotate(8deg);
}

.skin-preview-default {
  color: #7d6b54;
  background: linear-gradient(140deg, #f4efe5 0 50%, #ddd2be 50% 100%);
}

.skin-preview-aurum {
  color: #d2ad6e;
  background:
    radial-gradient(circle at 78% 22%, rgba(198, 161, 95, 0.32), transparent 24%),
    linear-gradient(140deg, #19130d 0 48%, #0d0b08 48% 100%);
}

.skin-preview-celadon {
  color: #557d6b;
  background:
    radial-gradient(circle at 78% 25%, rgba(85, 125, 107, 0.23), transparent 28%),
    linear-gradient(140deg, #f3f8f1 0 48%, #d5e4d8 48% 100%);
}

.skin-preview-crimson {
  color: #d6a15b;
  background:
    radial-gradient(circle at 78% 25%, rgba(214, 161, 91, 0.3), transparent 26%),
    linear-gradient(140deg, #2a1016 0 48%, #160a0d 48% 100%);
}

.skin-preview-starlight {
  color: #93b4ff;
  background:
    radial-gradient(circle at 75% 23%, rgba(147, 180, 255, 0.34), transparent 24%),
    radial-gradient(circle at 60% 18%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    linear-gradient(140deg, #101a30 0 48%, #08101f 48% 100%);
}

.skin-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 3px;
}

.skin-card-copy strong {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
}

.skin-card-copy small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.55;
}

.skin-card-state {
  padding: 0 3px 3px;
  color: var(--muted);
  font-size: 10.5px;
}

.skin-card.is-active .skin-card-state {
  color: var(--accent);
}

.skin-card.is-locked .skin-card-state {
  color: var(--gold);
}

@media (max-width: 780px) {
  .skin-grid {
    grid-template-columns: 1fr 1fr;
  }

  .skin-preview {
    min-height: 66px;
  }
}

@media (max-width: 460px) {
  .skin-grid {
    grid-template-columns: 1fr;
  }
}