/* TOPIK 韩语背单词 - 基础样式 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

#app {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* 文本选中色 */
::selection {
  background-color: rgba(139, 115, 85, 0.2);
  color: #6B5B45;
}

/* 移动端点击高亮去除 */
button,
.flashcard-front,
.flashcard-back {
  -webkit-tap-highlight-color: transparent;
  tap-highlight: none;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #C9B8A8;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #A89880;
}

/* Firefox滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: #C9B8A8 transparent;
}

/* 输入框和按钮焦点 */
button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #A89880;
  outline-offset: 2px;
}

/* ===== 日历统计卡片 - 暗色模式适配 ===== */
body.dark .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.15) !important;
}
body.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.15) !important;
}
body.dark .bg-purple-50 {
  background-color: rgba(167, 139, 250, 0.15) !important;
}
body.dark .text-green-600 {
  color: #4ADE80 !important;
}
body.dark .text-amber-600 {
  color: #FBBF24 !important;
}
body.dark .text-purple-600 {
  color: #A78BFA !important;
}
body.dark .bg-white {
  background-color: var(--bg-card) !important;
}

/* ===== 学习历程时间线 - 暗色模式适配 ===== */
body.dark .bg-cream-50 {
  background-color: #2a3f58 !important;
}
body.dark .border-cream-200 {
  border-color: #475569 !important;
}
body.dark .text-coffee-600 {
  color: #ffffff !important;  /* 白色，最清晰 */
}
body.dark .text-coffee-500 {
  color: #f0e6d8 !important;  /* 亮白，不偏黄 */
}
body.dark .text-coffee-400 {
  color: #c8b8a8 !important;  /* 提示文字可以稍暗 */
}