.tokens-controls {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg); padding: 20px 0 8px; margin-top: -20px;
}
.tokens-controls:has(.tokens-filters-panel[hidden]) {
  position: sticky; top: calc(env(safe-area-inset-top) + var(--head-h)); z-index: 5;
}
@media (min-width: 1440px) { .tokens-controls:has(.tokens-filters-panel[hidden]) { top: 0; } }
.tokens-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.tokens-controls > .tokens-filters { background: var(--well); border-radius: 14px; padding: 14px; }
.tokens-filters .field { flex: 0 0 auto; }
.tokens-filters select { width: auto; }
.tokens-filters input { width: 150px; }
.tokens-filters input, .tokens-filters select { padding: 7px 9px; height: 36px; min-height: 0; font-size: 0.85rem; border-radius: 10px; }
.tokens-filters .field.active label { color: var(--accent); }
.tokens-filters .field.active input, .tokens-filters .field.active select { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--well-2)); }
.tokens-filters-panel { display: flex; flex-direction: column; gap: 14px; background: var(--well); border-radius: 14px; padding: 14px; }
.tokens-filters-panel[hidden] { display: none; }
.tokens-controls .tokens-filters-clear, .tokens-controls .tokens-filters-toggle { min-height: 0; min-width: 0; padding: 7px 12px; font-size: 0.85rem; line-height: 1.2; border-radius: 10px; }
.tokens-controls .tokens-filters-toggle.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--well-2)); }
.tokens-filters .field-sort { margin-left: auto; }
.tokens-table-block { margin-top: 28px; }
.token-table tbody tr { cursor: pointer; --token-ground: transparent; background-color: var(--token-ground); }
.token-table tbody tr.selected { --token-ground: var(--token-open); }
.token-table tbody tr.expanded { --token-ground: var(--token-expanded); }
.token-table tbody tr:hover { background-color: color-mix(in srgb, #000 var(--token-hover), var(--token-ground)); }
.token-table .hanzi { width: 20%; font-weight: 600; white-space: nowrap; font-size: 1.15rem; }
.token-table .pinyin { width: 25%; color: var(--pinyin-blue); font-family: var(--mono); font-weight: 400; font-size: 0.7rem; white-space: nowrap; max-width: 145px; overflow: hidden; text-overflow: ellipsis; }
.token-table .lexicon-cell, .token-table .num { width: 1px; white-space: nowrap; }
.token-table .lexicon-toggle-state { display: none; }
.token-table .gloss-cell { width: 55%; max-width: min(560px, 55vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.token-table .gloss { color: var(--gloss-purple); }
.token-table tbody tr:hover .gloss-unjustified .gloss,
.token-table tbody tr.selected .gloss-unjustified .gloss { --gloss-ink: 34%; }
.token-table .gloss-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.token-table .gloss-line > .gloss, .token-table .gloss-line > .gloss-was {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.token-table .gloss-line > .gloss-arrow + .gloss { flex-shrink: 0.25; }
.token-table .gloss-line > .gloss-arrow, .token-table .gloss-line > .gloss-mark { flex: 0 0 auto; }
.token-table .gloss-was, .token-table .gloss-arrow { font-size: inherit; line-height: inherit; }
.token-table .gloss-line > .gloss-mark { align-self: center; }