/* =========================
   全局设计变量
   ========================= */

:root {
  /* 背景 */
  --bg0: #060912;
  --bg1: #0A1022;

  /* 文本 */
  --text: #EAF0FF;
  --muted: rgba(234, 240, 255, .72);
  --soft: rgba(234, 240, 255, .55);

  /* 玻璃面板 */
  --panel: rgba(255, 255, 255, .06);
  --panel2: rgba(255, 255, 255, .085);
  --stroke: rgba(255, 255, 255, .10);
  --stroke2: rgba(255, 255, 255, .16);

  /* 主题色（会被 preset 覆盖） */
  --cyan: #43F7D8;
  --violet: #8E7BFF;
  --pink: #FF4EDB;
  --gold: #FFCE6B;

  /* 布局 */
  --radius: 22px;
  --radius2: 28px;
  --shadow: 0 20px 70px rgba(0, 0, 0, .55);
  --shadow2: 0 16px 50px rgba(0, 0, 0, .35);
  --blur: 18px;

  --max: 1120px;
  --pad: clamp(16px, 3vw, 28px);
  --ease: cubic-bezier(.2, .9, .2, 1);

  /* 字体（会被 data-font / data-weight 覆盖） */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans CJK SC", Arial, sans-serif;
  --fw-body: 420;
  --fw-title: 900;

  /* 导航高度 */
  --nav-h: 76px;
}

@media (max-width: 520px) {
  :root {
    --nav-h: 76px;
  }
}


/* =========================
   html data-* 开关（JS 写入）
   ========================= */

/* 字体预设 */
html[data-font="system"] {
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans CJK SC", Arial, sans-serif;
}

html[data-font="neo"] {
  --font-body: "Inter", "SF Pro Display", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei",
               "Noto Sans CJK SC", Arial, sans-serif;
}

html[data-font="serif"] {
  --font-body: "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", serif;
}

html[data-font="mono"] {
  --font-body: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* 字重预设 */
html[data-weight="normal"] {
  --fw-body: 420;
  --fw-title: 900;
}

html[data-weight="bold"] {
  --fw-body: 520;
  --fw-title: 980;
}

/* 亮色模式（偏高级灰） */
html[data-mode="light"] {
  --bg0: #F6F7FB;
  --bg1: #EEF1F8;

  --text: #0B1022;
  --muted: rgba(11, 16, 34, .72);
  --soft: rgba(11, 16, 34, .55);

  --panel: rgba(0, 0, 0, .04);
  --panel2: rgba(0, 0, 0, .06);
  --stroke: rgba(0, 0, 0, .08);
  --stroke2: rgba(0, 0, 0, .12);
}


/* =========================
   主题配色预设（preset）
   ========================= */

html[data-preset="aurora"]  { --cyan: #43F7D8; --violet: #8E7BFF; --pink: #FF4EDB; --gold: #FFCE6B; }
html[data-preset="sunset"]  { --cyan: #FFB86B; --violet: #FF5EA8; --pink: #FF3D6E; --gold: #FFD38B; }
html[data-preset="emerald"] { --cyan: #3AF2B3; --violet: #42B7FF; --pink: #2FE6FF; --gold: #A8FFCE; }
html[data-preset="sapphire"]{ --cyan: #57D6FF; --violet: #4C6FFF; --pink: #9A7CFF; --gold: #FFE08A; }
html[data-preset="mono"]    { --cyan: #C8D0E8; --violet: #8C96B8; --pink: #E7EAF6; --gold: #FFCE6B; }

html[data-preset="coral"]   { --cyan: #FF6B6B; --violet: #FFB86B; --pink: #FF4EDB; --gold: #FFD38B; }
html[data-preset="mint"]    { --cyan: #2EF2C2; --violet: #57D6FF; --pink: #8E7BFF; --gold: #A8FFCE; }
html[data-preset="grape"]   { --cyan: #B86BFF; --violet: #6B7BFF; --pink: #FF4EDB; --gold: #FFD38B; }
html[data-preset="ocean"]   { --cyan: #2FE6FF; --violet: #42B7FF; --pink: #57D6FF; --gold: #CDEBFF; }
html[data-preset="amber"]   { --cyan: #FFD38B; --violet: #FFCE6B; --pink: #FF5EA8; --gold: #FFE08A; }
html[data-preset="rose"]    { --cyan: #FF5EA8; --violet: #FF3D6E; --pink: #FFB86B; --gold: #FFD38B; }
html[data-preset="cyber"]   { --cyan: #00F5FF; --violet: #8E7BFF; --pink: #00FF85; --gold: #C8F7FF; }
html[data-preset="forest"]  { --cyan: #3AF2B3; --violet: #00D1A0; --pink: #A8FFCE; --gold: #CFFFE8; }
html[data-preset="ice"]     { --cyan: #CDEBFF; --violet: #57D6FF; --pink: #9A7CFF; --gold: #EAF3FF; }
html[data-preset="lava"]    { --cyan: #FF3D6E; --violet: #FF6B6B; --pink: #FFB86B; --gold: #FFD38B; }


/* =========================
   主题按钮 + 弹层
   ========================= */

.theme-wrap {
  position: relative;
}

.theme-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: var(--panel);
  color: var(--text);

  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 12px 35px rgba(0, 0, 0, .22);

  transition:
    transform .18s var(--ease),
    background .18s var(--ease),
    border-color .18s var(--ease);
}

.theme-btn:hover {
  transform: translateY(-1px);
  background: var(--panel2);
  border-color: var(--stroke2);
}

.theme-btn:active {
  transform: translateY(0) scale(.98);
}

.theme-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .20), transparent);
  transform: translateX(-70%);
  opacity: .7;
  pointer-events: none;
  transition: transform .7s var(--ease);
}

.theme-btn:hover::before {
  transform: translateX(70%);
}

.theme-ic {
  width: 18px;
  height: 18px;
  display: inline-block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
}


/* =========================
   主题面板（Popover）
   ========================= */

.theme-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);

  width: min(360px, 92vw);
  padding: 14px;
  border-radius: 18px;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transform-origin: top right;
  transform: translateY(-6px) scale(.98);
  opacity: 0;
  pointer-events: none;

  transition:
    transform .22s var(--ease),
    opacity .22s var(--ease);

  z-index: 60;
}

/* 夜间面板：深色但不发灰 */
html[data-mode="dark"] .theme-pop {
  background: linear-gradient(180deg, rgba(22, 26, 44, .94), rgba(16, 20, 36, .90));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 28px 90px rgba(0, 0, 0, .55);
}

/* 白天面板：浅色玻璃 */
html[data-mode="light"] .theme-pop {
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(245, 247, 252, .75));
  border: 1px solid rgba(0, 0, 0, .10);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .65) inset,
    0 18px 55px rgba(0, 0, 0, .18);
}

/* 打开状态 */
.theme-wrap.open .theme-pop {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.theme-row:hover {
  border-color: var(--stroke);
  background: var(--panel);
}

.theme-title {
  letter-spacing: .2px;
  font-size: 13px;
}

.theme-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.mode-toggle {
  display: flex;
  gap: 8px;
}

/* 模式/字体/字重 按钮统一样式 */
.mode-pill {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--muted);

  cursor: pointer;
  font-size: 12px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: all .18s var(--ease);
}

.mode-pill.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--cyan) 32%, var(--stroke));
  background: color-mix(in srgb, var(--cyan) 12%, var(--panel));
}

.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px;
}

.swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid var(--stroke);

  cursor: pointer;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 30% 30%, var(--s1), transparent 62%),
    radial-gradient(circle at 75% 70%, var(--s2), transparent 64%),
    linear-gradient(135deg, color-mix(in srgb, var(--s3) 18%, transparent), transparent);

  transition:
    transform .18s var(--ease),
    border-color .18s var(--ease);
}

.swatch:hover {
  transform: translateY(-2px);
  border-color: var(--stroke2);
}

.swatch.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent) inset;
}

.swatch small {
  position: absolute;
  left: 8px;
  bottom: 8px;

  font-size: 10px;
  color: color-mix(in srgb, var(--text) 86%, transparent);
  opacity: .88;

  text-transform: uppercase;
  letter-spacing: .6px;
}

/* 背景动效开关 */
.toggle {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  position: relative;

  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;

  transition:
    background .2s var(--ease),
    border-color .2s var(--ease);
}

.toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;

  width: 18px;
  height: 18px;
  border-radius: 50%;

  transform: translateY(-50%);
  background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);

  transition: left .22s var(--ease);
}

.toggle.on {
  border-color: color-mix(in srgb, var(--cyan) 30%, var(--stroke));
  background: color-mix(in srgb, var(--cyan) 12%, var(--panel));
}

.toggle.on::after {
  left: 22px;
}


/* =========================
   移动端收敛
   ========================= */

@media (max-width: 520px) {
  .theme-pop {
    width: min(320px, 92vw);
    padding: 12px;
    border-radius: 16px;

    max-height: 72vh; /* 面板不超屏 */
    overflow: auto;
  }

  .theme-row {
    padding: 8px;
    border-radius: 14px;
  }

  .mode-pill {
    padding: 7px 9px;
    font-size: 12px;
  }

  .palette {
    gap: 8px;
    padding: 8px;
  }

  .swatch {
    border-radius: 12px;
  }

  .swatch small {
    left: 6px;
    bottom: 6px;
    font-size: 10px;
  }
}