:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --text: #1f1b16;
  --muted: #6b6259;
  --border: #e7e0d6;
  --accent: #b3261e;
  --canto: #b3261e;
  --mando: #1f5fa8;
  --row-hover: #fbf3ea;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171412;
    --surface: #211d1a;
    --text: #efe9e2;
    --muted: #a39990;
    --border: #3a332d;
    --accent: #ef6b5f;
    --canto: #ef6b5f;
    --mando: #7fb0ec;
    --row-hover: #2a2420;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
}
main { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; }

header h1 { margin: 0; font-size: 1.6rem; }
header h1 span { color: var(--accent); font-weight: 500; margin-left: 6px; white-space: nowrap; }
.sub { margin: 4px 0 20px; color: var(--muted); }
.voice-warning {
  padding: 10px 12px; border-radius: 8px; margin: 0 0 16px;
  background: #fff4d6; color: #5c4400; font-size: .9rem;
}
@media (prefers-color-scheme: dark) { .voice-warning { background: #3a3016; color: #f1dc9c; } }

/* ---- Table ---- */
.vocab {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.vocab th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 12px; border-bottom: 1px solid var(--border);
}
.vocab th small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.vocab td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.vocab tbody:last-child tr:last-child td { border-bottom: 0; }
.vocab tbody tr:not(.cat-head):hover { background: var(--row-hover); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 4px; margin: 20px 0 14px; border-bottom: 1px solid var(--border); }
.tabs [role=tab] {
  font: inherit; font-weight: 600; font-size: 1rem; color: var(--muted); cursor: pointer;
  padding: 10px 16px; background: none; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
}
.tabs [role=tab] span { font-weight: 500; margin-left: 4px; }
.tabs [role=tab]:hover { color: var(--text); }
.tabs [role=tab][aria-selected=true] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs [role=tab]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
@media (max-width: 720px) {
  /* Phones: equal-width tabs, Chinese under English; the bar scrolls itself rather than the page */
  .tabs { gap: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs [role=tab] { flex: 1 0 auto; padding: 8px 6px; font-size: .9rem; text-align: center; }
  .tabs [role=tab] span { display: block; margin: 0; font-size: .8rem; }
}

/* ---- Category sections ---- */
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.cat-nav button {
  font: inherit; padding: 6px 12px; border-radius: 999px; font-size: .88rem; cursor: pointer;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
}
.cat-nav button:hover { border-color: var(--accent); color: var(--accent); }
.cat-nav button span { color: var(--muted); margin-left: 2px; }

.cat { scroll-margin-top: 16px; }
.vocab .cat-head th {
  padding: 18px 12px 10px; text-transform: none; letter-spacing: 0; font-size: 1.05rem;
  color: var(--text); background: var(--row-hover); border-top: 1px solid var(--border);
}
.vocab tbody:first-of-type .cat-head th { border-top: 0; }
.cat-head .cat-en { font-weight: 700; }
.cat-head .cat-zh { color: var(--accent); font-weight: 600; margin-left: 8px; }
.cat-head .cat-phon {
  color: var(--muted); font-weight: 400; font-size: .8rem; margin-left: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.cat-head .cat-count {
  float: right; color: var(--muted); font-weight: 500; font-size: .78rem;
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}

.c-photo { width: 104px; }
.thumb {
  display: block; width: 88px; height: 66px; padding: 0; border: 0; border-radius: 8px;
  overflow: hidden; cursor: zoom-in; background: var(--border);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.thumb:hover img { transform: scale(1.06); }
/* People photos: crop the thumbnail toward the top so faces stay in frame */
.vocab.portraits .thumb img { object-position: 50% 20%; }
.thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.thumb.empty {
  display: grid; place-items: center; font-size: .7rem; color: var(--muted); cursor: default;
}

.c-en { font-weight: 500; }
.c-zh .simp { font-size: 1.5rem; letter-spacing: .05em; white-space: nowrap; }
.c-zh .trad { font-size: .85rem; color: var(--muted); white-space: nowrap; }
/* Long phrases (e.g. two-part idioms) wrap at the comma instead of stretching the column */
.c-zh.long .simp { font-size: 1.2rem; white-space: normal; }
.c-zh.long .trad { white-space: normal; }
.c-zh.long { max-width: 12em; }
.c-zh .clause { white-space: nowrap; }
.c-en .note { font-weight: 400; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.c-phon { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92rem; }
.c-audio { width: 1%; padding-left: 0; }

.speak {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font: inherit; font-size: .85rem; padding: 6px 10px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; cursor: pointer;
}
.speak span { font-weight: 600; }
.speak.canto { color: var(--canto); }
.speak.mando { color: var(--mando); }
.speak:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.speak.playing { background: currentColor; }
.speak.playing span { color: var(--surface); }

/* ---- Phone layout: each row becomes a card ---- */
@media (max-width: 720px) {
  .vocab, .vocab tbody { display: block; border: 0; background: none; }
  .vocab thead { display: none; }
  .vocab tr {
    display: grid; grid-template-columns: 96px 1fr auto; column-gap: 12px; row-gap: 4px;
    padding: 12px; margin-bottom: 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
  }
  .vocab td { padding: 0; border: 0; width: auto; }
  .vocab tr.cat-head {
    display: block; padding: 20px 2px 8px; margin: 0; background: none; border: 0;
  }
  .vocab .cat-head th { display: flow-root; padding: 0; background: none; border: 0; }
  .cat-head .cat-phon { display: block; margin: 2px 0 0; }
  .c-photo { grid-row: 1 / span 4; }
  .c-en, .c-zh { grid-column: 2 / span 2; }
  .c-phon::before {
    content: attr(data-label); display: block; font-family: -apple-system, sans-serif;
    font-size: .68rem; text-transform: uppercase; color: var(--muted); letter-spacing: .04em;
  }
  .c-phon { grid-column: 2; }
  .c-audio { grid-column: 3; align-self: end; }
}

/* ---- Image viewer ---- */
#viewer {
  padding: 0; border: 0; border-radius: 14px; background: var(--surface); color: var(--text);
  max-width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: hidden;
}
#viewer::backdrop { background: rgb(0 0 0 / .7); }
#viewer img { display: block; max-width: 100%; max-height: calc(100vh - 150px); margin: 0 auto; }
.viewer-caption { padding: 12px 16px 14px; }
.viewer-title { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
#viewer-zh { font-size: 1.4rem; }
#viewer-en { font-weight: 500; }
.credit { margin: 4px 0 0; font-size: .75rem; color: var(--muted); }
.credit a { color: inherit; }
.close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgb(0 0 0 / .55); color: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}