:root {
  --bg: #fff8ec;
  --surface: #ffffff;
  --surface-2: #fff1d6;
  --ink: #2b2438;
  --ink-2: #6b5f7a;
  --ink-3: #a293b3;
  --line: #f2dfc0;
  --accent: #ff6b6b;
  --accent-2: #ffb347;
  --accent-ink: #ffffff;
  --jyut: #0e8f8a;
  --ok: #2fb574;
  --warn: #f2a33a;
  --mint: #d7f5e9;
  --sky: #dcefff;
  --lemon: #fff3b0;
  --peach: #ffe0d1;
  --lilac: #ece0ff;
  --shadow: 0 1px 2px rgba(120, 80, 20, .06), 0 10px 26px rgba(120, 80, 20, .10);
  --radius: 18px;
  --han: "Noto Sans HK", "PingFang HK", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  --ui: "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--ui);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 8% 0%, rgba(255, 179, 71, .18), transparent 38%),
    radial-gradient(circle at 100% 12%, rgba(255, 107, 107, .12), transparent 34%),
    radial-gradient(circle at 60% 100%, rgba(14, 143, 138, .10), transparent 40%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
button { font: inherit; }

/* ---------- header ---------- */
.top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 24px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 16px; }
.mascot {
  width: 72px; height: 72px; border-radius: 22px;
  background: linear-gradient(135deg, var(--lemon), var(--peach));
  display: grid; place-items: center;
  box-shadow: var(--shadow);
}
.mascot .sprite { zoom: 2; }
.top h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
.tag { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 500; }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2); font-weight: 600;
}
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.status.ok .dot { background: var(--ok); }
.status.warn .dot { background: var(--warn); }

/* ---------- layout ---------- */
.app {
  max-width: 1180px;
  margin: 12px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
}
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } }

.pane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 380px;
}
.pane-title {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.pane-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pane-head .pane-title { flex: 1; }

textarea {
  flex: 1;
  width: 100%;
  min-height: 200px;
  resize: vertical;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--han);
  font-size: 26px;
  line-height: 1.6;
  padding: 14px 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(255, 179, 71, .25); }
textarea::placeholder { color: var(--ink-3); font-size: 20px; }

/* ---------- buttons ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s, background .15s, border-color .15s, opacity .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--accent-2); background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255, 107, 107, .35);
}
.btn.primary:hover { filter: brightness(1.05); }
.btn.primary.speaking { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 8px 30px rgba(255, 107, 107, .65); transform: scale(1.02); } }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 11px; }
.btn.icon { padding: 8px; border-radius: 11px; }
.btn.round { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; }
.btn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.rate-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); font-weight: 700; }
.rate-row input { flex: 1; max-width: 220px; accent-color: var(--accent); }
.rate-row output { font-variant-numeric: tabular-nums; min-width: 36px; color: var(--ink); }
.save-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.check { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; font-weight: 600; }
.check input { accent-color: var(--accent); }
.listpick { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
select, .listpick select {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 10px;
  padding: 5px 8px; outline: none; max-width: 220px;
}
select:focus { border-color: var(--accent-2); }

.seg { display: inline-flex; background: var(--surface-2); border: 2px solid var(--line); border-radius: 12px; padding: 3px; }
.seg-btn { border: 0; background: transparent; color: var(--ink-2); padding: 4px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.seg-btn.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ---------- output ---------- */
.output {
  flex: 1;
  border-radius: 14px;
  background: var(--surface-2);
  padding: 14px;
  overflow: auto;
}
.output.empty { color: var(--ink-3); font-size: 14px; display: grid; place-items: center; text-align: center; font-weight: 600; }

/* pictures */
.pic { display: inline-grid; place-items: center; flex: none; }
.pic.emoji { font-size: 30px; line-height: 1; }
.pic.emoji.sm { font-size: 17px; }
.pic.face { width: 16px; height: 16px; background: url(art/cozy/emoticons.png) no-repeat; background-size: 80px 96px; image-rendering: pixelated; zoom: 3; }
.pic.face.sm { zoom: 1.4; }
.sprite { position: relative; width: 32px; height: 32px; display: inline-block; image-rendering: pixelated; }
.sprite .layer { position: absolute; inset: 0; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; animation-name: play; animation-iteration-count: infinite; animation-play-state: paused; }
.sprite.playing .layer, .sprite:hover .layer { animation-play-state: running; }
.sprite.once .layer { animation-iteration-count: 1; animation-play-state: running; }
@keyframes play { from { background-position-x: 0; } to { background-position-x: var(--end); } }
.pic.sprite.lg { zoom: 1.5; }
.pic-slot { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; transition: background .12s; }
.pic-slot:hover { background: rgba(255, 179, 71, .25); }
.pic-slot.empty::after { content: "＋"; color: var(--ink-3); opacity: 0; font-size: 18px; }
.pic-slot.empty:hover::after { opacity: 1; }

/* Lines view */
.lines { border-collapse: collapse; width: 100%; }
.lines tr { cursor: pointer; transition: background .12s; }
.lines tr:hover td { background: var(--surface); }
.lines tr.speaking td { background: rgba(255, 107, 107, .14); }
.lines td { padding: 5px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lines td:first-child { border-radius: 10px 0 0 10px; padding-left: 4px; width: 1%; }
.lines td:last-child { border-radius: 0 10px 10px 0; }
.lines tr.gap td { border: 0; padding: 6px; }
.lines .han { font-family: var(--han); font-size: 27px; line-height: 1.2; white-space: nowrap; width: 1%; }
.lines .jyut { color: var(--jyut); font-weight: 800; font-size: 16px; white-space: nowrap; width: 1%; padding-right: 18px; }
.lines .gloss { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.lines tr.unknown .han, .lines tr.unknown .jyut { color: var(--ink-3); font-weight: 400; }
.lines tr.sel td { background: rgba(255, 179, 71, .3); }
.lines tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--accent); }

/* your own meanings */
.lines .gloss { position: relative; padding-right: 28px; }
.lines .gloss:hover { color: var(--ink); }
.lines .gloss .pencil { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); opacity: 0; font-size: 13px; transition: opacity .12s; }
.lines .gloss:hover .pencil { opacity: 1; }
.lines .gloss .mine { display: none; margin-left: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); vertical-align: middle; }
.lines tr.custom .gloss .g { color: var(--ink); font-weight: 700; }
.lines tr.custom .gloss .mine { display: inline; }
.gloss-edit {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 2px solid var(--accent-2); border-radius: 10px;
  padding: 5px 8px; outline: none;
}
.gloss-edit::placeholder { color: var(--ink-3); font-style: italic; }

/* join mode */
.lines.joining tr { cursor: cell; }
.lines.joining .gloss, .lines.joining .pic-slot { pointer-events: none; }
.lines.joining .gloss .pencil { display: none; }
.joinbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface); border: 2px solid var(--accent-2); border-radius: 14px;
}
.join-preview { display: inline-flex; align-items: baseline; gap: 10px; }
.join-preview .han { font-family: var(--han); font-size: 22px; font-weight: 500; }
.join-preview .jyut { font-style: normal; color: var(--jyut); font-weight: 800; font-size: 14px; }
.join-meaning {
  flex: 1; min-width: 180px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 10px; padding: 7px 10px; outline: none;
}
.join-meaning:focus { border-color: var(--accent-2); }

/* Cards view */
.line { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: flex-start; margin-bottom: 10px; }
.line:last-child { margin-bottom: 0; }
.word {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 12px 8px; border-radius: 14px;
  background: var(--surface); border: 2px solid var(--line);
  cursor: pointer; max-width: 240px;
  transition: border-color .12s, transform .08s, background .12s;
}
.word:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.word.speaking { background: rgba(255, 107, 107, .12); border-color: var(--accent); }
.word .han { font-family: var(--han); font-size: 28px; line-height: 1.15; }
.word .jyut { color: var(--jyut); font-weight: 800; font-size: 14px; white-space: nowrap; }
.word .gloss { color: var(--ink-2); font-size: 11.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.word.unknown .han { color: var(--ink-3); }
.word.unknown .jyut { color: var(--ink-3); font-weight: 400; }
.plain-token { font-family: var(--han); font-size: 26px; color: var(--ink-2); align-self: center; padding: 0 2px; }

/* word chips under a saved phrase */
.words { display: flex; flex-wrap: wrap; gap: 6px; }
.words .w {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: border-color .12s;
}
.words .w:hover { border-color: var(--accent-2); }
.words .w.speaking { border-color: var(--accent); background: rgba(255, 107, 107, .14); }
.words .w b { font-family: var(--han); font-weight: 500; font-size: 18px; }
.words .w i { font-style: normal; color: var(--jyut); font-weight: 800; font-size: 13px; }
.words .w em { font-style: normal; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.words .w.unknown i, .words .w.unknown em { color: var(--ink-3); }
.words .w.custom em { color: var(--ink); font-weight: 700; }
.words .w.custom em::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-left: 5px; vertical-align: middle; }

/* ---------- saved ---------- */
.saved { max-width: 1180px; margin: 28px auto 0; padding: 0 24px; }
.saved-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.saved-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.saved-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.saved h2 { margin: 0; font-size: 22px; font-weight: 800; }
.status-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; min-height: 28px; }
.status-strip .progress { margin: 0; flex: 1; min-width: 200px; }
.status-strip .continue { margin: 0; position: static; box-shadow: none; padding: 5px 12px; }
.rate-mini { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-weight: 800; font-size: 13px; color: var(--ink-2); }
.rate-mini output { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.pill { background: var(--lemon); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; font-size: 12px; color: var(--ink-2); font-weight: 800; }
#filter {
  width: 200px;
  padding: 9px 14px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 600; outline: none;
}
#filter:focus { border-color: var(--accent-2); }
.saved-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* breadcrumb of dropdowns */
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crumbs select { background: var(--surface); border-radius: 999px; padding: 6px 12px; max-width: 260px; }
.crumbs select.current { border-color: var(--accent-2); background: var(--lemon); }
.crumbs select.next { color: var(--ink-3); border-style: dashed; }
.crumbs .sep { color: var(--ink-3); font-weight: 800; }

/* sublist tiles */
.subtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.subtiles:empty { display: none; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 16px; min-height: 84px;
  background: var(--tile, var(--mint)); border: 2px solid transparent;
  cursor: pointer; text-align: left; color: var(--ink); font: inherit;
  transition: transform .1s, border-color .12s, box-shadow .12s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile.drop { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 107, 107, .25); }
.tile.dragging { opacity: .4; }
.tile .icon { font-size: 24px; line-height: 1; }
.tile .name { font-weight: 800; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.tile .n { font-size: 12px; color: var(--ink-2); font-weight: 700; }
.tile .more {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 8px;
  border: 0; background: rgba(255, 255, 255, .6); color: var(--ink-2); font-size: 16px; cursor: pointer; opacity: 0;
}
.tile:hover .more { opacity: 1; }
.tile.new { background: transparent; border: 2px dashed var(--line); color: var(--ink-3); justify-content: center; align-items: center; font-weight: 800; }
.tile.new:hover { border-color: var(--accent-2); color: var(--accent); box-shadow: none; }

/* phrase records */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.item.dragging { opacity: .5; }
.item .han { font-family: var(--han); font-size: 24px; line-height: 1.3; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item .han .drag { cursor: grab; color: var(--ink-3); font-size: 14px; }
.item .jyut { color: var(--jyut); font-weight: 800; font-size: 14px; grid-column: 1; }
.item .meta { grid-column: 1; color: var(--ink-3); font-size: 12px; font-weight: 600; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.item .actions { grid-column: 2; grid-row: 1 / span 5; display: flex; gap: 4px; align-items: center; }
.item .actions .btn.icon { width: 34px; height: 34px; padding: 0; }
.item.speaking { border-color: var(--accent); }
.item .note {
  grid-column: 1;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: transparent; border: 2px dashed transparent; border-radius: 10px;
  padding: 4px 8px; margin-left: -8px; outline: none;
  transition: border-color .12s, background .12s;
}
.item .note::placeholder { color: var(--ink-3); font-style: italic; font-weight: 500; }
.item .note:hover { border-color: var(--line); }
.item .note:focus { border-style: solid; border-color: var(--accent-2); background: var(--surface-2); }
.item .strip { grid-column: 1; margin: 2px 0; }
.item .tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tag {
  border: 1px solid transparent; background: var(--tile, var(--mint)); color: var(--ink-2);
  border-radius: 999px; padding: 0 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; line-height: 20px;
}
.tag:hover { border-color: var(--accent-2); color: var(--ink); }
.muted { color: var(--ink-3); font-size: 14px; font-weight: 600; }

/* ---------- popovers ---------- */
.popover {
  position: absolute; z-index: 20; min-width: 220px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 4px;
}
.pop-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 2px 4px 6px; }
.pop-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pop-row:hover { background: var(--surface-2); }
.pop-row input { accent-color: var(--accent); }
.pop-new { display: flex; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.pop-new input, .pop-input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 10px; padding: 6px 8px; outline: none;
}
.pop-new input:focus, .pop-input:focus { border-color: var(--accent-2); }
.pop-input.big { font-size: 26px; text-align: center; }
.menu-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item:disabled { opacity: .4; cursor: default; background: transparent; }
.menu-item.danger { color: var(--accent); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0; }

/* ---------- manage lists sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(43, 36, 56, .35);
  display: grid; place-items: start center; padding: 40px 16px; overflow: auto;
}
.sheet[hidden] { display: none; }
.sheet-box {
  width: min(760px, 100%); background: var(--surface); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(43, 36, 56, .3); padding: 20px 22px 18px;
}
.sheet-head { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin-bottom: 14px; }
.sheet-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.sheet-head .muted { grid-column: 1; margin: 0; font-size: 13px; }
.sheet-head .btn { grid-column: 2; grid-row: 1 / span 2; }
.sheet-foot { margin-top: 12px; display: flex; justify-content: flex-start; }
.mrows { display: flex; flex-direction: column; gap: 4px; }
.mrow {
  display: grid; grid-template-columns: 22px 34px 1fr auto auto; gap: 8px; align-items: center;
  padding: 6px 8px 6px calc(8px + var(--depth, 0) * 22px);
  border-radius: 12px; border: 2px solid transparent; background: var(--surface-2);
  transition: border-color .12s, background .12s;
}
.mrow:hover { background: var(--lemon); }
.mrow.dragging { opacity: .4; }
.mrow.drop-into { border-color: var(--accent); background: var(--peach); }
.mrow.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.mrow.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.mrow .handle { cursor: grab; color: var(--ink-3); font-size: 16px; text-align: center; user-select: none; }
.mrow .iconbtn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--surface); font-size: 20px; cursor: pointer; }
.mrow .iconbtn:hover { background: var(--sky); }
.mrow .name {
  font: inherit; font-weight: 800; font-size: 15px; color: var(--ink);
  background: transparent; border: 2px solid transparent; border-radius: 9px; padding: 5px 8px; outline: none; min-width: 0;
}
.mrow .name:hover { border-color: var(--line); background: var(--surface); }
.mrow .name:focus { border-color: var(--accent-2); background: var(--surface); }
.mrow .n { font-size: 12px; color: var(--ink-2); font-weight: 800; white-space: nowrap; }
.mrow .tools { display: flex; gap: 4px; }
.mrow .tools .btn { padding: 4px 8px; font-size: 12px; border-radius: 9px; }
.mrow .tools .btn.icon { width: 28px; height: 28px; padding: 0; }

.foot { max-width: 1180px; margin: 40px auto 30px; padding: 0 24px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 14px;
  font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: var(--shadow); z-index: 40;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- progress, bookmark, done ---------- */
.check.small { font-size: 12.5px; }
.progress { display: flex; align-items: center; gap: 10px; }
.progress .bar { flex: 1; max-width: 320px; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--ok)); border-radius: 999px; transition: width .25s; }
.progress .txt { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.continue {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; border: 2px solid var(--accent-2);
  background: var(--lemon); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
  position: sticky; top: 10px; z-index: 5; box-shadow: var(--shadow);
}
.continue b { font-family: var(--han); font-weight: 500; font-size: 16px; }
.item.done { opacity: .62; }
.item.done .han .t { text-decoration: line-through; text-decoration-color: var(--ok); text-decoration-thickness: 2px; }
.item.marked { border-color: var(--accent-2); background: #fffaf0; }
.item.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 5px rgba(255, 179, 71, .6); } 100% { box-shadow: var(--shadow); } }
.item .actions .btn.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.item .actions .btn.mark.on { background: var(--accent-2); border-color: var(--accent-2); }
.words .w em.editing { display: none; }
.words .w .gloss-edit { width: 140px; padding: 2px 6px; font-size: 12.5px; }
.words .w em { cursor: text; border-bottom: 1px dashed transparent; }
.words .w em:hover { border-bottom-color: var(--ink-3); }

/* ---------- study mode ---------- */
.study-box { width: min(860px, 100%); padding: 18px 22px; }
.study-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-bottom: 10px; }
.study-head .progress { margin: 0; }
.study-where { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; }
.study-body { min-height: 260px; display: flex; flex-direction: column; gap: 12px; }
.study-body .big { font-family: var(--han); font-size: 40px; line-height: 1.35; font-weight: 500; }
.study-body .big.speaking { color: var(--accent); }
.study-body .jyut { color: var(--jyut); font-weight: 800; font-size: 20px; }
.study-body .output { padding: 10px; }
.study-body .note {
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 2px dashed var(--line); border-radius: 12px; padding: 8px 12px; outline: none;
}
.study-body .note:focus { border-style: solid; border-color: var(--accent-2); }
.study-body .done-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 800; font-size: 13px; }
.study-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.study-foot #studyNext { margin-left: auto; }
.study-foot .btn.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.study-foot #studyMark.on { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink); }
.keys { margin: 10px 0 0; font-size: 12px; text-align: center; }

/* ---------- flashcard mode in Study ---------- */
.study-tools { display: flex; gap: 6px; align-items: center; }
.study-head #studyQuiz.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.study-body.quiz .pic-slot, .study-body.quiz .lines .gloss > *, .study-body.quiz .note { visibility: hidden; }
.study-body.quiz .lines .gloss, .study-body.quiz .pic-slot { pointer-events: none; }
.reveal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; border-radius: 14px; cursor: pointer;
  background: var(--lilac); border: 2px dashed var(--ink-3); color: var(--ink); font-weight: 800;
  transition: background .12s, border-color .12s;
}
.reveal:hover { background: var(--lemon); border-color: var(--accent-2); }
.reveal .hint { color: var(--ink-2); font-weight: 600; font-size: 13px; }

/* ---------- voice settings ---------- */
button.status { cursor: pointer; font: inherit; font-weight: 600; }
button.status:hover { border-color: var(--accent-2); }
.status .gear { color: var(--ink-3); margin-left: 4px; }
.settings { min-width: 320px; gap: 8px; }
.settings label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.settings input, .settings select { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); border: 2px solid var(--line); border-radius: 10px; padding: 6px 8px; outline: none; max-width: none; }
.settings input:focus, .settings select:focus { border-color: var(--accent-2); }
.settings .row { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.settings .hint { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

/* ---------- conversations ---------- */
.convo-box { width: min(900px, 100%); padding: 18px 22px; }
.convo-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 10px; }
.convo-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.convo-title #convoIcon { font-size: 34px; line-height: 1; }
.convo-title h2 { margin: 0; font-size: 20px; font-weight: 800; }
.convo-title p { margin: 2px 0 0; font-size: 13px; }
.convo-nav { display: flex; gap: 6px; }
.convo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.convo-bar .btn.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.convo-body { min-height: 300px; }
.ctiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ctile {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 14px; border-radius: 16px; background: var(--tile, var(--mint)); border: 2px solid transparent;
  cursor: pointer; font: inherit; color: var(--ink); transition: transform .1s, box-shadow .12s;
}
.ctile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ctile .icon { font-size: 30px; line-height: 1; }
.ctile .name { font-weight: 800; font-size: 15px; }
.ctile .setting { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.ctile .n { font-size: 11.5px; color: var(--ink-3); font-weight: 800; margin-top: 6px; }

.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble {
  max-width: 78%; padding: 12px 14px 10px; border-radius: 18px; position: relative;
  background: var(--surface-2); border: 2px solid transparent; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.bubble.them { align-self: flex-start; border-bottom-left-radius: 6px; }
.bubble.me { align-self: flex-end; background: var(--sky); border-bottom-right-radius: 6px; }
.bubble.sylvan { background: var(--lemon); }
.bubble.current { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 107, 107, .18); }
.bubble .who { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.bubble .who .play { margin-left: auto; width: 28px; height: 28px; padding: 0; border-radius: 9px; }
.bubble .han { font-family: var(--han); font-size: 24px; line-height: 1.4; }
.bubble .jyut { color: var(--jyut); font-weight: 800; font-size: 14px; margin-top: 2px; }
.bubble .en { color: var(--ink-2); font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.bubble .breakdown { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); cursor: default; }
.chat.hide-en .bubble .en { display: none; }
.bubble.veiled .han, .bubble.veiled .jyut, .bubble.veiled .en { filter: blur(7px); user-select: none; }
.bubble.veiled::after { content: "🎤 Your turn. Say it, then click or press Space"; position: absolute; inset: auto 12px 8px 12px; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.bubble.veiled { padding-bottom: 30px; }
.convo-patterns { margin-top: 18px; border: 2px solid var(--line); border-radius: 14px; padding: 6px 14px; background: var(--surface); }
.convo-patterns summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.pattern { padding: 10px 0; border-top: 1px solid var(--line); }
.pattern b { display: block; font-size: 15px; }
.pattern .meaning { color: var(--ink-2); font-size: 13.5px; font-weight: 600; margin: 2px 0 6px; }
.pattern .ex { font-family: var(--han); font-size: 18px; }
.pattern .exj { color: var(--jyut); font-weight: 800; font-size: 13px; }
.pattern .exe { color: var(--ink-2); font-size: 13px; font-weight: 600; }

/* key legend */
.keys { margin: 12px 0 0; font-size: 12.5px; text-align: center; color: var(--ink-2); font-weight: 700; }
kbd { display: inline-block; padding: 1px 7px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 3px; font: inherit; font-size: 12px; font-weight: 800; color: var(--ink); }

/* ---------- profile ---------- */
.head-right { display: flex; align-items: center; gap: 8px; }
.profile-box { width: min(920px, 100%); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat { background: var(--tile, var(--mint)); border-radius: 14px; padding: 12px 14px; }
.stat b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.stat span { font-size: 12px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.psec { margin-top: 18px; }
.psec h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.psec .sub { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin: -4px 0 8px; }
.fresh { width: 100%; border-collapse: collapse; }
.fresh th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px; border-bottom: 2px solid var(--line); }
.fresh td { padding: 8px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; vertical-align: middle; }
.fresh tr.row { cursor: pointer; }
.fresh tr.row:hover td { background: var(--lemon); }
.fresh td.name { font-weight: 800; }
.fresh td.name small { display: block; font-weight: 600; color: var(--ink-3); font-size: 11.5px; }
.fresh td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fresh .pillf { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.fresh .pillf.never { background: var(--peach); color: #a33; }
.fresh .pillf.stale { background: var(--lemon); color: #8a5a00; }
.fresh .pillf.ok { background: var(--mint); color: #1d7a4f; }
.fresh .pillf.fresh { background: var(--sky); color: #1b5aa6; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 200px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; cursor: pointer; }
.bar-row:hover .bar-name { color: var(--accent); }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 16px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 999px; }
.bar-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pie-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pie-legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.pie-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.crumb-btn { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; padding: 0; }

/* ---------- navigation and home ---------- */
.nav { display: inline-flex; gap: 4px; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 4px; }
.nav-btn { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 800; font-size: 13.5px; padding: 6px 14px; border-radius: 10px; cursor: pointer; }
.nav-btn:hover { color: var(--ink); background: var(--surface-2); }
.nav-btn.active { background: var(--ink); color: var(--bg); }
.home { max-width: 1180px; margin: 16px auto 0; padding: 0 24px; }
.home-continue { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; background: var(--lemon); border: 2px solid var(--accent-2); margin-bottom: 18px; }
.home-continue .txt { flex: 1; font-weight: 700; min-width: 200px; }
.home-continue .txt b { display: block; font-size: 16px; font-weight: 800; }
.home-continue .txt small { color: var(--ink-2); font-weight: 600; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.hcard {
  display: flex; flex-direction: column; gap: 8px; text-align: left; font: inherit; color: var(--ink);
  padding: 18px 18px 16px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--line);
  box-shadow: var(--shadow); cursor: pointer; transition: transform .1s, border-color .12s; position: relative;
}
.hcard:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.hcard .top { display: flex; align-items: center; gap: 12px; }
.hcard .icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: var(--tile, var(--mint)); flex: none; }
.hcard h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; }
.hcard .desc { margin: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.hcard .meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 800; color: var(--ink-3); }
.hcard .meta .pillf { padding: 0 8px; border-radius: 999px; }
.hcard .meta .pillf.never { background: var(--peach); color: #a33; }
.hcard .meta .pillf.stale { background: var(--lemon); color: #8a5a00; }
.hcard .meta .pillf.ok { background: var(--mint); color: #1d7a4f; }
.hcard .meta .pillf.fresh { background: var(--sky); color: #1b5aa6; }
.hcard .bar { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.hcard .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--ok)); }
.hcard .subs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.hcard .subs span { font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.hcard .actions { display: flex; gap: 6px; margin-top: 4px; }
.hcard .actions .btn { flex: 1; }
.pattern b { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.pattern b i { font-style: normal; color: var(--jyut); font-size: 13px; font-weight: 800; }

/* ---------- browse view (landing + drill down) ---------- */
.browse { max-width: 1180px; margin: 18px auto 0; padding: 0 24px; }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; min-height: 30px; }
.crumb { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 800; font-size: 14px; padding: 4px 8px; border-radius: 8px; cursor: pointer; }
.crumb:hover { background: var(--surface-2); color: var(--ink); }
.crumb.current { color: var(--ink); background: var(--lemon); cursor: default; }
.crumbs .sep { color: var(--ink-3); font-weight: 800; }
.home-cards.root { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 10px 0 24px; }
.home-cards.root .hcard { padding: 26px 24px 22px; gap: 12px; min-height: 240px; }
.home-cards.root .hcard .icon { width: 72px; height: 72px; font-size: 40px; border-radius: 22px; }
.home-cards.root .hcard h3 { font-size: 22px; }
.home-cards.root .hcard .desc { font-size: 14px; }
.home-cards:not(.root) { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 22px; }
.home-cards:not(.root) .hcard { padding: 14px 16px 12px; gap: 6px; }
.home-cards:not(.root) .hcard .icon { width: 44px; height: 44px; font-size: 24px; border-radius: 14px; }
.home-cards:not(.root) .hcard h3 { font-size: 15px; }
.home-cards:not(.root) .hcard .actions { margin-top: 2px; }
.home-cards:empty { display: none; }
.root-tools { display: flex; justify-content: flex-end; margin: 10px 0 30px; }
.hcard .drop { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 107, 107, .25); }
#listArea { margin-top: 0; padding: 0; }

/* ---------- hidden must win over display rules ---------- */
[hidden] { display: none !important; }

/* ---------- cards, uniform ---------- */
.home-cards .hcard, .home-cards.root .hcard, .home-cards:not(.root) .hcard {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
  padding: 22px 18px 18px; min-height: 0;
}
.hcard .top { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.hcard .top > div { width: 100%; }
.hcard .icon { flex: none; }
.home-cards.root .hcard .icon { width: 96px; height: 96px; font-size: 52px; border-radius: 28px; }
.home-cards:not(.root) .hcard .icon { width: 76px; height: 76px; font-size: 40px; border-radius: 22px; }
.hcard h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; line-height: 1.2; }
.home-cards.root .hcard h3 { font-size: 22px; margin-top: 4px; }
.home-cards:not(.root) .hcard h3 { font-size: 16px; margin-top: 2px; }
.hcard .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; margin-top: 4px; }
.home-cards:not(.root) .hcard .desc { display: none; }
.hcard .meta { justify-content: center; margin-top: 10px; min-height: 22px; }
.hcard .bar, .hcard .subs { display: none; }
.hcard .actions { width: 100%; margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hcard .actions .btn { width: 100%; min-height: 40px; }
.hcard .actions.one { grid-template-columns: 1fr; }
.hcard .actions.three { grid-template-columns: 1fr 1fr 1fr; }
.hcard .more { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 9px; border: 0; background: var(--surface-2); color: var(--ink-2); font-size: 16px; cursor: pointer; opacity: 0; }
.hcard:hover .more { opacity: 1; }
.home-cards.root { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .home-cards.root { grid-template-columns: 1fr; } }
.home-cards:not(.root) { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.home-cards .tile.new { min-height: 100%; }

/* ---------- phrase list as a two column grid ---------- */
.list { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .list { grid-template-columns: 1fr; } }
.item { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; align-items: start; }
.item .han { font-size: 26px; line-height: 1.25; }
.item .jyut { font-size: 14px; }
.item .actions { grid-row: 1 / span 2; align-self: start; flex-direction: column; gap: 4px; }
.item .actions .btn.icon { width: 30px; height: 30px; }
.item .note { font-size: 13.5px; }
.item .strip { margin: 4px 0 0; }
.item .meta { font-size: 11.5px; }
.list-order { display: inline-block; min-width: 26px; height: 22px; line-height: 22px; text-align: center; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: 11.5px; font-weight: 800; margin-right: 8px; vertical-align: middle; }

/* ---------- sentence pattern lecture ---------- */
.lecture { max-width: 820px; margin: 0 auto 40px; }
.lecture .lec-head { margin-bottom: 18px; }
.lecture .lec-head h2 { margin: 0; font-size: 24px; font-weight: 800; }
.lecture .lec-head p { margin: 4px 0 0; color: var(--ink-2); font-weight: 600; }
.lecture .lec-actions { display: flex; gap: 8px; margin: 12px 0 0; }
.lec { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow); }
.lec .n { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lec h3 { margin: 4px 0 2px; font-size: 20px; font-weight: 800; line-height: 1.3; }
.lec h3 .jy { color: var(--jyut); }
.lec .gist { color: var(--ink-2); font-weight: 700; margin: 0 0 12px; }
.lec .body { font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.lec .ex { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.lec .ex .han { font-family: var(--han); font-size: 24px; grid-column: 1; }
.lec .ex .jy { color: var(--jyut); font-weight: 800; font-size: 14px; grid-column: 1; }
.lec .ex .en { color: var(--ink-2); font-weight: 600; font-size: 13.5px; grid-column: 1; }
.lec .ex .play { grid-column: 2; grid-row: 1 / span 3; }
.lec .from { font-size: 12px; color: var(--ink-3); font-weight: 700; margin-top: 8px; }

/* ---------- phrase cards, compact ---------- */
.list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
@media (max-width: 760px) { .list { grid-template-columns: 1fr; } }
.item { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px; }
.item .head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.item .head .han { font-family: var(--han); font-size: 24px; line-height: 1.25; cursor: pointer; }
.item .head .jyut { color: var(--jyut); font-weight: 800; font-size: 14px; }
.item .note { margin-left: -8px; }
.item .strip { margin: 0; }
.item .foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.item .foot .actions { margin-left: auto; display: flex; gap: 4px; }
.item .foot .actions .btn.icon { width: 28px; height: 28px; font-size: 13px; }
.item .foot .actions .btn.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.item .foot .actions .btn.mark.on { background: var(--accent-2); border-color: var(--accent-2); }
.mini-bar { height: 5px; margin-top: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; max-width: 220px; }
.mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.fresh td.name span { display: block; }
.profile-box .crumbs { margin: 4px 0 10px; }

/* phrase card footer: actions in a row, note full width (overrides the older column layout) */
.item .foot .actions { flex-direction: row; grid-row: auto; grid-column: auto; align-self: center; }
.item .note { width: calc(100% + 8px); }
.item .head .han { font-size: 26px; }
.item .foot { padding-top: 6px; }

/* cards keep their own height instead of stretching to the tallest in the row */
.list { align-items: start; }

/* ---------- grading ---------- */
.grade { display: inline-flex; align-items: center; gap: 6px; }
.grade-q { font-size: 13px; font-weight: 800; color: var(--ink-2); margin-right: 4px; }
.btn.got { border-color: var(--ok); color: #1d7a4f; }
.btn.got:hover, .btn.got.on { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn.miss { border-color: var(--accent); color: #a33; }
.btn.miss:hover, .btn.miss.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.grade.graded .btn { opacity: .45; }
.grade.graded .btn.on { opacity: 1; }
#studyNext:disabled { opacity: .35; }
.study-body .mastery { display: inline-flex; gap: 3px; align-items: center; margin-left: 10px; vertical-align: middle; }
.mastery i { width: 10px; height: 10px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
.mastery i.on { background: var(--ok); border-color: var(--ok); }
.mastery small { font-size: 11px; font-weight: 800; color: var(--ink-3); margin-left: 4px; }

/* ---------- proficiency charts ---------- */
.prof-head { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 16px; padding: 16px 18px; border-radius: 16px; background: var(--lemon); }
.prof-head .tier { font-size: 44px; font-weight: 800; line-height: 1; color: var(--accent); }
.prof-head .tier small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.prof-head .toward { font-weight: 700; color: var(--ink-2); }
.prof-head .toward b { color: var(--ink); }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .charts { grid-template-columns: 1fr; } }
.chart { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.chart h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.chart svg { width: 100%; height: auto; display: block; }
.ladder { display: flex; flex-direction: column; gap: 8px; }
.ladder .dim { display: grid; grid-template-columns: 130px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; font-weight: 800; }
.ladder .segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ladder .seg { position: relative; height: 18px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.ladder .seg i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--ok)); }
.ladder .seg.reached { border-color: var(--ok); }
.ladder .seg.reached i { background: var(--ok); }
.ladder .seg span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--ink-2); }
.ladder .pct { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.heat { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
.heat i.l1 { background: #d7f5e9; } .heat i.l2 { background: #8fe0bc; } .heat i.l3 { background: #2fb574; } .heat i.l4 { background: #1d7a4f; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.bubble.got { border-color: var(--ok); }
.bubble.missed { border-color: var(--accent); }

/* weekly section grid: seven boxes, Monday first */
.week { display: inline-flex; gap: 3px; vertical-align: middle; }
.week i { width: 16px; height: 16px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); font-style: normal; font-size: 9px; font-weight: 800; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.week i.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.week i.today { box-shadow: 0 0 0 2px var(--accent-2); }
.week i.future { opacity: .35; }
.fresh td.wk .week i { cursor: pointer; }
.fresh td.wk .week i:hover { transform: scale(1.15); }
.hcard .meta .week { margin-left: auto; }
.study-week { display: inline-flex; align-items: center; margin: 0 6px; }
.voice-row { display: flex; gap: 6px; align-items: center; }
.voice-row select { flex: 1; min-width: 0; }

/* ---------- avatars ---------- */
.avatars { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 34px auto 10px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); max-width: 760px; }
.avatar-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 8px 12px; border-radius: 14px; transition: background .12s; }
.avatar-btn:hover { background: var(--surface-2); }
.avatar-btn .stage { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; background: var(--tile, var(--mint)); }
.avatar-btn .stage .sprite { zoom: 2.2; }
.avatar-btn b { font-size: 14px; font-weight: 800; }
.avatar-btn small { font-size: 11px; color: var(--ink-3); font-weight: 700; }
.avatar-pop { min-width: 320px; }
.avatar-pop .preview { display: flex; align-items: center; gap: 14px; padding: 8px 4px 12px; }
.avatar-pop .preview .stage { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; background: var(--lemon); }
.avatar-pop .preview .stage .sprite { zoom: 2.2; }
.avatar-pop .preview b { font-size: 16px; font-weight: 800; display: block; }
.avatar-pop .opt { display: grid; grid-template-columns: 64px 28px 1fr 28px; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.avatar-pop .opt .val { text-align: center; color: var(--ink); font-weight: 700; font-size: 13px; }
.avatar-pop .opt .btn { width: 28px; height: 28px; padding: 0; }
.avatar-pop label { margin-top: 6px; }

/* ---------- reader ---------- */
.reader-box { width: min(1180px, 100%); padding: 18px 22px; }
.reader-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.reader-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.reader-title #rdIcon { font-size: 34px; line-height: 1; }
.reader-title h2 { margin: 0; font-size: 22px; font-weight: 800; }
.reader-title p { margin: 2px 0 0; font-size: 13px; }
.reader-tools { display: flex; gap: 6px; }
.reader-tools .btn.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.reader-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .reader-body { grid-template-columns: 1fr; } }
.book { background: #fffdf7; border: 2px solid var(--line); border-radius: 18px; padding: 26px 30px 18px; box-shadow: var(--shadow); min-height: 420px; display: flex; flex-direction: column; }
.page { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.sent { padding: 8px 12px; border-radius: 12px; cursor: pointer; border: 2px solid transparent; transition: background .12s, border-color .12s; }
.sent:hover { background: var(--surface-2); }
.sent.current { border-color: var(--accent); background: rgba(255, 107, 107, .08); }
.sent .who { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.sent .han { font-family: var(--han); font-size: 26px; line-height: 1.6; }
.sent .jy { color: var(--jyut); font-weight: 800; font-size: 14px; margin-top: 2px; }
.sent .en { color: var(--ink-2); font-weight: 600; font-size: 14px; margin-top: 2px; }
.book.no-jyut .sent .jy, .book.no-en .sent .en { display: none; }
.sent .breakdown { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); cursor: default; }
.page-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.page-nav .pill { margin: 0 auto; }
.notes { display: flex; flex-direction: column; gap: 12px; }
.note-box { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.note-box h4 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.note-box .muted { font-size: 12.5px; }
.vrow { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.vrow:last-child { border-bottom: 0; }
.vrow .w { font-family: var(--han); font-size: 20px; }
.vrow .j { color: var(--jyut); font-weight: 800; font-size: 13px; }
.vrow .g { grid-column: 2; color: var(--ink-2); font-size: 12.5px; font-weight: 600; margin-top: -4px; }
.vrow .btn.icon { width: 26px; height: 26px; font-size: 11px; grid-row: 1 / span 2; }
.vrow.known .w { color: var(--ink-3); }
.grow { padding: 6px 0; border-bottom: 1px solid var(--line); }
.grow:last-child { border-bottom: 0; }
.grow b { display: block; font-size: 14px; }
.grow b i { font-style: normal; color: var(--jyut); font-size: 12.5px; margin-left: 6px; }
.grow p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); font-weight: 600; line-height: 1.5; }
.quiz { display: flex; flex-direction: column; gap: 14px; }
.quiz h3 { margin: 0; font-size: 20px; font-weight: 800; }
.qq { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.qq .han { font-family: var(--han); font-size: 20px; }
.qq .jy { color: var(--jyut); font-weight: 800; font-size: 13px; }
.qq .en { color: var(--ink-2); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.qq .opts { display: flex; flex-direction: column; gap: 6px; }
.qq .opt { text-align: left; font: inherit; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.qq .opt .j { color: var(--jyut); font-weight: 800; font-size: 15px; margin-right: 10px; }
.qq .opt .h { font-family: var(--han); font-size: 15px; color: var(--ink-2); margin-right: 8px; }
.qq .opt .e { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.qq .opt.right { border-color: var(--ok); background: var(--mint); }
.qq .opt.wrong { border-color: var(--accent); background: var(--peach); }
.quiz .result { font-weight: 800; font-size: 16px; }

.home-cards.root { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .home-cards.root { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-cards.root { grid-template-columns: 1fr; } }

/* ---------- sign in ---------- */
html[data-gate] body { visibility: hidden; }
.user-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.user-pill .who { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(420px, 100%); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-logo { font-size: 44px; line-height: 1; }
.auth-head h1 { margin: 8px 0 4px; font-size: 30px; }
.auth-head p { margin: 0; color: var(--ink-2); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.auth-form input { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.auth-form input:focus { outline: none; border-color: var(--accent-2); }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.auth-actions a { font-size: 13px; }
.auth-msg { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--mint); font-size: 14px; }
.auth-msg.bad { background: var(--peach); }

/* ---------- experience pill in the header ---------- */
.status { padding: 7px 10px; }
.status .gear { margin-left: 0; }
.head-right { flex-direction: column; align-items: flex-end; gap: 8px; }
.head-row { display: flex; align-items: center; gap: 8px; }
.xp-pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 5px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.xp-lv {
  display: flex; align-items: baseline; gap: 3px; padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  font-weight: 800; line-height: 1; white-space: nowrap;
}
.xp-lv small { font-size: 9px; letter-spacing: .08em; opacity: .9; }
.xp-lv b { font-size: 13px; }
.xp-track { width: 120px; height: 8px; border-radius: 999px; background: var(--surface-2); position: relative; overflow: hidden; }
.xp-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.xp-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; white-space: nowrap; }
.xp-text b { font-size: 12px; color: var(--ink); }
.xp-text span { font-size: 10px; color: var(--ink-3); font-weight: 600; }
.xp-pop { position: absolute; right: 10px; top: -10px; pointer-events: none; }
.xp-float { position: absolute; right: 0; font-weight: 800; font-size: 18px; color: var(--accent); text-shadow: 0 1px 0 #fff; animation: floatUp 1.6s ease-out forwards; }
@keyframes floatUp { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 20% { transform: translateY(4px) scale(1.1); opacity: 1; } 100% { transform: translateY(-28px) scale(1); opacity: 0; } }
.xp-pill.gain .xp-track i { animation: glow .9s ease-out; }
@keyframes glow { 0% { box-shadow: 0 0 0 rgba(255, 179, 71, 0); } 40% { box-shadow: 0 0 14px rgba(255, 179, 71, .9); } 100% { box-shadow: 0 0 0 rgba(255, 179, 71, 0); } }
.xp-pill.levelup .xp-lv { animation: pop 1s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 30% { transform: scale(1.5) rotate(-6deg); } 60% { transform: scale(1.2) rotate(4deg); } 100% { transform: scale(1); } }

/* join words inside a breakdown strip */
.words .w.sel { background: rgba(255, 179, 71, .35); border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }
.words.joining .w { cursor: cell; }
.words.joining .w em { pointer-events: none; }
.words .joinchip { align-self: center; }
.words .joinbar { flex-basis: 100%; }

/* quiz: pick, submit, next */
.quiz .qbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qq .han.say, .qq .en.say { cursor: pointer; }
.qq .opt { padding-right: 40px; }
.qq .opt.picked { border-color: var(--accent); background: var(--lemon); box-shadow: 0 0 0 3px rgba(255, 179, 71, .35); }
.qq .opt.picked::after { content: "✓"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--accent); }
.qq .qhint { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.qq .opt .r { display: block; font-size: 12px; color: var(--jyut); font-weight: 700; margin-top: 2px; }
.qq .why { margin-top: 10px; font-size: 13px; color: var(--ink-2); background: var(--surface); border-radius: 10px; padding: 8px 10px; }
.qq .qact { display: flex; gap: 8px; margin-top: 10px; }
.quiz .again { align-self: flex-start; }

/* profile: points card and the lessons row of the ladder */
.xp-card { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; align-items: center; background: linear-gradient(135deg, #2b2438, #3a2f52); color: #fff; border-radius: 18px; padding: 16px 18px; margin: 0 0 16px; }
.xp-card .xp-badge { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px rgba(255, 107, 107, .45); line-height: 1; }
.xp-card .xp-badge small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.xp-card .xp-badge b { font-size: 30px; font-weight: 800; }
.xp-card .xp-meta { display: grid; gap: 8px; }
.xp-card .xp-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.xp-card .xp-line b { font-size: 20px; }
.xp-card .xp-line.small { font-size: 12px; opacity: .85; flex-wrap: wrap; justify-content: flex-start; gap: 14px; }
.xp-card .xp-line.small b { font-size: 12px; }
.xp-card .xp-track { height: 12px; }
.xp-card .xp-log { grid-column: 1 / -1; }
.xp-card .xp-log h4 { margin: 4px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.xp-card .xp-log ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }
.xp-card .xp-log li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.xp-card .xp-log li .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-card .xp-log li .d { opacity: .6; font-size: 11px; }
.xp-card .xp-log li b { color: #ffe66d; }
.xp-card .xp-log li.muted { opacity: .7; }
.ladder .dim.lessons { font-weight: 800; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--line); }
.ctier { margin: 14px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ctier:first-child { margin-top: 0; }

/* ---------- rewrite a line in your own words ---------- */
.bubble .who .edit, .sent .edit { width: 26px; height: 26px; padding: 0; font-size: 13px; opacity: .45; }
.bubble:hover .who .edit, .sent:hover .edit, .bubble.edited .who .edit, .sent.edited .edit { opacity: 1; }
.sent { position: relative; }
.sent .edit { position: absolute; right: 8px; top: 8px; }
.bubble.edited, .sent.edited { box-shadow: inset 3px 0 0 var(--accent-2); }
.edit-box { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--surface); border: 2px solid var(--accent-2); display: grid; gap: 8px; cursor: default; text-align: left; }
.edit-box label { display: grid; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.edit-box input { font: inherit; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); filter: none !important; }
.edit-box .e-han { font-family: var(--han); font-size: 17px; }
.edit-box .e-jyut { color: var(--jyut); font-weight: 700; }
.edit-box input:focus { outline: none; border-color: var(--accent-2); }
.edit-box .e-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.edit-box .e-hint { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.bubble.veiled .edit-box { filter: none; }
.quiz .qsub { margin: -4px 0 0; font-size: 13px; }

/* ---------- points celebration ---------- */
.xp-toast {
  position: fixed; top: 14px; left: 50%; transform: translate(-50%, -140%); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #ff6b6b, #ffb347 55%, #ffe66d); color: #2b2438;
  font-weight: 800; box-shadow: 0 10px 30px rgba(255, 107, 107, .45), 0 0 0 4px rgba(255, 255, 255, .6);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.3), opacity .3s; opacity: 0; pointer-events: none;
}
.xp-toast.show { transform: translate(-50%, 0); opacity: 1; }
.xp-toast .coin { font-size: 18px; color: #fff; text-shadow: 0 0 10px rgba(255, 230, 109, 1); animation: spin 1.2s linear infinite; }
.xp-toast b { font-size: 18px; }
.xp-toast .what { font-weight: 700; font-size: 13px; opacity: .85; }
.xp-toast .lvl { background: #2b2438; color: #ffe66d; padding: 3px 10px; border-radius: 999px; font-size: 13px; }
.xp-toast.levelup { background: linear-gradient(135deg, #7c5cff, #ff6b6b 50%, #ffe66d); color: #fff; }
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.xp-coin { position: fixed; z-index: 61; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff7c2, #ffb347 60%, #ff6b6b); box-shadow: 0 0 10px rgba(255, 179, 71, .9); }
.congrats { position: relative; text-align: center; padding: 18px 12px 8px; overflow: hidden; }
.congrats .big-emoji { font-size: 64px; line-height: 1; animation: pop 1s ease-out; }
.congrats h3 { margin: 10px 0 4px; font-size: 22px; }
.congrats .score { margin: 0; font-weight: 800; color: var(--jyut); }
.congrats .earn { margin: 6px 0 14px; color: var(--ink-2); font-weight: 600; font-size: 13px; }
.congrats .qbar { justify-content: center; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; left: calc(var(--i) * 5.6%); width: 8px; height: 14px; border-radius: 2px;
  background: hsl(calc(var(--i) * 40deg), 90%, 60%); animation: fall 2.6s ease-in infinite; animation-delay: calc(var(--i) * .13s); opacity: .9; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(260px) rotate(540deg); opacity: 0; } }

/* ---------- Wincy Tutor ---------- */
.sheet.tutor { padding: 16px; }
.tutor-box { width: min(1060px, 100%); padding: 14px 20px; height: calc(100vh - 32px); max-height: 900px; display: flex; flex-direction: column; overflow: hidden; }
.tutor-box > .convo-head { flex: none; margin-bottom: 8px; }
.tutor-box > .keys { flex: none; margin: 8px 0 0; }
.tutor-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.tutor-journey { flex: 1; min-height: 0; overflow: auto; }
.tutor-side { display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; padding-right: 4px; }
.tutor-foot { flex: none; }
.tutor-side h4 { margin: 6px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tutor .convo-title .stage { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--lemon), var(--peach)); }
.tutor .convo-title .stage .sprite { zoom: 1.8; }
.tutor-state { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; }
.tutor-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.tutor-state[data-state="listening"] i { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.tutor-state[data-state="thinking"] i { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
.tutor-state[data-state="speaking"] i { background: var(--ok); }
.tutor-state[data-state="error"] i { background: var(--accent); }
.tutor-targets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tutor-targets li { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.tutor-targets li.hit { background: var(--mint); }
.tutor-targets li.hit::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.tutor-targets li .han { font-family: var(--han); font-size: 16px; }
.tutor-targets li .jy { display: block; color: var(--jyut); font-weight: 800; font-size: 12px; }
.tutor-targets li .en { display: block; color: var(--ink-2); font-size: 12px; }
.tutor-chat { min-height: 0; overflow: auto; padding-right: 6px; }
.tutor-chat .bubble { max-width: 88%; }
.tutor-chat .bubble .line + .line { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.tutor-chat .bubble .line.en-line .han { font-family: var(--ui); font-size: 15px; line-height: 1.45; color: var(--ink); }
.tutor-chat .bubble .line.en-line + .line.en-line { margin-top: 4px; padding-top: 0; border-top: 0; }
.tutor-chat .bubble.me .lang { font-size: 11px; font-weight: 800; color: var(--ink-3); margin-left: 6px; }
.tutor-chat .bubble.assess { align-self: flex-end; background: var(--lemon); }
.tutor-chat .assess .chip { display: inline-block; padding: 2px 7px; border-radius: 8px; margin: 2px; font-family: var(--han); font-size: 18px; background: var(--mint); }
.tutor-chat .assess .chip small { display: block; font-family: var(--ui); font-size: 10px; color: var(--ink-2); }
.tutor-chat .assess .chip.bad { background: rgba(255, 107, 107, .25); }
.tutor-chat .bubble.summary { align-self: center; max-width: 100%; background: var(--lilac); }
.tutor-chat .bubble.summary h4 { margin: 0 0 6px; }
.tutor-chat .bubble.event { align-self: center; background: transparent; border: 0; box-shadow: none; color: var(--ink-3); font-size: 12px; font-weight: 700; padding: 2px 8px; }
.tutor-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.tutor-foot .mic { min-width: 180px; user-select: none; touch-action: none; }
.tutor-foot .mic.on { background: linear-gradient(135deg, var(--accent), #ff9a62); animation: pulse 1.1s ease-in-out infinite; }
.tutor-foot .mic:disabled { opacity: .5; }
.tutor-heard { flex: 1; color: var(--ink-2); font-weight: 600; font-size: 13.5px; min-height: 1.2em; }
.tutor-foot #tutorText { flex-basis: 100%; font: inherit; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); }
@media (max-width: 760px) { .tutor-body { grid-template-columns: 1fr; } .tutor-side { flex-direction: row; flex-wrap: wrap; } }
.tutor-chat.hide-en .bubble .en, .tutor-chat.hide-en .line .en { display: none; }
.tutor-chat .line .en.dict { color: var(--ink-3); font-style: italic; }
.tutor-chat .bubble .line.en-line { padding: 4px 0; }
.tutor-learner { margin: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.tutor-chat .summary .notes { margin-top: 8px; font-size: 13px; }
.tutor-chat .summary .notes b { color: var(--accent); }
#tutorEnShow { color: var(--ink-2); }
#tutorEnShow.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tutor-dials { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.tutor-dials label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.tutor-dials select { max-width: 150px; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.tutor-tabs { display: flex; gap: 6px; margin: 2px 0 10px; }
.tutor-tabs .tab { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 14px; font: inherit; font-weight: 800; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.tutor-tabs .tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tutor-why { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--ink-2); font-weight: 600; display: flex; flex-direction: column; gap: 3px; }
.tutor-why li::before { content: "· "; color: var(--accent-2); }
.tutor-journey { min-height: 420px; }
.tutor-journey .jbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tutor-journey .jbar p { margin: 0; flex: 1; font-weight: 700; }
.tutor-journey .jbar select { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); max-width: 260px; }
.tutor-journey .jcols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tutor-journey h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.junits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow: auto; }
.junit { border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; background: var(--surface); }
.junit.current { border-color: var(--accent-2); background: var(--lemon); }
.junit.cleared { opacity: .7; }
.junit.skipped { opacity: .5; }
.junit .jhead { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.junit .mark { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ink-2); flex: none; }
.junit.cleared .mark { background: var(--mint); color: var(--ok); }
.junit .title { flex: 1; }
.junit .tier, .junit .count { font-size: 11px; color: var(--ink-3); font-weight: 700; }
.junit .phr { font-family: var(--han); font-size: 13px; color: var(--ink-2); margin: 4px 0 6px; }
.junit .acts { display: none; gap: 4px; flex-wrap: wrap; }
.junit:hover .acts, .junit:focus-within .acts { display: flex; }
.junit .acts .btn { padding: 2px 8px; font-size: 11px; }
.jlog { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow: auto; }
.jsession { border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; background: var(--surface); font-size: 13px; }
.jsession summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jsession .u { color: var(--ink-2); }
.jsession .chip { display: inline-block; font-family: var(--han); font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); margin: 1px 2px; }
.jsession .chip.ok { background: var(--mint); }
.jsession .chip.new { background: var(--sky); }
.jsession .note { margin: 6px 0; color: var(--ink-2); }
.jsession .tx { white-space: pre-wrap; font-family: var(--han); font-size: 12px; color: var(--ink-2); max-height: 220px; overflow: auto; background: var(--surface-2); padding: 8px; border-radius: 8px; }
@media (max-width: 760px) { .tutor-journey .jcols { grid-template-columns: 1fr; } }
.tutor-foot .next { background: var(--ink); border-color: var(--ink); }
.tutor-foot .mic.on { background: var(--ok); border-color: var(--ok); animation: none; }
.tutor-chat .bubble.event.error { color: var(--accent); font-size: 14px; background: var(--peach); border-radius: 12px; padding: 10px 14px; margin-top: 12px; }
.tutor-hint { margin: 0; font-size: 12.5px; color: var(--accent); font-weight: 700; }
.tutor-hint:empty { display: none; }
.tutor-tabs { align-items: center; }
.tutor-progress { flex: 1; display: flex; align-items: center; gap: 10px; margin-left: 12px; min-width: 0; }
.tutor-progress .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tutor-progress .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s ease; }
.tutor-progress .label { font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.tutor-progress.paused .bar i { background: var(--ink-3); }
@media (max-width: 760px) { .tutor-progress .label { display: none; } }
.tutor-chat .bubble.startcard, .tutor-chat .bubble.endcard { max-width: 640px; width: 100%; margin: 24px auto 0; padding: 20px 22px; text-align: left; }
.tutor-chat .startcard h3, .tutor-chat .endcard h3 { margin: 0 0 4px; font-size: 20px; }
.tutor-chat .startcard .sub { margin: 0 0 12px; }
.tutor-chat .startcard .phr .line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--line); }
.tutor-chat .startcard .phr .han { font-family: var(--han); font-size: 20px; }
.tutor-chat .startcard .phr .jyut { color: var(--jyut); font-weight: 700; }
.tutor-chat .startcard .phr .en { color: var(--ink-2); font-size: 13px; }
.tutor-chat .startcard .how { margin: 12px 0 0; }
.tutor-chat .endcard .endhead { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.tutor-chat .endcard .pts { font-size: 34px; font-weight: 900; color: var(--accent); margin: 4px 0; }
.tutor-chat .endcard .next { margin: 4px 0 12px; font-weight: 700; color: var(--ink-2); }
.tutor-chat .endcard .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tutor-chat .endcard .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tutor-chat .endcard .chip { font-family: var(--han); font-size: 14px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); }
.tutor-chat .endcard .chip.ok { background: var(--mint); }
.tutor-chat .endcard .chip.new { background: var(--sky); }