/* Panel page layout. Sizes are the reference's computed values; colours
   come from ../../theme.css tokens. */

:root {
  --drawer-w: 59px;
  --appbar-h: 42px;
  /* The phone's notch and home bar (the reference's --safe-area-*; viewport-fit=cover in index.html). */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-bottom-max: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
  /* The bottom bar's height on a small screen, none otherwise (the reference's MOBILE_NAV_HEIGHT: 64 + safe area). */
  --mobile-nav-h: 0px;
  /* A page that fills the screen: what the app bar and the bottom bar leave (the reference's pageHeight()). */
  --page-h: calc(100dvh - var(--appbar-h) - var(--mobile-nav-h));
}

body.drawer-expanded {
  --drawer-w: 200px;
}

/* A small screen: no drawer, the bar at the bottom instead (bottom-nav.js; the reference's getMainNavState MOBILE). */
body.mobile-nav {
  --drawer-w: 0px;
  --mobile-nav-h: calc(64px + var(--safe-area-bottom-max));
  /* computed again here: a custom property takes the values its own element sees (:root's has no bar) */
  --page-h: calc(100dvh - var(--appbar-h) - var(--mobile-nav-h));
}

body.mobile-nav .drawer {
  display: none;
}

body.mobile-nav .main {
  padding-bottom: var(--mobile-nav-h);
}

/* The website's dictionary drawer (dictionary-drawer.js; the reference's Grt, ix:L162742–162766):
   beside the page on a big screen, which makes room for it (--dict-inset, set by the drawer);
   floating up from the bottom over a small screen, above its phone bar. Under the app bar and the
   phone bar, as the reference's drawer (z-index 1000) is under its app bar and bottom navigation. */
.dict-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}

.dict-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--dict-w);
  max-width: 100%;
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.dict-drawer[hidden],
.dict-drawer-backdrop[hidden] {
  display: none;
}

.dict-drawer-spacer {
  flex: none;
  height: var(--appbar-h);
}

.dict-drawer > [data-wovia] {
  display: block;
  flex: 1;
  min-height: 0;
}

.dict-drawer.is-floating {
  top: auto;
  left: 0;
  width: 100%;
  height: var(--dict-sheet-h);
  padding-bottom: var(--safe-area-bottom);
  border-left: 0;
  border-radius: var(--dict-sheet-r) var(--dict-sheet-r) 0 0;
  overflow: hidden;
}

body.mobile-nav .dict-drawer.is-floating {
  padding-bottom: calc(var(--dict-nav-h) + var(--safe-area-bottom));
}

.dict-drawer.is-floating .dict-drawer-spacer {
  display: none;
}

/* The bottom bar (the reference's `_rt` and `OK`, ix:L161467–161724). */
.bottom-nav {
  --box: 46px;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  padding: 8px 6px calc(10px + var(--safe-area-bottom-max));
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

body.mobile-nav .bottom-nav {
  display: flex;
}

@media (max-height: 500px) {
  .bottom-nav {
    --box: 40px;
  }
}

.bottom-nav-item {
  --on: var(--accent);
  display: flex;
  flex-shrink: 0;
  width: calc(var(--box) + 8px);
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--text-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item.is-end {
  margin-left: auto;
}

/* The dictionary's bar while its drawer is open on a phone (bottom-nav.js setStageBar; the reference's
   Srt, wrt and o2 in their pill, ix:L161413–161466, L161677–161704): the controls take the room, then
   the assistant's switch and the dictionary entry. */
.bottom-nav-dict-controls,
.bottom-nav-dict-pill,
.bottom-nav.is-dict-stages > .bottom-nav-item {
  display: none;
}

.bottom-nav.is-dict-stages .bottom-nav-dict-controls {
  display: flex;
  flex-grow: 1;
  align-items: center;
  min-width: 0;
  padding: 0 0 0 4px;
}

.bottom-nav.is-dict-stages .bottom-nav-dict-pill {
  display: flex;
  align-items: center;
  padding: 0 2px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.bottom-nav-dict-pill .bottom-nav-item.is-end {
  margin-left: 0;
}

.bottom-nav-assistant {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--box);
  height: var(--box);
  margin-right: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-strong);
  cursor: pointer;
}

.bottom-nav-assistant .icon {
  opacity: 0.7;
  transition: all 0.2s ease;
}

.bottom-nav-assistant.is-on .icon {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--accent)) brightness(1.15);
}

.bottom-nav-assistant-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  display: none;
  width: 5px;
  height: 5px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--on-accent);
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent), 0 0 4px color-mix(in srgb, var(--on-accent) 90%, transparent);
}

.bottom-nav-assistant.is-on .bottom-nav-assistant-dot {
  display: block;
}

.bottom-nav-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--box);
  height: var(--box);
  transition: transform 0.15s ease;
}

.bottom-nav-item:active .bottom-nav-box {
  transform: scale(0.95);
}

.bottom-nav-glyph {
  position: relative;
  z-index: 1;
  display: flex;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  opacity: 0.7;
  transition: all 0.2s ease;
}

.bottom-nav-item.is-active .bottom-nav-glyph {
  color: var(--on);
  opacity: 1;
  filter: none;
}

.bottom-nav-meter {
  display: none;
}

.bottom-nav-item.is-active .bottom-nav-meter {
  position: absolute;
  bottom: -5px;
  left: 50%;
  display: block;
  overflow: hidden;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  transform: translateX(-50%);
}

.bottom-nav-meter-fill {
  position: absolute;
  inset: 0;
  background: var(--on);
  box-shadow: 0 0 12px var(--on), 0 0 6px var(--on), inset 0 0 4px color-mix(in srgb, var(--on-accent) 70%, transparent);
  filter: brightness(1.3) saturate(1.4);
  animation: meter-pulse 2s ease-in-out infinite;
}

@keyframes meter-pulse {
  50% {
    opacity: 0.7;
  }
}

/* PhrasePump's due count (the reference's PP_COUNT) and the study language on Cài đặt. */
.bottom-nav-count {
  position: absolute;
  bottom: 3px;
  left: 26px;
  z-index: 2;
  min-width: 16px;
  padding: 1px 4px;
  border: 1px solid var(--on);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 8px color-mix(in srgb, var(--on) 27%, transparent);
  color: var(--on);
  font: 700 9px/1em "Courier New", monospace;
  text-align: center;
}

.bottom-nav-lang {
  position: absolute;
  bottom: 0;
  left: 20px;
  z-index: 2;
  transform: scale(0.7);
}

/* The study language on Cài đặt: the reference's small square (p8's default
   variant, full, ix:L159493–159512), not the drawer's 42 px box (its "nav"
   variant), shrunk to 0.7 by .bottom-nav-lang (ix:L161596–161610). */
.bottom-nav-lang-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 2px;
  overflow: hidden;
  border: 2px solid var(--surface);
  border-radius: 6px;
  background: var(--surface);
  font-size: 18px;
  line-height: 1;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 1300;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--surface);
}

.skip-link:focus {
  top: 8px;
}

/* Drawer ----------------------------------------------------------------- */

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: var(--drawer-w);
  overflow: hidden auto;
  border-right: 1px solid var(--line);
  background: var(--surface);
  white-space: nowrap;
  scrollbar-width: none;
  transition: width 0.225s cubic-bezier(0.4, 0, 0.6, 1);
}

/* The logo and the mark sit in the head's middle (owner, 2026-10-13): the
   collapsed drawer's middle is its icon column's. Taller than the
   reference's 56px so the logo reads (owner, 2026-10-13); the logo's height
   follows the head's. */
.drawer-head {
  --drawer-head-h: 80px;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: var(--drawer-head-h);
}

/* The drawer's head shows Wovia's full logo expanded and the macaw's head
   collapsed (owner, 2026-10-13), in the reference's place of its mark, name
   and toggle, at their own colours: not dimmed as the reference dims its
   white name. */
.drawer-brand {
  display: flex;
  align-items: center;
  padding: 0 4px;
  text-decoration: none;
}

/* As tall as the head allows with a few pixels to spare; its width follows
   the logo's shape, so a new logo fits without a change here. */
.brand-logo {
  display: block;
  width: auto;
  height: calc(var(--drawer-head-h) - 10px);
}

/* Centred on the nav rows' icons (the head's middle in the collapsed drawer). */
.brand-mark {
  display: none;
  width: 44px;
  height: 44px;
}

body:not(.drawer-expanded) .brand-logo {
  display: none;
}

body:not(.drawer-expanded) .brand-mark {
  display: block;
}

/* The drawer's end: the toggle, then the build's line. Kept in sight at the
   drawer's bottom when the rows scroll, so the toggle is always found; it
   sits on the nav rows' icon column, the same place expanded and collapsed. */
.drawer-end {
  position: sticky;
  bottom: 0;
  flex: none;
  margin-top: auto;
  background: var(--surface);
}

.drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 4px 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--chevron);
  cursor: pointer;
}

.drawer-toggle:hover {
  background: var(--hover);
}

.drawer-body {
  display: flex;
  flex-direction: column;
  width: 199px;
  padding-bottom: 8px;
}

.drawer-group {
  margin-bottom: 3px;
  padding: 3px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.drawer-divider {
  height: 0;
  margin: 3px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.drawer-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 199px;
  height: 52px;
  padding: 5px 8px;
  border: 0;
  background: none;
  color: var(--text-strong);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.drawer-row:hover {
  background: var(--hover);
}

.drawer-lang {
  height: 46px;
  padding: 2px 8px;
}

.lang-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 12px;
  font-size: 24px;
  line-height: 1;
}

.drawer-lang-name {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-lang-caret {
  margin-left: 4px;
}

.drawer-lang-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

.drawer-lang:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* The drawer's last line, the build that runs (drawer-version.js). The
   reference's drawer shows no version, so it is small and muted: its
   typography's caption (MUI caption: 12px, 1.66, 0.4px). Collapsed, the
   number alone. */
.drawer-foot {
  width: 199px;
  padding: 8px 12px 10px;
}

.drawer-version {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.66;
  letter-spacing: 0.4px;
}

.drawer-version.has-update .drawer-version-number,
.drawer-update-title {
  color: var(--accent-soft);
}

.drawer-update-title {
  white-space: normal;
  cursor: pointer;
}

.drawer-update-help {
  margin: 4px 0 0;
  color: var(--text-label);
  white-space: normal;
  overflow-wrap: anywhere;
}

body:not(.drawer-expanded) .drawer-foot {
  width: var(--drawer-w);
  padding: 8px 0 10px;
  text-align: center;
}

body:not(.drawer-expanded) :is(.drawer-version-name, .drawer-update) {
  display: none;
}

.nav-icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 11px;
  border-radius: 8px;
}

.nav-label {
  flex: 1;
  margin: 4px 0;
  overflow: hidden;
  color: var(--text-nav);
  text-overflow: ellipsis;
}

.nav-badge {
  position: absolute;
  top: 16px;
  right: 7px;
  height: 19.5px;
  padding: 0 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  color: var(--text-strong);
  font-size: 13px;
  line-height: 19.5px;
}

/* Due count over the drawer's PhrasePump icon (phrasepump.md #114), set through ctx.setNavBadge */
.nav-count {
  position: absolute;
  right: -2px;
  bottom: 3px;
  min-width: 16px;
  padding: 1px 4px;
  border: 1px solid var(--nav-count);
  border-radius: 3px;
  background: var(--surface);
  color: var(--nav-count);
  font: 700 9px/1 "Courier New", monospace;
  text-align: center;
}

/* Signed in: a dot on the account slot's icon, as the reference's Badge (variant dot, overlap circular; ix:L160902–160906) */
.nav-account-dot {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.85 0.25 168);
  box-shadow: 0 0 0 2px var(--surface);
}

.nav-account-dot[hidden] {
  display: none;
}

.nav-external {
  margin: 2px 5px 0 0;
  opacity: 0.25;
}

body:not(.drawer-expanded) :is(.nav-badge, .nav-external, .drawer-lang-caret) {
  visibility: hidden;
}

.nav-lang-badge {
  position: absolute;
  top: 23px;
  left: 22px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  overflow: hidden;
  border: 2px solid var(--surface);
  border-radius: 4px;
  background: var(--surface);
  font-size: 10px;
  line-height: 1;
}

/* Selected row: tinted background and a glowing bar on the left edge; the
   other rows' icons dim. Colours sampled from the
   reference's rendered rail (its computed values catch a pulse mid-frame). */
.drawer-body:has([aria-current="page"]) .nav-row:not([aria-current="page"]) .nav-icon {
  color: var(--text-muted);
}

.nav-row[aria-current="page"] {
  background: var(--selected);
}

.nav-row[aria-current="page"] .nav-label {
  color: var(--selected-text);
}

.nav-row[aria-current="page"] .nav-icon {
  background: none;
  color: var(--accent);
}

.nav-indicator {
  display: none;
}

.nav-row[aria-current="page"] .nav-indicator {
  display: block;
}

.nav-indicator {
  position: absolute;
  top: 7px;
  left: -5px;
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.nav-indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--accent-soft);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 0 4px color-mix(in srgb, var(--on-accent) 70%, transparent);
}

/* App bar ---------------------------------------------------------------- */

.appbar {
  position: fixed;
  top: 0;
  right: var(--dict-inset, 0px);
  left: var(--drawer-w);
  z-index: 1100;
  display: flex;
  align-items: center;
  height: var(--appbar-h);
  padding: 0 4px;
  background: var(--surface);
  transition: left 0.195s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Nội dung's bar over a tab's list has a line under it (content-catalogue.md #16; md:L877–880). */
.appbar:has(.appbar-tabs[data-route="noi-dung"]:not([data-param])) {
  box-shadow: inset 0 -1px 0 var(--bg);
}

.appbar-tabs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.appbar-tabs::-webkit-scrollbar {
  display: none;
}

/* Nội dung's tab bar sits 8px further in than the other sections'. */
.appbar-tabs[data-route="noi-dung"] {
  margin-left: 8px;
}

.appbar-tabs[hidden],
.appbar-doc[hidden] {
  display: none;
}

/* A document's bar in place of the tabs (app.js setDocBar): the page's own bar, without its own box. */
.appbar-doc {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 100%;
}

.appbar-doc > .rd-bar {
  flex: 1;
  height: 100%;
  padding: 0 4px;
  border: 0;
  background: none;
}

.appbar-tools {
  display: flex;
  flex: none;
  align-items: center;
  margin-left: auto;
}

/* The interface language in the app bar of the home and help pages (ui-language.js; the reference's UiLangSelect:
   a globe, then a 150 px choice, UiLangSelect-CN0vOPsB.js). */
.ui-language-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 6px;
  color: var(--text-tool);
}

.ui-language-tool .select-wrap {
  width: 150px;
}

.ui-language-tool .select-field {
  height: 32px;
  padding-left: 10px;
  font-size: 14px;
}

/* The tabs (the reference's PageTabs, pt:L23–94; content-reading.md #6,
   content-catalogue.md #24): `--tab-color` is the tab's own colour (routes.js
   activeColor), for its icon while open and its badge. */
.page-tab {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 11px;
  border-radius: 50px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 22.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

/* A closed tab under the pointer: the reference's 5 % white behind, 80 % white text (pt:L58–64), drawn in the brand's
   blue in the panel's looks (theme.css --hover, --selected-text; owner, 2026-10-14). */
.page-tab:not([aria-current="page"]):hover {
  background: var(--hover);
  color: var(--selected-text);
}

.page-tab[aria-current="page"] {
  background: var(--tab-active);
  color: var(--selected-text);
}

.page-tab-icon {
  display: flex;
}

.page-tab[aria-current="page"] .page-tab-icon {
  color: var(--tab-color, currentColor);
}

.page-tab-spacer,
.page-tabs-open {
  display: none;
}

/* The badge in the tab's colour on a 15 % tint with a 40 % border (pt:L73–88). */
.tab-badge {
  margin-left: 2px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--tab-color, var(--badge-new)) 40%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--tab-color, var(--badge-new)) 15%, transparent);
  color: var(--tab-color, var(--badge-new));
  font-size: 11px;
  font-weight: 500;
  line-height: 16.5px;
  letter-spacing: 0.5px;
}

/* Small screens (content-catalogue.md #25, #16; pt:L95–164, mt:L424–430):
   round icon tabs, 40 px wide down to 32 px, with 8 px spacers that give way
   first; the open tab's icon in its colour on 10 % white; a closed tab's badge
   is a 10 px dot; the open tab's name after the icons unless the section hides
   it (routes.js smallTabLabel). Tabs without icons keep their labels. The
   dictionary and fullscreen buttons leave with the big screen (app.js drawTools). */
@media (max-width: 900px) {
  .appbar-tabs.has-icon-tabs {
    gap: 0;
    padding: 0 8px;
    overflow: hidden;
  }

  .has-icon-tabs .page-tab {
    flex: 0 1 40px;
    justify-content: center;
    min-width: 32px;
    height: 40px;
    padding: 0;
    color: color-mix(in srgb, var(--ink) 50%, transparent);
  }

  .has-icon-tabs .page-tab:not([aria-current="page"]):hover {
    background: transparent;
    color: color-mix(in srgb, var(--ink) 50%, transparent);
  }

  .has-icon-tabs .page-tab[aria-current="page"] {
    color: var(--tab-color, var(--text-strong));
  }

  .has-icon-tabs .page-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .has-icon-tabs .page-tab-spacer {
    display: block;
    flex: 0 99 8px;
  }

  .has-icon-tabs .tab-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--tab-color, var(--badge-new));
    font-size: 0;
    line-height: 0;
  }

  .has-icon-tabs .page-tab[aria-current="page"] .tab-badge {
    display: none;
  }

  .has-icon-tabs .page-tabs-open {
    display: block;
    margin: 0 4px 0 8px;
    color: color-mix(in srgb, var(--ink) 90%, transparent);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  /* Nội dung's bar is see-through on small screens (#16; mt:L424–430), over the list's own header. */
  .appbar:has(.appbar-tabs[data-route="noi-dung"]:not([data-param])) {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 80%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 60%, transparent 100%);
    box-shadow: none;
  }
}

/* Page ------------------------------------------------------------------- */

.main {
  min-height: 100vh;
  margin-right: var(--dict-inset, 0px);
  margin-left: var(--drawer-w);
  padding-top: var(--appbar-h);
  transition: margin-left 0.195s cubic-bezier(0.4, 0, 0.6, 1);
}

.main:focus,
.main h1:focus {
  outline: none;
}

.page {
  width: min(1304px, 100% - 48px);
  margin: 0 auto;
  padding: 10px 0 72px;
}

.page.narrow {
  width: min(1000px, 100% - 48px);
}

.page-deep {
  min-height: var(--page-h);
  background: var(--bg-deep);
}

/* Nội dung › Văn bản của bạn ---------------------------------------------- */

.reader-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reader-input {
  min-height: 220px;
}

/* A web page passed from "Read in Wovia". */
.passed-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
}

.passed-card.is-problem {
  border-left-color: var(--danger);
}

.passed-card p {
  margin: 0;
}

.passed-label {
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.passed-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  overflow-wrap: anywhere;
}

.passed-title a {
  color: inherit;
}

.reader-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 21px;
}

.reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 32px;
}

.reader-layout.no-card {
  grid-template-columns: minmax(0, 1fr);
}

.reader-text {
  color: var(--text-strong);
  font-size: 20px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.reader-text p {
  margin: 0 0 1em;
}

.word {
  margin: 0;
  padding: 0 1px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.word:hover {
  background: var(--hover);
}

.word.is-saved {
  box-shadow: inset 0 -2px 0 var(--saved);
}

.word.is-selected {
  background: var(--accent);
  color: var(--on-accent);
}

.word-card {
  position: sticky;
  top: calc(var(--appbar-h) + 16px);
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.card-empty {
  margin: 0;
  color: var(--text-muted);
}

.card-word {
  margin: 0;
  color: var(--text-strong);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  overflow-wrap: anywhere;
}

.card-label {
  margin: 14px 0 2px;
  color: var(--text-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.card-context,
.card-unavailable {
  margin: 0;
}

.card-unavailable {
  color: var(--text-muted);
  font-style: italic;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* Đã lưu ----------------------------------------------------------------- */

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0 16px;
}

.list-toolbar .select-wrap {
  width: 220px;
}

.search-field {
  flex: 1 1 240px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text-strong);
  font: 400 16px/23px var(--font);
}

.search-field::placeholder {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}

.list-count {
  color: var(--text-muted);
  font-size: 14px;
}

/* Từ đã lưu, Câu đã lưu: the reference website's list (saved-list-view.js;
   SavedItems-CxxQ0xlJ.js `hu`, `lu`, `ou`, `bu`, their inline styles copied). */

.saved-page {
  max-width: 1400px;
}

.saved-toolbar {
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 8px 0 4px;
  background: var(--bg);
}

.saved-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 36px;
  padding: 4px 8px 6px;
}

.saved-toolbar-spacer {
  flex-grow: 1;
}

/* Phát tất cả (saved-play-all.js; forum-requests.md F9.3, the port's own): while it plays, its controls and the item it reads */
.saved-play-all {
  display: inline-flex;
  max-width: 100%;
}

.saved-play-all-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 0 12px 0 4px;
  border: 1px solid var(--accent);
  border-radius: 18px;
}

.saved-play-all-count {
  margin: 0 8px 0 4px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.saved-play-all-text {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-play-all-text svg {
  margin-right: 6px;
  vertical-align: -3px;
}

.saved-source-select {
  width: 300px;
}

.saved-sort {
  display: inline-flex;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 4px;
}

.saved-sort-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  cursor: pointer;
}

.saved-sort-button + .saved-sort-button {
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.saved-sort-button.on {
  background: var(--selected);
  color: var(--selected-text);
}

.saved-sort-arrow {
  position: absolute;
  right: 1px;
  bottom: 0;
  line-height: 1;
  color: var(--wovia-blue-light);
}

.saved-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.saved-pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 14px;
}

.saved-pager-button {
  display: inline-flex;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.saved-pager-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.saved-pager-bottom {
  display: flex;
  justify-content: flex-end;
  padding: 12px 8px;
}

.saved-header-row {
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}

.saved-header-row .saved-cell {
  min-height: 36px;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}

.saved-header-row.is-selecting {
  background: var(--wovia-blue-deep);
}

.saved-header-row.is-selecting .saved-cell {
  background: var(--wovia-blue-deep);
}

.saved-header-row .selection-bar {
  flex-grow: 1;
  margin: 0;
  border: 0;
}

.saved-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.saved-row {
  display: flex;
  min-height: 32px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 13.3%, transparent);
}

.saved-row.first-in-group {
  border-top: 1px solid color-mix(in srgb, var(--ink) 13.3%, transparent);
}

.saved-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 6px 8px 6px 16px;
  overflow-wrap: anywhere;
}

.saved-check {
  flex: 0 0 60px;
  padding: 2px 8px;
  justify-content: center;
}

.saved-main {
  flex: 0 1 60%;
  gap: 4px;
  background: color-mix(in srgb, var(--ink) 3.1%, transparent);
}

.saved-main-text {
  flex-grow: 1;
  min-width: 0;
}

.saved-translation-cell {
  flex: 0 1 50%;
}

.saved-context-cell {
  flex: 0 1 80%;
}

.saved-stage-cell {
  flex: 0 0 150px;
  gap: 6px;
}

.saved-source-cell {
  flex: 0 0 100px;
  padding: 8px 16px;
}

/* The port's own actions: the meaning and note (F3), then removing the item. */
.saved-actions {
  display: flex;
  flex: 0 0 84px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.saved-actions .tool-button.danger:hover {
  color: var(--danger);
}

.saved-text {
  margin: 0;
  color: var(--text-strong);
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.saved-rows.phrases .saved-text {
  font-weight: 400;
}

.saved-context {
  margin: 0;
  overflow-wrap: anywhere;
}

.saved-compact-translation {
  display: none;
  padding-top: 4px;
  font-size: 15px;
}

/* The translation with the learner's note under it (forum-requests.md F3, the port's own). */
.saved-own-words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.saved-note {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* With no word saved yet: open something to watch, or import a list (F8.3). */
.saved-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* The dialog of a row's meaning and note (saved-item-edit.js). */
.saved-edit-field {
  margin: 0 0 14px;
}

.saved-edit-field .text-field {
  padding: 10px 14px;
}

/* The stage cell (`Vd`): the due mark, the stage, the half-life's bars, the tag. */
.saved-due {
  display: flex;
  flex: 0 0 18px;
  width: 18px;
  align-items: center;
}

.saved-due-normal {
  fill: #caa075;
}

.saved-due-critical {
  fill: #ef8640;
}

.saved-stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  opacity: 0.8;
  cursor: default;
}

.saved-halflife {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.saved-halflife-bar {
  width: 3px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}

.saved-halflife-bar:nth-child(1) { height: 5px; }
.saved-halflife-bar:nth-child(2) { height: 8px; }
.saved-halflife-bar:nth-child(3) { height: 11px; }
.saved-halflife-bar:nth-child(4) { height: 14px; }

.saved-halflife-bar.on {
  background: #9cffcd;
}

.saved-tag {
  font-weight: 700;
}

/* A list's dividers (`bu`): the day, the rank band with its colour, the due group. */
.saved-divider {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.saved-divider-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 13px;
  font-weight: 500;
}

.saved-rank-dot {
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  filter: saturate(1.5);
}

.saved-none {
  margin: 50px;
}

.saved-other-langs {
  padding: 16px 42px 16px 0;
  text-align: right;
}

.saved-other-langs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--ink) 33.3%, transparent);
  font-size: 15px;
  cursor: pointer;
}

/* ≤ 800 px (`compactView`): the context and the stage cell go, a phrase's translation moves under it. */
@media (max-width: 800px) {
  .saved-context-cell,
  .saved-stage-cell {
    display: none;
  }

  .saved-check {
    flex-basis: 45px;
    padding: 0;
  }

  .saved-main {
    flex-basis: 100%;
  }

  .saved-source-cell {
    flex-basis: 45px;
    padding: 2px;
  }

  .saved-rows.phrases .saved-translation-cell {
    display: none;
  }

  .saved-rows.phrases .saved-compact-translation {
    display: block;
  }
}

/* ≤ 600 px (`ultraCompactView`): the translation column goes too. */
@media (max-width: 600px) {
  .saved-translation-cell {
    display: none;
  }
}

/* The stage and tag pills (SavedItemsFilterControls; index-B6XZtG7p.css `.lr-sp-*`, copied). */
@keyframes lr-sp-shake { 25% { transform: translate(-3px); } 75% { transform: translate(3px); } }
.lr-sp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lr-sp-pill { --spc: var(--text-strong); position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1.5px solid var(--spc); color: var(--spc); background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; -webkit-user-select: none; user-select: none; transition: color .12s; }
.lr-sp-pill:before { content: ""; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; border-radius: 12px; background: var(--spc); opacity: 0; transition: opacity .12s; z-index: -1; pointer-events: none; }
.lr-sp-pill svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.lr-sp-pill .lr-sp-count { font-weight: 650; font-variant-numeric: tabular-nums; }
.lr-sp-pill.on { color: var(--on-word); }
.lr-sp-pill.on:before { opacity: 1; }
.lr-sp-pill.blocked { animation: lr-sp-shake .25s; }
.lr-sp-pill.stage-known { --spc: var(--lr-word-known); }
.lr-sp-pill.stage-learning { --spc: var(--lr-word-marked-learning); }
.lr-sp-pill.stage-skipped { --spc: var(--lr-word-dont-learn); }
.lr-sp-tagrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lr-sp-tagpill { --spc: var(--text-strong); display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--ink) 26.7%, transparent); color: var(--spc); background: color-mix(in srgb, var(--ink) 8%, var(--surface)); opacity: .55; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; transition: opacity .12s, border-color .12s; max-width: 130px; min-width: 34px; justify-content: center; }
.lr-sp-tagpill .lr-sp-tagcount { margin-left: 3px; font-weight: 650; font-variant-numeric: tabular-nums; }
.lr-sp-tagpill.on { opacity: 1; border-color: var(--spc); }
.lr-sp-tagpill.blocked { animation: lr-sp-shake .25s; }
/* Đã lưu › Từ vựng's stage pills in halves, marked and predicted, and their folded and stacked layouts
   (SavedItemsFilterControls `Fe`, `Re`; index-B6XZtG7p.css `.lr-sp-*`, copied). */
.lr-sp-row.nowrap { flex-wrap: nowrap; }
.lr-sp-spacer { flex-grow: 1; }
.lr-sp-grow { width: 100%; gap: 6px; }
.lr-sp-grow .lr-sp-spacer { flex-grow: 0; }
.lr-sp-grow .lr-sp-vpill { flex-grow: 1; min-width: 0; }
.lr-sp-grow .lr-sp-vpill .lr-sp-half { flex: 1 1 0; justify-content: center; padding: 0 6px; min-width: 0; height: 34px; }
.lr-sp-grow .lr-sp-vpill .lr-sp-half.m { border-radius: 17px 0 0 17px; }
.lr-sp-grow .lr-sp-vpill .lr-sp-half.m:before { border-radius: 14px 2px 2px 14px; }
.lr-sp-grow .lr-sp-vpill .lr-sp-half.p { border-radius: 0 17px 17px 0; }
.lr-sp-grow .lr-sp-vpill .lr-sp-half.p:before { border-radius: 2px 14px 14px 2px; }
.lr-sp-grow .lr-sp-expand { width: 34px; height: 34px; }
.lr-sp-stack { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; width: 100%; }
.lr-sp-stack-first { display: flex; align-items: center; gap: 8px; width: 100%; }
.lr-sp-stack > .lr-sp-vpill { width: calc(100% - 42px); }
.lr-sp-stack > div > .lr-sp-vpill { width: auto; flex-grow: 1; }
.lr-sp-stack .lr-sp-vpill { display: flex; }
.lr-sp-stack .lr-sp-vpill .lr-sp-half { flex: 1 1 0; justify-content: center; min-width: 0; height: 34px; }
.lr-sp-stack .lr-sp-vpill .lr-sp-half.m { border-radius: 17px 0 0 17px; }
.lr-sp-stack .lr-sp-vpill .lr-sp-half.m:before { border-radius: 14px 2px 2px 14px; }
.lr-sp-stack .lr-sp-vpill .lr-sp-half.p { border-radius: 0 17px 17px 0; }
.lr-sp-stack .lr-sp-vpill .lr-sp-half.p:before { border-radius: 2px 14px 14px 2px; }
.lr-sp-vpill { --spc: var(--text-strong); display: inline-flex; }
.lr-sp-vpill .lr-sp-half { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; background: transparent; color: var(--spc); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; transition: color .12s; }
.lr-sp-vpill .lr-sp-half:before { content: ""; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; background: var(--spc); opacity: 0; transition: opacity .12s; z-index: -1; pointer-events: none; }
.lr-sp-vpill .lr-sp-half svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.lr-sp-vpill .lr-sp-half .lr-sp-count { font-weight: 650; font-variant-numeric: tabular-nums; }
.lr-sp-vpill .lr-sp-half .lr-sp-plabel { font-size: 11.5px; opacity: .85; font-style: italic; }
.lr-sp-vpill .lr-sp-half.on { color: var(--on-word); }
.lr-sp-vpill .lr-sp-half.on:before { opacity: 1; }
.lr-sp-vpill .lr-sp-half.m { border: 1.5px solid var(--spc); border-radius: 15px 0 0 15px; }
.lr-sp-vpill .lr-sp-half.m:before { border-radius: 12px 2px 2px 12px; }
.lr-sp-vpill .lr-sp-half.p { border: 2px dotted color-mix(in srgb, var(--spc) 75%, transparent); border-radius: 0 15px 15px 0; margin-left: -2px; color: color-mix(in srgb, var(--spc) 78%, transparent); }
.lr-sp-vpill .lr-sp-half.p:before { border-radius: 2px 12px 12px 2px; background: color-mix(in srgb, var(--spc) 80%, transparent); }
.lr-sp-vpill .lr-sp-half.p.on { color: color-mix(in srgb, var(--on-word) 78%, transparent); }
.lr-sp-vpill.compact .lr-sp-half { padding: 0 9px; gap: 4px; }
.lr-sp-vpill.blocked { animation: lr-sp-shake .25s; }
.lr-sp-vpill.stage-known { --spc: var(--lr-word-known); }
.lr-sp-vpill.stage-learning { --spc: var(--lr-word-marked-learning); }
.lr-sp-vpill.stage-skipped { --spc: var(--lr-word-dont-learn); }
.lr-sp-disabled { opacity: .35; }
.lr-sp-disabled .lr-sp-vpill .lr-sp-half { cursor: pointer; }
.lr-sp-expand { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); background: transparent; color: color-mix(in srgb, var(--ink) 60%, transparent); cursor: pointer; transition: background .12s, color .12s; }
.lr-sp-expand:hover { background: var(--hover); color: var(--selected-text); }
.lr-sp-expand svg { width: 18px; height: 18px; fill: currentColor; transition: transform .15s; }
.lr-sp-expand.open svg { transform: rotate(180deg); }
.lr-sp-foot { font-size: 12px; color: color-mix(in srgb, var(--ink) 60%, transparent); padding: 2px 4px 0; }
.lr-sp-foot .lr-sp-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -2px; }
.lr-sp-foot .lr-sp-sw.solid { border: 1.5px solid var(--lr-word-marked-learning); background: color-mix(in srgb, var(--lr-word-marked-learning) 55%, transparent); }
.lr-sp-foot .lr-sp-sw.dotted { border: 2px dotted color-mix(in srgb, var(--lr-word-marked-learning) 75%, transparent); }

/* Several items at once: the checkbox in front of each item, and the bar
   with the count and the bulk actions while something is selected. */
.saved-select {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -6px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.selection-bar[hidden] {
  display: none;
}

.selection-bar .select-field {
  width: auto;
  min-width: 180px;
}

.selection-count {
  margin-right: auto;
  color: var(--text-strong);
  font-size: 14px;
}

/* Cài đặt ---------------------------------------------------------------- */

/* "Install the App", on the website (panel/app-install.js): the reference's inline styles, Settings-CbC_PlZB.js
   L997–1006 (the instructions' box), L1054–1131 (the column, the installed note, the blurb, the round button). */
.app-install-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.app-install-done {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 12px 18px;
  border: 1px solid rgba(76, 175, 80, 0.2);
  border-radius: 12px;
  background: rgba(76, 175, 80, 0.08);
  color: var(--success);
  font-size: 15px;
  font-weight: 500;
}

.app-install-blurb {
  max-width: 650px;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  font-size: 15px;
  line-height: 1.5;
}

.btn-primary.app-install-button {
  height: auto;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
}

.app-install-how {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  font-size: 14px;
}

.app-install-how .icon {
  flex: none;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.settings-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 616px));
  justify-content: space-between;
  column-gap: 72px;
}

.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* Spacing measured against the reference's settings page. */
.settings-columns .section-title:not(:first-child) {
  margin-top: 49px;
}

.settings-columns .section-title + .switch {
  margin-top: -3px;
}

.account-row .pill {
  gap: 8px;
  padding: 6px 14px;
  font-size: 16px;
  line-height: 24px;
}

/* "Xóa tài khoản của tôi": a text button, muted (the reference's rgba(255,255,255,0.5), 0.9rem, 6px 8px; L156436–156448). */
.account-delete {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.account-delete[hidden] {
  display: none;
}

.account-delete:hover {
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}

/* Its dialog's one-line password field. */
.account-delete-password {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.field {
  margin: 0 0 10px;
}

.field .text-field {
  min-height: 125px;
}

/* PhrasePump gate ------------------------------------------------------- */

/* Top-aligned in the reference, whose illustration makes the block tall. */
.gate.gate-phrasepump {
  align-items: flex-start;
  padding-top: 142px;
  background: var(--bg-deep);
}

.gate-phrasepump .btn-primary {
  height: 44px;
  padding: 0 22px;
  font-size: 17px;
}

.gate-phrasepump .gate-message {
  margin: 0;
  font-weight: 700;
}

.gate-phrasepump .gate-detail {
  margin: 2px 0 16px;
  color: var(--wovia-blue-light);
  font-size: 16px;
}

.gate-phrasepump .gate-description {
  max-width: 430px;
}

/* First-run language dialog --------------------------------------------- */

.dialog.first-run {
  width: min(350px, calc(100vw - 32px));
  padding: 34px 25px 20px;
}

.dialog.first-run:focus {
  outline: none;
}

.first-run-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.first-run-label {
  margin-bottom: 10px;
  color: var(--text-strong);
  font-weight: 500;
}

.first-run .select-wrap {
  width: 100%;
}

.first-run .select-field {
  height: 55px;
  border-radius: 4px;
}

.first-run-actions {
  display: flex;
  justify-content: center;
  margin-top: 17px;
}

/* Pieces the practice pages share (PhrasePump, Chatbot) ------------------ */

/* The overlay's dialogs and cards on a panel page (Media, Chatbot's Export): above everything. */
[data-wovia="popups"] {
  position: relative;
  z-index: 2147483000;
}

/* The floating tooltip (floating-tip.js): one box per page, multi-line text kept. */
.floating-tip {
  position: fixed;
  z-index: 2000;
  max-width: 340px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--inverse);
  color: var(--on-inverse);
  font: 400 13px/1.45 var(--font);
  white-space: pre-line;
  pointer-events: none;
}

/* The "Pro" pill after a tip's text (`data-tip-pro`; the reference's, md:L40649–40660, L43807–43817). */
.floating-tip-pro {
  margin-left: 5px;
  padding: 0 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--wovia-blue-light) 46.7%, transparent);
  font-size: 0.92em;
  line-height: 19px;
}

/* The page's key receiver (focus-sink.js; every sentence page): focusable, never seen. */
.focus-sink {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  outline: none;
  opacity: 0;
  pointer-events: none;
}

/* A sentence row's translation while it is hovered in a list without translations (translation-tip.js):
   the reference's own tooltip for it (Vrt, ix:L163006–163040) and its Grow in, 200 ms. */
.translation-tip {
  position: fixed;
  z-index: 1500;
  max-width: 300px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 8.6%, transparent);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--text-strong);
  font-size: 0.9rem;
  line-height: 1.5;
  pointer-events: none;
  animation: translation-tip-grow 200ms;
}

.translation-tip[data-side="left"] { transform-origin: right center; }
.translation-tip[data-side="right"] { transform-origin: left center; }
.translation-tip[data-side="bottom"] { transform-origin: top center; }
.translation-tip[data-side="top"] { transform-origin: bottom center; }

@keyframes translation-tip-grow {
  from {
    opacity: 0;
    transform: scale(0.75, 0.5625);
  }
}

/* A word coloured by its stage (word-tokens.js): hover for meanings, click for the dictionary. */
.word-token {
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  border-radius: 3px;
  cursor: pointer;
}

.word-token:hover {
  background: var(--hover);
}

/* The word the side panel shows (word-tokens.js; the reference's lln-is-open-in-full-dict, #fff2). */
.word-token.is-open-word {
  background: color-mix(in srgb, var(--ink) 13.3%, transparent);
}

/* A sentence row of the lists (reader, recordings, Chatbot): saved, a yellow line on its left (ix:L115131). */
.sentence-row.is-saved {
  box-shadow: inset 3px 0 0 #ffec8ecc;
}

/* The star and the ⋮ (star-menu.js): hidden until the row is hovered, a saved star always shown (ix:L115055–115130). */
.star-menu {
  display: flex;
  align-items: center;
}

.sm-star,
.sm-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--saved-text);
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}

.sm-more {
  width: 16px;
  color: var(--text-strong);
}

.sentence-row:hover .sm-star,
.sentence-row:hover .sm-more,
.sm-star:focus-visible,
.sm-more:focus-visible {
  opacity: 0.3;
}

.sentence-row:hover .sm-star:hover,
.sentence-row:hover .sm-more:hover,
.sm-star.is-on {
  opacity: 1;
}

@media (hover: none) {
  .sm-star,
  .sm-more {
    opacity: 0.25;
  }
}

.sm-menu {
  position: absolute;
  right: 36px;
  z-index: 30;
  padding: 4px 0;
  border-radius: 4px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.sm-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 16px;
  border: 0;
  background: none;
  color: var(--text-strong);
  font: 400 15px/1.4 var(--font);
  cursor: pointer;
}

.sm-menu-item:hover {
  background: var(--hover);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-turn 0.9s linear infinite;
}

@keyframes spinner-turn {
  to {
    transform: rotate(360deg);
  }
}

/* "Discuss with Aria" (discuss.js; Media:L1119–1154): outlined in the brand's blue on a big screen, a round icon on a small one. */
.discuss-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--wovia-blue) 40%, transparent);
  border-radius: 4px;
  background: none;
  color: var(--text);
  font: 500 13px/22px var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.discuss-button:hover {
  border-color: var(--wovia-blue);
  background: color-mix(in srgb, var(--wovia-blue) 8%, transparent);
}

.discuss-button.is-round {
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wovia-blue) 10%, transparent);
}

.discuss-button.is-round:hover {
  background: color-mix(in srgb, var(--wovia-blue) 20%, transparent);
}

.discuss-art {
  display: inline-flex;
  color: var(--wovia-blue);
}

.discuss-art .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-top-color: var(--wovia-blue);
}

.discuss-button.is-round .discuss-art .spinner {
  width: 20px;
  height: 20px;
}

/* In a document's "More info" (reader/doc-info.js): at the right of the author's row, or of the date's (Media:L1370–1445). */
.rd-info-author-row > .discuss-button,
.rd-info-meta-row > .discuss-button {
  flex-shrink: 0;
  margin-left: auto;
}

.rd-info-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

/* The red "!" with a tooltip (bar-tools.js; PhrasePump's dashboard). */
.warn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f44336;
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  cursor: help;
}

/* App bar tools (bar-tools.js; phrasepump.md #53) */
.bar-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-tool);
  font: 600 14px/1 var(--font);
  cursor: pointer;
}

.bar-tool:hover {
  background: var(--hover);
}

.bar-speed.is-on {
  color: var(--accent-soft);
}

/* The speed's switch and, beside it, the arrow to every speed (bar-tools.js createSpeedControl; F1.8). */
.bar-speed-group {
  display: inline-flex;
  align-items: center;
}

.bar-speed-group .bar-speed {
  padding-right: 2px;
}

.bar-tool.bar-speed-more {
  min-width: 20px;
  padding: 0;
}

.speed-menu {
  position: fixed;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  min-width: 110px;
  padding: 6px 0;
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.speed-choice {
  padding: 7px 16px;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  font: 500 14px/1.2 var(--font);
  text-align: left;
  cursor: pointer;
}

.speed-choice:hover {
  background: var(--hover);
}

.speed-choice.is-chosen {
  color: var(--accent-soft);
  font-weight: 700;
}

/* The loop of the line (recording/playback-tools.js; F1.1): lit while the line shown loops. */
.bar-tool.is-on {
  color: var(--accent-soft);
}

/* A switch among the bar's tools (recording/playback-tools.js: auto-pause; owner, 2026-10-15): its track, then its mark. */
.switch.bar-switch {
  min-height: 34px;
  margin: 0 4px;
  color: var(--text-tool);
  font: 600 13px/1 var(--font);
}

.bar-switch .switch-track {
  margin: 0 8px 0 3px;
}

/* Cài đặt's player section (player-settings.js; F1): a label, then its control. */
.player-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  margin: 6px 0;
}

.player-option-label {
  flex: 1 1 auto;
  color: var(--text-label);
  font-size: 14px;
}

.player-option-control {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

/* A mouse picture in the keyboard help (bar-tools.js shortcutsHelp). */
.bar-shortcut-mouse {
  vertical-align: middle;
}

/* Narrow screens --------------------------------------------------------- */

@media (max-width: 1100px) {
  .settings-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .reader-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .word-card {
    position: static;
  }
}

@media (max-width: 600px) {
  /* Too narrow to push the page: the expanded drawer overlays it instead. */
  body.drawer-expanded .main {
    margin-left: 59px;
  }

  body.drawer-expanded .appbar {
    left: 59px;
  }

  body.drawer-expanded .drawer {
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.5);
  }

  .page,
  .page.narrow {
    width: calc(100% - 32px);
  }
}

/* The source's mark (si:L5373–5440): the site's icon, its words in the tip. */
.saved-source {
  display: inline-flex;
  align-items: center;
  color: var(--accent-soft);
  opacity: 0.8;
}

a.saved-source:hover {
  opacity: 1;
}

.saved-source-icon.dim {
  color: var(--text-strong);
  opacity: 0.5;
}

.saved-translation {
  color: var(--text-label);
}

.range-field {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 330px;
}

.range-field input {
  flex: 1;
  accent-color: var(--accent);
}

/* Cài đặt › Device diagnostics (the reference's /debug page) ------------- */

.settings-debug-link {
  margin: 20px 0 0;
  font-size: 13px;
}

.settings-debug-link a {
  color: var(--text-muted);
  text-decoration: underline;
}

.debug-title {
  font-size: 17px;
  color: var(--text-label);
}

.debug-list {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-label);
}

.debug-row {
  display: flex;
  gap: 4px;
}

.debug-row dt {
  flex: none;
}

.debug-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  word-break: break-all;
}

.debug-legend {
  font-size: 14px;
  color: var(--text-label);
}

.debug-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Cài đặt › Làm nổi bật từ vựng › Màu sắc từ: the reference website's colour
   picker (word-colour-picker.js; output/reference/website-2026-09-24/assets/
   Settings-BjDUH4FV.css `_ColorPickerButton`, `_ColoredLabel`, and index-
   B6XZtG7p.css `.lr-wcs*`, copied). ------------------------------------------ */

/* "Đặt lại" beside the title: the reference's small secondary text button. */
.highlight-colours-reset {
  margin-left: 12px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--accent-soft);
  font: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

.highlight-colour-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wcs-button {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s;
}

.wcs-button:hover {
  transform: scale(1.1);
  border-color: var(--hover-line);
}

.wcs-button.is-open {
  border-color: color-mix(in srgb, var(--ink) 90.2%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 25.1%, transparent);
}

.lr-wcs {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.lr-wcs .lr-wcs-collapse {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: visibility 0.22s, opacity 0.18s ease, transform 0.22s ease;
}

.lr-wcs.open {
  grid-template-rows: 1fr;
}

.lr-wcs.open .lr-wcs-collapse {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.lr-wcs .lr-wcs-strip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 2px 0 6px 12px;
  background: color-mix(in srgb, var(--ink) 2.7%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 5px;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.lr-wcs .lr-wcs-leading,
.lr-wcs .lr-wcs-hue-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lr-wcs .lr-wcs-divider {
  width: 1px;
  align-self: stretch;
  background: color-mix(in srgb, var(--ink) 14.9%, transparent);
}

.lr-wcs .lr-wcs-row {
  display: flex;
  gap: 5px;
}

.lr-wcs .lr-wcs-neutrals {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 5px;
}

.lr-wcs .lr-wcs-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s;
}

.lr-wcs .lr-wcs-swatch:hover {
  transform: scale(1.15);
  border-color: var(--hover-line);
}

.lr-wcs .lr-wcs-swatch.selected {
  border-color: var(--ink);
  outline: 2px solid color-mix(in srgb, var(--ink) 85%, transparent);
  outline-offset: 2px;
}

.lr-wcs .lr-wcs-hex-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 12px;
}

.lr-wcs .lr-wcs-hex-toggle {
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 50.2%, transparent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lr-wcs .lr-wcs-hex-toggle:hover {
  color: var(--selected-text);
}

.lr-wcs .lr-wcs-hex-input {
  width: 90px;
  background: color-mix(in srgb, var(--ink) 6.3%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 4px;
  color: inherit;
  font-family: monospace;
  font-size: 13px;
  padding: 3px 6px;
}

.lr-wcs .lr-wcs-hex-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ink) 40%, transparent);
}

.lr-wcs .lr-wcs-hex-input.invalid,
.lr-wcs .lr-wcs-hex-input.invalid:focus {
  border-color: #ff6b6b;
}

/* Cài đặt › Máy chủ, the server admin's (docs/plans/server-port.md) -------- */

.server-status {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.server-status.is-error {
  color: var(--danger);
}

/* Cài đặt › Máy chủ › Gửi email, the server admin's (mail-settings.js): Cài đặt's own fields in a grid. */

.mail-admin-body {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.mail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
}

.mail-field {
  display: grid;
  align-content: start;
  gap: 6px;
}

.mail-field .text-field.mail-input,
.mail-row .text-field.mail-input {
  min-height: 0;
  padding: 8px 12px;
}

.mail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.mail-row .mail-input {
  flex: 1 1 220px;
  max-width: 360px;
}

.mail-forget {
  justify-self: start;
}

/* Đã lưu › Từ vựng (vocabulary.js; SavedItems-CxxQ0xlJ.js: the toolbar `Tu` L7146–7288, the list `Iu` L7447–7728,
   the scroll index `Du` L7300–7446, and the word cell `Pe`, SavedItemsFilterControls-5bP72X3F.js L405–537: their
   inline styles copied; index-B6XZtG7p.css `.lln-words-view-cell`, `.zig-zag-divider`, the words' outlines). ---- */

.vocab-toolbar {
  top: var(--appbar-h);
  z-index: 20;
  margin-bottom: 4px;
}

.vocab-search {
  flex: 1 1 80px;
  min-width: 80px;
  margin-right: 12px;
}

.vocab-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  text-align: left;
}

.vocab-pills-gap {
  width: 8px;
}

.vocab-level-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 14%, var(--surface));
  color: var(--text-strong);
  cursor: pointer;
}

.vocab-level-button.is-unset {
  margin: auto 0;
  background: transparent;
  color: var(--wovia-blue-light);
}

.vocab-refresh {
  margin: auto 0;
  opacity: 0.5;
}

.vocab-body {
  padding: 0 0 80px;
}

.vocab-loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.vocab-error {
  padding: 80px 20px;
  text-align: center;
}

.vocab-retry {
  margin-left: 16px;
}

.vocab-none {
  margin: 50px;
}

/* A row's divider (MUI's Divider with its text between two lines); the band of the vocabulary level dashed green. */
.vocab-divider {
  display: flex;
  align-items: center;
  margin: 10px 0;
  white-space: nowrap;
}

.vocab-divider::before,
.vocab-divider::after {
  content: "";
  flex: 1 1 0;
  border-top: thin solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.vocab-divider-text {
  display: inline-flex;
  align-items: center;
  margin: 0 12px;
}

.vocab-level-current {
  margin-left: 12px;
  font-weight: bold;
}

.zig-zag-divider::before,
.zig-zag-divider::after {
  height: 9px;
  border: none;
  border-bottom: 3px dashed #9cffcd;
}

/* The words of a row in columns of 155 px; a cell lights on hover, a word marked by the learner has its stage's outline. */
.vocab-words {
  column-width: 155px;
  padding: 8px 0 0 16px;
  --vocab-pad-y: 6px;
  --vocab-pad-x: 3px;
}

.vocab-cell {
  display: inline-block;
  width: 155px;
  border-radius: 3px;
  break-inside: avoid;
  background: transparent;
}

.vocab-cell:hover {
  background: var(--hover);
}

.vocab-word {
  position: relative;
  display: inline-block;
  padding: var(--vocab-pad-y) var(--vocab-pad-x);
  font-size: 16px;
  font-weight: 500;
}

.vocab-word.word-token:hover {
  background: transparent;
}

.vocab-word[data-outline]::before {
  content: "";
  position: absolute;
  inset: calc(var(--vocab-pad-y) - 1px) calc(var(--vocab-pad-x) - 1px);
  border: calc(0.6px + 0.065em) solid transparent;
  border-radius: 2px;
  pointer-events: none;
}

.vocab-word[data-outline="always"][data-outline-color="green"]::before { border-color: color-mix(in srgb, var(--lr-word-known) 26.7%, transparent); }
.vocab-word[data-outline="always"][data-outline-color="white"]::before { border-color: color-mix(in srgb, var(--ink) 20%, transparent); }
.vocab-word[data-outline="always"][data-outline-color="gray"]::before { border-color: color-mix(in srgb, var(--lr-word-dont-learn) 26.7%, transparent); }
.vocab-word[data-outline="always"][data-outline-color="orange"]::before { border-color: color-mix(in srgb, var(--lr-word-marked-learning) 26.7%, transparent); }

.vocab-footer {
  padding: 40px 25px;
  text-align: center;
}

/* The scroll index down the right edge, and the mark being chosen in a bubble beside it. */
.vocab-index {
  position: fixed;
  top: 50%;
  right: 2px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transform: translateY(-50%);
  transition: background 0.2s;
}

.vocab-index.is-dragging {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.vocab-index-mark {
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  transition: color 0.1s;
}

.vocab-index-mark.is-active {
  color: var(--wovia-blue-light);
  font-weight: 800;
}

.vocab-index-bubble {
  position: fixed;
  top: 50%;
  right: 44px;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wovia-blue-light);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  color: var(--on-accent);
  font-size: 24px;
  font-weight: 700;
  pointer-events: none;
  transform: translateY(-50%);
}

.vocab-index-bubble[hidden] {
  display: none;
}

/* Below 600 px (`screenWidth < 600`): a cell as wide as its word, the cells wrapping. */
@media (max-width: 599.98px) {
  .vocab-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 8px 20px 0 0;
    column-width: auto;
    --vocab-pad-x: 14px;
  }

  .vocab-cell {
    width: auto;
  }
}

/* Đã lưu › Danh sách từ (word-lists.js) -------------------------------------- */

.wl-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 8px;
}

.wl-level-button.is-on {
  border-color: var(--accent);
  background: var(--selected);
  color: var(--selected-text);
}

.wl-level-count {
  color: var(--text-muted);
  font-size: 13px;
}

.wl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 20px;
}

.wl-bulk,
.wl-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.wl-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wl-word {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(72px, 120px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.wl-text {
  color: var(--text-strong);
  font-size: 22px;
  line-height: 30px;
}

.wl-reading {
  color: var(--text-muted);
  font-size: 15px;
}

.wl-meaning {
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.wl-pos {
  margin-right: 4px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.wl-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wl-stage {
  height: 28px;
  padding: 0 8px;
  font-size: 13px;
}

.wl-stage[aria-pressed="true"] {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.wl-more {
  display: flex;
  margin: 16px auto 0;
}

.wl-loading,
.wl-credits {
  margin-top: 24px;
}

.wl-credits a {
  color: inherit;
}

@media (max-width: 700px) {
  .wl-word {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .wl-meaning,
  .wl-actions {
    grid-column: 1 / -1;
  }
}

/* The search in a sentence page's header (panel/sentence-search.js;
   pageframe-words.md #15; sizes and colours the reference's, pf:L1297–1419). */
.ss {
  position: relative;
  margin: 0 10px 0 3px;
}

.ss-toggle,
.ss-arrow,
.ss-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.ss-toggle {
  padding: 5px;
  opacity: 0.6;
  transform: translateY(2px);
}

.ss.is-open .ss-toggle,
.ss-toggle:hover,
.ss-arrow:hover:not(:disabled),
.ss-close:hover {
  opacity: 1;
}

.ss-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.ss-popup {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  width: 260px;
  margin-top: 4px;
  padding: 4px 6px 4px 12px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ss-popup[hidden],
.ss-count[hidden],
.ss-arrow[hidden] {
  display: none;
}

.ss-input {
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  border: 0;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
}

.ss-count {
  flex-shrink: 0;
  width: 42px;
  padding-right: 4px;
  font-size: 12px;
  text-align: center;
  opacity: 0.6;
}

.ss-close {
  margin-left: auto;
}

/* A match: the current one yellow, the others underlined (ix:L113542–113549). */
.ss-hit {
  border-radius: 2px;
}

.ss-hit.is-active {
  background: #ffeb3b;
  color: #000 !important;
}

.ss-hit.is-match {
  background: color-mix(in srgb, var(--ink) 11.8%, transparent);
  box-shadow: inset 0 -2px 0 #ffeb3b99;
}

/* The matches along the list's right edge (ix:L126682–126710). */
.ss-marks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  width: 12px;
  pointer-events: none;
}

.ss-mark {
  position: absolute;
  right: 1px;
  width: 7px;
  height: 3px;
  border-radius: 1.5px;
  background: #ffeb3b99;
}

.ss-mark.is-active {
  width: 10px;
  background: #ffeb3b;
}

/* The layout menu of the sentence pages (panel/layout-menu.js; pageframe-words.md #47–#49), in
   Wovia's look (owner, 2026-10-15): three pictured options to a row, the hide modes and the
   readings as cells across the menu under them, the chosen in the brand's blue. */

.lm-button {
  gap: 0;
}

.lm-caret {
  display: inline-flex;
  transition: transform 0.2s;
}

.lm-button.is-open .lm-caret {
  transform: rotate(180deg);
}

.lm-popover {
  position: fixed;
  z-index: 1500;
  width: 380px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  color: var(--text-strong);
}

.lm-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  cursor: pointer;
}

.lm-close:hover {
  background: var(--hover);
  color: var(--selected-text);
}

.lm-section + .lm-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.lm-caption {
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.lm-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.lm-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 4px 7px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: none;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.lm-option:hover {
  background: var(--hover);
}

.lm-option.is-chosen {
  border-color: var(--accent);
  background: var(--selected);
  color: var(--text-strong);
}

/* An option's picture: the sentence as a strong bar, the translation as a faint one. */
.lm-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 100px;
  height: 46px;
  padding: 0 9px;
  box-sizing: border-box;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.lm-art.is-single {
  align-items: center;
}

.lm-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
}

.lm-art.is-single .lm-bar {
  width: 70%;
}

.lm-art.is-single .lm-bar + .lm-bar {
  width: 54%;
}

.lm-bar.is-sentence {
  background: color-mix(in srgb, var(--ink) 80%, transparent);
}

.lm-bar.is-translation,
.lm-bar.is-blurred {
  height: 4px;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}

.lm-bar.is-blurred {
  height: 6px;
  filter: blur(1.6px);
}

.lm-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lm-line .lm-bar {
  flex: 1;
}

/* A plain list's lines end where text would. */
.lm-line.is-none:nth-child(2) .lm-bar {
  flex: 0 0 70%;
}

.lm-line.is-none:nth-child(3) .lm-bar {
  flex: 0 0 85%;
}

.lm-line.is-under {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.lm-line.is-under .lm-bar {
  flex: none;
  width: 100%;
}

.lm-line.is-under .lm-bar.is-translation {
  width: 70%;
}

/* The hide modes and the readings: cells across the menu, under its options. */
.lm-grid,
.lm-reading-grid {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  margin-top: 2px;
}

.lm-grid {
  grid-template-columns: 1fr 1fr;
}

.lm-reading-grid.is-3 {
  grid-template-columns: repeat(3, 1fr);
}

.lm-reading-grid.is-4 {
  grid-template-columns: repeat(4, 1fr);
}

.lm-cell,
.lm-reading-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  cursor: pointer;
}

.lm-cell {
  height: 28px;
  font-size: 11.5px;
  font-weight: 600;
}

.lm-reading-choice {
  flex-direction: column;
  height: 40px;
  line-height: 1.05;
}

.lm-cell:hover,
.lm-reading-choice:hover {
  background: var(--hover);
  color: var(--selected-text);
}

.lm-cell.is-chosen,
.lm-reading-choice.is-chosen {
  background: var(--accent);
  color: var(--on-accent);
}

.lm-reading-top {
  font-size: 10px;
}

.lm-reading-label {
  font-size: 16px;
  font-weight: 500;
}

/* A word's reading over it on the sentence pages (word-tokens.js; pageframe-words.md #79): at
   0.75 rem whatever the sentence's size, the words with one a little apart (the reference's .dc-up, .dc-layer). */
.word-ruby {
  ruby-position: over;
  ruby-align: center;
}

.word-ruby rt {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.85;
  user-select: none;
}

.word-token:has(> .word-ruby) {
  margin: 0 0.15em;
}

/* Chinese, Japanese, Thai, Arabic, Persian and Urdu words and punctuation drawn bigger
   (backend/languages.js isBiggerScript; the reference's .dc-orig.dc-lang-zh-CN … at 1.2 em). */
.is-bigger-script {
  font-size: 1.2em;
}

/* Cài đặt nhanh (quick-settings.js; SettingsPopover in the reference): 400 px under the gear. */
.qs-popover {
  position: fixed;
  z-index: 1500;
  width: min(400px, calc(100vw - 16px));
  box-sizing: border-box;
  padding: 12px 24px 0;
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  color: var(--text-strong);
}

.qs-title {
  margin: 16px 0 36px;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-size: 1.17em;
}

.qs-fields .select-wrap,
.qs-fields .select-field {
  width: 100%;
}

.qs-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 22px;
}

.qs-full {
  padding: 4px 5px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}

.qs-full:hover {
  background: var(--hover);
}

/* One sentence at a time on a sentence page (single-line.js; pageframe-words.md #50–#57; pf:L781–1284):
   Chatbot and a recording's column when its list is off. */
.sl-panel {
  --sl-line-size: 20px;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 12px 0;
  text-align: center;
}

.sl-panel.is-big {
  --sl-line-size: 23px;
}

.sl-card {
  position: relative;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: var(--sl-line-size);
  line-height: 1.5;
  cursor: pointer;
}

.sl-play {
  position: absolute;
  top: 50%;
  left: -34px;
  display: inline-flex;
  color: var(--wovia-blue);
  transform: translateY(-50%);
  transition: color 0.5s;
}

.sl-play.is-armed {
  color: #388e3c;
}

.sl-play.is-held {
  color: #d32f2f;
}

.sl-tools {
  position: absolute;
  top: 50%;
  right: -76px;
  display: flex;
  gap: 2px;
  transform: translateY(-50%);
}

.sl-text,
.sl-trans {
  transition: filter 0.2s;
}

.sl-text.is-blurred,
.sl-trans.is-blurred {
  filter: blur(0.25em);
  cursor: pointer;
}

/* A blurred sentence's words take no pointer: the hover reveals it first (#51). */
.sl-text.is-blurred .word-token {
  pointer-events: none;
}

.sl-trans {
  padding: 8px 12px 12px;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  font-size: 0.8em;
  line-height: 1.6;
  user-select: none;
}

/* "Cỡ chữ bản dịch" chosen (single-line.js translationScale, F1.10): a share of the sentence's size. */
.sl-panel.has-translation-scale .sl-trans {
  font-size: calc(var(--sl-translation-scale) * var(--sl-line-size));
}

/* The big play button of a sentence page (big-play-button.js; pageframe-words.md #58). */
.big-play {
  position: absolute;
  right: 27px;
  bottom: 45px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  background: var(--wovia-blue);
  color: var(--on-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.15s, background 0.3s;
}

.big-play:hover {
  transform: scale(1.02);
}

/* The hold (#57), on the big play button and on the middle of the row under a video (line-controls.js). */
.big-play.is-armed,
.rec-control.is-armed {
  background: #388e3c;
}

.big-play.is-held,
.rec-control.is-held {
  background: #d32f2f;
}

/* The gesture band (gesture-band.js; pageframe-words.md #80, #83; ix:L120160–120354). */
.gb {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  border-top: 1px solid #8888ff38;
  background: linear-gradient(to bottom, #6666ff18 0%, #6666ff25 25%, #6666ff25 70%, #6666ff10 100%);
  color: var(--on-media);
  user-select: none;
  touch-action: none;
}

.gb-wing,
.gb-center {
  position: relative;
  pointer-events: none;
}

.gb-wing {
  flex: none;
  width: 90px;
}

.gb-center {
  flex: 1;
}

.gb-line {
  position: absolute;
  top: 15px;
  width: 1.5px;
  height: calc(100% - 22px);
  background: color-mix(in srgb, var(--on-media) 26.7%, transparent);
}

.gb-wing.is-left .gb-line {
  right: 0;
}

.gb-wing.is-right .gb-line {
  left: 0;
}

.gb-flash {
  position: absolute;
  top: 15px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 20px);
  border-radius: 25px;
  background: color-mix(in srgb, var(--on-media) 6.7%, transparent);
  filter: blur(5px);
  opacity: 0;
}

.gb-flash.is-on {
  animation: gb-flash 0.3s;
}

@keyframes gb-flash {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* The band's marks are the reference's drawings (band-marks.js), placed as qae places them (ix:L120218–120352). */
.gb .band-mark {
  display: block;
}

.gb-mark {
  position: absolute;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s, opacity 0.3s;
}

.gb-speed {
  bottom: 4px;
  left: 8px;
  color: color-mix(in srgb, var(--on-media) 33.3%, transparent);
}

/* A speed the reference has no mark for, written out ("1.5x"; F1.8). */
.gb-speed-text {
  font: 700 16px/1 var(--font);
}

/* Slow: the speed mark rises and turns orange. */
.gb-speed.is-on {
  color: #ffa50099;
  transform: translateY(-78px);
}

.gb-ap {
  bottom: 2px;
  left: 10px;
  color: var(--on-media);
  opacity: 0.3;
}

/* Auto-pause holding or armed: the AP mark rises, red or green. */
.gb-ap.is-on {
  opacity: 0.5;
  transform: translateY(-74px);
}

.gb-ap.is-held {
  color: #ff2c2c;
}

.gb-ap.is-armed {
  color: #34ff34;
}

.gb-chevrons {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: color-mix(in srgb, var(--on-media) 20%, transparent);
  line-height: 0;
  transform: translateY(-50%);
}

.gb-wing.is-left .gb-chevrons {
  left: 13px;
}

.gb-wing.is-right .gb-chevrons {
  left: 16px;
}

.gb-chevrons .icon {
  margin: -3px 0;
}

.gb-hand {
  position: absolute;
  bottom: 12px;
  left: 5px;
  color: color-mix(in srgb, var(--on-media) 33.3%, transparent);
}

/* The first time a band shows, its hand and the toolbar's "Touch controls" pulse three times together
   (gestureHintPulse, ix:L120144–120159; the timing is gesture-band.js hintAnimation). */
@keyframes gb-hint {
  0%, 100% { filter: none; transform: scale(1); }
  50% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--on-media) 69%, transparent)); transform: scale(1.35); }
}

.gb-play {
  position: absolute;
  right: 10px;
  bottom: 7px;
  color: color-mix(in srgb, var(--on-media) 33.3%, transparent);
}

/* A recording's wings: ten seconds back and on (qae's showRewindIcons, bottom right of each wing). */
.gb-rewind {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: color-mix(in srgb, var(--on-media) 33.3%, transparent);
}

/* "Touch controls" (gesture-help.js; the reference's kst, ix:L119817–120120, and its badges bM, gd, hT, pT, ix:L119773–119816). */
.gh-popover {
  position: fixed;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 90vw;
  max-width: 400px;
  max-height: calc(100dvh - 32px);
  padding: 16px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  color: var(--text-strong);
}

.gh-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.gh-close:hover {
  background: var(--hover);
}

.gh-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px 0 5px;
  overflow-y: auto;
}

.gh-caption {
  margin: 0 0 8px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.6;
}

.gh-row {
  display: flex;
}

.gh-row + .gh-caption {
  margin-top: 14px;
}

.gh-half {
  display: flex;
  align-items: center;
  width: 50%;
}

.gh-label {
  flex-grow: 1;
  font-size: 0.875rem;
  line-height: 1.43;
}

.gh-half.is-left .gh-label,
.gh-half.is-gesture-last .gh-label {
  text-align: right;
}

.gh-half.is-right .gh-label,
.gh-half.is-gesture-first .gh-label {
  text-align: left;
}

.gh-gesture {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  margin: 3px 10px;
  padding: 6px 7px;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 -0.25em 0 rgba(0, 0, 0, 0.25), 0 0.25em 0.25em rgba(0, 0, 0, 0.05);
  color: var(--text-strong);
}

.gh-gesture.is-center {
  min-width: 40px;
  margin: 3px 12px;
  padding: 10px 11px;
  border-radius: 4px;
  background: #3d3ddc87;
}

.gh-gesture.is-left-wing {
  background: #00800088;
}

.gh-gesture.is-right-wing {
  background: color-mix(in srgb, var(--wovia-blue-deep) 53.3%, transparent);
}

.gh-gesture.is-hold .icon {
  border-radius: 50%;
  box-shadow: 0 0 0 2px currentColor;
}

.gh-band {
  position: relative;
  display: flex;
  height: 100px;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 6px;
  pointer-events: none;
}

.gh-row .gb-rewind {
  position: relative;
  right: auto;
  bottom: auto;
}

.lm-touch {
  margin: 12px 0 0 8px;
  font-size: 13px;
}

/* "Cỡ chữ bản dịch" beside a video's lines (layout-menu.js translationSizeField; F1.10): Cài đặt's row, compact,
   with the full-screen background under it in the same part of the menu. */
.lm-translation-size {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.lm-translation-size .player-option {
  min-height: 0;
  margin: 0;
}

.lm-translation-size .player-option-label {
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  font-size: 12px;
}

.lm-translation-size .select-wrap {
  width: 200px;
}

.lm-translation-size .select-field {
  height: 32px;
  padding-left: 10px;
  font-size: 13px;
  line-height: 20px;
}

.lm-translation-size + .lm-opacity {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

/* A video's full-screen line background (layout-menu.js opacityField; F1.12). */
.lm-opacity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  font-size: 12px;
}

.lm-opacity > span {
  white-space: nowrap;
}

.lm-opacity .range-field {
  flex: 1;
  gap: 8px;
}

/* A saved item's frames before and after its moment (item-media.js; the
   reference's .flashcard-images: 340 px, two frames side by side, 16:9-ish). */
.item-frames {
  width: 340px;
  max-width: 100%;
  margin: 0 auto 20px;
  text-align: center;
}

.item-frame {
  display: inline-block;
  width: calc(50% - 10px);
  margin: 0 2px;
  padding-bottom: 29%;
  background-color: color-mix(in srgb, var(--ink) 5.1%, transparent);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The extension's two marks on the website (extension-status.js): installed,
   and active on this page, in the reference's colours and sizes
   (hp:L1252–1320; ix:L164771–164810: gap 8 px; on oklch(0.85 0.25 168),
   off oklch(0.6 0 0), the warning #ffa500 and larger). */
.ext-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ext-status-mark {
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.ext-status-mark[data-tone="on"] {
  color: oklch(0.85 0.25 168 / 1);
}
.ext-status-mark[data-tone="off"] {
  color: oklch(0.6 0 0);
}
.ext-status-mark[data-tone="warn"] {
  color: #ffa500;
}

/* Cài đặt › Máy chủ › Báo lỗi (reports-review.js; server-port.md S705): each report with what the learner saw, what the
   data says now, and the admin's correction. */
.reports-review {
  max-width: 820px;
}

.reports-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

.reports-card {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.reports-head {
  margin: 0 0 4px;
}

.reports-said {
  margin: 4px 0;
}

.reports-value {
  margin: 4px 0 8px;
  padding-left: 18px;
  color: var(--text);
}

p.reports-value {
  padding-left: 0;
}

.reports-machine {
  color: var(--text-muted);
}

.reports-group {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 1fr;
  gap: 8px;
  margin: 0 0 8px;
}

.reports-pos {
  align-self: start;
}

.reports-remove {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}

.reports-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}