:root {
  --app-text-scale: 1;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-soft: #f8f9fd;
  --text: #17213d;
  --muted: #697288;
  --line: #e8ebf4;
  --primary: #6558e8;
  --primary-dark: #4f43c9;
  --blue: #3598f4;
  --purple-soft: #eeecff;
  --blue-soft: #e8f4ff;
  --green: #6558e8;
  --green-soft: #eeecff;
  --orange: #f1a24d;
  --orange-soft: #fff2df;
  --red: #ef6675;
  --red-soft: #ffedf0;
  --shadow: 0 10px 28px rgba(69, 75, 130, 0.085);
  --shadow-soft: 0 4px 16px rgba(69, 75, 130, 0.055);
  --font-page-title: calc(24px * var(--app-text-scale));
  --font-section-title: calc(18px * var(--app-text-scale));
  --font-card-title: calc(16px * var(--app-text-scale));
  --font-body: calc(14px * var(--app-text-scale));
  --font-secondary: calc(12px * var(--app-text-scale));
  --font-meta: calc(11px * var(--app-text-scale));
  --font-caption: calc(11px * var(--app-text-scale));
  --font-bottom-nav: calc(11px * var(--app-text-scale));
  --font-button: calc(14px * var(--app-text-scale));
  --font-question-short: calc(40px * var(--app-text-scale));
  --font-question-medium: calc(36px * var(--app-text-scale));
  --font-question-long: calc(32px * var(--app-text-scale));
  --font-item-short: calc(34px * var(--app-text-scale));
  --font-item-medium: calc(31px * var(--app-text-scale));
  --font-item-long: calc(28px * var(--app-text-scale));
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  font-size: var(--font-body);
  overscroll-behavior: none;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.content {
  min-height: 100vh;
  max-width: 600px;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom));
}

.user-avatar {
  display: grid;
  overflow: hidden;
  place-items: center;
  flex: none;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--primary), var(--blue));
  color: #fff;
  font-size: calc(15px * var(--app-text-scale, 1));
  font-weight: 850;
}

.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand,
.auth-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-mark,
.auth-logo {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--primary) 5%, var(--blue) 100%);
  color: #fff;
  font-weight: 900;
  font-size: calc(19px * var(--app-text-scale, 1));
  box-shadow: 0 10px 24px rgba(88, 84, 220, 0.26);
}

.brand-title {
  font-size: calc(20px * var(--app-text-scale, 1));
  font-weight: 850;
  letter-spacing: -0.4px;
}

.brand-sub {
  margin-top: 1px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  letter-spacing: 0.8px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(101, 88, 232, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  font-size: 25px;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 14px 17px 13px;
  border-radius: 22px;
  background: linear-gradient(140deg, #6254e7 0%, #4f65e8 45%, #379cf2 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(74, 92, 220, 0.25);
}

.hero::before,
.hero::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}

.hero::before {
  width: 168px;
  height: 168px;
  top: -88px;
  right: -50px;
}

.hero::after {
  width: 96px;
  height: 96px;
  right: 36px;
  bottom: -55px;
}

.eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.73);
  font-size: calc(12px * var(--app-text-scale, 1));
}

.hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: calc(24px * var(--app-text-scale, 1));
  line-height: 1.28;
  letter-spacing: -0.8px;
}

.hero-facts {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 17px;
  margin: 6px 0 9px;
  color: rgba(255, 255, 255, 0.78);
  font-size: calc(12px * var(--app-text-scale, 1));
}

.hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
}

.hero-actions .primary-btn {
  min-height: 38px;
  padding: 8px 15px;
}

.hero-actions .review-entry {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
}

.review-entry b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: calc(9px * var(--app-text-scale, 1));
}

.primary-btn,
.secondary-btn {
  min-height: 44px;
  border-radius: 14px;
  padding: 12px 17px;
  font-weight: 760;
}

.primary-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--primary-dark);
  box-shadow: 0 8px 20px rgba(34, 38, 95, 0.13);
}

.primary-btn.green {
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), #537be9);
  color: #fff;
}

.primary-btn.full,
.secondary-btn.full {
  width: 100%;
  justify-content: center;
}

.secondary-btn {
  background: var(--purple-soft);
  color: var(--primary-dark);
}

.secondary-btn:disabled,
.primary-btn:disabled {
  opacity: 0.46;
}

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 17px 2px 8px;
}

.section-title h2 {
  margin: 0;
  font-size: calc(16px * var(--app-text-scale, 1));
  letter-spacing: -0.3px;
}

.section-title span,
.link {
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
}

.card {
  border: 1px solid rgba(86, 91, 151, 0.055);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

.row {
  display: flex;
  gap: 10px;
}

.book-card {
  display: flex;
  align-items: center;
  gap: 11px;
}

.book-selectable {
  cursor: pointer;
}

.book-active {
  border-color: rgba(91, 86, 214, 0.24);
  box-shadow: 0 9px 24px rgba(78, 76, 166, 0.12);
}

.book-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 54px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--purple-soft), var(--blue-soft));
  color: var(--primary-dark);
  font-size: calc(12px * var(--app-text-scale, 1));
  font-weight: 900;
  letter-spacing: 0.3px;
}

.book-main {
  min-width: 0;
  flex: 1;
}

.book-name {
  font-size: calc(14px * var(--app-text-scale, 1));
  font-weight: 820;
}

.book-meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale, 1));
  line-height: 1.55;
}

.book-arrow {
  color: #a3a8b9;
  font-size: calc(25px * var(--app-text-scale, 1));
}

.progress {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f8;
}

.progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--blue));
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 9px;
}

.stat {
  padding: 12px 10px;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.stat b,
.metric-grid b {
  display: block;
  font-size: calc(20px * var(--app-text-scale, 1));
  font-weight: 850;
}

.stat small,
.metric-grid small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.bottom-nav {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(7px, env(safe-area-inset-bottom));
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  width: min(calc(100% - 22px), 572px);
  height: 66px;
  padding: 6px 7px;
  transform: translateX(-50%);
  border: 1px solid rgba(72, 78, 136, 0.07);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 40px rgba(49, 55, 106, 0.16);
  backdrop-filter: blur(18px);
}

.nav-btn {
  display: grid;
  grid-template-rows: 28px 12px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 3px;
  border-radius: 16px;
  color: #969caf;
}

.nav-btn svg {
  width: 28px;
  height: 28px;
  padding: 4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-btn small {
  font-size: calc(9px * var(--app-text-scale, 1));
}

.nav-btn.active {
  color: var(--primary);
  font-weight: 800;
}

body.keyboard-open .bottom-nav {
  display: none;
}

.page-title {
  margin: 0 0 13px;
}

.page-title h1 {
  margin: 0;
  font-size: calc(24px * var(--app-text-scale, 1));
  letter-spacing: -0.8px;
}

.page-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
  line-height: 1.6;
}

.book-list,
.settings-list,
.people-list,
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book-featured {
  padding: 15px;
}

.books-action {
  margin-top: 14px;
}

.library-retry {
  justify-content: center;
  margin-top: 14px;
}

.badge,
.account-role {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 750;
}

.toolbar {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
}

.search,
.select,
.inline-number input {
  border: 1px solid var(--line);
  outline: none;
  background: var(--surface);
  color: var(--text);
}

.search {
  min-width: 0;
  flex: 1;
  border-radius: 14px;
  padding: 12px 13px;
}

.filter-btn {
  padding: 0 13px;
  border: 1px solid #dddafa;
  border-radius: 14px;
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-size: calc(11px * var(--app-text-scale, 1));
  font-weight: 720;
}

.quick-list,
.history-list,
.event-list {
  overflow: hidden;
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.quick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.quick-row:last-child,
.history-row:last-child {
  border-bottom: 0;
}

.quick-word {
  font-size: calc(15px * var(--app-text-scale, 1));
  font-weight: 780;
}

.quick-meaning {
  max-width: 225px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pills {
  display: flex;
  gap: 5px;
}

.pill {
  padding: 7px 8px;
  border-radius: 9px;
  background: #f0f2f7;
  color: #858b9c;
  font-size: calc(10px * var(--app-text-scale, 1));
}

.pill.unknown.on,
.status-btn.unknown {
  background: var(--red-soft);
  color: #bc4c59;
}

.pill.fuzzy.on,
.status-btn.fuzzy {
  background: var(--orange-soft);
  color: #aa6a24;
}

.pill.mastered.on,
.status-btn.mastered {
  background: var(--purple-soft);
  color: var(--primary-dark);
}

.batch-meta,
.study-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale, 1));
}

.batch-meta {
  margin: 0 3px 10px;
}

.study-screen {
  width: 100%;
  --study-word-size: calc(36px * var(--app-text-scale, 1));
  --study-meaning-size: calc(18px * var(--app-text-scale, 1));
  --study-detail-size: calc(11px * var(--app-text-scale, 1));
}

.study-font-0 {
  --study-word-size: calc(30px * var(--app-text-scale, 1));
  --study-meaning-size: calc(14px * var(--app-text-scale, 1));
  --study-detail-size: calc(10px * var(--app-text-scale, 1));
}

.study-font-1 {
  --study-word-size: calc(33px * var(--app-text-scale, 1));
  --study-meaning-size: calc(16px * var(--app-text-scale, 1));
  --study-detail-size: calc(10.5px * var(--app-text-scale, 1));
}

.study-font-2 {
  --study-word-size: calc(36px * var(--app-text-scale, 1));
  --study-meaning-size: calc(18px * var(--app-text-scale, 1));
  --study-detail-size: calc(11px * var(--app-text-scale, 1));
}

.study-font-3 {
  --study-word-size: calc(39px * var(--app-text-scale, 1));
  --study-meaning-size: calc(20px * var(--app-text-scale, 1));
  --study-detail-size: calc(12px * var(--app-text-scale, 1));
}

.study-font-4 {
  --study-word-size: calc(42px * var(--app-text-scale, 1));
  --study-meaning-size: calc(22px * var(--app-text-scale, 1));
  --study-detail-size: calc(13px * var(--app-text-scale, 1));
}

.study-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px;
  gap: 3px;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid rgba(83, 89, 143, 0.04);
  border-radius: 17px;
  background: #e9ecf5;
}

.study-tabs button {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 14px;
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
  font-weight: 760;
}

.study-tabs button.active {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: 0 3px 11px rgba(60, 67, 119, .10);
}

.study-tabs small {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  font-size: calc(9px * var(--app-text-scale, 1));
  font-weight: 720;
}

.study-tabs button.active small {
  background: var(--purple-soft);
  color: var(--primary-dark);
}

.study-tabs .study-more {
  padding: 0;
  font-size: calc(19px * var(--app-text-scale, 1));
  font-weight: 650;
  letter-spacing: 0;
}

.study-top {
  min-height: 27px;
  margin-bottom: 8px;
}

.study-top b {
  color: var(--text);
  font-size: calc(13px * var(--app-text-scale, 1));
}

.study-top-side {
  display: flex;
  align-items: center;
  gap: 8px;
}

.study-font-btn {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-size: calc(9px * var(--app-text-scale, 1));
  font-weight: 750;
}

.study-font-btn span {
  font-size: calc(12px * var(--app-text-scale, 1));
  font-weight: 850;
}

.study-mode-btn {
  padding: 7px 3px 7px 12px;
  color: var(--primary);
  font-size: calc(12px * var(--app-text-scale, 1));
  font-weight: 720;
}

.study-mode-btn::after {
  margin-left: 5px;
  color: #a2a7bb;
  content: "⌄";
}

.word-card {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  flex-direction: column;
  overflow: visible;
  padding: 17px 19px;
  border: 1px solid rgba(86, 91, 151, 0.06);
  border-radius: 25px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.word-index {
  color: var(--muted);
  font-size: var(--study-detail-size);
}

.word-title {
  margin: 14px 0 9px;
  font-size: var(--study-word-size);
  font-weight: 880;
  line-height: 1.13;
  letter-spacing: -1.5px;
  word-break: break-word;
}

.pronounce-row {
  display: flex;
  gap: 8px;
}

.pronounce {
  display: inline-flex;
  align-items: center;
  width: max-content;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: #357ec6;
  font-size: calc(11px * var(--app-text-scale, 1));
}

.ipa-block {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 11px;
  margin-top: 9px;
}

.ipa-line {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: var(--study-detail-size);
}

.ipa-line b {
  color: #357ec6;
  font-size: calc(9px * var(--app-text-scale, 1));
}

.ipa-line.muted {
  color: #a5a9b8;
}

.meaning {
  max-height: none;
  margin-top: 15px;
  overflow: visible;
  font-size: var(--study-meaning-size);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  white-space: pre-line;
}

.word-example,
.word-collocations {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--study-detail-size);
  line-height: 1.55;
}

.word-example {
  padding-left: 9px;
  border-left: 2px solid #d9dcf3;
}

.word-collocations b {
  color: var(--primary-dark);
}

.word-status {
  width: max-content;
  margin-top: 17px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale, 1));
}

.status-actions {
  display: grid;
  position: static;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 9px;
}

.status-btn {
  min-height: 45px;
  border-radius: 14px;
  padding: 13px 5px;
  font-size: calc(13px * var(--app-text-scale, 1));
  font-weight: 760;
}

.font-size-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 15px;
}

.font-size-options button {
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 7px 3px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--muted);
}

.font-size-options button.active {
  border-color: rgba(101, 88, 232, 0.34);
  background: var(--purple-soft);
  color: var(--primary-dark);
}

.font-size-options b {
  font-size: calc(9px * var(--app-text-scale, 1));
}

.empty,
.loading {
  padding: 55px 20px;
  color: var(--muted);
  text-align: center;
}

.form-label {
  display: block;
  margin: 17px 3px 7px;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale, 1));
}

.select {
  width: 100%;
  padding: 12px;
  border-radius: 13px;
}

.select.compact {
  width: 92px;
}

.full-input {
  width: 100%;
}

.pdf-preview {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e3e5f3;
  border-radius: 18px;
  background: #fff;
}

.pdf-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #eceef5;
}

.pdf-preview-head b {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.pdf-preview-head span {
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
}

.pdf-columns {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr 0.85fr 1.35fr;
  gap: 5px;
  margin-top: 9px;
}

.pdf-columns > div {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e6f1;
  border-radius: 7px;
}

.pdf-columns > div > b {
  display: grid;
  min-height: 27px;
  place-items: center;
  padding: 5px 3px;
  background: #e9e7ff;
  color: #4f4b90;
  font-size: calc(8.5px * var(--app-text-scale, 1));
  text-align: center;
}

.pdf-columns > div > div > div {
  min-height: 25px;
  padding: 6px 4px;
  overflow: hidden;
  border-top: 1px solid #eef0f6;
  font-size: calc(7px * var(--app-text-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-columns > div > div > div:nth-child(odd) {
  background: #fafaff;
}

.dictation-export-form {
  display: grid;
  gap: 8px;
  padding: 15px;
}

.dictation-export-form .form-label:not(:first-child) {
  margin-top: 5px;
}

#dictationOnlineOptions {
  display: grid;
  gap: 8px;
}

#dictationOnlineOptions[hidden],
.dictation-schedule[hidden] {
  display: none;
}

.dictation-schedule {
  display: grid;
  gap: 7px;
}

.dictation-security-note,
.dictation-count {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale, 1));
  line-height: 1.55;
}

.dictation-count {
  margin: 9px 2px 12px;
}

.dictation-csv {
  margin-top: 9px;
}

.dictation-token-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 15px;
}

.dictation-token-card span {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  gap: 4px;
}

.dictation-token-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dictation-token-card .text-action {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 7px 10px;
  font-size: calc(11px * var(--app-text-scale, 1));
  white-space: nowrap;
}

.dictation-answer-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 36px 20px;
  text-align: center;
}

.dictation-answer-state h2,
.dictation-answer-state p {
  margin: 0;
}

.dictation-answer-state p {
  color: var(--muted);
  line-height: 1.65;
}

.dictation-answer-state .primary-btn,
.dictation-answer-state .secondary-btn {
  margin-top: 9px;
}

.dictation-answer-intro {
  display: grid;
  gap: 4px;
  margin: 2px 2px 13px;
}

.dictation-answer-intro b {
  color: #257044;
}

.dictation-answer-intro span {
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale, 1));
  line-height: 1.55;
}

.dictation-answer-list {
  display: grid;
  gap: 10px;
}

.dictation-answer-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
}

.dictation-answer-index {
  display: grid;
  place-items: center;
  align-self: start;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #edf3ff;
  color: #315fad;
  font-weight: 800;
}

.dictation-answer-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.dictation-answer-copy small {
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.dictation-answer-copy b,
.dictation-answer-copy strong {
  overflow-wrap: anywhere;
}

.dictation-answer-copy strong {
  color: #245e3d;
}

.dictation-self-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.dictation-self-choice,
.dictation-error-chip {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.dictation-self-choice {
  min-height: 38px;
}

.dictation-self-choice.correct.active {
  border-color: #66ae82;
  background: #eaf7ef;
  color: #23633d;
}

.dictation-self-choice.wrong.active {
  border-color: #dc8791;
  background: #fff0f1;
  color: #a62d3e;
}

.dictation-error-types {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.dictation-error-types > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dictation-error-chip {
  padding: 7px 9px;
  font-size: calc(10px * var(--app-text-scale, 1));
}

.dictation-error-chip.active {
  border-color: #a884d8;
  background: #f3edff;
  color: #68439d;
}

.dictation-self-record {
  justify-self: start;
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 700;
}

.dictation-self-record.correct {
  background: #eaf7ef;
  color: #23633d;
}

.dictation-self-record.wrong {
  background: #fff0f1;
  color: #a62d3e;
}

.dictation-assessment-actions {
  position: sticky;
  z-index: 4;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 9px;
  margin-top: 14px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(32, 54, 90, .13);
  backdrop-filter: blur(10px);
}

.dictation-assessment-actions button {
  min-width: 0;
}

.dictation-self-result,
.dictation-skip-note {
  display: grid;
  gap: 8px;
  margin-bottom: 13px;
  padding: 15px;
}

.dictation-self-result > small {
  color: #7755aa;
  font-weight: 800;
}

.dictation-self-result > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.dictation-self-result b {
  color: #315fad;
  font-size: calc(27px * var(--app-text-scale, 1));
}

.dictation-self-result em {
  margin-left: 2px;
  font-size: calc(12px * var(--app-text-scale, 1));
  font-style: normal;
}

.dictation-self-result span,
.dictation-skip-note p {
  margin: 0;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.dictation-skip-note b {
  color: #8a6400;
}

.daily-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.daily-ring {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--primary) var(--daily-pct), #eceefa 0);
}

.daily-ring > div {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: baseline;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
}

.daily-ring b {
  align-self: center;
  color: var(--primary-dark);
  font-size: calc(16px * var(--app-text-scale, 1));
}

.daily-ring small {
  align-self: center;
  color: var(--muted);
  font-size: calc(8px * var(--app-text-scale, 1));
}

.mini-btn {
  padding: 8px 11px;
  border-radius: 11px;
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 760;
  white-space: nowrap;
}

.mini-btn.dark {
  background: var(--text);
  color: #fff;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shortcut-card {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.shortcut-card span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--purple-soft), var(--blue-soft));
  color: var(--primary);
  font-size: calc(17px * var(--app-text-scale, 1));
}

.shortcut-card b {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.completion-card {
  padding: 25px 18px;
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.completion-mark {
  display: grid;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--primary);
  font-size: calc(28px * var(--app-text-scale, 1));
  font-weight: 900;
}

.completion-card h1 {
  margin: 13px 0 8px;
  font-size: calc(24px * var(--app-text-scale, 1));
}

.completion-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
  line-height: 1.7;
}

.completion-card > .row {
  justify-content: center;
}

.book-completion-screen {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 30%),
    radial-gradient(circle at 82% 26%, color-mix(in srgb, var(--success-1) 15%, transparent), transparent 32%);
}

.book-completion-card {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 38px 22px 28px;
  background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--purple-soft) 58%, var(--surface)));
}

.completion-kicker {
  display: inline-block;
  margin-top: 14px;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: .18em;
}

.book-completion-total {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0;
}

.book-completion-total strong {
  color: var(--primary);
  font-size: calc(44px * var(--app-text-scale, 1));
}

.book-completion-total span,
.book-completion-pause {
  color: var(--muted);
  font-size: calc(13px * var(--app-text-scale, 1));
}

.book-completion-pause {
  margin: 0 auto 22px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--purple-soft) 64%, transparent);
  line-height: 1.65;
}

.completion-confetti i {
  position: absolute;
  width: 8px;
  height: 18px;
  border-radius: 4px;
  background: var(--primary);
  transform: rotate(24deg);
}

.completion-confetti i:nth-child(1) { left: 10%; top: 10%; }
.completion-confetti i:nth-child(2) { left: 24%; top: 20%; background: var(--success-1); transform: rotate(-28deg); }
.completion-confetti i:nth-child(3) { right: 14%; top: 12%; background: var(--warning-1); transform: rotate(48deg); }
.completion-confetti i:nth-child(4) { right: 26%; top: 26%; transform: rotate(-18deg); }
.completion-confetti i:nth-child(5) { left: 12%; top: 42%; background: var(--warning-1); transform: rotate(68deg); }
.completion-confetti i:nth-child(6) { right: 10%; top: 44%; background: var(--success-1); transform: rotate(-52deg); }

.home-book-complete p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: calc(13px * var(--app-text-scale, 1));
  line-height: 1.6;
}

.study-toolbar.preview-toolbar {
  /* The right slot can contain both the correction editor and favorite
     control.  Let it size to its contents so the toolbar stays inside the
     mobile viewport instead of pushing the favorite button off-screen. */
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
}

.preview-toolbar > b { text-align: center; }

.cloud-card {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-avatar,
.avatar {
  display: grid;
  width: 46px;
  height: 46px;
  flex: none;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--purple-soft), var(--blue-soft));
  color: var(--primary-dark);
  font-weight: 850;
}

.account-avatar.has-photo,
.avatar.has-photo,
.detail-avatar.has-photo {
  overflow: hidden;
  padding: 0;
}

.avatar-picker {
  position: relative;
  display: block;
  padding: 0;
}

.avatar-picker > span:last-child {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: calc(12px * var(--app-text-scale, 1));
  font-weight: 800;
}

.account-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 4px 10px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6dcb9a;
  box-shadow: 0 0 0 4px rgba(109, 203, 154, 0.13);
}

.setting {
  display: flex;
  min-height: 51px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 3px 15px rgba(69, 75, 130, 0.045);
}

.setting b {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.setting small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.setting-arrow {
  color: #a4a9bb;
  font-size: calc(23px * var(--app-text-scale, 1));
}

.native-settings-card {
  align-items: stretch;
  flex-direction: column;
}

.native-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.native-settings-head > span {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-size: calc(8px * var(--app-text-scale, 1));
  font-weight: 800;
}

.native-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.native-settings-grid button {
  min-height: 39px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--primary-dark);
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 720;
  line-height: 1.35;
}

.diagnostic-sheet {
  max-height: 86vh;
}

.diagnostic-title {
  margin: 17px 2px 7px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.5px;
}

.diagnostic-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.diagnostic-list > div {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.diagnostic-list > div:last-child {
  border-bottom: 0;
}

.diagnostic-list b,
.diagnostic-state {
  max-width: 62%;
  color: var(--text);
  font-size: calc(10px * var(--app-text-scale, 1));
  text-align: right;
  word-break: break-word;
}

.diagnostic-state.ok {
  color: #3f8a66;
}

.diagnostic-state.warn,
.diagnostic-error:not(:empty) {
  color: #b45a64;
}

.diagnostic-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0 9px;
}

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

.inline-number input {
  width: 59px;
  padding: 8px;
  border-radius: 10px;
}

.inline-number button {
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 720;
}

.toggle {
  position: relative;
  width: 45px;
  height: 26px;
  border-radius: 999px;
  background: #dfe3ee;
}

.toggle::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13);
  content: "";
  transition: 0.18s;
}

.toggle.on {
  background: linear-gradient(90deg, var(--primary), var(--blue));
}

.toggle.on::after {
  transform: translateX(19px);
}

.text-action {
  display: block;
  width: 100%;
  margin-top: 19px;
  padding: 12px;
  font-size: calc(12px * var(--app-text-scale, 1));
  font-weight: 720;
}

.danger {
  color: #c55361;
}

.app-version {
  margin: 12px 0 2px;
  color: #a0a5b6;
  font-size: calc(10px * var(--app-text-scale, 1));
  text-align: center;
}

.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 100px;
  max-width: 82%;
  padding: 10px 15px;
  transform: translate(-50%, 20px);
  border-radius: 12px;
  background: #202642;
  color: #fff;
  font-size: calc(11px * var(--app-text-scale, 1));
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: 0.2s;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.modal-mask {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(27, 31, 61, 0.43);
  backdrop-filter: blur(3px);
}

.sheet {
  position: relative;
  width: min(100%, 600px);
  max-height: 79vh;
  overflow: auto;
  padding: 18px 18px calc(25px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: #fff;
}

.sheet-handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 19px;
  border-radius: 999px;
  background: #dce0ea;
}

.sheet h3 {
  margin: 0 0 7px;
  font-size: calc(21px * var(--app-text-scale, 1));
}

.sheet p {
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale, 1));
  line-height: 1.6;
}

.split-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 17px;
}

.export-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.choice b {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.choice small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}

.status-metrics {
  padding: 18px 10px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.role-card,
.person-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.role-card {
  justify-content: space-between;
}

.history-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: calc(11px * var(--app-text-scale, 1));
}

.history-row > span:last-child {
  color: var(--muted);
  text-align: right;
}

.admin-user-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.admin-user-head,
.admin-assignment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-assignment .select {
  min-width: 0;
}

.danger-outline {
  background: var(--red-soft);
  color: #b84c59;
}

.event-kind {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 7px;
  background: #f0f2f7;
  color: var(--muted);
  font-size: calc(8px * var(--app-text-scale, 1));
}

.compact-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.compact-title p {
  margin: 0 0 2px;
  text-align: right;
}

.stats-page {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.overview-card,
.chart-card,
.calendar-card {
  box-shadow: var(--shadow-soft);
}

.overview-head,
.card-line,
.calendar-head,
.streak-row,
.profile-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.overview-head span,
.card-line span,
.calendar-head small {
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.overview-grid > div {
  min-width: 0;
  padding: 12px;
  border-radius: 13px;
  background: var(--surface-soft);
}

.overview-grid small,
.streak-row small {
  display: block;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
}

.overview-grid b,
.streak-row b {
  display: block;
  margin-top: 4px;
  font-size: calc(23px * var(--app-text-scale, 1));
  overflow-wrap: anywhere;
}

.overview-grid b i {
  margin: 0 4px;
  color: #b1b5c2;
  font-size: calc(15px * var(--app-text-scale, 1));
  font-style: normal;
}

.overview-grid em,
.streak-row em {
  margin-left: 3px;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
  font-style: normal;
  font-weight: 600;
}

.legend {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 3px 0 7px;
  border-radius: 50%;
}

.legend.learn {
  background: linear-gradient(180deg, #ffb21f, #ff8a00);
}

.legend.review {
  background: linear-gradient(180deg, #ef7bc9, #c958e6);
}

.stats-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 1px;
}

.stats-range-head > b {
  flex: none;
  font-size: calc(15px * var(--app-text-scale, 1));
}

.stats-range-tabs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: #e9ecf5;
}

.stats-range-tabs button {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 9px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 720;
}

.stats-range-tabs button.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 3px 10px rgba(54, 61, 111, .1);
}

.trend-chart {
  margin: 8px -4px 0;
  border-top: 1px solid var(--line);
}

.trend-chart svg {
  display: block;
  width: 100%;
  height: 148px;
  overflow: visible;
}

.trend-grid line {
  stroke: #eef0f6;
  stroke-width: 1;
}

.trend-series polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.trend-series circle {
  stroke: #fff;
  stroke-width: 2;
}

.trend-series.learn polyline { stroke: #ff9f0a; }
.trend-series.learn circle { fill: #ff9f0a; }
.trend-series.review polyline { stroke: #cf52e6; }
.trend-series.review circle { fill: #cf52e6; }
.trend-series.duration polyline { stroke: #ff526b; }
.trend-series.duration circle { fill: #ff526b; }

.trend-labels text {
  fill: #9b9fab;
  font-size: calc(9px * var(--app-text-scale, 1));
  font-weight: 650;
}

.chart-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.chart-summary small {
  display: block;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
}

.chart-summary b {
  display: block;
  margin-top: 3px;
  font-size: calc(20px * var(--app-text-scale, 1));
}

.chart-summary em {
  margin-left: 3px;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
  font-style: normal;
}

.calendar-week,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.calendar-week {
  margin: 11px 0 5px;
  color: #a1a6b5;
  font-size: calc(8px * var(--app-text-scale, 1));
}

.calendar-head {
  justify-content: center;
  gap: 24px;
}

.calendar-head button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: calc(23px * var(--app-text-scale, 1));
}

.calendar-head button:disabled {
  opacity: .28;
}

.calendar-grid span {
  display: grid;
  min-height: 29px;
  place-items: center;
  border-radius: 9px;
  font-size: calc(10px * var(--app-text-scale, 1));
}

.calendar-grid span.active {
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-weight: 800;
}

.calendar-grid span.today {
  outline: 1px solid var(--primary);
}

.streak-row {
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.streak-row > div {
  flex: 1;
}

.streak-row b {
  font-size: calc(18px * var(--app-text-scale, 1));
}

.compact-role-card {
  margin-top: 9px;
}

.compact-role-card span {
  color: var(--primary);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.universal-modal-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface, #f4f6fb);
  color: var(--muted, #6f7788);
  font-size: 25px;
  line-height: 1;
}

.sheet.has-universal-close > h1:first-of-type,
.sheet.has-universal-close > h2:first-of-type,
.sheet.has-universal-close > h3:first-of-type {
  padding-right: 44px;
}

.update-mask[data-update-mandatory="true"] {
  z-index: 200;
}

.admin-summary > div {
  padding: 12px;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-summary b,
.admin-summary small {
  display: block;
}

.admin-summary b {
  font-size: calc(20px * var(--app-text-scale, 1));
}

.admin-summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
}

.admin-user-head {
  justify-content: flex-start;
}

.admin-badge {
  padding: 6px 8px;
  border-radius: 9px;
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-size: calc(9px * var(--app-text-scale, 1));
}

.admin-role-controls {
  padding: 12px;
}

.admin-role-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.role-option {
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
  font-weight: 700;
}

.role-option.active {
  border-color: var(--primary);
  background: var(--green-soft);
  color: var(--primary);
}

.role-option:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.profile-title {
  justify-content: flex-start;
  gap: 11px;
  margin-bottom: 10px;
}

.profile-title h1,
.profile-title p {
  margin: 0;
}

.profile-title h1 {
  font-size: calc(21px * var(--app-text-scale, 1));
}

.profile-title p {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
}

.detail-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--purple-soft), var(--blue-soft));
  color: var(--primary-dark);
  font-weight: 850;
}

.status-metrics-inline {
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  box-shadow: none;
}

.update-notes {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-soft);
  font-size: calc(11px * var(--app-text-scale, 1));
  line-height: 1.8;
}

.download-progress {
  margin: 14px 0 2px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.download-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.download-progress-track {
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eaf2;
}

.download-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--blue));
  transition: width 0.25s ease;
}

.auth-shell,
.launch-screen {
  position: relative;
  display: flex;
  min-height: calc(100vh - 36px - env(safe-area-inset-top));
  flex-direction: column;
  overflow: hidden;
}

.auth-shell {
  margin: calc(-12px - env(safe-area-inset-top)) -14px calc(-96px - env(safe-area-inset-bottom));
  padding: calc(31px + env(safe-area-inset-top)) 26px calc(28px + env(safe-area-inset-bottom));
  background: linear-gradient(156deg, #f7f7ff 0%, #edf5ff 58%, #f7f8fd 100%);
}

.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.auth-orb-one {
  width: 250px;
  height: 250px;
  top: 88px;
  right: -110px;
  background: linear-gradient(145deg, rgba(101, 88, 232, 0.22), rgba(53, 152, 244, 0.08));
}

.auth-orb-two {
  width: 150px;
  height: 150px;
  top: 250px;
  left: -82px;
  background: rgba(53, 152, 244, 0.13);
}

.auth-brand {
  position: relative;
  z-index: 1;
}

.auth-brand b {
  display: block;
  font-size: calc(21px * var(--app-text-scale, 1));
}

.auth-brand span {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  letter-spacing: 0.9px;
}

.auth-copy {
  position: relative;
  z-index: 1;
  margin-top: 23vh;
}

.auth-copy > span {
  color: var(--primary);
  font-size: calc(12px * var(--app-text-scale, 1));
  font-weight: 760;
}

.auth-copy h1 {
  margin: 10px 0 0;
  font-size: clamp(calc(35px * var(--app-text-scale, 1)), calc(10vw * var(--app-text-scale, 1)), calc(45px * var(--app-text-scale, 1)));
  line-height: 1.23;
  letter-spacing: -2px;
}

.auth-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.auth-actions .secondary-btn {
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
}

.auth-unavailable {
  padding: 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
  text-align: center;
}

.launch-screen {
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.launch-screen .auth-logo {
  width: 59px;
  height: 59px;
  border-radius: 19px;
  font-size: calc(25px * var(--app-text-scale, 1));
}

.launch-name {
  font-size: calc(19px * var(--app-text-scale, 1));
  font-weight: 850;
}

.launch-spinner {
  width: 17px;
  height: 17px;
  margin-top: 8px;
  border: 2px solid #dfe3f4;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Shared layouts for the task, detail, weak-word and report flows. */
.home-task-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-color: rgba(101, 88, 232, 0.10);
  box-shadow: 0 3px 14px rgba(69, 75, 130, 0.045);
}

.home-task-card .card-line {
  min-height: 24px;
}

.task-source {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--primary-dark);
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 760;
  line-height: 1.25;
}

.task-source::before {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--primary);
  content: "";
}

.task-progress-grid,
.detail-overview,
.week-metrics,
.report-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.task-progress-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.task-progress-head,
.task-card-head,
.task-card-foot,
.subpage-actions,
.profile-avatar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-progress-head span,
.task-card-head span,
.task-card-foot span,
.fixed-field {
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.task-progress-head + .progress {
  margin-top: 10px;
}

.task-progress-head ~ .task-progress-grid {
  margin-top: 9px;
}

.book-status-card .progress {
  margin: 10px 0;
}

.learning-record-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-cover {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(101, 88, 232, 0.12), rgba(63, 169, 245, 0.08));
}

.report-cover h2,
.report-cover p {
  margin: 0;
}

.report-cover span,
.report-cover b {
  display: block;
}

.report-cover b {
  margin-top: 6px;
  font-size: calc(16px * var(--app-text-scale, 1));
}

.report-cover p {
  margin-top: 5px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.weak-row em {
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  font-style: normal;
}

.add-more-home,
.weak-study-action {
  margin-top: 9px;
}

.trend-empty-icon {
  font-size: calc(24px * var(--app-text-scale, 1));
  line-height: 1;
}

/* V4 precision contract and objective-answer learning flow. */
.content {
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
}

.content.study-route-content {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.card {
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(20, 28, 50, 0.045);
}

.page-title h1 {
  font-size: var(--font-page-title);
  line-height: 1.18;
}

.page-title p {
  font-size: var(--font-secondary);
  line-height: 1.3;
}

.section-title {
  min-height: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.section-title h2 {
  font-size: var(--font-section-title);
}

.section-title > span {
  max-width: 55%;
  overflow: hidden;
  font-size: calc(14px * var(--app-text-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav {
  bottom: max(8px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 576px);
  height: 72px;
  padding: 8px;
  border-radius: 24px;
}

.nav-btn {
  grid-template-rows: 28px 14px;
  gap: 4px;
}

.nav-btn svg {
  width: 24px;
  height: 24px;
  padding: 2px;
}

.nav-btn small {
  font-size: calc(12px * var(--app-text-scale, 1));
}

.hero {
  height: 172px;
  min-height: 172px;
  padding: 20px;
  border-radius: 24px;
  box-shadow: 0 4px 14px rgba(55, 70, 170, 0.08);
}

.hero h1 {
  font-size: calc(30px * var(--app-text-scale, 1));
  line-height: 1.12;
  white-space: nowrap;
}

.hero .eyebrow {
  font-size: calc(15px * var(--app-text-scale, 1));
}

.hero-facts {
  margin-top: 12px;
  font-size: calc(16px * var(--app-text-scale, 1));
}

.hero-actions {
  margin-top: 16px;
}

.hero-actions .primary-btn {
  width: 132px;
  min-height: 46px;
  font-size: calc(16px * var(--app-text-scale, 1));
}

.home-task-card {
  height: 146px;
  min-height: 146px;
  padding: 16px;
}

.home-task-card .task-progress-head + .progress,
.home-task-card .task-progress-head ~ .task-progress-grid {
  margin-top: 0;
}

.task-progress-grid > div {
  min-height: 64px;
  padding: 10px;
}

.task-progress-grid small {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.task-progress-grid b {
  font-size: calc(24px * var(--app-text-scale, 1));
}

.home-task-card .progress {
  height: 6px;
}

.book-card:not(.book-selectable) {
  min-height: 104px;
}

.book-selectable {
  min-height: 84px;
  padding: 14px;
}

.book-name {
  font-size: calc(19px * var(--app-text-scale, 1));
}

.book-meta {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.person-card {
  min-height: 92px;
  padding: 14px;
}

.setting {
  min-height: 64px;
  padding: 0 16px;
}

.setting:has(small) {
  min-height: 82px;
}

.setting b {
  font-size: calc(17px * var(--app-text-scale, 1));
}

.setting small {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.inline-number input {
  width: 72px;
  height: 44px;
}

.inline-number button {
  width: 64px;
  min-height: 40px;
  white-space: nowrap;
}

.quick-screen-card {
  padding: 20px 16px;
  text-align: center;
}

.quick-screen-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 18px;
  background: var(--purple-soft);
  color: var(--primary);
  font-size: calc(25px * var(--app-text-scale, 1));
  font-weight: 800;
}

.quick-screen-card h2 {
  margin: 0;
  font-size: calc(22px * var(--app-text-scale, 1));
}

.quick-screen-card p {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: calc(14px * var(--app-text-scale, 1));
  line-height: 1.5;
}

.quick-screen-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.quick-screen-stats span {
  padding: 10px;
  border-radius: 14px;
  background: var(--surface-soft);
}

.quick-screen-stats b,
.quick-screen-stats small {
  display: block;
}

.quick-screen-stats b {
  font-size: calc(26px * var(--app-text-scale, 1));
}

.quick-screen-stats small {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(13px * var(--app-text-scale, 1));
}

.quick-rule-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
}

.quick-rule-card b {
  flex: none;
  font-size: calc(16px * var(--app-text-scale, 1));
}

.quick-rule-card span {
  color: var(--muted);
  font-size: calc(14px * var(--app-text-scale, 1));
  line-height: 1.4;
}

.study-screen {
  width: 100%;
  min-height: calc(100vh - 24px - env(safe-area-inset-top));
  --study-word-size: calc(44px * var(--app-text-scale, 1));
}

.study-toolbar {
  display: grid;
  height: 44px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.study-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: var(--text);
  font-size: 25px;
  line-height: 1;
}

.study-toolbar-actions {
  display: flex;
  gap: 4px;
}

.study-progress {
  min-width: 0;
  text-align: left;
}

.study-progress b,
.study-progress span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-progress b {
  font-size: calc(16px * var(--app-text-scale, 1));
}

.study-progress span {
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
}

.study-question {
  padding-top: 8px;
  text-align: center;
}

.study-word {
  max-width: 100%;
  overflow: visible;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: clip;
  white-space: nowrap;
}

.study-word.study-word-wrap {
  overflow-wrap: anywhere;
  line-height: 1.15;
  white-space: normal;
}

.study-word.word-short { font-size: calc(44px * var(--app-text-scale, 1)); }
.study-word.word-medium { font-size: calc(40px * var(--app-text-scale, 1)); }
.study-word.word-long { font-size: calc(36px * var(--app-text-scale, 1)); }
.study-word.word-xlong { font-size: calc(32px * var(--app-text-scale, 1)); }

.study-word.is-phrase {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.study-zh-prompt {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: calc(30px * var(--app-text-scale, 1));
  font-weight: 750;
  line-height: 1.25;
}

.study-phonetic,
.study-detail-phonetic {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--muted);
  font-size: calc(15px * var(--app-text-scale, 1));
  white-space: nowrap;
}

.study-phonetic button,
.study-detail-phonetic button {
  min-width: 0;
  min-height: 28px;
  color: #426fc2;
  font-size: inherit;
}

.study-meta {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}

.study-option {
  display: flex;
  width: 100%;
  min-height: 52px;
  max-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #eceff5;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(20, 28, 50, 0.035);
  font-size: calc(16px * var(--app-text-scale, 1));
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}

.study-option span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.study-option em {
  flex: none;
  font-size: calc(12px * var(--app-text-scale, 1));
  font-style: normal;
}

.study-option.correct {
  border-color: #58b985;
  background: #e9f8ef;
  color: #207447;
}

.study-option.wrong {
  border-color: #ef7a87;
  background: var(--red-soft);
  color: #b43d4b;
}

.study-feedback {
  margin-top: 8px;
}

.study-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  text-align: left;
}

.study-result b {
  font-size: calc(16px * var(--app-text-scale, 1));
}

.study-result span {
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale, 1));
}

.study-detail-panel {
  max-height: 210px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
  text-align: left;
}

.study-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.study-detail-head b {
  font-size: calc(19px * var(--app-text-scale, 1));
}

.study-detail-head span {
  color: var(--primary);
  font-size: calc(12px * var(--app-text-scale, 1));
}

.study-detail-phonetic {
  justify-content: flex-start;
  margin-top: 4px;
}

.study-detail-meanings p {
  margin: 6px 0 0;
  font-size: calc(16px * var(--app-text-scale, 1));
  line-height: 1.32;
}

.study-detail-empty {
  margin-top: 12px;
  color: var(--muted);
  font-size: calc(14px * var(--app-text-scale, 1));
}

.study-feedback > .primary-btn {
  min-height: 46px;
  margin-top: 0;
}

.study-feedback > .study-detail-panel { margin-top: 8px; }

.report-metrics-extended {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* V8.1 exact typography and component tokens (UI-01 through UI-06). */
.page-title h1 { font-size: var(--font-page-title); }
.section-title h2 { font-size: var(--font-section-title); font-weight: 650; }
.book-name,
.card-title,
.setting b { font-size: var(--font-card-title); }
.page-title p,
.book-meta,
.section-title > span,
.setting small { font-size: var(--font-secondary); }
.app-version,
.nav-btn small { font-size: var(--font-bottom-nav); }
.primary-btn,
.secondary-btn,
.mini-btn,
.text-action,
.inline-number button { font-size: var(--font-button); }
.study-icon,
.icon-btn,
.setting-arrow { font-size: 23px; }

.main-tab-title { margin-top: 2px; }
.hero { margin-top: 0; }
.hero h1 { font-size: var(--font-page-title); }
.hero .eyebrow { font-size: var(--font-secondary); }
.hero-facts { font-size: var(--font-body); }
.hero-actions .primary-btn { font-size: var(--font-button); }
.book-content-segment {
  height: 36px;
}

.book-content-segment button {
  font-size: var(--font-button);
  font-weight: 500;
}

.book-content-segment button.active { font-weight: 650; }

.book-selectable {
  min-height: 72px;
  gap: 8px;
  padding: 8px 14px;
}

.book-selectable .book-name { font-size: var(--font-card-title); font-weight: 600; }
.book-selectable .book-meta { font-size: var(--font-secondary); }
.phrase-book-group + .phrase-book-group { margin-top: 16px; }
.phrase-book-group .section-title { margin-bottom: 8px; }
.phrase-book-group .section-title h2 { font-size: calc(17px * var(--app-text-scale)); font-weight: 650; }
.phrase-book-group .section-title > span { font-size: var(--font-secondary); }

.settings-list { gap: 8px; }
.setting,
.setting:has(small) {
  min-height: 56px;
  padding: 0 16px;
}

.setting:has(.inline-number) { min-height: 64px; }
.setting b { font-weight: 600; }
.setting-value { margin-left: auto; color: var(--muted); font-size: var(--font-button); }
.inline-number input { height: 40px; font-size: var(--font-button); }
.inline-number button { height: 40px; }
.app-version { font-weight: 500; }

.stats-list-card {
  display: block;
  padding: 8px 16px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(69, 75, 130, 0.035);
}

.stats-list-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stats-list-row + .stats-list-row { border-top: 1px solid var(--line); }
.stats-list-row > span { min-width: 0; font-size: var(--font-body); }
.stats-list-row > b { flex: none; font-size: var(--font-card-title); font-weight: 600; }
.week-metrics { grid-template-columns: 1fr; gap: 0; }
.week-metrics > div { border-radius: 0; background: transparent; box-shadow: none; }
.calendar-card .streak-row { display: none; }

.study-question .study-word.word-short { font-size: var(--font-question-short); }
.study-question .study-word.word-medium { font-size: var(--font-question-medium); }
.study-question .study-word.word-long,
.study-question .study-word.word-xlong { font-size: var(--font-question-long); }
.item-study .study-word.word-short { font-size: var(--font-item-short); }
.item-study .study-word.word-medium { font-size: var(--font-item-medium); }
.item-study .study-word.word-long,
.item-study .study-word.word-xlong { font-size: var(--font-item-long); }
.study-question .study-word.word-xxlong { font-size: calc(22px * var(--app-text-scale)); }
.study-question .study-word.word-xxxlong { font-size: calc(18px * var(--app-text-scale)); }
.item-study .study-word.word-xxlong { font-size: calc(19px * var(--app-text-scale)); }
.item-study .study-word.word-xxxlong { font-size: calc(17px * var(--app-text-scale)); }
.study-word.word-xxlong,
.study-word.word-xxxlong { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.study-word.is-phrase.word-xxlong,
.study-word.is-phrase.word-xxxlong { line-height: 1.2; }
.study-option { font-size: var(--font-card-title); }
.study-meta,
.study-progress span,
.study-result span { font-size: var(--font-secondary); }

.item-study-screen {
  min-height: 100dvh;
  padding-bottom: 80px;
}

.item-study {
  display: grid;
  gap: 0;
  padding: 16px 18px 0;
}

.item-study-header {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 6px;
  margin: 0 0 14px;
}

.item-study-header .study-word {
  min-width: 0;
  margin-bottom: 4px;
  line-height: 1.12;
}

.item-study-pronunciation {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 16px;
  color: var(--muted);
  font-size: calc(15px * var(--app-text-scale));
  white-space: nowrap;
}

.item-study-pronunciation button {
  flex: none;
  min-height: 28px;
  color: #426fc2;
  font-size: inherit;
  white-space: nowrap;
}

.item-study-core {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 10px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.item-study-core p {
  margin: 0;
  font-size: calc(16px * var(--app-text-scale));
  line-height: 1.35;
}

.item-study-core p + p { margin-top: 2px; }

.item-study-example {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.item-study-example + .item-study-example { margin-top: -6px; }

.item-study-example-source {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale));
}

.item-study-example-source b {
  color: var(--primary-dark);
  font-weight: 700;
}

.item-study-example-source span {
  overflow: hidden;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-study-example p {
  margin: 0;
  font-size: var(--font-body);
  line-height: 1.4;
}

.item-study-example span {
  color: var(--muted);
  font-size: calc(13px * var(--app-text-scale));
  line-height: 1.4;
}

.item-study-extension {
  min-height: 104px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.item-study-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-bottom: 1px solid var(--line);
}

.item-study-tabs button {
  min-width: 0;
  min-height: 36px;
  padding: 0 4px;
  border-radius: 10px;
  color: var(--muted);
  font-size: var(--font-button);
  font-weight: 500;
  white-space: nowrap;
}

.item-study-tabs button.active {
  color: var(--primary-dark);
  background: var(--purple-soft);
  font-weight: 650;
}

.item-study-panel {
  min-height: 48px;
  padding: 4px 8px 6px;
  animation: item-study-fade 140ms ease-out;
}

@keyframes item-study-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.collocation-row {
  display: grid;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.collocation-row:last-of-type { border-bottom: 0; }
.collocation-row b { font-size: calc(16px * var(--app-text-scale)); font-weight: 600; }
.collocation-row span { font-size: var(--font-body); font-weight: 400; line-height: 1.35; }
.collocation-row small { color: var(--muted); font-size: var(--font-caption); }

.inflection-row {
  display: grid;
  min-height: 38px;
  grid-template-columns: minmax(92px, auto) 1fr;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.inflection-row:last-child { border-bottom: 0; }
.inflection-row span { color: var(--muted); font-size: calc(13px * var(--app-text-scale)); }
.inflection-row b { font-size: calc(16px * var(--app-text-scale)); font-weight: 600; }

.derivative-row {
  display: grid;
  min-height: 38px;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.derivative-row:last-of-type { border-bottom: 0; }
.derivative-row b { font-size: calc(16px * var(--app-text-scale)); font-weight: 600; }
.derivative-row span { min-width: 0; font-size: var(--font-body); line-height: 1.35; }

.item-study-empty {
  display: grid;
  min-height: 60px;
  place-items: center;
  color: var(--muted);
  font-size: var(--font-secondary);
}

.item-study-expand {
  display: block;
  min-height: 36px;
  margin: 4px auto 0;
  color: var(--primary-dark);
  font-size: var(--font-button);
}

.item-study-next {
  min-height: 48px;
  font-size: var(--font-button);
}

@media (max-width: 359px) {
  .item-study-pronunciation {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
  }

  .item-study-tabs button { padding: 0 2px; }
}

/* V6 shared book domain, global display settings, and mandatory item-study state. */
.book-content-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 36px;
  margin: 0 0 12px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.book-content-segment button {
  min-height: 28px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: calc(14px * var(--app-text-scale, 1));
  font-weight: 650;
}

.book-content-segment button.active {
  color: var(--primary-dark);
  background: var(--surface);
  box-shadow: 0 1px 5px rgba(30, 45, 90, 0.08);
}

.phrase-book-group + .phrase-book-group { margin-top: 18px; }
.phrase-book-group .section-title { height: 30px; margin: 0 0 10px; }

.display-settings-card {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.display-settings-card > div:first-child { display: grid; gap: 5px; }
.display-settings-card small { color: var(--muted); }

.global-font-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.global-font-options button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface-soft);
  font-size: calc(15px * var(--app-text-scale, 1));
  font-weight: 650;
}

.global-font-options button.active {
  color: var(--primary-dark);
  border-color: var(--primary);
  background: var(--purple-soft);
}

.item-study-screen {
  min-height: calc(100dvh - 26px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding-bottom: 84px;
}
.item-study { padding: 14px 16px 0; }

.item-study-header {
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 8px;
  margin-bottom: 12px;
}

.item-study-pronunciation,
.phrase-pronunciation {
  display: flex;
  gap: 12px;
  min-height: 28px;
  align-items: center;
}

.phrase-pronunciation {
  width: fit-content;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--primary-dark);
  background: var(--surface);
}

.item-study-sections { display: grid; gap: 12px; }

.item-study-section {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.item-study-section h2 {
  margin: 0 0 9px;
  font-size: calc(17px * var(--app-text-scale, 1));
}

.item-study-section h3 {
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: calc(13px * var(--app-text-scale, 1));
}

.item-study-section p {
  margin: 5px 0;
  font-size: calc(16px * var(--app-text-scale, 1));
  line-height: 1.32;
}

.detail-list-row {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.detail-list-row:last-child { border-bottom: 0; }
.detail-list-row span { color: var(--text); line-height: 1.32; }
.detail-list-row small { color: var(--muted); }

.inflection-row {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr;
  gap: 10px;
  padding: 7px 0;
  align-items: baseline;
}

.inflection-row span { color: var(--muted); }
.inflection-row b { text-align: right; overflow-wrap: anywhere; }

.item-study-next {
  position: fixed;
  z-index: 24;
  left: 16px;
  right: 16px;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  width: auto;
  min-height: 48px;
}

.primary-btn.item-study-next {
  width: auto;
}

.result-correct { color: #258657; }
.result-wrong { color: #c84958; }

@media (max-width: 389px) {
  .study-phonetic,
  .study-detail-phonetic { gap: 8px; }
  .task-progress-grid { gap: 8px; }
}

.task-progress-grid > div,
.detail-overview > div,
.week-metrics > div,
.report-metrics > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(86, 91, 151, 0.05);
  border-radius: 13px;
  background: var(--surface-soft);
}

.task-progress-grid small,
.detail-overview small,
.week-metrics small,
.report-metrics small {
  display: block;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
  line-height: 1.35;
}

.task-progress-grid b,
.detail-overview b,
.week-metrics b,
.report-metrics b {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: calc(19px * var(--app-text-scale, 1));
  line-height: 1.15;
}

.task-progress-grid em,
.detail-overview em,
.week-metrics em,
.report-metrics em {
  margin-left: 3px;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
  font-style: normal;
  font-weight: 650;
}

.weak-entry {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(101, 88, 232, 0.10);
  border-radius: 15px;
  background: linear-gradient(135deg, #fff 20%, #f6f4ff 100%);
  box-shadow: 0 2px 12px rgba(69, 75, 130, 0.04);
  text-align: left;
}

.weak-entry > div {
  min-width: 0;
}

.weak-entry b,
.weak-entry small {
  display: block;
}

.weak-entry b {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.weak-entry small {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.weak-entry > span:last-child {
  color: var(--primary);
  font-size: calc(18px * var(--app-text-scale, 1));
  font-weight: 850;
  white-space: nowrap;
}

.trend-empty {
  display: grid;
  min-height: 126px;
  place-items: center;
  padding: 22px 18px;
  border: 1px dashed #dfe2ef;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff, var(--surface-soft));
  text-align: center;
}

.trend-empty > div {
  max-width: 310px;
}

.trend-empty h3,
.trend-empty b {
  display: block;
  margin: 0;
  font-size: calc(14px * var(--app-text-scale, 1));
}

.trend-empty p,
.trend-empty small {
  display: block;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  line-height: 1.65;
}

.week-metrics {
  margin-top: 1px;
}

.week-metrics > div {
  background: var(--surface);
  box-shadow: 0 2px 11px rgba(69, 75, 130, 0.035);
}

.detail-overview {
  margin-bottom: 2px;
}

.detail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.detail-actions .primary-btn,
.detail-actions .secondary-btn {
  width: 100%;
  justify-content: center;
}

.learning-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(86, 91, 151, 0.055);
  border-radius: 13px;
  background: var(--surface);
}

.learning-record + .learning-record {
  margin-top: 7px;
}

.learning-record > div {
  min-width: 0;
}

.learning-record b,
.learning-record small {
  display: block;
}

.learning-record b {
  font-size: calc(12px * var(--app-text-scale, 1));
}

.learning-record small {
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
  line-height: 1.45;
}

.learning-record > span:last-child {
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  text-align: right;
  white-space: nowrap;
}

.task-card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 9px;
  border-color: rgba(101, 88, 232, 0.09);
  box-shadow: 0 3px 14px rgba(69, 75, 130, 0.045);
}

.task-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--blue));
  content: "";
}

.task-card[data-status="completed"]::before,
.task-card.completed::before {
  background: #6dcb9a;
}

.task-card[data-status="expired"]::before,
.task-card.expired::before {
  background: #b4b8c5;
}

.task-card h3,
.task-card p {
  margin: 0;
}

.task-card h3 {
  font-size: calc(14px * var(--app-text-scale, 1));
}

.task-card p,
.task-card small {
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  line-height: 1.55;
}

.task-form {
  display: grid;
  gap: 11px;
}

.task-form .form-label {
  margin: 0 3px 6px;
}

.task-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.task-form input,
.task-form select,
.task-form textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: calc(12px * var(--app-text-scale, 1));
}

.task-form textarea {
  min-height: 78px;
  resize: vertical;
  line-height: 1.55;
}

.task-form input:focus,
.task-form select:focus,
.task-form textarea:focus {
  border-color: rgba(101, 88, 232, 0.42);
  box-shadow: 0 0 0 3px rgba(101, 88, 232, 0.08);
}

.task-history,
.weak-list,
.weekly-report {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-history .task-card {
  box-shadow: none;
}

.weak-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 59px;
  padding: 11px 12px;
  border: 1px solid rgba(86, 91, 151, 0.055);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 2px 11px rgba(69, 75, 130, 0.035);
}

button.weak-row {
  width: 100%;
  text-align: left;
}

.weak-row > div {
  min-width: 0;
}

.weak-row b,
.weak-row small {
  display: block;
}

.weak-row b {
  overflow: hidden;
  font-size: calc(14px * var(--app-text-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weak-row small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-badge {
  display: inline-grid;
  min-width: 45px;
  min-height: 28px;
  place-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: #a4611d;
  font-size: calc(10px * var(--app-text-scale, 1));
  font-weight: 850;
  white-space: nowrap;
}

.weekly-report {
  gap: 10px;
}

.report-metrics > div {
  background: var(--surface);
  box-shadow: 0 2px 11px rgba(69, 75, 130, 0.035);
}

.report-copy {
  padding: 13px 14px;
  border: 1px solid rgba(86, 91, 151, 0.055);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 2px 11px rgba(69, 75, 130, 0.035);
}

.report-copy h3,
.report-copy p,
.report-copy ul {
  margin: 0;
}

.report-copy h3 {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.report-copy p,
.report-copy li {
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale, 1));
  line-height: 1.75;
}

.report-copy p,
.report-copy ul {
  margin-top: 7px;
}

.report-copy ul {
  padding-left: 18px;
}

.subpage-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-bottom: 12px;
}

.subpage-head > button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(101, 88, 232, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 12px rgba(69, 75, 130, 0.045);
  font-size: calc(21px * var(--app-text-scale, 1));
}

.subpage-head > div {
  min-width: 0;
  text-align: center;
}

.subpage-head h1,
.subpage-head p {
  margin: 0;
}

.subpage-head h1 {
  overflow: hidden;
  font-size: calc(18px * var(--app-text-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subpage-head p {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.status-list > div,
.status-list > button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(86, 91, 151, 0.05);
  border-radius: 13px;
  background: var(--surface);
  text-align: left;
}

.status-list b,
.status-list small {
  display: block;
}

.status-list b {
  font-size: calc(12px * var(--app-text-scale, 1));
}

.status-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale, 1));
  line-height: 1.45;
}

.profile-details {
  overflow: hidden;
  margin: 0;
  padding: 0 13px;
  border: 1px solid rgba(86, 91, 151, 0.055);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 2px 11px rgba(69, 75, 130, 0.035);
}

.profile-details > div,
.profile-details > .profile-edit-row {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.study-pass-progress {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
}

.study-pass-progress span {
  width: 9px;
  height: 9px;
  border: 1.5px solid color-mix(in srgb, var(--primary) 55%, var(--line));
  border-radius: 50%;
  background: var(--surface);
}

.study-pass-progress span.done {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 13%, transparent);
}

.profile-details > div:last-of-type {
  border-bottom: 0;
}

.profile-details dt,
.profile-details dd,
.profile-details b,
.profile-details span {
  margin: 0;
  font-size: calc(11px * var(--app-text-scale, 1));
}

.profile-details dt,
.profile-details > div > span:first-child,
.profile-edit-row > small {
  color: var(--muted);
}

.profile-details dd,
.profile-details > div > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.profile-avatar-copy {
  display: grid;
  gap: 3px;
  justify-items: end;
}

.profile-avatar-copy small {
  color: var(--muted);
  font-size: calc(8px * var(--app-text-scale, 1));
  font-weight: 500;
}

.profile-edit-row {
  padding: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.profile-edit-row > small,
.profile-edit-row > span,
.profile-edit-row b {
  font-size: calc(11px * var(--app-text-scale, 1));
}

.profile-edit-row > span {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  justify-content: end;
  gap: 7px;
  overflow-wrap: anywhere;
  text-align: right;
}

.profile-edit-row i {
  color: #a4a9bb;
  font-size: calc(19px * var(--app-text-scale, 1));
  font-style: normal;
  font-weight: 500;
}

.profile-email-value em {
  grid-column: 1;
  color: #a16a14;
  font-size: calc(8px * var(--app-text-scale, 1));
  font-style: normal;
  font-weight: 600;
}

.profile-email-value i {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.account-form,
.password-form {
  margin: 0;
}

.account-form .form-label:first-child,
.password-form .form-label:first-child {
  margin-top: 0;
}

.account-form .primary-btn,
.password-form .primary-btn {
  margin-top: 14px;
}

.account-current-email {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: calc(10px * var(--app-text-scale, 1));
}

.account-current-email span,
.form-help {
  color: var(--muted);
}

.account-current-email b {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.account-email-status {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(244, 157, 34, .2);
  border-radius: 13px;
  background: rgba(255, 247, 230, .76);
  color: #8b5d14;
  font-size: calc(9px * var(--app-text-scale, 1));
  line-height: 1.55;
}

.account-email-status b {
  font-size: calc(10px * var(--app-text-scale, 1));
}

.form-help {
  margin: 8px 3px 0;
  font-size: calc(9px * var(--app-text-scale, 1));
  line-height: 1.6;
}

@media (max-width: 430px) {
  .chart-summary,
  .task-progress-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chart-summary b,
  .task-progress-grid b {
    font-size: calc(16px * var(--app-text-scale, 1));
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .status-metrics {
    grid-template-columns: repeat(4, 1fr);
  }

  .admin-assignment {
    align-items: center;
    flex-direction: row;
  }

  .admin-assignment .mini-btn {
    align-self: auto;
  }

  .status-metrics-inline {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* V9 report center, screening controls and final user-approved type scale. */
.nav-btn small { font-size: calc(11px * var(--app-text-scale)); }

.auth-brand b { font-size: calc(21px * var(--app-text-scale)); }
.auth-copy > span { font-size: calc(12px * var(--app-text-scale)); }
.auth-copy h1 { font-size: calc(39px * var(--app-text-scale)); }
.auth-actions button { font-size: calc(14px * var(--app-text-scale)); }

.hero .eyebrow { font-size: calc(12px * var(--app-text-scale)); }
.hero h1 { font-size: calc(15px * var(--app-text-scale)); }
.hero-facts { font-size: calc(20px * var(--app-text-scale)); }
.hero-actions .primary-btn { font-size: calc(20px * var(--app-text-scale)); }
.section-title h2 { font-size: calc(18px * var(--app-text-scale)); }
.task-progress-head b,
.task-progress-head span { font-size: calc(10px * var(--app-text-scale)); }
.task-progress-grid small { font-size: calc(10px * var(--app-text-scale)); }
.task-progress-grid b { font-size: calc(18px * var(--app-text-scale)); }
.home-task-card { height: auto; min-height: 0; }
.book-card:not(.book-selectable) .book-name { font-size: calc(16px * var(--app-text-scale)); }
.book-card:not(.book-selectable) .book-meta { font-size: calc(10px * var(--app-text-scale)); }
.weak-entry b { font-size: calc(15px * var(--app-text-scale)); }
.weak-entry small { font-size: calc(10px * var(--app-text-scale)); }
.weak-entry > span:last-child { font-size: calc(18px * var(--app-text-scale)); }

.book-selectable .book-name { font-size: calc(16px * var(--app-text-scale)); }
.book-selectable .book-meta { font-size: calc(12px * var(--app-text-scale)); }
.book-content-segment button { font-size: calc(14px * var(--app-text-scale)); }
.book-status-card .status-metrics b { font-size: calc(20px * var(--app-text-scale)); }
.book-status-card .status-metrics small { font-size: calc(10px * var(--app-text-scale)); }

.quick-filter-list {
  display: grid;
  gap: 8px;
}

.quick-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  min-height: 76px;
  padding: 10px;
}

.quick-filter-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.quick-filter-copy > b {
  overflow: hidden;
  font-size: calc(16px * var(--app-text-scale));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-meaning-mask {
  display: -webkit-box;
  overflow: hidden;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #e8ebf2;
  color: transparent;
  font-size: calc(12px * var(--app-text-scale));
  line-height: 1.45;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.quick-meaning-mask > span { color: #8a91a1; }
.quick-meaning-mask.revealed { background: var(--surface-soft); color: var(--text); }

.quick-filter-actions {
  display: grid;
  grid-template-columns: repeat(3, 38px);
  align-items: center;
  gap: 4px;
}

.quick-filter-actions button,
.quick-star {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: calc(14px * var(--app-text-scale));
}

.quick-filter-actions svg,
.quick-star svg,
.study-favorite svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.quick-cut.on { border-color: #e75d6c; background: var(--red-soft); color: #bd3545; }
.quick-star.on,
.study-favorite.on { border-color: #f0bd58; background: #fff7df; color: #d89313; }
.quick-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 12px; }
.quick-pagination button { width: 100%; }

.learning-surfaces-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.learning-surfaces-title > div { min-width: 0; }
.learning-surfaces-title h1 { margin: 0; }
.learning-surfaces-title p { margin: 4px 0 0; color: var(--muted); }
.learning-surface-section { margin-top: 18px; }
.learning-surface-section > h2 { margin: 0 0 8px; font-size: calc(14px * var(--app-text-scale)); }
.learning-surface-source-card { display: grid; gap: 14px; padding: 16px; }
.learning-surface-source-card > div:first-child { display: grid; gap: 4px; }
.learning-surface-source-card small,
.learning-surface-lookup small { color: var(--muted); line-height: 1.45; }
.learning-surface-source-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.learning-surface-source-options button {
  min-height: 40px;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: calc(12px * var(--app-text-scale));
}
.learning-surface-source-options button.active {
  border-color: var(--primary);
  background: var(--green-soft);
  color: var(--primary);
  font-weight: 700;
}
.learning-surface-snapshot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale));
}
.learning-surface-snapshot b { color: var(--text); }
.learning-surface-snapshot button {
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--primary);
}
.learning-surface-settings .setting { width: 100%; text-align: left; }
.learning-surface-settings .setting.is-disabled { opacity: .5; }
.learning-surface-add { margin-top: 8px; }
.learning-surface-lookup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.learning-surface-lookup > div { display: grid; min-width: 0; gap: 4px; }
.learning-surface-readonly-note { margin: 18px 4px 0; color: var(--muted); font-size: calc(12px * var(--app-text-scale)); text-align: center; }

@media (max-width: 365px) {
  .learning-surface-snapshot { grid-template-columns: 1fr auto; }
  .learning-surface-snapshot button { grid-column: 1 / -1; width: 100%; }
}

.study-toolbar { height: 48px; }
.study-toolbar-actions { align-items: center; }
.study-icon.is-disabled { opacity: .28; }
.study-master {
  min-width: 48px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  font-size: calc(12px * var(--app-text-scale));
  white-space: nowrap;
}
.study-master.on { border-color: #e75d6c; background: var(--red-soft); color: #bd3545; }
.study-screen[data-study-phase="QUESTION"] .study-options { margin-top: clamp(24px, 5dvh, 40px); }
.study-option { max-height: none; font-size: calc(14px * var(--app-text-scale)); }
.study-phonetic { font-size: calc(12px * var(--app-text-scale)); }
.study-detail-phonetic,
.item-study-pronunciation { font-size: calc(15px * var(--app-text-scale)); }
.previous-study-sheet h3 { margin: 4px 0 8px; font-size: calc(28px * var(--app-text-scale)); }
.previous-study-sheet > p { font-size: calc(16px * var(--app-text-scale)); line-height: 1.55; }
.previous-study-note { margin: 12px 0; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }

.favorite-list { display: grid; gap: 8px; }
.favorite-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; }
.favorite-kind { padding: 4px 6px; border-radius: 8px; background: var(--purple-soft); color: var(--primary); font-size: calc(10px * var(--app-text-scale)); }
.favorite-row b { font-size: calc(16px * var(--app-text-scale)); }
.favorite-row p { display: -webkit-box; overflow: hidden; margin: 3px 0 0; color: var(--muted); font-size: calc(12px * var(--app-text-scale)); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.setting b { font-size: calc(16px * var(--app-text-scale)); }
.setting small { font-size: calc(12px * var(--app-text-scale)); }
.setting-value { font-size: calc(14px * var(--app-text-scale)); }
.global-font-options button { font-size: calc(15px * var(--app-text-scale)); }

.main-tab-title h1 { font-size: calc(24px * var(--app-text-scale)); }
.admin-page-title h1 { font-size: calc(18px * var(--app-text-scale)); }
.admin-summary { text-align: center; }
.admin-summary b { font-size: calc(20px * var(--app-text-scale)); }
.admin-summary small { font-size: calc(9px * var(--app-text-scale)); }
.person-card .book-name { font-size: calc(16px * var(--app-text-scale)); }
.person-card .book-meta { font-size: calc(12px * var(--app-text-scale)); }
.person-card .mini-btn { font-size: calc(14px * var(--app-text-scale)); }
.student-detail-top {
  display: grid;
  grid-template-columns: 40px 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  margin-bottom: 12px;
}
.student-detail-top h1 { margin: 0; font-size: calc(21px * var(--app-text-scale)); }
.student-detail-top p { overflow: hidden; margin: 3px 0 0; color: var(--muted); font-size: calc(9px * var(--app-text-scale)); text-overflow: ellipsis; white-space: nowrap; }
.student-detail-nav,
.weak-page-nav,
.report-page-nav { min-height: 40px; margin-bottom: 4px; }
.status-metrics-inline b { font-size: calc(20px * var(--app-text-scale)); }
.status-metrics-inline small { font-size: calc(10px * var(--app-text-scale)); }
.report-center-entry { display: flex; width: 100%; min-height: 60px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 11px 13px; text-align: left; }
.report-center-entry b { display: block; font-size: calc(16px * var(--app-text-scale)); }
.report-center-entry small { display: block; margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.report-center-entry > span { color: var(--primary); font-size: calc(14px * var(--app-text-scale)); }
.account-manager-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 2px 10px; }
.account-manager-head h2 { margin: 0; font-size: calc(18px * var(--app-text-scale)); }
.account-manager-head span { color: var(--muted); font-size: calc(14px * var(--app-text-scale)); }

.compact-record-list .learning-record { grid-template-columns: auto minmax(0, 1fr) auto; }
.compact-record-list .learning-record time,
.compact-record-list .learning-record > span { font-size: calc(12px * var(--app-text-scale)); }
.compact-record-list .learning-record > b { overflow: hidden; font-size: calc(14px * var(--app-text-scale)); text-overflow: ellipsis; white-space: nowrap; }

.weak-page-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; margin: 4px 0 14px; }
.weak-page-title h1 { margin: 0; font-size: calc(24px * var(--app-text-scale)); line-height: .98; }
.weak-page-title h1 span { display: block; }
.weak-page-title p { margin: 0; color: var(--muted); font-size: calc(12px * var(--app-text-scale)); line-height: 1.45; text-align: right; }
.weak-list { gap: 8px; }
.weak-row { grid-template-columns: minmax(92px, .8fr) minmax(0, 1.4fr); min-height: 54px; padding: 10px 12px; }
.weak-row b { font-size: calc(14px * var(--app-text-scale)); }
.weak-row > span { overflow: hidden; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.weak-study-action { font-size: calc(14px * var(--app-text-scale)); }

.report-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 14px; background: #e9ebf3; }
.report-tabs button { min-height: 38px; border-radius: 11px; color: var(--muted); font-size: calc(14px * var(--app-text-scale)); }
.report-tabs button.active { background: var(--surface); color: var(--primary); font-weight: 750; box-shadow: 0 2px 8px rgba(69,75,130,.08); }
.report-period-control { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 7px; margin: 10px 0; }
.report-period-control button,
.report-period-control input { min-height: 38px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); text-align: center; }
.report-period-control button:disabled { opacity: .3; }
.report-v9 { display: grid; min-width: 0; gap: 10px; padding: 12px; }
.report-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.report-metrics > div { padding: 9px; text-align: center; }
.report-metrics b { margin: 0; font-size: calc(15px * var(--app-text-scale)); }
.report-metrics small { margin-top: 3px; font-size: calc(9px * var(--app-text-scale)); }
.report-section { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.report-section h2 { margin: 0 0 8px; font-size: calc(13px * var(--app-text-scale)); }
.report-section p,
.report-section li,
.report-key-values { font-size: calc(10px * var(--app-text-scale)); line-height: 1.6; }
.report-section > p { margin: 0; }
.report-key-values > div { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.report-key-values > div:last-child { border-bottom: 0; }
.report-mistakes { display: grid; gap: 5px; margin: 0; padding-left: 20px; }
.report-mistakes li { padding-left: 2px; }
.report-mistakes li span { float: right; color: var(--muted); }
.report-empty-copy { color: var(--muted); }
.report-table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.report-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: calc(9px * var(--app-text-scale)); }
.report-table th,
.report-table td { padding: 7px 5px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.report-table th { color: var(--muted); font-weight: 650; }
.report-note-form { display: grid; gap: 10px; }
.report-note-form textarea { resize: vertical; font-size: calc(10px * var(--app-text-scale)); line-height: 1.55; }
.report-export { margin-top: 12px; font-size: calc(14px * var(--app-text-scale)); }

@media (min-width: 420px) {
  .report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 389px) {
  .quick-filter-row { grid-template-columns: minmax(0, 1fr) 38px; }
  .quick-filter-copy { grid-template-columns: 1fr; gap: 5px; }
  .quick-filter-actions { grid-template-columns: 38px; }
}

@media (min-width: 600px) {
  .content {
    padding-right: 30px;
    padding-left: 30px;
  }

  .auth-shell {
    margin-right: -30px;
    margin-left: -30px;
    padding-right: 38px;
    padding-left: 38px;
  }

}

/* Keep V4 token sizes authoritative over legacy responsive rules. */
.task-progress-grid > div {
  min-height: 64px;
  padding: 10px;
}

.task-progress-grid small {
  font-size: calc(13px * var(--app-text-scale, 1));
}

.task-progress-grid b {
  font-size: calc(24px * var(--app-text-scale, 1));
}

.report-metrics-extended {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* V8.1 final cascade guard: exact values must remain authoritative. */
.stats-list-card.week-metrics {
  display: block;
  padding: 8px 16px;
}

.stats-list-card.week-metrics > .stats-list-row {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.stats-list-card.week-metrics > .stats-list-row + .stats-list-row {
  border-top: 1px solid var(--line);
}

.item-study {
  padding: 8px 0 0;
}

.item-study-header {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 4px;
  margin: 0 0 8px;
}

.item-study-pronunciation {
  gap: 10px;
  min-height: 26px;
  font-size: calc(15px * var(--app-text-scale));
  white-space: nowrap;
}

.item-study .study-word.word-short { font-size: var(--font-item-short); }
.item-study .study-word.word-medium { font-size: var(--font-item-medium); }
.item-study .study-word.word-long,
.item-study .study-word.word-xlong { font-size: var(--font-item-long); }

.inflection-row {
  min-height: 38px;
  padding: 0;
}

.primary-btn.item-study-next {
  left: 16px;
  right: 16px;
  width: auto;
  min-height: 48px;
  font-size: var(--font-button);
}

@media (max-width: 359px) {
  .item-study-pronunciation {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
  }
}

/* V10 compact mobile layout, system-back navigation, and readable meaning groups. */
.meaning-stack {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.meaning-stack > span {
  display: block;
  min-width: 0;
}

.study-toolbar {
  height: 48px;
  grid-template-columns: minmax(42px, 1fr) auto;
  gap: 6px;
}

.study-toolbar-actions {
  align-items: center;
  gap: 2px;
}

.study-toolbar .study-icon {
  width: 38px;
  height: 38px;
}

.study-progress { padding-left: 2px; }

.study-question { padding-top: 14px; }
.study-question .study-word { text-align: center; }

.study-phonetic,
.study-detail-phonetic,
.item-study-pronunciation {
  display: flex;
  min-width: 0;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.study-phonetic button,
.study-detail-phonetic button,
.item-study-pronunciation button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-option .meaning-stack {
  display: grid;
  gap: 1px;
  -webkit-line-clamp: unset;
}

.study-option .meaning-stack > span {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.study-detail-meanings,
.item-study-core {
  display: grid;
  gap: 2px;
  font-size: calc(16px * var(--app-text-scale));
  line-height: 1.35;
}

.item-study {
  padding: 18px 0 0;
}

.item-study-header {
  gap: 5px;
  margin-bottom: 7px;
  text-align: center;
}

.item-study-header .study-word {
  margin: 0;
  text-align: center;
}

.item-study-core {
  margin-bottom: 9px;
  overflow: hidden;
  -webkit-line-clamp: unset;
}

.item-study-tabs button {
  padding: 0 2px;
  font-size: calc(12px * var(--app-text-scale));
}

.quick-meaning-mask.revealed > span {
  display: block;
  color: var(--text);
}

.trend-chart {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

.trend-chart svg {
  width: auto;
  max-width: none;
}

.trend-y-labels text {
  fill: #9b9fab;
  font-size: calc(8px * var(--app-text-scale));
}

.me-title { margin: 0 0 8px; }
.cloud-card { min-height: 58px; padding: 7px 12px; }
.cloud-card .account-avatar { width: 40px; height: 40px; border-radius: 13px; }
.account-status { margin: 5px 4px 7px; }
.settings-list { gap: 6px; }
.setting,
.setting:has(small),
.setting:has(.inline-number) {
  min-height: 44px;
  padding: 4px 12px;
  border-radius: 13px;
}
.inline-number input,
.inline-number button { height: 36px; }

.reminder-form {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.reminder-toggle-row,
.reminder-time-row {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reminder-toggle-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--font-secondary);
}

.reminder-toggle-row input { width: 24px; height: 24px; }
.reminder-time-row { border-top: 1px solid var(--line); }
.reminder-time-row input { min-height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }

.student-detail-top {
  grid-template-columns: 48px minmax(0, 1fr);
  margin-top: 2px;
}

.weak-row > span {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: normal;
}

.report-section { padding: 9px 8px; }
.report-table-wrap { overflow-x: hidden; }
.report-table {
  min-width: 0;
  table-layout: fixed;
}
.report-table th,
.report-table td { padding: 5px 1px; }
.report-table th:first-child,
.report-table td:first-child { width: 19%; text-align: left; }

@media (max-width: 359px) {
  .item-study-pronunciation {
    align-items: center;
    flex-direction: row;
    gap: 5px;
    white-space: nowrap;
  }
  .item-study-pronunciation button { font-size: calc(13px * var(--app-text-scale)); }
  .study-toolbar .study-icon { width: 34px; }
  .study-master { min-width: 42px; padding: 0 5px; }
}

/* Compact visual shell; each button remains a full-height touch target. */
.bottom-nav {
  height: 62px;
  padding: 5px 7px;
  border-radius: 20px;
}

.nav-btn {
  grid-template-rows: 24px 13px;
  align-content: center;
  gap: 1px;
}

.nav-btn svg {
  width: 23px;
  height: 23px;
  padding: 1px;
}

.admin-page-title {
  align-items: center;
}

.admin-page-title h1 {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-page-title p {
  min-width: 0;
}

/* V11 option quality, annotated home refinements, and static confusion practice. */
.task-progress-grid b {
  font-size: calc(16px * var(--app-text-scale));
}

.shortcut-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shortcut-card {
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 9px 5px;
  text-align: center;
}

.shortcut-card span {
  width: 31px;
  height: 31px;
}

.shortcut-card b {
  overflow: hidden;
  font-size: calc(12px * var(--app-text-scale));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-review {
  transform: translateY(-2px);
}

.study-zh-prompt {
  min-height: 64px;
  max-height: 108px;
  overflow: hidden;
  font-size: calc(16px * var(--app-text-scale));
  line-height: 1.35;
}

.study-option {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  padding: 8px 13px;
}

.study-option-meaning {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.study-option-meaning > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-option-copy {
  display: grid !important;
  min-width: 0;
  gap: 2px;
  overflow: hidden;
  -webkit-line-clamp: unset !important;
}

.study-option-copy > b {
  overflow: hidden;
  font-size: calc(16px * var(--app-text-scale));
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-option-after-meaning {
  display: grid;
  min-width: 0;
  gap: 0;
  color: currentColor;
  font-size: calc(10px * var(--app-text-scale));
  font-weight: 500;
  line-height: 1.18;
  opacity: .82;
}

.study-option-after-meaning > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confusion-page {
  padding-bottom: 24px;
}

.confusion-header {
  display: grid;
  min-height: 48px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.confusion-header button {
  width: 40px;
  height: 40px;
  color: var(--text);
  font-size: 31px;
  line-height: 1;
}

.confusion-header h1 {
  margin: 0;
  font-size: calc(21px * var(--app-text-scale));
  text-align: center;
}

.confusion-header > span {
  color: var(--muted);
  font-size: calc(13px * var(--app-text-scale));
  font-variant-numeric: tabular-nums;
}

.confusion-score {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale));
}

.confusion-score b { color: var(--primary); }

.confusion-question {
  display: flex;
  min-height: 154px;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  text-align: center;
}

.confusion-question p {
  margin: 0;
  color: var(--text);
  font-size: calc(23px * var(--app-text-scale));
  font-weight: 700;
  line-height: 1.42;
}

.confusion-options {
  display: grid;
  gap: 9px;
}

.confusion-option {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--text);
  text-align: left;
}

.confusion-option b { font-size: calc(18px * var(--app-text-scale)); }
.confusion-option em { font-size: calc(11px * var(--app-text-scale)); font-style: normal; }
.confusion-option.correct { border-color: #58b985; background: #e9f8ef; color: #207447; }
.confusion-option.wrong { border-color: #ef7a87; background: var(--red-soft); color: #b43d4b; }

.confusion-feedback {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.confusion-answer-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.confusion-answer-head b { font-size: calc(21px * var(--app-text-scale)); }
.confusion-answer-head span { color: var(--primary); font-size: calc(12px * var(--app-text-scale)); }
.confusion-feedback > p { margin: 5px 0 2px; font-size: calc(15px * var(--app-text-scale)); }
.confusion-feedback > small { color: var(--muted); font-size: calc(11px * var(--app-text-scale)); }
.confusion-explanation { margin: 10px 0; padding: 10px 11px; border-radius: 12px; background: var(--surface-soft); font-size: calc(13px * var(--app-text-scale)); line-height: 1.45; }
.confusion-feedback > button + button,
.confusion-group-detail + button { margin-top: 9px; }

.confusion-group-detail {
  display: grid;
  gap: 0;
  margin-top: 10px;
  padding: 4px 11px;
  border-radius: 14px;
  background: var(--surface-soft);
}

.confusion-group-detail article { padding: 10px 0; border-bottom: 1px solid var(--line); }
.confusion-group-detail article:last-child { border-bottom: 0; }
.confusion-group-detail article > div { display: flex; align-items: baseline; gap: 7px; }
.confusion-group-detail b { font-size: calc(16px * var(--app-text-scale)); }
.confusion-group-detail span { color: var(--primary); font-size: calc(10px * var(--app-text-scale)); }
.confusion-group-detail p { margin: 3px 0; font-size: calc(13px * var(--app-text-scale)); }
.confusion-group-detail small { color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }

/* Official reading vocabulary tests and word-correction workflow */
.vocabulary-setting small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale));
}

.vocabulary-result-card { margin-bottom: 14px; padding: 16px; }

.vocabulary-result-card > small { color: var(--muted); }
.vocabulary-result-card > strong {
  display: block;
  margin: 4px 0 7px;
  color: var(--primary-dark);
  font-size: calc(30px * var(--app-text-scale));
  letter-spacing: -1px;
}

.vocabulary-result-card > p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale));
  line-height: 1.5;
}

.vocabulary-result-empty > strong { font-size: calc(22px * var(--app-text-scale)); }
.vocabulary-delta { display: inline-block; color: var(--primary); font-size: calc(11px * var(--app-text-scale)); font-weight: 750; }
.vocabulary-main-block { margin-top: 15px; }
.vocabulary-section-title { margin: 0 0 8px; }
.vocabulary-test-entry-list { display: grid; gap: 8px; }
.vocabulary-test-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.vocabulary-test-entry h3 { margin: 0; font-size: calc(15px * var(--app-text-scale)); }
.vocabulary-test-entry div > span { display: block; margin-top: 2px; color: var(--primary); font-size: calc(9px * var(--app-text-scale)); font-weight: 750; }
.vocabulary-test-entry p { margin: 6px 0 0; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); line-height: 1.45; }
.vocabulary-test-entry button { width: auto; min-width: 80px; padding: 9px 11px; font-size: calc(10px * var(--app-text-scale)); white-space: nowrap; }
.vocabulary-resume-note { display: block; margin-top: 6px; color: var(--primary-dark); font-size: calc(9px * var(--app-text-scale)); }
.vocabulary-choice-note { margin: 8px 3px 0; color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.vocabulary-trend-caption { margin: -3px 0 7px 2px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.vocabulary-trend-card { padding: 8px 11px 7px; }
.vocabulary-trend svg { display: block; width: 100%; }
.vocabulary-trend svg line { stroke: var(--line); stroke-width: 1; }
.vocabulary-trend svg polyline { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vocabulary-trend svg circle { fill: #fff; stroke: var(--primary); stroke-width: 3; }
.vocabulary-trend svg .grid { opacity: .62; }
.vocabulary-trend svg polyline.quick,
.vocabulary-trend svg circle.quick { stroke: var(--primary); }
.vocabulary-trend svg polyline.standard,
.vocabulary-trend svg circle.standard { stroke: #e58a16; }
.vocabulary-trend-axis text { fill: var(--muted); font-size: 8px; }
.vocabulary-trend-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.vocabulary-trend-legend { display: flex; justify-content: center; gap: 18px; margin-top: 4px; color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.vocabulary-trend-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 0; background: var(--primary); }
.vocabulary-trend-legend span.standard::before { background: #e58a16; }
.vocabulary-trend-empty { padding: 13px 4px; color: var(--muted); text-align: center; font-size: calc(10px * var(--app-text-scale)); }
.vocabulary-history { display: grid; gap: 8px; }
.vocabulary-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; align-items: center; gap: 9px; width: 100%; padding: 11px 13px; text-align: left; }
.vocabulary-history-row > div { display: grid; gap: 2px; }
.vocabulary-history-row b { font-size: calc(12px * var(--app-text-scale)); }
.vocabulary-history-row strong { font-size: calc(14px * var(--app-text-scale)); }
.vocabulary-history-row small,
.vocabulary-history-row > span { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }

.vocabulary-test-run { min-height: calc(100vh - 30px); }
.vocabulary-test-header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.vocabulary-test-header > button { width: 38px; height: 38px; border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-soft); font-size: 27px; }
.vocabulary-test-header > div { display: grid; gap: 2px; }
.vocabulary-test-header b { font-size: calc(15px * var(--app-text-scale)); }
.vocabulary-test-header span { color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.vocabulary-countdown { min-width: 46px; color: var(--primary); font-size: calc(18px * var(--app-text-scale)); text-align: right; }
.vocabulary-countdown.urgent { color: #d9485f; }
.vocabulary-progress { height: 5px; margin-bottom: 13px; overflow: hidden; border-radius: 999px; background: var(--line); }
.vocabulary-progress i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.vst-question-card { padding: 16px; border-radius: 19px; background: var(--surface); box-shadow: var(--shadow-soft); text-align: center; }
.vst-question-card small { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.vst-question-card h1 { margin: 13px 0 7px; font-size: calc(24px * var(--app-text-scale)); }
.vst-question-card p { margin: 0; font-size: calc(14px * var(--app-text-scale)); line-height: 1.45; }
.vst-question-card mark { padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary-dark); font-weight: 750; }
.vocabulary-test-options { display: grid; gap: 9px; margin-top: 14px; }
.vocabulary-test-options button { min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-soft); font-size: calc(13px * var(--app-text-scale)); font-weight: 650; text-align: left; }
.vst-options button { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; }
.quick-options button { line-height: 1.4; }
.vst-options button span { color: var(--primary); font-size: calc(10px * var(--app-text-scale)); }
.vocabulary-test-options button:disabled { opacity: .55; }
.vocabulary-unknown-btn { display: block; margin: 11px auto 0; padding: 8px 13px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.vlt-cluster-card { padding: 13px; border-radius: 19px; background: var(--surface); box-shadow: var(--shadow-soft); }
.vlt-word-bank { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vlt-word-bank span { min-width: 0; padding: 7px 4px; border-radius: 10px; background: var(--surface-soft); font-size: calc(12px * var(--app-text-scale)); font-weight: 750; text-align: center; overflow-wrap: anywhere; }
.vlt-match-list { display: grid; gap: 9px; margin: 12px 0; }
.vlt-match-list label { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 8px; }
.vlt-match-list label > span { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 6px; font-size: calc(11px * var(--app-text-scale)); line-height: 1.4; }
.vlt-match-list label > span b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 7px; background: var(--surface-soft); color: var(--primary); font-size: calc(9px * var(--app-text-scale)); }
.vlt-match-list select { width: 100%; min-width: 0; padding: 9px 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); font-size: calc(11px * var(--app-text-scale)); }
.vocabulary-answering,
.vocabulary-test-rule { color: var(--muted); font-size: calc(10px * var(--app-text-scale)); text-align: center; }
.vocabulary-answering { margin-top: 11px; color: var(--primary); }
.vocabulary-test-rule { margin: 13px 8px 0; line-height: 1.45; }
.vocabulary-final-result { padding: 21px 17px; text-align: center; }
.vocabulary-final-result > small { color: var(--muted); }
.vocabulary-final-result > strong { display: block; margin: 7px 0; color: var(--primary-dark); font-size: calc(36px * var(--app-text-scale)); }
.vocabulary-final-result p { margin: 0; color: var(--muted); font-size: calc(11px * var(--app-text-scale)); line-height: 1.5; }
.vocabulary-final-result span { display: inline-block; margin-top: 10px; color: var(--primary); font-size: calc(11px * var(--app-text-scale)); font-weight: 750; }
.vocabulary-final-result time,
.vocabulary-final-result em { display: block; margin-top: 8px; color: var(--muted); font-size: calc(9px * var(--app-text-scale)); font-style: normal; }
.vocabulary-limit-card { margin-top: 12px; padding: 14px; }
.vocabulary-limit-card p { margin: 5px 0 11px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); line-height: 1.5; }
.vocabulary-result-back { margin-top: 11px; }

.license-card { margin-bottom: 10px; padding: 15px; }
.license-card h2 { margin: 0 0 7px; font-size: var(--font-card-title); }
.license-card p { margin: 5px 0; color: var(--muted); font-size: calc(11px * var(--app-text-scale)); line-height: 1.55; }
.license-card pre,
.correction-raw pre { overflow: auto; max-height: 260px; margin: 8px 0 0; padding: 10px; border-radius: 10px; background: var(--surface-soft); color: #3d455b; font: 10px/1.5 monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

.study-more-sheet .choice span { color: var(--muted); font-size: 20px; }
.word-feedback-target { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); }
.word-feedback-target b { font-size: calc(18px * var(--app-text-scale)); }
.word-feedback-target span,
.feedback-char-count { color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.word-feedback-sheet textarea { resize: vertical; }
.feedback-char-count { margin-top: 4px; text-align: right; }

.correction-workbench-entry,
.correction-group-card { width: 100%; text-align: left; }
.correction-workbench-entry { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 18px; padding: 14px 16px; }
.correction-workbench-entry div { display: grid; gap: 3px; }
.correction-workbench-entry small { color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.correction-workbench-entry > span { color: var(--primary); font-size: calc(11px * var(--app-text-scale)); font-weight: 750; }
.correction-status-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; }
.correction-status-tabs button { flex: none; padding: 7px 10px; border-radius: 11px; background: var(--surface); color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.correction-status-tabs button.active { background: var(--primary); color: #fff; }
.correction-filters { display: grid; gap: 8px; padding: 12px; }
.correction-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.correction-date-row label { display: grid; gap: 4px; }
.correction-date-row span { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.correction-group-list { display: grid; gap: 8px; margin-top: 11px; }
.correction-group-card { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; }
.correction-group-card > div { display: grid; gap: 3px; min-width: 0; }
.correction-group-card b { font-size: calc(16px * var(--app-text-scale)); }
.correction-group-card span { color: var(--primary-dark); font-size: calc(11px * var(--app-text-scale)); }
.correction-group-card small { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.correction-group-card em { flex: none; color: var(--primary); font-size: calc(11px * var(--app-text-scale)); font-style: normal; }
.correction-detail-sheet { max-height: min(88vh, 760px); overflow-y: auto; }
.correction-detail-meta { margin-top: -5px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.correction-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.correction-compare > section { min-width: 0; padding: 10px; border-radius: 13px; background: var(--surface-soft); }
.correction-detail-sheet h4 { margin: 13px 0 7px; font-size: calc(12px * var(--app-text-scale)); }
.correction-compare h4 { margin-top: 0; }
.correction-snapshot-summary { display: grid; gap: 7px; }
.correction-snapshot-summary > div { display: grid; gap: 2px; }
.correction-snapshot-summary span { color: var(--muted); font-size: calc(8px * var(--app-text-scale)); }
.correction-snapshot-summary b { font-size: calc(10px * var(--app-text-scale)); font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.correction-raw { margin-top: 9px; }
.correction-raw summary { color: var(--primary); font-size: calc(10px * var(--app-text-scale)); }
.correction-descriptions { display: grid; gap: 6px; }
.correction-descriptions article { padding: 9px 10px; border-radius: 11px; background: var(--surface-soft); }

/* V11 startup update, guest browsing and bounded prefetch controls. */
.update-mask {
  align-items: center;
  padding: 18px;
  background: rgba(21, 27, 43, .48);
  backdrop-filter: blur(7px);
}

.update-dialog {
  width: min(100%, 430px);
  max-height: min(82vh, 690px);
  padding: 0;
  overflow: hidden auto;
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(19, 28, 55, .26);
}

.update-dialog-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 22px 20px;
}

.update-dialog-head img {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 17px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(42, 91, 211, .22);
}

.update-dialog-head h3,
.update-dialog-head p,
.update-dialog-body h4 {
  margin: 0;
}

.update-dialog-head h3 {
  font-size: calc(25px * var(--app-text-scale));
  letter-spacing: -.6px;
}

.update-dialog-head p {
  margin-top: 7px;
  font-size: calc(13px * var(--app-text-scale));
}

.update-dialog-body {
  padding: 20px 22px 8px;
  border-top: 1px solid var(--line);
}

.update-dialog-body h4 {
  font-size: calc(17px * var(--app-text-scale));
  line-height: 1.45;
}

.update-dialog .update-notes {
  margin: 14px 0 4px;
  padding: 0 0 0 22px;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: calc(13px * var(--app-text-scale));
  line-height: 1.7;
}

.update-dialog .update-notes li + li { margin-top: 8px; }
.update-empty-notes { margin: 12px 0 4px; }

.update-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
}

.update-actions.mandatory { grid-template-columns: 1fr; }

.update-actions button {
  min-width: 0;
  min-height: 57px;
  padding: 8px 5px;
  justify-content: center;
  border-radius: 16px;
  font-size: calc(12px * var(--app-text-scale));
  white-space: nowrap;
}

.update-primary-action {
  background: linear-gradient(145deg, #356de8, #2257cd);
  color: #fff;
  box-shadow: 0 9px 20px rgba(34, 87, 205, .24);
}

.guest-entry {
  margin: 0;
  color: var(--muted);
}

.guest-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.guest-mode-banner span,
.guest-mode-banner b,
.guest-account-card b,
.guest-account-card small {
  display: block;
}

.guest-mode-banner span {
  color: var(--primary);
  font-size: calc(10px * var(--app-text-scale));
  font-weight: 780;
}

.guest-mode-banner b { margin-top: 2px; font-size: calc(13px * var(--app-text-scale)); }
.guest-mode-banner button { padding: 8px 12px; border-radius: 11px; background: var(--primary); color: #fff; font-size: calc(11px * var(--app-text-scale)); font-weight: 750; }

.guest-home-card { min-height: 177px; }
.guest-home-copy { position: absolute; z-index: 1; top: calc(13% + 23px); left: 7%; max-width: 190px; margin-top: 0; color: rgba(255,255,255,.9); font-size: calc(13px * var(--app-text-scale)); line-height: 1.45; }
.guest-locked-primary { margin-top: 11px; }
.guest-feature-list { display: grid; gap: 9px; }

.guest-feature-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
}

.guest-feature-card > span,
.guest-locked-icon,
.guest-avatar {
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--purple-soft);
  color: var(--primary);
  font-weight: 850;
}

.guest-feature-card > span { width: 38px; height: 38px; }
.guest-feature-card b,
.guest-feature-card small { display: block; }
.guest-feature-card small { margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); line-height: 1.35; }
.guest-feature-card em { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); font-style: normal; white-space: nowrap; }

.guest-book-card { pointer-events: none; }
.guest-lock { color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }

.guest-locked-page {
  padding: 28px 20px;
  text-align: center;
}

.guest-locked-icon { width: 52px; height: 52px; margin: 0 auto 14px; }
.guest-locked-page h2 { margin: 0; font-size: calc(19px * var(--app-text-scale)); }
.guest-locked-page p { margin: 9px auto 16px; max-width: 280px; color: var(--muted); font-size: calc(11px * var(--app-text-scale)); line-height: 1.55; }
.guest-preview-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-bottom: 20px; }
.guest-preview-points span { padding: 6px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }

.guest-account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.guest-account-card small { margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.guest-avatar { width: 46px; height: 46px; flex: none; }
.guest-account-action { margin-top: 16px; }
.guest-login-sheet { text-align: left; }
.offline-books-action { margin-top: 9px; }

@media (max-width: 365px) {
  .update-mask { padding: 12px; }
  .update-dialog-head { padding: 20px 18px 17px; }
  .update-dialog-body { padding: 17px 18px 6px; }
  .update-actions { gap: 6px; padding-right: 10px; padding-left: 10px; }
  .update-actions button { min-height: 52px; font-size: calc(11px * var(--app-text-scale)); }
}
.correction-descriptions p { margin: 0 0 4px; font-size: calc(11px * var(--app-text-scale)); line-height: 1.45; }
.correction-descriptions small { color: var(--muted); font-size: calc(8px * var(--app-text-scale)); }
.correction-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.correction-actions button { justify-content: center; padding-inline: 5px; font-size: calc(10px * var(--app-text-scale)); }

@media (max-width: 390px) {
  .vocabulary-test-entry { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vocabulary-test-entry button { width: 100%; }
  .vlt-word-bank { grid-template-columns: repeat(2, 1fr); }
  .vlt-match-list label { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .vlt-match-list select { font-size: calc(12px * var(--app-text-scale)); }
  .correction-compare { grid-template-columns: 1fr; }
  .correction-actions { grid-template-columns: 1fr; }
}

/* Personal and assigned wordbook vertical slice. */
.wordbook-source-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 2px 0 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-soft);
}

.wordbook-source-tabs button {
  min-width: 0;
  min-height: 39px;
  padding: 7px 4px;
  border-radius: 11px;
  color: var(--muted);
  font-size: calc(12px * var(--app-text-scale));
  font-weight: 680;
  white-space: nowrap;
}

.wordbook-source-tabs button.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.user-wordbook-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.user-wordbook-title .mini-btn { flex: none; }
.user-wordbook-title-actions { display: flex; flex: none; gap: 7px; }
.user-wordbook-list { display: grid; gap: 10px; }

.user-wordbook-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
}

.user-wordbook-card .book-main,
.user-wordbook-card .book-name,
.user-wordbook-card .book-meta { min-width: 0; }
.user-wordbook-card .book-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-wordbook-card .book-meta { display: block; margin-top: 4px; color: var(--muted); }

.user-wordbook-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--purple-soft);
  color: var(--primary);
  font-weight: 850;
}

.user-wordbook-empty { margin-top: 30px; }
.user-wordbook-detail-page { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.user-wordbook-detail-title { align-items: center; }
.user-wordbook-detail-title > div { min-width: 0; }
.user-wordbook-detail-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-wordbook-detail-title p { margin: 2px 0 0; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }

.user-wordbook-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  text-align: center;
}

.user-wordbook-summary div { display: grid; gap: 3px; }
.user-wordbook-summary b { font-size: calc(19px * var(--app-text-scale)); }
.user-wordbook-summary small { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.user-wordbook-cache-note,
.user-wordbook-list-note { margin: 9px 2px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); text-align: center; }
.user-wordbook-item-list { display: grid; gap: 8px; }
.user-wordbook-item { width: 100%; padding: 13px 14px; color: inherit; text-align: left; }
.user-wordbook-item > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.user-wordbook-item > div b { min-width: 0; overflow-wrap: anywhere; font-size: calc(15px * var(--app-text-scale)); }
.user-wordbook-item > div span { flex: none; padding: 3px 7px; border-radius: 999px; background: var(--green-soft); color: var(--primary); font-size: calc(8px * var(--app-text-scale)); }
.user-wordbook-item p { margin: 7px 0 0; line-height: 1.45; }
.user-wordbook-item small { display: block; margin-top: 6px; color: var(--orange); font-size: calc(9px * var(--app-text-scale)); }
.user-wordbook-item > em { display: block; margin-top: 8px; color: var(--primary); font-size: calc(10px * var(--app-text-scale)); font-style: normal; text-align: right; }
.user-wordbook-item.is-unmatched { border-color: color-mix(in srgb, var(--orange) 34%, var(--line)); }

.preview-toolbar-actions { display: flex; align-items: center; gap: 7px; }
.study-edit-entry {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--primary);
  border-radius: 11px;
  background: var(--green-soft);
  color: var(--primary);
  font-size: calc(12px * var(--app-text-scale));
  font-weight: 700;
}

.user-wordbook-correction-sheet { max-height: 92vh; overflow-y: auto; }
.user-wordbook-correction-sheet .sheet-title-row { align-items: flex-start; }
.user-wordbook-correction-sheet .sheet-title-row h3,
.user-wordbook-correction-sheet .sheet-title-row p { margin: 0; }
.user-wordbook-correction-sheet .sheet-title-row p { margin-top: 4px; color: var(--muted); font-size: calc(11px * var(--app-text-scale)); }
.user-wordbook-correction-sheet form { display: grid; gap: 12px; margin-top: 14px; }
.user-wordbook-correction-sheet .form-label { display: grid; gap: 6px; margin: 0; }
.user-wordbook-correction-sheet textarea { resize: vertical; line-height: 1.5; }
.user-wordbook-correction-note { margin: 0; color: var(--muted); font-size: calc(11px * var(--app-text-scale)); line-height: 1.5; }
.user-wordbook-correction-history-wrap { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.user-wordbook-correction-history-head { display: flex; align-items: center; justify-content: space-between; }
.user-wordbook-correction-history-head span { color: var(--muted); font-size: calc(11px * var(--app-text-scale)); }
.user-wordbook-correction-history { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.user-wordbook-correction-history li,
.user-wordbook-correction-original { padding: 10px 11px; border-radius: 12px; background: var(--surface-soft); }
.user-wordbook-correction-history li > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.user-wordbook-correction-history time { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.user-wordbook-correction-history li > span,
.user-wordbook-correction-original > span { display: block; margin-top: 6px; overflow-wrap: anywhere; font-weight: 700; }
.user-wordbook-correction-history p,
.user-wordbook-correction-original p { margin: 5px 0 0; color: var(--muted); font-size: calc(11px * var(--app-text-scale)); line-height: 1.45; }
.user-wordbook-correction-history li.is-empty { color: var(--muted); text-align: center; }
.user-wordbook-correction-original { border: 1px dashed var(--line); background: transparent; }
.user-wordbook-correction-history-error { color: var(--red); font-size: calc(11px * var(--app-text-scale)); }

.user-wordbook-detail-actions {
  position: fixed;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 9px;
  max-width: 600px;
  margin: auto;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
}
.user-wordbook-detail-actions > :only-child { grid-column: 1 / -1; }
.danger-outline { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); color: var(--red); }

.user-wordbook-modal .sheet { max-height: 92vh; background: var(--surface); }
.user-wordbook-composer-sheet .form-label { margin-top: 15px; }
.user-wordbook-source-input { min-height: 190px; resize: vertical; line-height: 1.6; }
.user-wordbook-import-example { margin-top: 7px; color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.user-wordbook-import-feedback { min-height: 18px; margin-top: 7px; font-size: calc(10px * var(--app-text-scale)); line-height: 1.45; }
.user-wordbook-import-feedback.is-error { color: var(--red); }
.user-wordbook-preview-head h3,
.user-wordbook-preview-head p { margin: 0; }
.user-wordbook-preview-head p { margin-top: 5px; }
.user-wordbook-preview-list { display: grid; gap: 10px; margin-top: 15px; }

.user-wordbook-preview-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-soft);
}

.user-wordbook-preview-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--purple-soft);
  color: var(--primary);
  font-size: calc(9px * var(--app-text-scale));
  font-weight: 800;
}

.user-wordbook-preview-fields { display: grid; gap: 9px; min-width: 0; }
.user-wordbook-preview-fields label { display: grid; gap: 4px; min-width: 0; }
.user-wordbook-preview-fields label > span { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.user-wordbook-preview-fields input,
.user-wordbook-preview-fields select { width: 100%; min-width: 0; }
.user-wordbook-official-target { padding: 8px 9px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: calc(9px * var(--app-text-scale)); line-height: 1.5; overflow-wrap: anywhere; }
.user-wordbook-official-target b { color: var(--text); }
.user-wordbook-preview-note { margin: 12px 2px 0; }
.user-wordbook-preview-actions { position: sticky; bottom: calc(-25px - env(safe-area-inset-bottom)); z-index: 2; padding: 12px 0 calc(25px + env(safe-area-inset-bottom)); background: var(--surface); }

.material-import-sheet .form-label,
.material-candidate-sheet .form-label { margin-top: 14px; }
.material-source-input { min-height: 150px; resize: vertical; line-height: 1.55; }
.material-privacy-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--muted);
  font-size: calc(9px * var(--app-text-scale));
  line-height: 1.45;
}
.material-privacy-note b { color: var(--primary); white-space: nowrap; }
.material-import-feedback { min-height: 20px; margin: 9px 1px 2px; color: var(--primary); font-size: calc(10px * var(--app-text-scale)); line-height: 1.45; }
.material-import-feedback.is-error { color: var(--red); }
.material-import-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; margin-top: 7px; }
.material-cancel-btn { display: block; margin: 12px auto 0; }
.material-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.material-review-head h3,
.material-review-head p { margin: 0; }
.material-review-head p { margin-top: 5px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.material-review-head > span { flex: none; padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--primary); font-size: calc(9px * var(--app-text-scale)); font-weight: 750; }
.material-review-tools { display: flex; align-items: center; gap: 12px; margin: 12px 2px 8px; }
.material-review-tools .text-btn { padding: 0; }
.material-review-tools > span { margin-left: auto; color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.material-candidate-list { display: grid; gap: 9px; }
.material-candidate-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-soft);
  opacity: .72;
  transition: opacity .16s ease, border-color .16s ease;
}
.material-candidate-row.is-selected { border-color: color-mix(in srgb, var(--primary) 32%, var(--line)); opacity: 1; }
.material-candidate-check { display: flex; justify-content: center; padding-top: 3px; }
.material-candidate-check input { width: 19px; height: 19px; accent-color: var(--primary); }
.material-candidate-fields { display: grid; gap: 8px; min-width: 0; }
.material-candidate-fields input { width: 100%; min-width: 0; }
.material-candidate-fields small { color: var(--muted); overflow-wrap: anywhere; font-size: calc(8px * var(--app-text-scale)); }
.material-candidate-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.material-candidate-meta span { padding: 3px 7px; border-radius: 999px; background: var(--purple-soft); color: var(--primary); font-size: calc(8px * var(--app-text-scale)); }
.material-candidate-meta b { color: var(--muted); font-size: calc(8px * var(--app-text-scale)); }

.diagnosis-entry {
  display: flex;
  width: 100%;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 18px;
  padding: 13px 15px;
  text-align: left;
}
.diagnosis-entry b,
.diagnosis-entry small { display: block; }
.diagnosis-entry b { font-size: calc(16px * var(--app-text-scale)); }
.diagnosis-entry small { margin-top: 4px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.diagnosis-entry > span { flex: none; color: var(--primary); font-size: calc(13px * var(--app-text-scale)); }
.diagnosis-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; }
.diagnosis-facts > div { min-width: 0; padding: 13px 14px; background: var(--surface); }
.diagnosis-facts small,
.diagnosis-facts b { display: block; }
.diagnosis-facts small { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.diagnosis-facts b { margin-top: 4px; font-size: calc(17px * var(--app-text-scale)); overflow-wrap: anywhere; }
.diagnosis-rule-list { display: grid; gap: 9px; }
.diagnosis-rule { padding: 14px 15px; }
.diagnosis-rule > span { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: var(--green-soft); color: var(--primary); font-size: calc(8px * var(--app-text-scale)); font-weight: 750; }
.diagnosis-rule h2,
.diagnosis-rule p { margin: 0; }
.diagnosis-rule h2 { margin-top: 8px; font-size: calc(15px * var(--app-text-scale)); }
.diagnosis-rule p { margin-top: 5px; color: var(--muted); font-size: calc(11px * var(--app-text-scale)); line-height: 1.55; }
.diagnosis-detail-card { margin-top: 12px; padding: 14px; }
.diagnosis-detail-card h2 { margin: 0 0 9px; font-size: calc(14px * var(--app-text-scale)); }
.diagnosis-word-list { display: grid; gap: 8px; }
.diagnosis-word-list > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.diagnosis-word-list > div:first-child { padding-top: 0; border-top: 0; }
.diagnosis-word-list span { min-width: 0; }
.diagnosis-word-list b,
.diagnosis-word-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagnosis-word-list b { font-size: calc(13px * var(--app-text-scale)); }
.diagnosis-word-list small { margin-top: 2px; color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.diagnosis-word-list em { flex: none; color: var(--primary); font-size: calc(9px * var(--app-text-scale)); font-style: normal; }
.diagnosis-error-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.diagnosis-error-types > span { padding: 9px 6px; border-radius: 11px; background: var(--surface-soft); text-align: center; }
.diagnosis-error-types b,
.diagnosis-error-types small { display: block; }
.diagnosis-error-types b { font-size: calc(15px * var(--app-text-scale)); }
.diagnosis-error-types small { margin-top: 2px; color: var(--muted); font-size: calc(8px * var(--app-text-scale)); }
.diagnosis-training-action { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; margin-top: 14px; box-shadow: 0 8px 24px rgba(38, 99, 183, .2); }
.diagnosis-empty,
.diagnosis-stable { padding: 18px; }
.diagnosis-empty b,
.diagnosis-stable b { font-size: calc(15px * var(--app-text-scale)); }
.diagnosis-empty p,
.diagnosis-stable p { margin: 7px 0 0; color: var(--muted); font-size: calc(11px * var(--app-text-scale)); line-height: 1.55; }

@media (max-width: 365px) {
  .wordbook-source-tabs button { font-size: calc(11px * var(--app-text-scale)); }
  .user-wordbook-card { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; }
  .user-wordbook-icon { width: 38px; height: 38px; }
  .user-wordbook-preview-row { grid-template-columns: 22px minmax(0, 1fr); padding: 10px; }
  .user-wordbook-preview-number { width: 21px; height: 21px; }
  .user-wordbook-title-actions { gap: 5px; }
  .user-wordbook-title-actions .mini-btn { padding-right: 9px; padding-left: 9px; }
  .material-import-actions { grid-template-columns: 1fr; }
}

.teacher-content-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 20px;
}
.teacher-content-navigation > button {
  position: relative;
  min-height: 86px;
  padding: 16px 28px 16px 14px;
  text-align: left;
}
.teacher-content-navigation b,
.teacher-content-navigation small { display: block; }
.teacher-content-navigation b { font-size: calc(16px * var(--app-text-scale)); }
.teacher-content-navigation small { margin-top: 5px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); line-height: 1.5; }
.teacher-content-navigation span { position: absolute; top: 25px; right: 14px; color: var(--primary); font-size: 24px; }
.teacher-management-title { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.teacher-management-title h1 { margin: 0; }
.teacher-management-title p { margin: 4px 0 0; font-size: calc(10px * var(--app-text-scale)); }
.teacher-management-title .text-action { flex: none; width: auto; margin: 0; font-size: calc(12px * var(--app-text-scale)); }
.teacher-paper-list { display: grid; gap: 14px; }
.teacher-paper-card,
.teacher-wordbook-tools { padding: 15px; }
.teacher-wordbook-tools { margin-bottom: 12px; }
.teacher-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.teacher-section-head h2,
.teacher-section-head > b { min-width: 0; margin: 0; font-size: calc(16px * var(--app-text-scale)); line-height: 1.4; overflow-wrap: anywhere; }
.teacher-section-head > span { flex: none; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.teacher-section-head .teacher-paper-status { padding: 5px 7px; border-radius: 9px; background: var(--orange-soft); color: #996316; font-size: calc(9px * var(--app-text-scale)); white-space: nowrap; }
.teacher-section-head .teacher-paper-status.is-open { background: var(--green-soft); color: var(--primary); }
.teacher-paper-card > p { margin: 7px 0 12px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); line-height: 1.6; }
.teacher-paper-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 10px 0; border-radius: 12px; background: var(--surface-soft); text-align: center; }
.teacher-paper-metrics > div { display: grid; gap: 3px; }
.teacher-paper-metrics b { font-size: calc(20px * var(--app-text-scale)); }
.teacher-paper-metrics small { color: var(--muted); font-size: calc(9px * var(--app-text-scale)); }
.teacher-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.teacher-action-grid > button { min-width: 0; min-height: 40px; margin: 0; padding: 10px 8px; font-size: calc(12px * var(--app-text-scale)); }
.teacher-action-grid > span { align-self: center; text-align: center; }
.teacher-empty-note { margin: 10px 0 0; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); line-height: 1.6; }
.teacher-inline-error { color: var(--red); font-size: calc(10px * var(--app-text-scale)); line-height: 1.5; }
.teacher-assignment-details { margin-top: 12px; border-top: 1px solid var(--line); }
.teacher-assignment-details > summary { padding: 12px 0 2px; color: var(--primary); font-size: calc(12px * var(--app-text-scale)); font-weight: 700; cursor: pointer; }
.teacher-assignment-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.teacher-assignment-result:last-child { border-bottom: 0; padding-bottom: 0; }
.teacher-assignment-result > div { flex: 1; min-width: 0; }
.teacher-assignment-result b,
.teacher-assignment-result small { display: block; overflow-wrap: anywhere; }
.teacher-assignment-result b { font-size: calc(13px * var(--app-text-scale)); }
.teacher-assignment-result small { margin-top: 4px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); line-height: 1.5; }
.teacher-assignment-result > button { flex: none; width: auto; margin: 0; min-height: 40px; padding: 5px 0 5px 8px; white-space: nowrap; font-size: calc(10px * var(--app-text-scale)); }
.teacher-inline-error .text-action { display: inline-block; width: auto; margin: 0; padding: 4px; }
.teacher-error-distribution { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.teacher-error-distribution > span { padding: 6px 8px; border-radius: 8px; background: var(--red-soft); color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.teacher-error-distribution b { margin-left: 3px; color: var(--red); }
.teacher-wrong-items { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.teacher-wrong-items li { display: flex; justify-content: space-between; gap: 10px; font-size: calc(11px * var(--app-text-scale)); }
.teacher-wrong-items span { min-width: 0; overflow-wrap: anywhere; }
.teacher-wrong-items b { flex: none; color: var(--red); }
.teacher-assignment-sheet { max-height: 92vh; overflow-y: auto; }
.teacher-assignment-sheet .form-label { margin-top: 15px; }
.teacher-student-picker { display: grid; gap: 7px; max-height: 240px; overflow-y: auto; }
.teacher-student-picker label { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.teacher-student-picker input { width: 19px; height: 19px; flex: none; accent-color: var(--primary); }
.teacher-student-picker span { min-width: 0; overflow-wrap: anywhere; font-size: calc(13px * var(--app-text-scale)); }
.teacher-assignment-sheet .form-row > label,
.dictation-export-form .form-row > label { min-width: 0; }
.teacher-assignment-sheet .form-row input,
.dictation-export-form .form-row input { width: 100%; min-width: 0; }
.assigned-wordbook-plan { margin-bottom: 12px; padding: 14px; }
.assigned-wordbook-plan > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assigned-wordbook-plan b { color: var(--primary); font-size: calc(13px * var(--app-text-scale)); }
.assigned-wordbook-plan span { color: var(--muted); font-size: calc(11px * var(--app-text-scale)); }
.assigned-wordbook-plan p { margin: 7px 0 0; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); }
.student-dictation-tasks { display: grid; gap: 9px; }
.student-dictation-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px; }
.student-dictation-card b,
.student-dictation-card small { display: block; }
.student-dictation-card b { overflow-wrap: anywhere; font-size: calc(14px * var(--app-text-scale)); }
.student-dictation-card small { margin-top: 5px; color: var(--muted); font-size: calc(10px * var(--app-text-scale)); line-height: 1.5; }
.student-dictation-card .mini-btn { flex: none; font-size: calc(11px * var(--app-text-scale)); }
.dictation-token-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
.dictation-token-actions .text-action { width: auto; margin: 0; padding: 6px 0; font-size: calc(10px * var(--app-text-scale)); }
.weak-list > .weak-row > b { overflow: visible; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }

@media (max-width: 365px) {
  .teacher-content-navigation { gap: 8px; }
  .teacher-content-navigation > button { padding-left: 11px; }
  .teacher-content-navigation b { font-size: calc(14px * var(--app-text-scale)); }
  .teacher-paper-card,
  .teacher-wordbook-tools { padding: 12px; }
  .teacher-section-head h2 { font-size: calc(14px * var(--app-text-scale)); }
}

/* Personal favorite wordbooks. Kept visually distinct from revisioned teacher wordbooks. */
.personal-wordbooks-title,
.personal-wordbook-detail-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.personal-wordbooks-title > div,
.personal-wordbook-detail-title > div {
  min-width: 0;
}

.personal-wordbooks-title h1,
.personal-wordbook-detail-title h1 {
  margin: 0;
  overflow-wrap: anywhere;
}

.personal-wordbooks-title p,
.personal-wordbook-detail-title p {
  margin: 5px 0 0;
}

.personal-wordbook-create {
  width: auto;
  min-width: 82px;
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: calc(12px * var(--app-text-scale));
}

.personal-wordbook-list,
.personal-wordbook-item-list {
  display: grid;
  gap: 10px;
}

.personal-wordbook-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
}

.personal-wordbook-open {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px 8px 14px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.personal-wordbook-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--primary);
  font-size: calc(15px * var(--app-text-scale));
  font-weight: 900;
}

.personal-wordbook-open b,
.personal-wordbook-open small {
  display: block;
  overflow-wrap: anywhere;
}

.personal-wordbook-open b {
  font-size: calc(15px * var(--app-text-scale));
}

.personal-wordbook-open small {
  margin-top: 5px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale));
}

.personal-wordbook-open > i {
  color: var(--muted);
  font-size: 24px;
  font-style: normal;
}

.personal-wordbook-more {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
}

.personal-wordbook-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}

.personal-wordbook-item b {
  font-size: calc(16px * var(--app-text-scale));
}

.personal-wordbook-item p {
  display: -webkit-box;
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale));
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.personal-wordbook-item > button {
  min-width: 52px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--red);
  font-size: calc(11px * var(--app-text-scale));
  font-weight: 700;
}

.personal-wordbook-sheet {
  max-height: 86vh;
  overflow-y: auto;
}

.personal-wordbook-sheet form {
  display: grid;
  gap: 10px;
}

.personal-wordbook-action-list,
.personal-wordbook-picker {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.personal-wordbook-action-list > button,
.personal-wordbook-picker > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  font: inherit;
  font-weight: 700;
}

.personal-wordbook-action-list > button.danger {
  color: var(--red);
}

.personal-wordbook-picker > button:disabled {
  opacity: .62;
}

.personal-wordbook-picker b,
.personal-wordbook-picker small {
  display: block;
}

.personal-wordbook-picker small {
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(10px * var(--app-text-scale));
  font-weight: 500;
}

.personal-wordbook-picker i {
  flex: none;
  color: var(--primary);
  font-size: calc(11px * var(--app-text-scale));
  font-style: normal;
}

.personal-wordbook-default-note,
.personal-wordbook-system-note,
.personal-wordbook-target-word,
.personal-wordbook-delete-copy {
  margin: 10px 0;
  color: var(--muted);
  font-size: calc(11px * var(--app-text-scale));
  line-height: 1.6;
}

.personal-wordbook-default-note {
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--primary);
  font-weight: 700;
}

.personal-wordbook-system-note {
  padding: 8px 4px;
}

.personal-wordbook-target-word {
  margin-top: 0;
  color: var(--primary);
  font-size: calc(18px * var(--app-text-scale));
  font-weight: 900;
}

.quick-favorite-more,
.study-favorite-more {
  color: var(--primary);
  font-weight: 900;
}

.quick-filter-actions:has(.quick-favorite-more) {
  grid-template-columns: repeat(4, 38px);
}

@media (max-width: 389px) {
  .quick-filter-actions:has(.quick-favorite-more) { grid-template-columns: repeat(2, 38px); }
}

.sheet-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-title-row h3 { margin: 8px 0; }
.review-history-sheet > p,
.review-backlog-summary p,
.review-backlog-status { color: var(--muted); line-height: 1.6; font-size: calc(13px * var(--app-text-scale)); }
.review-history-sheet .choice { justify-content: space-between; min-height: 48px; }
.review-history-sheet .choice.selected { border-color: var(--primary); background: var(--green-soft); color: var(--primary); }
.review-backlog-summary { padding: 18px; margin-bottom: 14px; }
.review-backlog-summary .text-action { padding: 4px 0; }
.review-backlog-list { display: grid; gap: 8px; margin: 16px 0; }
.review-backlog-word { display: flex; align-items: center; justify-content: space-between; padding: 16px; gap: 12px; }
.review-backlog-word > div { min-width: 0; overflow-wrap: anywhere; }
.review-backlog-word b { font-size: calc(20px * var(--app-text-scale)); }
.review-backlog-word p { margin: 7px 0; font-size: calc(14px * var(--app-text-scale)); }
.review-backlog-word small { color: var(--muted); }
.review-backlog-word .study-icon { flex-shrink: 0; }

.item-study-next .study-swipe-hint { display: inline-block; margin-left: 12px; font-size: calc(11px * var(--app-text-scale)); font-weight: 400; opacity: .85; }
/* On-demand vocabulary cache status stays within the existing book pages. */
.vocabulary-cache-status { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 16px; color:var(--muted); font-size:12px; }
.vocabulary-cache-status button { background:transparent; border:0; color:var(--primary); font-size:12px; padding:6px 0 6px 12px; }
.ai-story-header { display:flex; align-items:center; gap:12px; padding:10px 0; }
.ai-story-header h1 { flex:1; font-size:22px; margin:0; }
.ai-story-library-link { flex:none; border:0; padding:8px 4px; color:var(--primary); background:transparent; font-size:calc(11px * var(--app-text-scale)); font-weight:750; }
.ai-story-placeholder { text-align:center; padding:64px 16px 24px; }
.ai-story-art { position:relative; display:grid; place-items:center; width:144px; height:144px; margin:0 auto 36px; color:var(--primary); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:32px; font-family:Georgia,serif; font-size:60px; transform:rotate(-6deg); }
.ai-story-art span { position:absolute; right:10px; top:4px; font-size:30px; color:#e6a438; }
.ai-story-badge { display:inline-block; padding:6px 14px; border-radius:20px; color:var(--primary); background:var(--surface-3); font-size:13px; }
.ai-story-placeholder h2 { margin:24px 0 14px; font-size:22px; line-height:1.5; }
.ai-story-placeholder p { font-size:15px; line-height:1.9; color:var(--muted); margin:0 0 40px; }
.wordbook-source-tabs.two-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }

.ai-config-entry { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:66px; margin:0 0 18px; padding:14px 16px; text-align:left; box-shadow:none; }
.ai-config-entry div { display:grid; min-width:0; gap:3px; }
.ai-config-entry small { color:var(--muted); font-size:calc(10px * var(--app-text-scale)); line-height:1.45; }
.ai-config-entry > span { flex:none; margin-left:10px; color:var(--primary); font-size:calc(11px * var(--app-text-scale)); font-weight:750; }
.page-title.ai-config-title { display:block; }
.page-title.ai-config-title h1 { font-size:calc(24px * var(--app-text-scale)); white-space:nowrap; }
.page-title.ai-config-title p { margin:5px 0 0; max-width:none; font-size:calc(10px * var(--app-text-scale)); text-align:left; }
.ai-provider-list { display:grid; gap:12px; }
.ai-provider-card { display:grid; gap:12px; padding:16px; }
.ai-provider-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ai-provider-head > div { display:grid; gap:3px; }
.ai-provider-head span { font-size:calc(18px * var(--app-text-scale)); font-weight:800; }
.ai-provider-head b { color:var(--muted); font-size:calc(10px * var(--app-text-scale)); font-weight:600; }
.ai-provider-head em { padding:5px 8px; border-radius:999px; background:var(--surface-soft); color:var(--muted); font-size:calc(9px * var(--app-text-scale)); font-style:normal; font-weight:750; }
.ai-provider-head em.ready { background:var(--green-soft); color:var(--primary); }
.ai-provider-card > label { display:grid; gap:6px; }
.ai-provider-card code { padding:10px 11px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); color:var(--text); font-size:calc(11px * var(--app-text-scale)); overflow-wrap:anywhere; }
.ai-provider-switches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ai-provider-switches label { display:flex; align-items:center; gap:7px; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; color:var(--text); font-size:calc(11px * var(--app-text-scale)); }
.ai-provider-switches label.danger { grid-column:1 / -1; color:var(--red); }
.ai-provider-switches input { accent-color:var(--primary); }
.ai-provider-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ai-provider-actions button { justify-content:center; }

.ai-story-page { min-height:calc(100vh - 20px); }
.ai-story-form { display:grid; gap:12px; padding:16px; }
.ai-story-form .ai-story-art.compact { width:74px; height:74px; margin:2px auto 4px; border-radius:20px; box-shadow:none; font-size:30px; transform:rotate(-4deg); }
.ai-story-form .ai-story-art.compact span { right:5px; top:1px; font-size:18px; }
.ai-story-form textarea { min-height:116px; resize:vertical; line-height:1.55; }
.ai-story-word-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ai-story-word-heading > div { display:flex; gap:6px; }
.ai-story-word-heading button { min-height:34px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--primary); background:var(--surface); font-size:calc(10px * var(--app-text-scale)); font-weight:750; }
.ai-story-form .form-help { margin:-4px 0 0; color:var(--muted); font-size:calc(10px * var(--app-text-scale)); line-height:1.5; }
.ai-story-result { margin-top:12px; padding:16px; }
.ai-story-result-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ai-story-result-head b { font-size:calc(16px * var(--app-text-scale)); }
.ai-story-result-head small { color:var(--muted); font-size:calc(9px * var(--app-text-scale)); text-align:right; }
.ai-story-content { margin-bottom:14px; color:var(--text); font-size:calc(13px * var(--app-text-scale)); line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.ai-story-saved-note { margin:0 0 10px; color:var(--primary); font-size:calc(10px * var(--app-text-scale)); line-height:1.5; }
.ai-story-result-list { display:grid; gap:12px; margin-bottom:12px; }
.ai-story-result-card { padding:14px; }
.ai-story-article-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ai-story-article-heading small { color:var(--muted); }
.ai-story-result-actions { display:flex; justify-content:flex-end; }
.ai-story-result-actions button { width:auto; min-height:38px; padding:8px 12px; }
.ai-story-status { min-height:28px; padding:9px 4px; color:var(--muted); font-size:calc(11px * var(--app-text-scale)); line-height:1.5; }
.ai-story-status.error { color:var(--red); }

.floating-session-dock {
  position: fixed;
  z-index: 30;
  top: 72px;
  right: 12px;
  display: flex;
  max-width: calc(100vw - 16px);
  align-items: center;
  gap: 5px;
  color: var(--text);
  user-select: none;
}

.floating-session-dock.expanded {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 30px rgba(20, 45, 35, .2);
  backdrop-filter: blur(12px);
}

.floating-session-handle {
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 28%, transparent);
  font-size: 17px;
  font-weight: 850;
  touch-action: none;
}

.floating-session-panel {
  display: grid;
  width: min(310px, calc(100vw - 78px));
  min-width: 0;
}

.floating-session-row {
  display: flex;
  min-width: 0;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 3px 4px 3px 8px;
}

.floating-session-row + .floating-session-row { border-top: 1px solid var(--line); }
.floating-session-copy { display: block; min-width: 0; flex: 1; }
.floating-session-copy b,
.floating-session-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floating-session-copy b { font-size: calc(11px * var(--app-text-scale)); }
.floating-session-copy small { margin-top: 2px; color: var(--muted); font-size: calc(8px * var(--app-text-scale)); }
.floating-session-actions { display: flex; flex: none; align-items: center; gap: 2px; }
.floating-session-actions button { min-width: 31px; height: 34px; padding: 0 7px; border: 0; border-radius: 11px; color: var(--primary); background: var(--surface-soft); font-size: 11px; }

.favorite-library-tabs,
.article-filter-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 0 14px; padding:4px; border-radius:14px; background:var(--surface-soft); }
.favorite-library-tabs button,
.article-filter-tabs button { min-height:40px; border:0; border-radius:11px; color:var(--muted); background:transparent; font-size:calc(11px * var(--app-text-scale)); font-weight:750; }
.favorite-library-tabs button.active,
.article-filter-tabs button.active { color:var(--primary); background:var(--surface); box-shadow:0 2px 8px rgba(27,55,43,.08); }
.article-library-title .secondary-btn { width:auto; min-height:42px; padding:10px 14px; }
.article-library-title-copy { display:flex; align-items:center; min-width:0; gap:8px; }
.article-library-title-copy > div { min-width:0; }
.local-article-list { display:grid; gap:10px; }
.local-article-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px; }
.local-article-open { display:grid; min-width:0; gap:7px; border:0; padding:0; text-align:left; color:var(--text); background:transparent; }
.local-article-kind { width:max-content; padding:4px 8px; border-radius:999px; color:var(--primary); background:var(--green-soft); font-size:calc(9px * var(--app-text-scale)); font-weight:750; }
.local-article-open b { overflow-wrap:anywhere; font-size:calc(16px * var(--app-text-scale)); line-height:1.4; }
.local-article-open p { display:-webkit-box; margin:0; overflow:hidden; color:var(--muted); font-size:calc(11px * var(--app-text-scale)); line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.local-article-open small { color:var(--muted); font-size:calc(9px * var(--app-text-scale)); }
.local-article-card-actions { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
.local-article-card-actions button { min-width:42px; min-height:36px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface); }
.local-article-card-actions button.active { color:#d69a1e; }
.local-article-card-actions button.danger { border:0; color:var(--red); background:transparent; font-size:calc(9px * var(--app-text-scale)); }
.local-article-detail { display:grid; gap:14px; }
.local-article-detail > header { display:flex; align-items:flex-start; gap:12px; padding:8px 0; }
.local-article-detail > header > div { display:grid; min-width:0; gap:5px; }
.local-article-detail > header span { color:var(--primary); font-size:calc(10px * var(--app-text-scale)); font-weight:750; }
.local-article-detail > header h1 { margin:0; overflow-wrap:anywhere; font-size:calc(22px * var(--app-text-scale)); line-height:1.4; }
.local-article-detail > header small { color:var(--muted); }
.local-article-words { display:flex; flex-wrap:wrap; gap:6px; }
.local-article-words span { padding:5px 8px; border-radius:999px; color:var(--primary); background:var(--green-soft); font-size:calc(9px * var(--app-text-scale)); }
.local-article-content { padding:18px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:calc(13px * var(--app-text-scale)); line-height:1.85; }
.local-article-detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.local-article-detail-actions .active { color:#9a6a00; border-color:#e7c36c; background:#fff9e8; }
.local-article-detail-actions .danger { color:var(--red); border-color:color-mix(in srgb,var(--red) 35%,var(--line)); }
.personal-wordbook-sheet [data-delete-local-article] { background:var(--red); }

/* My page information architecture, user help and feedback closure. */
.me-section-list { display:grid; gap:16px; }
.me-section { display:grid; gap:7px; }
.me-section > h2 { margin:0 4px; color:var(--muted); font-size:calc(11px * var(--app-text-scale)); font-weight:750; letter-spacing:.06em; }
.me-settings-group { overflow:hidden; gap:0; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:0 4px 18px rgba(69,75,130,.045); }
.me-settings-group .setting,
.me-settings-group .setting:has(small),
.me-settings-group .setting:has(.inline-number) { min-height:48px; border-radius:0; background:transparent; box-shadow:none; }
.me-settings-group .setting + .setting { border-top:1px solid var(--line); }
.me-settings-group .setting > div:first-child { min-width:0; }
.me-settings-group .setting small { display:block; margin-top:2px; color:var(--muted); line-height:1.35; }

.usage-guide-title { align-items:flex-end; }
.usage-quick-start { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:4px; margin-bottom:12px; padding:13px 12px; }
.usage-quick-start > span { grid-column:1 / -1; margin-bottom:3px; color:var(--primary); font-size:calc(10px * var(--app-text-scale)); font-weight:800; }
.usage-quick-start > div { display:grid; justify-items:center; gap:3px; color:var(--muted); font-size:calc(8px * var(--app-text-scale)); white-space:nowrap; }
.usage-quick-start > div b { display:grid; width:23px; height:23px; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--primary); font-size:calc(10px * var(--app-text-scale)); }
.usage-quick-start > i { color:var(--muted); font-size:13px; font-style:normal; }
.usage-guide-list { display:grid; gap:9px; }
.usage-guide-group { padding:0; overflow:hidden; }
.usage-guide-group summary { display:flex; min-height:54px; align-items:center; justify-content:space-between; padding:0 15px; cursor:pointer; list-style:none; }
.usage-guide-group summary::-webkit-details-marker { display:none; }
.usage-guide-group summary span { font-size:calc(15px * var(--app-text-scale)); font-weight:780; }
.usage-guide-group summary em { color:var(--muted); font-size:calc(9px * var(--app-text-scale)); font-style:normal; }
.usage-guide-group[open] summary { border-bottom:1px solid var(--line); }
.usage-guide-group > div { display:grid; }
.usage-guide-group article { padding:12px 15px; }
.usage-guide-group article + article { border-top:1px solid var(--line); }
.usage-guide-group article b { font-size:calc(12px * var(--app-text-scale)); }
.usage-guide-group article p { margin:4px 0 0; color:var(--muted); font-size:calc(10px * var(--app-text-scale)); line-height:1.55; }

.my-feedback-title .secondary-btn { width:auto; min-height:38px; padding:8px 13px; }
.my-feedback-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:12px; }
.my-feedback-summary span { display:grid; justify-items:center; gap:3px; padding:9px 5px; border-radius:12px; background:var(--surface-soft); color:var(--muted); font-size:calc(9px * var(--app-text-scale)); }
.my-feedback-summary b { color:var(--text); font-size:calc(16px * var(--app-text-scale)); }
.my-feedback-list { display:grid; gap:9px; }
.my-feedback-card { display:grid; gap:10px; padding:14px; }
.my-feedback-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.my-feedback-card header > div { display:grid; min-width:0; gap:3px; }
.my-feedback-card header b { font-size:calc(17px * var(--app-text-scale)); overflow-wrap:anywhere; }
.my-feedback-card header small,
.my-feedback-card footer { color:var(--muted); font-size:calc(9px * var(--app-text-scale)); }
.feedback-status { flex:none; padding:5px 8px; border-radius:999px; background:var(--surface-soft); color:var(--muted); font-size:calc(9px * var(--app-text-scale)); font-weight:800; }
.feedback-status.in-progress { color:#8a6200; background:#fff5d6; }
.feedback-status.resolved { color:var(--primary); background:var(--green-soft); }
.feedback-status.rejected { color:var(--red); background:color-mix(in srgb,var(--red) 10%,var(--surface)); }
.my-feedback-card > p { margin:0; color:var(--text); font-size:calc(11px * var(--app-text-scale)); line-height:1.5; white-space:pre-wrap; }
.my-feedback-note { display:grid; gap:3px; padding:10px 11px; border-radius:11px; background:var(--surface-soft); }
.my-feedback-note span { color:var(--muted); font-size:calc(8px * var(--app-text-scale)); }
.my-feedback-note b { font-size:calc(10px * var(--app-text-scale)); font-weight:650; line-height:1.5; white-space:pre-wrap; }
.my-feedback-card footer { display:flex; justify-content:space-between; gap:8px; }
.correction-export-button { margin-top:10px; }