:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --card: #27364b;
  --line: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #3b82f6;
  --good: #10b981;
  --bad: #ef4444;
  --mid: #f59e0b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", Segoe UI, Roboto, sans-serif; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 18px; letter-spacing: .5px; }
.tabs { display: flex; gap: 6px; }
.tab {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); background: var(--card); border-color: var(--line); }
.streak {
  background: linear-gradient(135deg, #f97316, #ef4444);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

main { max-width: 980px; margin: 0 auto; padding: 24px; }
.panel { display: none; }
.panel.active { display: block; }

/* ---------- study ---------- */
.study-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.filters label { margin-right: 14px; color: var(--muted); cursor: pointer; }
.filters input { vertical-align: middle; accent-color: var(--accent); }
.card-wrap { perspective: 1200px; max-height: calc(100vh - 160px); }
.card {
  position: relative; width: 100%; min-height: 360px; max-height: calc(100vh - 160px);
  transform-style: preserve-3d; transition: transform .5s;
  cursor: pointer; user-select: none;
}
.card-face {
  position: absolute; inset: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 36px; display: flex; flex-direction: column;
  backface-visibility: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.25);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.card.flipped { transform: rotateY(180deg); }
.card-back { transform: rotateY(180deg); }

.word { font-size: 56px; font-weight: 800; line-height: 1.1; word-break: break-word; }
.phonetic { margin-top: 12px; display: flex; gap: 18px; color: var(--muted); font-size: 14px; }
.pos { margin-top: 14px; color: var(--accent); font-weight: 600; }
.answer-meaning { margin-top: auto; margin-bottom: 18px; font-size: 24px; line-height: 1.6; color: var(--text); }
.hint { color: var(--muted); font-size: 13px; text-align: center; }

.meaning { font-size: 22px; line-height: 1.6; font-weight: 500; max-height: 120px; overflow-y: auto; }
.phrases { margin-top: 14px; display: flex; flex-wrap: wrap; }
.phrases .tag {
  background: var(--card); border: 1px solid var(--line); padding: 4px 10px;
  margin: 4px 6px 0 0; border-radius: 999px; font-size: 13px; color: var(--muted);
}
.phrases .tag b { color: var(--text); margin-right: 4px; }
.example { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); max-height: 160px; overflow-y: auto; }
.example .en { font-size: 17px; line-height: 1.6; }
.example .en mark { background: rgba(59,130,246,.25); color: #fff; padding: 1px 3px; border-radius: 3px; }
.example .cn { margin-top: 6px; color: var(--muted); font-size: 14px; max-height: 60px; overflow-y: auto; }
.more-examples { margin-top: 12px; }
.more-examples details { color: var(--muted); font-size: 13px; }
.more-examples ul { padding-left: 18px; }
.more-examples li { margin: 4px 0; }

.actions {
  display: flex; gap: 12px; margin-top: 24px;
}
.btn {
  flex: 1; padding: 14px; border: 0; border-radius: 10px;
  font-size: 16px; font-weight: 600; cursor: pointer; color: #fff;
  transition: filter .15s, transform .1s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn.bad  { background: var(--bad); }
.btn.mid  { background: var(--mid); }
.btn.good { background: var(--good); }
.btn.ghost {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  padding: 8px 14px; font-size: 14px; font-weight: 500;
}

.hint-bar {
  margin-top: 18px; color: var(--muted); font-size: 13px; text-align: center;
}
kbd {
  background: var(--card); border: 1px solid var(--line); padding: 2px 8px;
  border-radius: 4px; margin: 0 4px; font-family: ui-monospace, monospace;
  color: var(--text); font-size: 12px;
}

/* ---------- stats ---------- */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 30px;
}
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; text-align: center;
}
.stat .num { font-size: 30px; font-weight: 700; color: var(--accent); }
.stat .lbl { margin-top: 6px; color: var(--muted); font-size: 13px; }

.section-h { margin: 14px 0 8px; font-size: 16px; color: var(--muted); font-weight: 600; }
.legend {
  display: flex; gap: 18px; color: var(--muted); font-size: 13px; margin-bottom: 12px;
}
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.chart {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; height: 280px; display: flex; align-items: flex-end; gap: 4px;
  overflow-x: auto;
}
.bar {
  flex: 1 0 18px; min-width: 18px; display: flex; flex-direction: column-reverse;
  align-items: center; position: relative;
}
.bar .v1, .bar .v2 {
  width: 70%; border-radius: 3px 3px 0 0;
}
.bar .v1 { background: var(--accent); }
.bar .v2 { background: var(--mid); margin-bottom: 1px; }
.bar .date { font-size: 10px; color: var(--muted); margin-top: 4px; transform: rotate(-30deg); transform-origin: center; white-space: nowrap; }
.bar .rate {
  position: absolute; top: -16px; font-size: 10px; color: var(--good);
}
.bar.empty .v1, .bar.empty .v2 { display: none; }
.chart::-webkit-scrollbar { height: 6px; }
.chart::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ---------- browse ---------- */
.browse-tools {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.browse-tools input[type=search] {
  flex: 1; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  padding: 8px 12px; border-radius: 8px; font-size: 14px;
}
#page-info { color: var(--muted); font-size: 13px; min-width: 70px; text-align: center; }
.word-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
}
.wcard:hover { border-color: var(--accent); }
.wcard .w { font-weight: 700; font-size: 16px; }
.wcard .p { color: var(--accent); font-size: 12px; margin-top: 2px; }
.wcard .m { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.4; }

/* heatmap */
#heatmap-legend { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); margin-bottom:4px; }
.heat-cell { width:12px; height:12px; border-radius:2px; display:inline-block; }
.heat-0 { background:#ebedf0; }
.heat-1 { background:#9be9a8; }
.heat-2 { background:#40c463; }
.heat-3 { background:#30a14e; }
.heat-4 { background:#216e39; }
.heatmap { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; overflow-x:auto; }
.hgrid { display:flex; gap:8px; }
.hcol { display:flex; flex-direction:column; gap:3px; min-width:16px; }
.hcol-label { font-size:10px; color:var(--muted); text-align:center; }
.hcell { width:12px; height:12px; border-radius:2px; background:#ebedf0; cursor:default; flex-shrink:0; }
.hcell:hover { outline:1px solid var(--muted); }

/* clickable stats */
.stat.clickable { cursor:pointer; }
.stat.clickable:hover .num { color:#60a5fa; }

/* reset area */
.reset-area { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.btn-sm { font-size:12px; padding:4px 10px; }
.btn-danger { color:#ef4444; }
.btn-danger:hover { background:#fef2f2; }

/* modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:14px; width:90%; max-width:560px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.modal-title { font-size:15px; font-weight:600; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted); padding:0; line-height:1; }
.modal-close:hover { color:var(--text); }
.modal-body { padding:16px 20px; overflow-y:auto; }
.modal-word-list { display:flex; flex-direction:column; gap:6px; }
.mword { display:flex; align-items:center; padding:10px 12px; background:var(--card); border-radius:8px; cursor:pointer; }
.mword:hover { background:var(--line); }
.mword-info { flex:1; min-width:0; }
.mword-h { font-weight:600; font-size:14px; }
.mword-pos { font-size:11px; color:var(--accent); margin-left:6px; }
.mword-mean { font-size:12px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mword-detail { font-size:11px; color:#60a5fa; white-space:nowrap; margin-left:8px; }
.word-list-empty { text-align:center; color:var(--muted); padding:40px; font-size:14px; }
.word-detail { display:flex; flex-direction:column; gap:10px; line-height:1.6; }
.detail-muted { color:var(--muted); font-size:14px; }
.detail-example { padding-top:10px; border-top:1px dashed var(--line); }
.detail-example mark { background: rgba(59,130,246,.25); color: #fff; padding: 1px 3px; border-radius: 3px; }

/* reset-btn in wcard */
.wcard-footer { display:flex; justify-content:flex-end; margin-top:8px; }
.btn-reset { background:none; border:1px solid var(--line); color:var(--muted); font-size:11px; padding:2px 8px; border-radius:4px; cursor:pointer; }
.btn-reset:hover { border-color:#ef4444; color:#ef4444; }

/* card new fields */
.english-def {
  margin-top: 8px; font-size: 14px; color: var(--muted); font-style: italic; line-height: 1.5;
  max-height: 80px; overflow-y: auto;
}
.exam-refs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.exam-refs-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.exam-refs .tag {
  background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.3); padding: 2px 8px;
  border-radius: 999px; font-size: 11px; color: #93c5fd;
}
.etymology {
  margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; font-style: italic;
  max-height: 60px; overflow-y: auto;
}
.card-page-num {
  margin-top: auto; text-align: right; font-size: 12px; color: var(--muted);
  padding-top: 8px; border-top: 1px dashed var(--line);
}