@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-primary: #FAF9F7;
  --bg-secondary: #F0EDE8;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8F6F3;
  --border: #E5DED6;
  --border-light: #EDE8E1;
  --text-primary: #2D2B27;
  --text-secondary: #6B6560;
  --text-hint: #A39E96;
  --accent: #C96B42;
  --accent-light: #E08A5E;
  --accent-bg: rgba(201,107,66,0.08);
  --accent-glow: rgba(201,107,66,0.15);
  --success: #4E9A6D;
  --success-bg: rgba(78,154,109,0.1);
  --danger: #C94E4E;
  --danger-bg: rgba(201,78,78,0.08);
  --warning: #C98F42;
  --warning-bg: rgba(201,143,66,0.08);
  --fire: #D4764E;
  --gradient-primary: linear-gradient(135deg, #C96B42 0%, #D4954E 100%);
  --gradient-success: linear-gradient(135deg, #4E9A6D 0%, #5BAF7E 100%);
  --gradient-danger: linear-gradient(135deg, #C94E4E 0%, #D46E4E 100%);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
  --nav-height: 64px;
  --transition: 0.2s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-tap-highlight-color:transparent; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* -- bg layer hidden for light theme -- */
.bg-layer { display: none; }

.app-container {
  position: relative; z-index:1;
  max-width: 520px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}

#main-content {
  flex:1; overflow-y:auto;
  padding: 20px 16px;
  padding-bottom: calc(var(--nav-height) + 24px);
  -webkit-overflow-scrolling: touch;
}

/* -- Card -- */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.glass-card:hover { box-shadow: var(--shadow-md); }

/* -- Bottom Nav -- */
.bottom-nav {
  position: fixed; bottom:0; left:50%; transform: translateX(-50%);
  width:100%; max-width:520px; height: var(--nav-height);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-around;
  z-index:100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 14px; cursor:pointer; transition: var(--transition);
  border:none; background:none;
  color: var(--text-hint);
  font-family:inherit; font-size:10px; font-weight:500;
}
.nav-item .nav-icon { font-size:20px; transition: var(--transition); }
.nav-item.active { color: var(--accent); }
.nav-item.active .nav-icon { transform: scale(1.1); }
.nav-item svg { width:22px; height:22px; stroke: currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* -- Buttons -- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border:none; border-radius: var(--radius-full);
  font-family:inherit; font-size:15px; font-weight:600;
  cursor:pointer; transition: var(--transition); position:relative; overflow:hidden;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color:#fff; }
.btn-primary:hover { background: var(--accent-light); }
.btn-success { background: var(--success); color:#fff; }
.btn-danger { background: var(--danger); color:#fff; }
.btn-warning { background: var(--warning); color:#fff; }
.btn-accent { background: var(--warning-bg); color: var(--warning); border:1px solid rgba(201,143,66,0.2); }
.btn-large { padding:14px 28px; font-size:15px; border-radius: var(--radius-md); }
.btn-full { width:100%; }
.btn-third { flex:1; padding:14px 6px; font-size:14px; gap:4px; }
.btn-icon { font-size:16px; }
.btn-icon-only { background:none; border:none; cursor:pointer; padding:6px; border-radius:var(--radius-sm); transition: var(--transition); color: var(--text-secondary); }
.btn-icon-only:hover { background: var(--bg-secondary); }
.badge { background: rgba(201,107,66,0.15); color: var(--accent); padding:2px 10px; border-radius: var(--radius-full); font-size:13px; margin-left:6px; }

/* ---- Pages ---- */
.page { animation: fadeIn 0.3s ease; }

/* -- Home -- */
.page-home { display:flex; flex-direction:column; gap:16px; }
.home-header { text-align:center; padding:24px 0 4px; }
.app-title { font-size:28px; font-weight:800; color: var(--accent); letter-spacing:-0.5px; }
.app-subtitle { color: var(--text-hint); font-size:13px; margin-top:2px; }

.home-stats-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.stat-card { text-align:center; padding:14px 6px; }
.stat-number { font-size:24px; font-weight:800; color: var(--text-primary); }
.stat-number.accent { color: var(--accent); }
.stat-number.warning { color: var(--warning); }
.stat-number.fire { color: var(--fire); }
.stat-label { font-size:11px; color: var(--text-hint); margin-top:2px; }

.home-today { display:flex; flex-direction:column; gap:10px; }
.home-today h3 { font-size:14px; font-weight:600; color: var(--text-secondary); }
.today-row { display:flex; justify-content:space-around; color: var(--text-secondary); font-size:14px; }
.today-row strong { color: var(--text-primary); font-weight:700; }

.home-actions { display:flex; flex-direction:column; gap:10px; }

.empty-state { text-align:center; padding:40px 20px; color: var(--text-secondary); }
.empty-state.small { padding:20px; }
.empty-icon { font-size:40px; margin-bottom:12px; color: var(--text-hint); }
.empty-hint { font-size:13px; color: var(--text-hint); margin:8px 0 16px; }

/* -- Study -- */
.page-study { display:flex; flex-direction:column; gap:16px; min-height:calc(100vh - var(--nav-height) - 44px); min-height:calc(100dvh - var(--nav-height) - 44px); }
.study-header { display:flex; justify-content:space-between; align-items:center; }
.study-mode-badge { background: var(--accent-bg); color: var(--accent); padding:4px 14px; border-radius: var(--radius-full); font-size:13px; font-weight:600; }
.study-progress-text { color: var(--text-hint); font-size:14px; font-weight:600; }

.progress-bar-wrap { height:4px; background: var(--border-light); border-radius:2px; overflow:hidden; }
.progress-bar { height:100%; background: var(--gradient-primary); border-radius:2px; transition:width 0.5s ease; }

.word-card { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px; min-height:260px; border-radius: var(--radius-lg); }
.word-main { display:flex; align-items:center; gap:12px; }
.word-text { font-size:36px; font-weight:800; color: var(--text-primary); }
.btn-speak { font-size:20px; opacity:0.4; transition: var(--transition); color: var(--text-secondary); }
.btn-speak:hover { opacity:0.8; }
.word-phonetic { color: var(--text-hint); font-size:15px; margin-top:6px; }
.word-hint { margin-top:28px; color: var(--text-hint); font-size:14px; }
.word-details { margin-top:24px; width:100%; }
.word-meaning { font-size:18px; font-weight:600; color: var(--accent); margin-bottom:10px; line-height:1.5; }
.word-example { color: var(--text-secondary); font-size:14px; font-style:italic; margin-bottom:14px; padding:12px; background: var(--bg-secondary); border-radius: var(--radius-sm); border-left:3px solid var(--accent); }
.word-streak-info { font-size:13px; color: var(--text-hint); }

/* 进度圆点（取代 "1/3 ✦" 文字） */
.streak-dots { display:flex; gap:8px; justify-content:center; margin-top:4px; }
.streak-dot { width:10px; height:10px; border-radius:50%; background: var(--border); transition: all 0.3s ease; }
.streak-dot.active { background: var(--success); transform: scale(1.1); box-shadow: 0 0 6px rgba(78,154,109,0.4); }

/* 例句填空（不背单词式语境辨义） */
.word-cloze-hint { margin-top:24px; width:100%; }
.cloze-sentence { color: var(--text-secondary); font-size:15px; font-style:italic; line-height:1.7; padding:14px 16px; background: var(--bg-secondary); border-radius: var(--radius-sm); border-left:3px solid var(--accent); }
.cloze { display:inline-block; min-width:60px; padding:0 6px; margin:0 2px; color: var(--accent); font-weight:700; font-style:normal; border-bottom:2px solid var(--accent); letter-spacing:1px; }
.cloze-tip { margin-top:14px; color: var(--text-hint); font-size:13px; text-align:center; }

.study-actions { display:flex; gap:8px; }
.study-actions .btn { flex:1; }
.study-keyboard-hint { display:none; justify-content:space-between; padding:6px 0; color: var(--text-hint); font-size:11px; }

.complete-card { text-align:center; padding:48px 24px; margin-top:15%; border-radius: var(--radius-lg); }
.complete-icon { font-size:48px; margin-bottom:12px; color: var(--success); }
.complete-card h2 { font-size:24px; margin-bottom:6px; color: var(--text-primary); }
.complete-card p { color: var(--text-secondary); margin-bottom:20px; }
.complete-stats { display:flex; justify-content:center; gap:32px; margin-bottom:28px; }
.complete-stat-num { font-size:32px; font-weight:800; color: var(--accent); }
.complete-stat-label { font-size:13px; color: var(--text-hint); }

/* -- Wordbook -- */
.page-wordbook { display:flex; flex-direction:column; gap:12px; }
.page-title-bar { display:flex; justify-content:space-between; align-items:center; }
.page-title-bar h2 { font-size:20px; font-weight:700; }
.word-count { color: var(--text-hint); font-size:13px; }

.search-bar { padding:0; overflow:hidden; }
.search-bar input { width:100%; padding:12px 16px; background:transparent; border:none; color: var(--text-primary); font-family:inherit; font-size:14px; outline:none; }
.search-bar input::placeholder { color: var(--text-hint); }

.filter-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.filter-tabs::-webkit-scrollbar { display:none; }
.filter-tab { flex-shrink:0; padding:6px 14px; border:1px solid var(--border); border-radius: var(--radius-full); background:transparent; color: var(--text-secondary); font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; transition: var(--transition); }
.filter-tab.active { background: var(--accent); color:#fff; border-color: var(--accent); }

.wordbook-list { display:flex; flex-direction:column; gap:6px; }
.word-item { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:default; }
.word-item-main { flex:1; min-width:0; }
.word-item-word { font-weight:600; font-size:15px; display:flex; align-items:center; gap:6px; }
.mastered-badge { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background: var(--success); color:#fff; font-size:9px; font-weight:700; }
.word-item-meaning { color: var(--text-secondary); font-size:12px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.word-item-actions { display:flex; gap:2px; flex-shrink:0; }
.btn-speak-small { font-size:14px !important; }
.btn-delete-word { font-size:13px !important; opacity:0.3; }
.btn-delete-word:hover { opacity:1; }

/* -- Stats -- */
.page-stats { display:flex; flex-direction:column; gap:12px; }
.stats-overview .stats-row { display:flex; justify-content:space-around; text-align:center; }
.stats-item { flex:1; }
.stats-num { font-size:26px; font-weight:800; }
.stats-num.accent { color: var(--accent); }
.stats-lbl { font-size:11px; color: var(--text-hint); margin-top:2px; }

.mastery-bar-wrap { height:6px; background: var(--border-light); border-radius:3px; margin-top:14px; overflow:hidden; }
.mastery-bar { height:100%; background: var(--gradient-primary); border-radius:3px; transition:width 1s ease; }
.mastery-text { text-align:center; font-size:12px; color: var(--text-hint); margin-top:6px; }

.stats-streak { text-align:center; padding:20px; }
.streak-flame { font-size:32px; color: var(--fire); }
.streak-num { font-size:44px; font-weight:800; color: var(--fire); line-height:1; margin:6px 0 2px; }
.streak-label { font-size:13px; color: var(--text-secondary); }

.chart-card h3 { font-size:14px; margin-bottom:14px; font-weight:600; }
.bar-chart { display:flex; align-items:flex-end; gap:8px; height:110px; padding-bottom:22px; position:relative; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; position:relative; }
.bar-group { flex:1; width:100%; display:flex; gap:3px; align-items:flex-end; justify-content:center; }
.bar { width:10px; border-radius:3px 3px 0 0; transition:height 0.6s ease; }
.bar-learned { background: var(--gradient-primary); }
.bar-reviewed { background: var(--gradient-success); }
.bar-label { font-size:10px; color: var(--text-hint); position:absolute; bottom:0; }
.chart-legend { display:flex; justify-content:center; gap:16px; margin-top:6px; }
.legend-item { display:flex; align-items:center; gap:4px; font-size:11px; color: var(--text-secondary); }
.legend-dot { width:8px; height:8px; border-radius:2px; }
.legend-dot.learned { background: var(--accent); }
.legend-dot.reviewed { background: var(--success); }

/* -- Settings -- */
.page-settings { display:flex; flex-direction:column; gap:12px; }
.settings-section h3 { font-size:15px; font-weight:600; margin-bottom:6px; }
.settings-hint { font-size:12px; color: var(--text-hint); margin-bottom:10px; }

.import-area { border:2px dashed var(--border); border-radius: var(--radius-md); padding:28px 16px; text-align:center; cursor:pointer; transition: var(--transition); color: var(--text-hint); }
.import-area:hover, .import-area.dragover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.import-icon { font-size:28px; margin-bottom:6px; }

.import-status { margin-top:8px; font-size:13px; }
.import-success { color: var(--success); }
.import-error { color: var(--danger); }
.import-loading { color: var(--warning); }

.format-help { font-size:12px; color: var(--text-secondary); line-height:1.8; }
.format-help p { margin-bottom:4px; }
.format-help strong { color: var(--text-primary); }
.format-table { width:100%; border-collapse:collapse; margin:4px 0 12px; font-size:11px; }
.format-table th, .format-table td { padding:5px 8px; border:1px solid var(--border-light); text-align:left; }
.format-table th { background: var(--bg-secondary); font-weight:600; }
.format-help code { display:block; padding:8px 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-family:'SF Mono',Menlo,monospace; font-size:11px; color: var(--accent); }

.setting-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; }
.setting-row label { font-size:14px; }
.setting-row select { padding:8px 12px; background: var(--bg-secondary); border:1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family:inherit; font-size:13px; outline:none; }

.danger-zone { border-color: rgba(201,78,78,0.2); }
.danger-zone h3 { color: var(--danger); }

/* 云同步状态 */
.sync-status-row { display:flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:12px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size:13px; color: var(--text-secondary); }
.sync-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sync-status-dot.clean { background: var(--success); box-shadow: 0 0 6px rgba(78,154,109,0.4); }
.sync-status-dot.dirty { background: var(--warning); box-shadow: 0 0 6px rgba(201,143,66,0.4); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* -- Study empty -- */
.study-empty { text-align:center; padding:48px 24px; margin-top:25%; }
.study-empty h3 { font-size:18px; margin-bottom:6px; }
.study-empty p { color: var(--text-secondary); margin-bottom:20px; }

/* -- Animations -- */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.animate-fadeIn { animation: fadeIn 0.3s ease; }
.animate-scaleIn { animation: scaleIn 0.35s ease; }

/* -- Responsive -- */
@media (min-width:768px) {
  .study-keyboard-hint { display:flex; }
  .word-text { font-size:42px; }
  .word-card { min-height:300px; }
}
@media (max-width:380px) {
  .home-stats-grid { grid-template-columns: repeat(2,1fr); }
  .word-text { font-size:28px; }
  .stat-number { font-size:20px; }
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:2px; }