/* theme.css - 柔粉主题: 樱花粉 + 香槟金 + 暖白
   ----------------------------------------------------- */
:root {
  --pink-50:  #fff8fb;
  --pink-100: #ffe8f0;
  --pink-200: #ffd0e0;
  --pink-300: #ffb0c8;
  --pink-400: #ff8aab;   /* 主按钮色 */
  --pink-500: #ee6a92;   /* hover */
  --pink-600: #cc4d76;
  --pink-700: #993658;   /* 深色文字/标题 */
  --gold:     #d4a574;
  --gold-l:   #e8c39a;
  --ink:      #4a2c3a;
  --ink-2:    #6b4458;
  --bg:       #fffbf9;
  --bg-2:     #fff2f6;
  --card:     #ffffff;
  --shadow:   0 8px 28px rgba(238, 106, 146, 0.10);
  --shadow-s: 0 2px 10px rgba(238, 106, 146, 0.08);
  --radius:   14px;
  --radius-s: 8px;
  --font-cn:  "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", serif;
  --font-ui:  -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
              "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffe8f0 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #fff0d6 0%, transparent 55%),
    var(--bg);
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--font-cn); color: var(--pink-700); margin: 0 0 8px; }

a { color: var(--pink-500); text-decoration: none; }
a:hover { text-decoration: underline; }

button, .btn {
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-s);
  background: var(--pink-400);
  color: white;
  transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
  box-shadow: var(--shadow-s);
}
button:hover, .btn:hover { background: var(--pink-500); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.ghost {
  background: transparent; color: var(--pink-500);
  border: 1px solid var(--pink-200);
  box-shadow: none;
}
button.ghost:hover { background: var(--pink-50); }
button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

input, textarea, select {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius-s);
  background: white;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--pink-300);
  box-shadow: 0 0 0 3px rgba(255, 138, 171, 0.15);
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* ===== 心跳动画 ===== */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.12); }
  40%      { transform: scale(0.97); }
  60%      { transform: scale(1.08); }
  80%      { transform: scale(0.99); }
}
.heart-pulse { animation: heartbeat 1.4s ease-in-out infinite; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease-out both; }

/* 工具 */
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.spacer { flex: 1; }
.muted { color: var(--ink-2); font-size: 12px; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--pink-200); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--pink-300); }