/* ===== Theme tokens ===== */
:root{
  --bg0: #0b1220;        /* 页面背景 */
  --bg1: #0f1b33;        /* 背景渐变二层 */
  --card: rgba(15,23,42,.72);
  --card2: rgba(15,23,42,.55);
  --border: rgba(51,65,85,.6);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.78);
  --primary: #3b82f6;
}

/* 白天主题 */
html.theme-light{
  --bg0: #f6f7fb;
  --bg1: #eef2ff;
  --card: rgba(255,255,255,.92);
  --card2: rgba(255,255,255,.85);
  --border: rgba(148,163,184,.45);
  --text: #0f172a;
  --muted: rgba(15,23,42,.70);
  --primary: #2563eb;
}

/* 夜间主题（你现在深色再优化一点） */
html.theme-dark{
  --bg0: #071225;
  --bg1: #0b1a38;
  --card: rgba(10,18,35,.72);
  --card2: rgba(10,18,35,.55);
  --border: rgba(51,65,85,.55);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.78);
  --primary: #3b82f6;
}

/* ===== Apply to layout ===== */
body{
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, rgba(59,130,246,.16), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* 常见卡片/容器 */
.card{
  background: var(--card);
  border: 1px solid var(--border);
}

/* 输入框/按钮（你项目里有 .input/.btn） */
.input{
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
}
.input::placeholder{ color: var(--muted); }

.btn{
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255,255,255,.06);
}
.btn-primary{
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}

/* 小字 */
.small, .muted{ color: var(--muted); }

/* ===== Theme tokens ===== */
:root{
  --bg0: #0b1220;        /* 页面背景 */
  --bg1: #0f1b33;        /* 背景渐变二层 */
  --card: rgba(15,23,42,.72);
  --card2: rgba(15,23,42,.55);
  --border: rgba(51,65,85,.6);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.78);
  --primary: #3b82f6;
}

/* 白天主题 */
html.theme-light{
  --bg0: #f6f7fb;
  --bg1: #eef2ff;
  --card: rgba(255,255,255,.92);
  --card2: rgba(255,255,255,.85);
  --border: rgba(148,163,184,.45);
  --text: #0f172a;
  --muted: rgba(15,23,42,.70);
  --primary: #2563eb;
}

/* 夜间主题（你现在深色再优化一点） */
html.theme-dark{
  --bg0: #071225;
  --bg1: #0b1a38;
  --card: rgba(10,18,35,.72);
  --card2: rgba(10,18,35,.55);
  --border: rgba(51,65,85,.55);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.78);
  --primary: #3b82f6;
}

/* ===== Apply to layout ===== */
body{
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, rgba(59,130,246,.16), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* 常见卡片/容器 */
.card{
  background: var(--card);
  border: 1px solid var(--border);
}

/* 输入框/按钮（你项目里有 .input/.btn） */
.input{
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
}
.input::placeholder{ color: var(--muted); }

.btn{
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255,255,255,.06);
}
.btn-primary{
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}

/* 小字 */
.small, .muted{ color: var(--muted); }

/* ===== Theme menu ===== */
.theme-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(10px);
  display: none;
  z-index: 10000;
}

.theme-menu.open{ display: block; }

.theme-item{
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.theme-item:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--border);
}

/* 手机端：菜单改成靠左或全宽都行（这里做小优化） */
@media (max-width: 768px){
  .theme-menu{
    left: 0;
    right: auto;
    min-width: 220px;
  }
}