/* ===== theme.css · 设计令牌（严格取自 design.json） ===== */
:root {
  /* 色彩 */
  --bg-primary: #180011;
  --bg-secondary: #231F67;
  --bg-elevated: #1A0A14;
  --bg-card: rgba(26, 10, 20, 0.72);

  --text-primary: #E8E2D6;
  --text-muted: #9A94A8;
  --text-ghost: rgba(232, 226, 214, 0.38);

  --gold: #A68B5B;
  --glow: #13A4E7;
  --danger: #801115;
  --line: rgba(166, 139, 91, 0.35);

  /* 七宗罪强调色 */
  --sin-pride: #A68B3D;
  --sin-envy: #3F6B52;
  --sin-wrath: #7A2620;
  --sin-sloth: #3D5A78;
  --sin-greed: #5E4570;
  --sin-lust: #9B4A69;
  --sin-gluttony: #9A5A24;

  /* 字体栈：商业字体优先，缺失时优雅降级 */
  --font-serif: '方正优雅宋', 'Noto Serif SC', 'Songti SC', serif;
  --font-sans: '方正正纤黑简体', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --font-en: 'Cormorant Garamond', serif;
}

/* ===== 通用组件 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.08em;
  background: var(--gold);
  color: var(--bg-primary);
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
.btn:active { transform: scale(0.97); }
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--line);
}

.divider {
  width: 56px;
  height: 1px;
  background: var(--line);
  margin: 6px auto;
}

/* 金句渐变金黑 */
.gold-quote {
  background: linear-gradient(120deg, var(--gold) 0%, #E8E2D6 45%, var(--bg-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.font-serif { font-family: var(--font-serif); }
.font-sansThin { font-family: var(--font-sans); }

/* ===== 编辑模式（?edit=1） ===== */
.edit-outline {
  outline: 1.6px dashed #3FA9F5;
  outline-offset: 3px;
  cursor: pointer;
  position: relative;
}
.edit-badge {
  position: absolute;
  top: -10px; right: -10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #3FA9F5;
  color: #fff;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  z-index: 80;
  pointer-events: none;
}
.edit-selected { outline-color: #fff; outline-width: 2px; }

#edit-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 86vw);
  height: 100%;
  background: #fff;
  color: #2A2438;
  z-index: 200;
  box-shadow: -8px 0 30px rgba(0,0,0,0.4);
  padding: 18px 18px 28px;
  overflow-y: auto;
  font-family: var(--font-sans);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
#edit-panel.open { transform: translateX(0); }
#edit-panel h3 { font-size: 14px; margin-bottom: 4px; }
#edit-panel .ep-row { margin: 14px 0; }
#edit-panel label { font-size: 11px; color: #6B6478; display: block; margin-bottom: 6px; }
#edit-panel select, #edit-panel input[type="text"] {
  width: 100%; padding: 8px 10px; border: 1px solid #DAD5CC; border-radius: 6px; font-size: 12px;
}
#edit-panel input[type="range"] { width: 100%; }
#edit-panel .ep-sizeval { font-size: 11px; color: var(--gold); }
#edit-panel .ep-btns { display: flex; gap: 10px; margin-top: 22px; }
#edit-panel .ep-btns button { flex: 1; padding: 11px 0; border-radius: 8px; font-size: 12px; }
#edit-panel .ep-export { background: #2A2438; color: #fff; }
#edit-panel .ep-exit { background: #F4F1EA; color: var(--gold); border: 1px solid var(--gold); }
#edit-panel .ep-note { font-size: 10px; color: #9A93A8; margin-top: 16px; line-height: 1.6; }

#edit-banner {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(63,169,245,0.92); color: #fff; font-size: 11px;
  padding: 5px 14px; border-radius: 999px; z-index: 210; font-family: var(--font-sans);
}