:root {
  --ink: #1e2d2a;
  --muted: #697773;
  --paper: #fbf9f4;
  --canvas: #efeae0;
  --teal: #0e6f62;
  --teal-dark: #09564c;
  --mint: #dcece6;
  --coral: #d6634d;
  --coral-soft: #f7dfd7;
  --gold: #d5a848;
  --line: rgba(30, 45, 42, 0.12);
  --shadow: 0 24px 70px rgba(44, 53, 47, 0.12);
  --ui-zoom: 1;
  --screen-dim: 0;
  --modal-viewport-width: 100vw;
  --modal-viewport-height: 100vh;
  --modal-max-height: calc(100vh - 40px);
  --app-icon-radius: 28%;
  --dashboard-shortcut-columns: 4;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

:root[data-appearance-icon-shape="circle"] { --app-icon-radius: 50%; }
:root[data-appearance-icon-shape="rounded"] { --app-icon-radius: 18%; }
:root[data-appearance-icon-shape="teardrop"] { --app-icon-radius: 50% 50% 50% 18%; }
:root[data-appearance-shortcut-columns="2"] { --dashboard-shortcut-columns: 2; }
:root[data-appearance-shortcut-columns="3"] { --dashboard-shortcut-columns: 3; }
:root[data-appearance-shortcut-columns="5"] { --dashboard-shortcut-columns: 5; }

.morphology-view { max-width: 980px; margin: 0 auto; }
.morphology-toolbar { display: grid; gap: 18px; }
.morphology-search-form > div { display: flex; gap: 10px; margin-top: 8px; }
.morphology-search-form input { min-width: 0; flex: 1; }
.morphology-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.morphology-filter-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.morphology-filter-grid select { width: 100%; }
.morphology-all-toggle { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 8px !important; }
.morphology-all-toggle input { accent-color: var(--teal); }
.morphology-list { display: grid; gap: 10px; }
.morphology-definition-card { appearance: none; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--paper) 92%, var(--mint)); color: var(--ink); padding: 17px 19px; display: grid; gap: 7px; text-align: left; cursor: pointer; }
.morphology-definition-card:hover { border-color: rgba(14,111,98,.42); transform: translateY(-1px); }
.morphology-card-main { display: flex; gap: 9px; align-items: center; min-width: 0; }
.morphology-card-main strong { font-size: 21px; color: var(--teal); overflow-wrap: anywhere; }
.morphology-type-badge { border-radius: 999px; padding: 4px 8px; background: var(--canvas); color: var(--muted); font-size: 12px; }
.morphology-reconstructed-badge { border-radius: 999px; padding: 4px 8px; background: color-mix(in srgb, var(--gold) 18%, var(--paper)); color: color-mix(in srgb, var(--gold) 72%, var(--ink)); font-size: 12px; font-weight: 800; }
.morphology-card-meaning { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.morphology-card-meta, .morphology-detail-note, .morphology-related-words span, .morphology-related-words small { color: var(--muted); font-size: 13px; }
.morphology-empty { margin: 0; padding: 38px 15px; color: var(--muted); text-align: center; }
.morphology-pagination { display: flex; justify-content: center; gap: 12px; margin: 18px 0; }
.morphology-detail-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); }
.morphology-back-button { margin-bottom: 24px; }
.morphology-detail-card h2 { margin: 8px 0; font-size: clamp(30px, 5vw, 48px); color: var(--teal); }
.morphology-detail-meaning { font-size: 22px; font-weight: 700; margin: 8px 0 16px; }
.morphology-detail-english { color: var(--muted); font-size: 16px; margin: 8px 0; overflow-wrap: anywhere; }
.morphology-memory-note { border-left: 3px solid var(--gold); padding: 9px 12px; background: color-mix(in srgb, var(--mint) 65%, transparent); }
.morphology-reconstruction-note { width: min(720px, 100%); margin: 10px 0; padding: 10px 13px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 13%, var(--paper)); color: var(--muted); line-height: 1.65; }
.morphology-reconstruction-note strong { color: var(--ink); }
.morphology-detail-card h3 { margin-top: 25px; }
.morphology-related-words { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.morphology-related-words li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--canvas) 65%, transparent); }
.morphology-related-words strong { overflow-wrap: anywhere; }
.morphology-detail-loading { padding: 38px; text-align: center; color: var(--muted); }
.morphology-practice-start { justify-self: start; }
.morphology-practice-view { max-width: 840px; }
.morphology-practice-loading { min-height: 180px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.morphology-practice-card { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.morphology-practice-kind { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.morphology-practice-prompt { color: var(--teal); font: 700 clamp(40px, 8vw, 72px) Georgia, serif; overflow-wrap: anywhere; }
.morphology-practice-card > p { color: var(--muted); }
.morphology-practice-reveal { min-width: 180px; }
.morphology-practice-answer { width: min(620px, 100%); padding: 21px; border-top: 1px solid var(--line); }
.morphology-practice-answer > span { color: var(--muted); font-size: 11px; }
.morphology-practice-answer h2 { margin: 8px 0; font-size: clamp(24px, 5vw, 38px); }
.morphology-practice-answer > p { line-height: 1.7; }
.morphology-practice-rating { display: flex; gap: 12px; }
.morphology-practice-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: center; }
.morphology-practice-summary div { padding: 24px; border-radius: 16px; background: color-mix(in srgb, var(--canvas) 68%, transparent); }
.morphology-practice-summary span, .morphology-practice-summary strong { display: block; }
.morphology-practice-summary span { color: var(--muted); }
.morphology-practice-summary strong { margin-top: 8px; color: var(--teal); font: 700 38px Georgia, serif; }
.morphology-practice-summary button { grid-column: 1 / -1; justify-self: center; }
.learning-insights-view { max-width: 1040px; }
.learning-insights-button[hidden] { display: none; }
.insight-loading { display: grid; gap: 18px; place-items: center; min-height: 180px; color: var(--muted); text-align: center; }
.insight-window-switch { display: inline-flex; gap: 5px; padding: 5px; margin: 0 0 18px; border-radius: 14px; background: color-mix(in srgb, var(--mint) 72%, var(--paper)); border: 1px solid var(--line); }
.insight-window-switch button { border: 0; border-radius: 10px; padding: 10px 17px; background: transparent; color: var(--muted); cursor: pointer; }
.insight-window-switch button[aria-pressed="true"] { background: var(--paper); color: var(--teal); font-weight: 800; box-shadow: 0 5px 14px rgba(44,53,47,.08); }
.insight-coverage-note { border-left: 3px solid var(--gold); padding: 10px 13px; color: var(--muted); background: color-mix(in srgb, var(--mint) 65%, transparent); }
.insight-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.insight-summary-grid article { display: grid; gap: 7px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(251,249,244,.92); box-shadow: 0 12px 35px rgba(44,53,47,.07); }
.insight-summary-grid span, .insight-summary-grid small { color: var(--muted); }
.insight-summary-grid span { font-size: 12px; font-weight: 700; }
.insight-summary-grid strong { color: var(--teal); font: 700 32px Georgia, serif; overflow-wrap: anywhere; }
.insight-summary-grid small { font-size: 11px; }
.insight-direction-grid, .insight-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.insight-direction-card { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }
.insight-card-heading { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.insight-card-heading h3 { margin: 0; font-size: 18px; }
.insight-card-heading > strong { color: var(--teal); font: 700 34px Georgia, serif; }
.insight-direction-card > p { color: var(--muted); font-size: 12px; }
.insight-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.insight-mini-stats div { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--canvas) 68%, transparent); }
.insight-mini-stats dt { color: var(--muted); font-size: 10px; }
.insight-mini-stats dd { margin: 5px 0 0; font-weight: 800; }
.insight-trend { min-height: 34px; line-height: 1.6; }
.insight-trend-panel { margin: 0 0 16px; overflow: hidden; }
.insight-trend-controls { display: grid; gap: 14px; }
.insight-trend-metrics { display: inline-flex; justify-self: start; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--mint) 65%, var(--paper)); }
.insight-trend-metrics button { border: 0; border-radius: 8px; padding: 8px 14px; background: transparent; color: var(--muted); cursor: pointer; }
.insight-trend-metrics button[aria-pressed=\"true\"] { background: var(--paper); color: var(--teal); font-weight: 800; box-shadow: 0 4px 12px rgba(44,53,47,.08); }
.insight-trend-pagination { display: grid; grid-template-columns: minmax(130px, auto) minmax(170px, 1fr) minmax(130px, auto); gap: 12px; align-items: center; }
.insight-trend-pagination strong { text-align: center; font-size: 13px; }
.insight-trend-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0 4px; color: var(--muted); font-size: 12px; }
.insight-trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.insight-trend-legend i { width: 19px; height: 3px; border-radius: 999px; background: currentColor; }
.insight-trend-legend .en-to-zh, .insight-chart-line.en-to-zh, .insight-chart-point.en-to-zh { color: var(--teal); stroke: var(--teal); }
.insight-trend-legend .zh-to-en, .insight-chart-line.zh-to-en, .insight-chart-point.zh-to-en { color: var(--coral); stroke: var(--coral); }
.insight-trend-legend .bidirectional, .insight-chart-line.bidirectional, .insight-chart-point.bidirectional { color: var(--gold); stroke: var(--gold); }
.insight-trend-legend .volume, .insight-chart-line.volume, .insight-chart-point.volume { color: var(--teal); stroke: var(--teal); }
.insight-trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.insight-chart-grid { stroke: var(--line); stroke-width: 1; }
.insight-chart-axis { fill: var(--muted); font-size: 10px; }
.insight-chart-line { fill: none !important; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.insight-chart-point { fill: currentColor; stroke-width: 0; outline: none; }
.insight-chart-point:focus { stroke: var(--paper); stroke-width: 3; }
.insight-trend-table { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 12px; }
.insight-trend-table summary { color: var(--teal); font-weight: 800; cursor: pointer; }
.insight-trend-table > div { overflow-x: auto; margin-top: 12px; }
.insight-trend-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12px; }
.insight-trend-table th, .insight-trend-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.insight-trend-table th:first-child { text-align: left; }
.insight-detail-grid .panel { margin: 0; }
.insight-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.insight-section-head span { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.insight-section-head h2 { margin: 5px 0 0; font-size: 22px; }
.insight-section-head > small { color: var(--muted); }
.insight-baselines { display: grid; gap: 10px; margin-top: 18px; }
.insight-baseline { display: grid; grid-template-columns: minmax(70px, auto) auto minmax(160px, 1fr); gap: 12px; align-items: center; padding: 13px; border-radius: 13px; background: color-mix(in srgb, var(--canvas) 68%, transparent); }
.insight-baseline > span { color: var(--teal); font-weight: 800; }
.insight-baseline small { color: var(--muted); text-align: right; }
.insight-repair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.insight-repair-grid div { display: grid; gap: 7px; padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--canvas) 68%, transparent); }
.insight-repair-grid span { color: var(--teal); font: 700 28px Georgia, serif; }
.insight-repair-grid small { color: var(--muted); line-height: 1.5; }
.insight-weak-panel, .insight-method-note { margin-top: 16px; }
.insight-weak-list { list-style: none; display: grid; gap: 9px; padding: 0; margin: 0; }
.insight-weak-list li { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 13px 15px; border-radius: 13px; background: color-mix(in srgb, var(--canvas) 68%, transparent); }
.insight-weak-list li > div:first-child { display: grid; gap: 3px; min-width: 0; }
.insight-weak-list strong { font: 700 18px Georgia, serif; overflow-wrap: anywhere; }
.insight-weak-list li > div:first-child span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.insight-reasons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.insight-reasons span { padding: 5px 8px; border-radius: 999px; background: var(--coral-soft); color: var(--coral); font-size: 10px; font-weight: 800; }
.insight-empty-row { color: var(--muted); justify-content: center !important; }
.insight-method-note p { color: var(--muted); line-height: 1.75; }
@media (max-width: 720px) {
  .morphology-filter-grid { grid-template-columns: 1fr; }
  .morphology-all-toggle { grid-column: auto; }
  .morphology-search-form > div { align-items: stretch; flex-direction: column; }
  .morphology-search-form button { width: 100%; }
  .morphology-detail-card { padding: 20px 16px; }
  .morphology-related-words li { grid-template-columns: 1fr; gap: 4px; }
  .morphology-practice-start { width: 100%; }
  .morphology-practice-rating { align-items: stretch; flex-direction: column; width: 100%; }
  .morphology-practice-rating button { width: 100%; }
  .morphology-practice-summary { grid-template-columns: 1fr; }
  .morphology-practice-summary button { grid-column: auto; width: 100%; }
  .insight-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-direction-grid, .insight-detail-grid { grid-template-columns: 1fr; }
  .insight-trend-panel { padding: 18px 12px; }
  .insight-trend-metrics { width: 100%; }
  .insight-trend-metrics button { flex: 1; padding: 8px 7px; }
  .insight-trend-pagination { grid-template-columns: 1fr 1fr; }
  .insight-trend-pagination strong { grid-column: 1 / -1; grid-row: 1; }
  .insight-trend-pagination button { width: 100%; }
  .insight-baseline { grid-template-columns: 1fr auto; }
  .insight-baseline small { grid-column: 1 / -1; text-align: left; }
  .insight-weak-list li { align-items: flex-start; flex-direction: column; }
  .insight-reasons { justify-content: flex-start; }
}

:root[data-theme="dark"] {
  --ink: #e5f0eb;
  --muted: #a5b5ae;
  --paper: #18211f;
  --canvas: #0d1412;
  --teal: #34af9a;
  --teal-dark: #1b8877;
  --mint: #193933;
  --coral: #ff8d75;
  --coral-soft: #4a2926;
  --gold: #eac469;
  --line: rgba(222, 241, 233, 0.16);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  zoom: var(--ui-zoom);
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.88), transparent 31rem),
    radial-gradient(circle at 95% 12%, rgba(167, 207, 195, 0.35), transparent 30rem),
    var(--canvas);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 0%, rgba(64, 104, 93, 0.22), transparent 31rem),
    radial-gradient(circle at 95% 12%, rgba(42, 139, 121, 0.18), transparent 30rem),
    var(--canvas);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .quiet-link {
  color: var(--ink);
  background: rgba(20, 31, 28, 0.88);
  border-color: var(--line);
}

.settings-guide {
  border-top: 1px solid var(--line);
  padding: 12px 0 2px;
}
.settings-guide summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.settings-guide p { margin: 9px 0 3px; color: var(--muted); font-size: 12px; line-height: 1.75; }

html::after {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  background: #08100e;
  opacity: var(--screen-dim);
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(213, 168, 72, .65);
  outline-offset: 3px;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.site-header {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 30px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px 14px 14px 4px;
  display: grid;
  place-items: center;
  background: var(--teal);
  color: white;
  font-family: Georgia, serif;
  font-size: 25px;
  box-shadow: 0 10px 24px rgba(14, 111, 98, 0.25);
}

.brand strong { display: block; font-size: 19px; letter-spacing: 0.16em; }
.brand small { display: block; color: var(--muted); margin-top: 2px; font-size: 11px; letter-spacing: 0.07em; }

.quiet-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-family: inherit;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.quiet-link:hover { color: var(--teal); border-color: rgba(14, 111, 98, 0.3); }
.header-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.account-center-link { display: inline-flex; align-items: center; gap: 7px; }
.account-unread-badge { min-width: 19px; height: 19px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: #c64e3d; font-size: 10px; font-weight: 900; line-height: 1; box-shadow: 0 4px 12px rgba(198,78,61,.25); }
.account-unread-badge[hidden] { display: none; }
.morphology-learning-button[hidden] { display: none; }
.ai-settings-button { display: inline-flex; align-items: center; gap: 7px; }
.ai-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #b8b9b4; display: inline-block; flex: 0 0 auto; }
.ai-status-dot.ready { background: var(--gold); }
.ai-status-dot.on { background: #24a67f; box-shadow: 0 0 0 4px rgba(36, 166, 127, .12); }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 40px));
  margin: 28px auto 70px;
}

/* v0.29 appearance foundation: wallpaper sits below content; glass remains a control layer. */
:root {
  --wallpaper-blur: 0px;
  --wallpaper-shade: .12;
  --wallpaper-background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.88), transparent 31rem),
    radial-gradient(circle at 95% 12%, rgba(167,207,195,.35), transparent 30rem),
    var(--canvas);
  --glass-regular: rgba(251,249,244,.66);
  --glass-clear: rgba(255,255,255,.28);
  --glass-rim: rgba(255,255,255,.62);
  --glass-shadow: 0 20px 55px rgba(25,44,39,.16), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(21,58,50,.08);
}

:root[data-theme="dark"] {
  --glass-regular: rgba(18,26,24,.68);
  --glass-clear: rgba(18,18,22,.42);
  --glass-rim: rgba(255,255,255,.22);
  --glass-shadow: 0 24px 65px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.24);
}

:root[data-wallpaper="aurora"] { --wallpaper-background: radial-gradient(circle at 18% 12%, rgba(106,245,204,.78), transparent 34%), radial-gradient(circle at 82% 20%, rgba(73,111,224,.82), transparent 38%), radial-gradient(circle at 46% 86%, rgba(23,90,101,.82), transparent 44%), linear-gradient(145deg,#061f28,#183b50 52%,#0d554c); }
:root[data-wallpaper="lagoon"] { --wallpaper-background: radial-gradient(circle at 12% 14%, rgba(255,255,255,.9), transparent 30%), radial-gradient(circle at 85% 18%, rgba(73,207,196,.48), transparent 34%), radial-gradient(circle at 42% 90%, rgba(70,141,189,.42), transparent 40%), linear-gradient(145deg,#d8f2e9,#b8dfdc 48%,#8fc4d0); }
:root[data-wallpaper="sunset"] { --wallpaper-background: radial-gradient(circle at 15% 10%, rgba(255,248,213,.92), transparent 34%), radial-gradient(circle at 88% 20%, rgba(232,116,104,.54), transparent 36%), radial-gradient(circle at 45% 94%, rgba(173,91,150,.38), transparent 42%), linear-gradient(145deg,#f7ddac,#eaa78f 52%,#8d668d); }
:root[data-wallpaper="custom"] { --wallpaper-background: var(--custom-wallpaper-image), linear-gradient(145deg,var(--canvas),var(--mint)); }
:root[data-theme="dark"][data-wallpaper="paper"] { --wallpaper-background: radial-gradient(circle at 10% 0%,rgba(64,104,93,.22),transparent 31rem),radial-gradient(circle at 95% 12%,rgba(42,139,121,.18),transparent 30rem),var(--canvas); }

body {
  position: relative;
  isolation: isolate;
  background: var(--canvas);
}
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  inset: -32px;
}
body::before {
  z-index: -2;
  background: var(--wallpaper-background);
  background-position: center;
  background-size: cover;
  filter: blur(var(--wallpaper-blur));
  transform: scale(1.035);
  transition: background .35s ease, filter .28s ease;
}
body::after {
  z-index: -1;
  background: rgba(239,234,224,var(--wallpaper-shade));
}
:root[data-theme="dark"] body::after { background: rgba(13,20,18,var(--wallpaper-shade)); }

:root[data-appearance-material="glass"] .site-header,
:root[data-appearance-material="glass"] .modal-card,
:root[data-appearance-material="glass"] .english-assistant-panel,
:root[data-appearance-material="glass"] .english-assistant-toggle,
:root[data-appearance-material="glass-clear"] .site-header,
:root[data-appearance-material="glass-clear"] .modal-card,
:root[data-appearance-material="glass-clear"] .english-assistant-panel,
:root[data-appearance-material="glass-clear"] .english-assistant-toggle {
  border: 1px solid var(--glass-rim);
  background: var(--glass-regular);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
:root[data-appearance-material="glass-clear"] .site-header,
:root[data-appearance-material="glass-clear"] .modal-card,
:root[data-appearance-material="glass-clear"] .english-assistant-panel,
:root[data-appearance-material="glass-clear"] .english-assistant-toggle {
  background: var(--glass-clear);
  -webkit-backdrop-filter: blur(18px) saturate(195%);
  backdrop-filter: blur(18px) saturate(195%);
}
:root[data-appearance-material^="glass"] .quiet-link,
:root[data-appearance-material^="glass"] .primary-button,
:root[data-appearance-material^="glass"] .secondary-button {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
@media (hover:hover) and (pointer:fine) {
  :root[data-appearance-material^="glass"] .quiet-link:hover,
  :root[data-appearance-material^="glass"] .primary-button:hover,
  :root[data-appearance-material^="glass"] .secondary-button:hover,
  .wallpaper-choice:hover { transform: translateY(-2px) scale(1.025); }
}
:root[data-appearance-material^="glass"] button:active,
.wallpaper-choice:active { transform: scale(.96); box-shadow: inset 0 4px 12px rgba(16,52,44,.2); }

.appearance-modal { --modal-max-height: calc(100vh - 28px); }
.appearance-modal-card { width: min(1120px,100%); padding: 26px; overflow-x: hidden; }
.appearance-workbench { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(330px,.95fr); gap: 18px; align-items: start; }
.appearance-controls { display: grid; gap: 14px; min-width: 0; }
.appearance-control-card { min-width: 0; border: 1px solid var(--line); border-radius: 19px; padding: 17px; background: color-mix(in srgb,var(--paper) 78%,transparent); }
.wallpaper-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 13px; }
.wallpaper-choice { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 15px; padding: 9px; background: color-mix(in srgb,var(--paper) 78%,transparent); cursor: pointer; transition: transform .28s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,box-shadow .2s ease; }
.wallpaper-choice input { position: absolute; opacity: 0; pointer-events: none; }
.wallpaper-choice > span { grid-row: 1 / 3; width: 58px; height: 48px; border-radius: 11px; background-position: center; background-size: cover; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.wallpaper-choice strong { align-self: end; min-width: 0; font-size: 12px; }
.wallpaper-choice small { align-self: start; min-width: 0; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallpaper-choice:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 2px color-mix(in srgb,var(--teal) 18%,transparent),0 10px 24px rgba(14,111,98,.1); }
.wallpaper-choice:focus-within { outline: 3px solid color-mix(in srgb,var(--teal) 28%,transparent); outline-offset: 2px; }
.wallpaper-paper > span { background: radial-gradient(circle at 18% 8%,white,transparent 42%),linear-gradient(145deg,#f7f0e3,#b9d6cc); }
.wallpaper-aurora > span { background: radial-gradient(circle at 20% 20%,#6af5cc,transparent 38%),radial-gradient(circle at 80% 10%,#496fe0,transparent 42%),#0d554c; }
.wallpaper-lagoon > span { background: radial-gradient(circle at 15% 10%,white,transparent 34%),linear-gradient(145deg,#d8f2e9,#73bac6); }
.wallpaper-sunset > span { background: radial-gradient(circle at 15% 10%,#fff5cf,transparent 35%),linear-gradient(145deg,#e9a18c,#8d668d); }
.wallpaper-custom > span { background: linear-gradient(135deg,#d8d5cf,#8fb5ac); }
.wallpaper-choice.unavailable { opacity: .68; }
.appearance-file-actions { margin-top: 11px; justify-content: flex-start; }
.appearance-file-picker { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.appearance-color-source { display:flex; gap:4px; margin-top:13px; padding:4px; border-radius:13px; background:color-mix(in srgb,var(--canvas) 72%,transparent); }
.appearance-color-source label { position:relative; flex:1; cursor:pointer; }
.appearance-color-source input,.appearance-palette-choice input,.appearance-basic-color-grid input { position:absolute; opacity:0; pointer-events:none; }
.appearance-color-source span { display:block; border:1px solid transparent; border-radius:10px; padding:9px 12px; color:var(--muted); text-align:center; font-size:12px; font-weight:800; }
.appearance-color-source input:checked + span { color:var(--teal); border-color:color-mix(in srgb,var(--teal) 20%,transparent); background:var(--paper); box-shadow:0 5px 14px rgba(23,49,43,.1); }
.appearance-color-source label:focus-within,.appearance-palette-choice:focus-within,.appearance-basic-color-grid label:focus-within { outline:3px solid color-mix(in srgb,var(--teal) 28%,transparent); outline-offset:2px; }
.appearance-palette-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px; }
.appearance-palette-grid[hidden],.appearance-basic-color-grid[hidden] { display:none; }
.appearance-palette-choice { position:relative; display:grid; gap:7px; min-width:0; border:1px solid var(--line); border-radius:14px; padding:10px; background:color-mix(in srgb,var(--paper) 78%,transparent); cursor:pointer; transition:transform .28s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,box-shadow .2s ease; }
.appearance-palette-choice:has(input:checked),.appearance-basic-color-grid label:has(input:checked) { border-color:var(--teal); box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 18%,transparent),0 10px 24px rgba(14,111,98,.1); }
.appearance-palette-choice strong,.appearance-basic-color-grid strong { font-size:11px; }
.appearance-palette-swatches { display:grid; grid-template-columns:repeat(4,1fr); height:30px; overflow:hidden; border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.65); }
.appearance-palette-swatches i:nth-child(1) { background:var(--palette-primary); }
.appearance-palette-swatches i:nth-child(2) { background:var(--palette-secondary); }
.appearance-palette-swatches i:nth-child(3) { background:var(--palette-surface); }
.appearance-palette-swatches i:nth-child(4) { background:var(--palette-accent); }
.appearance-basic-color-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:10px; }
.appearance-basic-color-grid label { position:relative; display:grid; justify-items:center; gap:6px; min-width:0; border:1px solid var(--line); border-radius:14px; padding:9px 5px; background:color-mix(in srgb,var(--paper) 78%,transparent); cursor:pointer; }
.appearance-basic-color-grid label > span { width:30px; height:30px; border-radius:50%; background:var(--basic-color); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 10px color-mix(in srgb,var(--basic-color) 30%,transparent); }
.appearance-basic-color-grid [data-basic-color="teal"] { --basic-color:#0e6f62; }
.appearance-basic-color-grid [data-basic-color="blue"] { --basic-color:#246b9b; }
.appearance-basic-color-grid [data-basic-color="violet"] { --basic-color:#7356a8; }
.appearance-basic-color-grid [data-basic-color="coral"] { --basic-color:#ad534b; }
.appearance-basic-color-grid [data-basic-color="gold"] { --basic-color:#9b6b16; }
.appearance-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.toggle-row.appearance-themed-icons-toggle { grid-column: 1 / -1; margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: color-mix(in srgb,var(--paper) 74%,transparent); }
.appearance-themed-icons-toggle > span { min-width: 0; padding-right: 12px; }
.appearance-preview { position: sticky; top: 0; min-width: 0; border: 1px solid var(--line); border-radius: 21px; padding: 17px; background: color-mix(in srgb,var(--paper) 70%,transparent); }
.appearance-preview-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 13px; }
.appearance-preview-head span { color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.appearance-preview-head h3 { margin: 3px 0 0; }
.appearance-preview-switches { display: grid; justify-items: end; gap: 5px; }
.appearance-preview-switch { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb,var(--canvas) 72%,transparent); }
.appearance-preview-switch button { border: 0; border-radius: 9px; padding: 7px 10px; color: var(--muted); background: transparent; cursor: pointer; }
.appearance-preview-switch button[aria-pressed="true"] { color: var(--teal); background: var(--paper); box-shadow: 0 5px 14px rgba(23,49,43,.12); font-weight: 800; }
.appearance-preview-stage { --preview-wallpaper: radial-gradient(circle at 16% 10%,white,transparent 34%),linear-gradient(145deg,#f4eee2,#b9d6cc); --preview-shortcut-columns:4; min-height: 500px; display: grid; place-items: center; border-radius: 18px; padding: 18px; overflow: hidden; background: color-mix(in srgb,var(--canvas) 75%,transparent); }
.appearance-preview-stage[data-wallpaper="aurora"] { --preview-wallpaper: radial-gradient(circle at 18% 12%,#6af5cc,transparent 35%),radial-gradient(circle at 82% 18%,#496fe0,transparent 39%),linear-gradient(145deg,#061f28,#0d554c); }
.appearance-preview-stage[data-wallpaper="lagoon"] { --preview-wallpaper: radial-gradient(circle at 12% 8%,white,transparent 32%),linear-gradient(145deg,#d8f2e9,#87bfcd); }
.appearance-preview-stage[data-wallpaper="sunset"] { --preview-wallpaper: radial-gradient(circle at 12% 8%,#fff6d7,transparent 34%),linear-gradient(145deg,#f4d6a5,#df9286 54%,#8d668d); }
.appearance-preview-stage[data-wallpaper="custom"] { --preview-wallpaper: var(--preview-custom-wallpaper),linear-gradient(145deg,#d8d5cf,#8fb5ac); }
.appearance-preview-device { width: min(270px,100%); border-radius: 38px; padding: 8px; background: #192422; box-shadow: 0 24px 60px rgba(20,37,33,.3); transition: width .3s cubic-bezier(.34,1.2,.64,1); }
.appearance-preview-stage[data-size="desktop"] .appearance-preview-device { width: min(100%,520px); border-radius: 22px; }
.appearance-preview-screen { position: relative; min-height: 450px; overflow: hidden; border-radius: 31px; color: #1e2d2a; background: var(--preview-wallpaper); background-position: center; background-size: cover; }
.appearance-preview-stage[data-size="desktop"] .appearance-preview-screen { min-height: 330px; border-radius: 16px; }
.appearance-preview-screen::after { content:""; position:absolute; inset:0; pointer-events:none; background: rgba(239,234,224,var(--preview-wallpaper-shade)); }
.appearance-preview-home { position: relative; z-index: 1; min-height: 450px; }
.appearance-preview-stage[data-size="desktop"] .appearance-preview-home { min-height: 330px; }
.appearance-preview-bar,.appearance-preview-content,.appearance-preview-shortcuts,.appearance-preview-assistant { position: relative; z-index: 1; }
.appearance-preview-bar { display: flex; align-items: center; gap: 6px; margin: 10px; padding: 9px 11px; border-radius: 14px; background: rgba(251,249,244,.82); border: 1px solid rgba(255,255,255,.7); }
.appearance-preview-bar span { margin-right: auto; font-weight: 900; }
.appearance-preview-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--preview-sys-color-secondary,#0e6f62); }
.appearance-preview-content { display: grid; gap: 10px; padding: 8px 12px 48px; }
.appearance-preview-hero,.appearance-preview-card { display: grid; gap: 7px; margin: 0; border-radius: 18px; padding: 18px; background: rgba(251,249,244,.86); border: 1px solid rgba(255,255,255,.62); box-shadow: 0 12px 35px rgba(31,50,45,.12); }
.appearance-preview-hero small,.appearance-preview-card small { color:var(--preview-sys-color-primary,#0e6f62); font-size:8px; font-weight:900; letter-spacing:.12em; }
.appearance-preview-hero strong { font:700 30px Georgia,serif; }
.appearance-preview-card strong { font-size:17px; }
.appearance-preview-hero p,.appearance-preview-card p { margin:0; color:#697773; font-size:10px; }
.appearance-preview-card button { margin-top:8px; border:0; border-radius:12px; padding:10px; color:white; background:var(--preview-sys-color-primary,#0e6f62); font-size:10px; font-weight:800; }
.appearance-preview-assistant { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:white; background:var(--preview-sys-color-primary,#0e6f62); box-shadow:0 10px 24px color-mix(in srgb,var(--preview-sys-color-primary,#0e6f62) 30%,transparent); font-weight:900; }
.appearance-preview-shortcuts { position:absolute; left:20px; right:64px; bottom:12px; display:grid; grid-template-columns:repeat(var(--preview-shortcut-columns),minmax(0,1fr)); gap:6px; }
.appearance-preview-shortcuts i { width:100%; max-width:34px; aspect-ratio:1; display:grid; place-items:center; justify-self:center; border-radius:var(--preview-icon-radius,28%); color:white; background:color-mix(in srgb,var(--preview-sys-color-primary,#0e6f62) 88%,white); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 5px 12px rgba(25,44,39,.13); font:normal 800 9px/1 ui-sans-serif,sans-serif; }
.appearance-preview-shortcuts svg { display:none; width:58%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.appearance-preview-stage[data-themed-icons="true"] .appearance-preview-shortcuts i { color:var(--preview-sys-color-primary,#0e6f62); border:1px solid color-mix(in srgb,var(--preview-sys-color-primary,#0e6f62) 26%,transparent); background:color-mix(in srgb,var(--preview-sys-color-surface,#e0eee9) 70%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 6px 14px rgba(25,44,39,.1); }
.appearance-preview-stage[data-themed-icons="true"] .appearance-preview-shortcuts span { display:none; }
.appearance-preview-stage[data-themed-icons="true"] .appearance-preview-shortcuts svg { display:block; }
.appearance-preview-stage[data-icon-shape="circle"] { --preview-icon-radius:50%; }
.appearance-preview-stage[data-icon-shape="rounded"] { --preview-icon-radius:18%; }
.appearance-preview-stage[data-icon-shape="teardrop"] { --preview-icon-radius:50% 50% 50% 18%; }
.appearance-preview-stage[data-shortcut-columns="2"] { --preview-shortcut-columns:2; }
.appearance-preview-stage[data-shortcut-columns="3"] { --preview-shortcut-columns:3; }
.appearance-preview-stage[data-shortcut-columns="5"] { --preview-shortcut-columns:5; }
.appearance-preview-stage[data-material^="glass"] .appearance-preview-bar,.appearance-preview-stage[data-material^="glass"] .appearance-preview-hero,.appearance-preview-stage[data-material^="glass"] .appearance-preview-card,.appearance-preview-stage[data-material^="glass"] .appearance-preview-assistant { background:rgba(255,255,255,.5); border-color:rgba(255,255,255,.68); box-shadow:0 14px 35px rgba(25,44,39,.16),inset 0 1px 0 rgba(255,255,255,.8); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); }
.appearance-preview-stage[data-material="glass-clear"] .appearance-preview-bar,.appearance-preview-stage[data-material="glass-clear"] .appearance-preview-hero,.appearance-preview-stage[data-material="glass-clear"] .appearance-preview-card,.appearance-preview-stage[data-material="glass-clear"] .appearance-preview-assistant { background:rgba(255,255,255,.28); }
.appearance-preview-stage[data-theme="dark"] .appearance-preview-screen { color:#eef7f3; }
.appearance-preview-stage[data-theme="dark"] .appearance-preview-bar,.appearance-preview-stage[data-theme="dark"] .appearance-preview-hero,.appearance-preview-stage[data-theme="dark"] .appearance-preview-card { background:rgba(18,27,25,.82); border-color:rgba(255,255,255,.18); }
.appearance-preview-stage[data-theme="dark"] .appearance-preview-hero p,.appearance-preview-stage[data-theme="dark"] .appearance-preview-card p { color:#b2c2bc; }
.appearance-preview-stage[data-theme="dark"][data-material^="glass"] .appearance-preview-bar,.appearance-preview-stage[data-theme="dark"][data-material^="glass"] .appearance-preview-hero,.appearance-preview-stage[data-theme="dark"][data-material^="glass"] .appearance-preview-card { background:rgba(18,18,22,.48); }
.appearance-preview-note { margin:11px 2px 0; color:var(--muted); font-size:10px; line-height:1.65; }
.appearance-actions { border-top:1px solid var(--line); margin-top:14px; padding-top:14px; }
.section-message.success { color:var(--teal-dark); }

@media (max-width:900px) {
  .appearance-workbench { grid-template-columns:1fr; }
  .appearance-preview { position:static; }
}
@media (max-width:600px) {
  .appearance-modal-card { padding:20px 15px; }
  .wallpaper-choice-grid,.appearance-select-grid { grid-template-columns:1fr; }
  .appearance-basic-color-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .appearance-preview-head { align-items:stretch; flex-direction:column; }
  .appearance-preview-switches { justify-items:stretch; }
  .appearance-preview-switch button { flex:1; }
  .appearance-preview-stage { min-height:480px; padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .wallpaper-choice,.appearance-palette-choice,.dashboard-shortcuts button,.dashboard-shortcut-icon,:root[data-appearance-material^="glass"] .quiet-link,:root[data-appearance-material^="glass"] .primary-button,:root[data-appearance-material^="glass"] .secondary-button,.appearance-preview-device { transition:none; }
}

html.android-back-gesture-active {
  overscroll-behavior: none;
}

.android-back-gesture-surface {
  backface-visibility: hidden;
  will-change: transform, opacity;
}

html.android-back-transition-active::view-transition-group(root) {
  animation-duration: 180ms;
}

html.android-back-transition-active::view-transition-new(root) {
  z-index: 1;
  animation: none;
  mix-blend-mode: normal;
}

html.android-back-transition-active::view-transition-old(root) {
  z-index: 2;
  animation: android-back-page-exit 180ms cubic-bezier(.2, .72, .2, 1) both;
  mix-blend-mode: normal;
}

@keyframes android-back-page-exit {
  from {
    transform: translate3d(var(--android-back-transition-start-x, 0), 0, 0) scale(.99);
    opacity: 1;
  }
  to {
    transform: translate3d(var(--android-back-transition-exit-x, 220px), 0, 0) scale(.97);
    opacity: 0;
  }
}

.wordbook-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 22px;
  padding: 20px 24px;
  background: linear-gradient(110deg, rgba(220,236,230,.94), rgba(251,249,244,.94));
}
.wordbook-current { min-width: 0; display: flex; align-items: center; gap: 20px; }
.wordbook-current > div { min-width: 0; }
.wordbook-current .eyebrow { flex: 0 0 auto; }
.wordbook-current h2 { font-size: 19px; margin: 0 0 4px; }
.default-wordbook-badge { display: inline-block; vertical-align: middle; margin-left: 9px; border-radius: 999px; padding: 4px 7px; background: var(--teal); color: white; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.wordbook-current p { color: var(--muted); font-size: 11px; margin: 0; overflow-wrap: anywhere; }
.wordbook-switch-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.wordbook-switch-actions label { color: var(--muted); font-size: 11px; }
.wordbook-switch-actions select { max-width: 265px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); padding: 11px 34px 11px 12px; }

.hero {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 22px;
  margin-bottom: 22px;
}

.hero-main, .today-card, .panel, .quiz-card, .round-card, .finish-card, .loading-card {
  background: rgba(251, 249, 244, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
}

.hero-main {
  border-radius: 30px;
  padding: 43px 46px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

.hero-main::after {
  content: "Aa";
  position: absolute;
  right: -5px;
  bottom: -48px;
  color: rgba(14, 111, 98, 0.07);
  font-family: Georgia, serif;
  font-size: 220px;
  font-style: italic;
  line-height: 1;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before { content: ""; width: 25px; height: 2px; background: var(--gold); }

h1, h2, h3, p { margin-top: 0; }
.hero h1 { font-size: clamp(35px, 5vw, 62px); line-height: 1.08; letter-spacing: -0.05em; margin: 20px 0 16px; max-width: 620px; }
.hero h1 em { color: var(--teal); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hero-copy { color: var(--muted); max-width: 520px; line-height: 1.8; font-size: 15px; position: relative; z-index: 1; }

.today-card {
  border-radius: 30px;
  padding: 34px;
  background: var(--ink);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.today-card .eyebrow { color: #9ed2c5; }
.today-card h2 { font-size: 30px; margin: 14px 0 8px; }
.today-card p { color: rgba(255, 255, 255, 0.62); line-height: 1.7; font-size: 13px; }
.today-card .daily-plan-summary { margin-bottom: 4px; color: rgba(255,255,255,.9); font-weight: 800; }
.today-card .daily-plan-deadline { margin: 4px 0; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.65; }
.today-card .daily-plan-reason { margin-bottom: 14px; }
.daily-plan-choice { display: grid; gap: 7px; margin-top: 13px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; }
.daily-plan-choice select { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; padding: 11px 34px 11px 11px; background: rgba(255,255,255,.1); color: white; }
.daily-plan-choice select option { background: var(--ink); color: white; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.stat { border-top: 1px solid rgba(255,255,255,.17); padding-top: 14px; }
.stat strong { display: block; font-size: 24px; font-family: Georgia, serif; }
.stat span { color: rgba(255,255,255,.52); font-size: 11px; }

.primary-button, .secondary-button, .audio-button, .text-button {
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.primary-button {
  background: var(--teal);
  color: white;
  border-radius: 15px;
  padding: 15px 20px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(14,111,98,.24);
}
.primary-button:hover { background: var(--teal-dark); transform: translateY(-1px); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.secondary-button:disabled { opacity: .45; cursor: not-allowed; }
.today-card .primary-button { width: 100%; background: #eff8f4; color: var(--teal-dark); box-shadow: none; }

.dashboard-shortcuts {
  display: grid;
  grid-template-columns: repeat(var(--dashboard-shortcut-columns), minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
  padding: 18px;
}
.dashboard-shortcuts button {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 8px 12px;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--ink);
  background: color-mix(in srgb,var(--paper) 76%,transparent);
  font: inherit;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, box-shadow .2s ease;
}
.dashboard-shortcut-icon {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--app-icon-radius);
  color: white;
  background: linear-gradient(145deg,color-mix(in srgb,var(--teal) 80%,white),var(--teal-dark));
  box-shadow: 0 10px 22px color-mix(in srgb,var(--teal) 24%,transparent), inset 0 1px 0 rgba(255,255,255,.48);
  transition: border-radius .24s ease, transform .24s cubic-bezier(.34,1.56,.64,1);
  font-weight: 900;
}
.dashboard-shortcut-icon svg { display: none; width: 54%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-appearance-themed-icons="true"] .dashboard-shortcut-glyph { display: none; }
:root[data-appearance-themed-icons="true"] .dashboard-shortcut-icon svg { display: block; }
:root[data-appearance-themed-icons="true"] .dashboard-shortcut-icon {
  color: var(--teal);
  border: 1px solid color-mix(in srgb,var(--teal) 28%,transparent);
  background: color-mix(in srgb,var(--mint) 64%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 22px color-mix(in srgb,var(--teal) 14%,transparent);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
}
.dashboard-shortcuts strong { min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
.dashboard-shortcuts button:active { transform: scale(.96); box-shadow: inset 0 5px 14px rgba(19,53,46,.14); }

.multi-daily-shell { display: grid; gap: 20px; }
.multi-daily-shell h1 { margin: 4px 0 0; font-size: clamp(30px, 5vw, 54px); }
.multi-daily-enabled {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  border-radius: 18px; background: color-mix(in srgb, var(--mint) 48%, transparent);
}
.multi-daily-enabled input { width: 22px; height: 22px; accent-color: var(--teal); }
.multi-daily-enabled span { display: grid; gap: 4px; }
.multi-daily-enabled small { color: var(--muted); }
.multi-daily-summary {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.multi-daily-summary > div {
  min-width: 0; display: grid; gap: 3px; padding: 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
}
.multi-daily-summary strong { font-family: Georgia, serif; font-size: 25px; }
.multi-daily-summary span { color: var(--muted); font-size: 11px; }
.multi-daily-book-list-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 2px 4px 0;
}
.multi-daily-book-list-head div { display: grid; gap: 4px; }
.multi-daily-book-list-head strong { font-size: 1.08rem; }
.multi-daily-book-list-head small, .multi-daily-book-list-head span { color: var(--muted); }
.multi-daily-book-list-head span { flex: 0 0 auto; }
.multi-daily-book-list { display: grid; gap: 10px; position: relative; z-index: 1; }
.multi-daily-book-row {
  display: grid; grid-template-columns: minmax(210px, 1.4fr) minmax(130px, .65fr) minmax(180px, 1fr) auto;
  gap: 14px; align-items: center; padding: 15px;
  border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--paper) 88%, transparent);
}
.multi-daily-book-choice { display: flex; align-items: center; gap: 12px; min-width: 0; }
.multi-daily-book-choice input { width: 21px; height: 21px; flex: 0 0 auto; accent-color: var(--teal); }
.multi-daily-book-choice span, .multi-daily-book-result { display: grid; gap: 4px; min-width: 0; }
.multi-daily-book-choice strong, .multi-daily-book-result strong { overflow-wrap: anywhere; }
.multi-daily-book-choice small, .multi-daily-book-result small { color: var(--muted); }
.multi-daily-count { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.multi-daily-count input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; }
.multi-daily-order { display: flex; gap: 4px; }
.multi-daily-primary-actions { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 12px; }
.multi-daily-words { margin-top: 28px; margin-bottom: 24px; position: relative; z-index: 0; }
.multi-daily-word-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.multi-daily-word-list article {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--paper) 90%, transparent);
}
.multi-daily-word-list article > div { display: grid; gap: 3px; min-width: 0; }
.multi-daily-word-list article small { color: var(--muted); overflow-wrap: anywhere; }
.multi-daily-word-number { color: var(--muted); font-size: 11px; }
.multi-daily-status { padding: 5px 8px; border-radius: 999px; background: var(--mint); color: var(--teal-dark); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.multi-daily-status.status-due-review, .multi-daily-status.status-old-wrong { background: #fff0d2; color: #8b5a00; }

@media (max-width: 980px) {
  .multi-daily-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .multi-daily-book-row { grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr); }
  .multi-daily-book-result { grid-column: 1; }
  .multi-daily-order { grid-column: 2; grid-row: 2; justify-content: end; }
}

@media (max-width: 620px) {
  .multi-daily-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multi-daily-book-row { grid-template-columns: 1fr; }
  .multi-daily-book-result, .multi-daily-order { grid-column: 1; grid-row: auto; }
  .multi-daily-order { justify-content: flex-start; }
  .multi-daily-primary-actions, .multi-daily-word-list { grid-template-columns: 1fr; }
}

:root[data-appearance-icon-shape] .brand-mark,
:root[data-appearance-icon-shape] .round-icon,
:root[data-appearance-icon-shape] .english-assistant-toggle > span {
  border-radius: var(--app-icon-radius);
}

@media (hover:hover) and (pointer:fine) {
  .dashboard-shortcuts button:hover {
    transform: scale(1.035);
    border-color: color-mix(in srgb,var(--teal) 42%,transparent);
    box-shadow: 0 13px 28px rgba(29,55,48,.12), inset 0 1px 0 rgba(255,255,255,.72);
  }
  .dashboard-shortcuts button:hover .dashboard-shortcut-icon { transform: scale(1.04); }
}

.panel { border-radius: 24px; padding: 28px 30px; margin-top: 22px; }
.panel-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.panel h2 { margin: 0; font-size: 20px; }
.panel-note { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.selection-memory-note { display: inline-block; margin: 8px 0 0; border-radius: 999px; padding: 6px 10px; color: var(--teal-dark); background: var(--mint); font-size: 10px; font-weight: 700; }

.group-picker { display: flex; align-items: center; gap: 12px; }
.group-picker select {
  border: 1px solid var(--line);
  background: white;
  border-radius: 12px;
  padding: 11px 36px 11px 13px;
  color: var(--ink);
  min-width: 225px;
}

.group-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.group-dot { height: 8px; border-radius: 999px; background: #ddd9d0; }
.group-dot.done { background: var(--teal); }
.group-dot.next { background: var(--gold); box-shadow: 0 0 0 3px rgba(213,168,72,.17); }

.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.insight-panel { display: flex; flex-direction: column; min-height: 250px; }
.compact-head { align-items: flex-start; }
.notebook-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 22px; }
.notebook-stats div { padding: 15px 12px; border-radius: 14px; background: #f1eee7; }
.notebook-stats strong { display: block; font: 700 26px Georgia, serif; color: var(--teal-dark); }
.notebook-stats span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.insight-panel .notebook-stats { grid-template-columns: repeat(3, 1fr); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.history-preview { margin: auto 0 0; padding: 22px; border-radius: 18px; background: var(--mint); }
.history-preview strong { font: 700 34px Georgia, serif; color: var(--teal-dark); margin-right: 7px; }
.history-preview span { color: var(--muted); font-size: 12px; }
.history-preview p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 12px 0 0; }

.page-view { max-width: 1000px; margin: 0 auto; }
.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 14px 0 26px; }
.view-head h1 { font-size: clamp(36px, 6vw, 58px); letter-spacing: -.04em; margin: 12px 0 8px; }
.view-head p { color: var(--muted); line-height: 1.7; margin: 0; }
.notebook-summary { margin-top: 0; }
.wrong-word-list, .history-list, .history-attempts { list-style: none; padding: 0; margin: 0; }
.wrong-word-list { display: grid; gap: 10px; max-height: 66vh; overflow-y: auto; padding-right: 4px; }
.wrong-word-item { display: grid; grid-template-columns: minmax(210px, 1fr) 1.5fr; gap: 20px; align-items: center; padding: 17px 19px; border-radius: 16px; background: #f3f0e9; border: 1px solid transparent; }
.wrong-word-item.record-selecting { grid-template-columns: auto minmax(210px, 1fr) 1.5fr; }
.wrong-word-item:hover { border-color: rgba(14,111,98,.16); }
.wrong-word-main strong { display: inline-block; font: 700 22px Georgia, serif; }
.wrong-word-main > span { margin-left: 9px; color: var(--muted); font: 13px Georgia, serif; }
.wrong-word-main p { color: var(--muted); font-size: 12px; margin: 5px 0 0; line-height: 1.55; }
.wrong-word-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; color: var(--muted); font-size: 10px; }
.wrong-word-meta > span { padding: 6px 8px; border-radius: 999px; background: white; }
.level-badge.review { color: var(--coral); background: var(--coral-soft); }
.level-badge.mastered { color: var(--teal); background: var(--mint); }
.empty-state { text-align: center; color: var(--muted); padding: 32px 20px; border-radius: 16px; background: #f3f0e9; line-height: 1.7; }

.history-list { display: grid; gap: 12px; }
.history-record-row { min-width: 0; }
.history-record-row.record-selecting { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.history-record-checkbox { margin-top: 19px; }
.history-session { border-radius: 18px; background: rgba(251,249,244,.92); box-shadow: 0 12px 36px rgba(44,53,47,.08); border: 1px solid rgba(255,255,255,.72); overflow: hidden; }
.history-session summary { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(210px, 1fr) auto; gap: 14px; align-items: center; cursor: pointer; padding: 18px 20px; }
.history-session summary::marker { color: var(--teal); }
.history-status { color: var(--teal); background: var(--mint); border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.history-status.cancelled { color: var(--coral); background: var(--coral-soft); }
.history-summary-main strong, .history-summary-main small { display: block; }
.history-summary-main small { color: var(--muted); margin-top: 4px; font-size: 10px; }
.history-summary-result { color: var(--muted); font-size: 11px; }
.history-session summary time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.history-detail { border-top: 1px solid var(--line); padding: 18px 20px; color: var(--muted); font-size: 12px; }
.history-detail-meta { margin: 0 0 12px; color: var(--muted); font-size: 10px; }
.history-attempts { display: grid; gap: 9px; }
.history-attempt { border-left: 4px solid var(--teal); border-radius: 12px; background: white; padding: 13px 15px; }
.history-attempt.fail { border-left-color: var(--coral); }
.attempt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.attempt-head strong { color: var(--ink); font: 700 18px Georgia, serif; }
.attempt-head span { color: var(--muted); font-size: 10px; }
.attempt-head time { margin-left: auto; color: var(--muted); font-size: 10px; }
.attempt-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.attempt-answers span { color: var(--ink); background: #f4f1ea; border-radius: 9px; padding: 9px 10px; }
.attempt-answers small { display: block; color: var(--muted); margin-bottom: 3px; font-size: 9px; }
.history-attempt p { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.load-more { display: block; margin: 20px auto 0; }
.record-management-head { gap: 16px; }
.record-management-actions, .record-management-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.record-management-bar { margin: 0 0 14px; }
.record-selected-count { color: var(--muted); font-size: 12px; margin-right: auto; }
.record-checkbox { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; cursor: pointer; }
.record-checkbox input { width: 19px; height: 19px; accent-color: var(--teal); cursor: pointer; }
.record-checkbox input:focus-visible { outline: 3px solid rgba(14,111,98,.28); outline-offset: 3px; }
.danger-button { border: 1px solid rgba(185,60,56,.28); border-radius: 12px; padding: 11px 15px; background: var(--coral-soft); color: #a62f2b; cursor: pointer; font-weight: 700; }
.danger-button:hover:not(:disabled) { background: #f8d9d4; }
.danger-button:focus-visible { outline: 3px solid rgba(185,60,56,.25); outline-offset: 2px; }
.danger-button:disabled { cursor: not-allowed; opacity: .5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.resume-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 20px;
  background: var(--mint);
  border: 1px solid rgba(14,111,98,.12);
}
.version-warning { border-color: rgba(214,99,77,.24); background: var(--coral-soft); }
.version-warning h3 { color: var(--coral); }
.recovery-warning { border-color: rgba(213,168,72,.38); background: rgba(213,168,72,.14); }
.recovery-warning h3 { color: var(--teal-dark); }
.resume-banner h3 { margin: 0 0 4px; }
.resume-banner p { margin: 0; color: var(--muted); font-size: 13px; }
.resume-actions { display: flex; align-items: center; gap: 10px; }

.dictation-draft-shelf {
  display: grid;
  gap: 18px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

.dictation-draft-count {
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 800;
  white-space: nowrap;
}

.dictation-draft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 12px;
}

.dictation-draft-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.dictation-draft-card strong { font-size: 18px; }
.dictation-draft-card p { margin: 6px 0 0; color: var(--muted); }
.dictation-draft-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cancel-button, .quiz-cancel, .round-cancel {
  border: 1px solid rgba(214, 99, 77, .28);
  background: rgba(255, 255, 255, .55);
  color: var(--coral);
  border-radius: 13px;
  padding: 12px 15px;
  cursor: pointer;
  white-space: nowrap;
}
.cancel-button:hover, .quiz-cancel:hover, .round-cancel:hover { background: var(--coral-soft); }
.quiz-cancel { padding: 9px 12px; font-size: 12px; }
.quiz-session-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.round-cancel { display: block; margin: 14px auto 0; background: transparent; border-color: transparent; }

.quiz-shell { max-width: 850px; margin: 0 auto; }
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 16px; }
.rounds { display: flex; gap: 8px; }
.round-pill { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.55); color: var(--muted); border: 1px solid var(--line); font: 700 13px Georgia, serif; }
.round-pill.active { color: white; background: var(--teal); border-color: var(--teal); box-shadow: 0 6px 16px rgba(14,111,98,.22); }
.round-pill.done { color: var(--teal); background: var(--mint); border-color: transparent; }
.quiz-progress { flex: 1; }
.quiz-progress-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.progress-track { height: 7px; background: rgba(30,45,42,.09); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--gold); border-radius: inherit; transition: width .25s ease; }

.quiz-card { border-radius: 32px; padding: 44px 52px 48px; min-height: 500px; }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
.direction-badge { color: var(--teal); background: var(--mint); padding: 7px 11px; border-radius: 999px; font-weight: 700; }
.prompt-area { text-align: center; padding: 53px 0 44px; }
.prompt-word { font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 8vw, 72px); letter-spacing: -.025em; margin: 0 0 8px; overflow-wrap: anywhere; }
.prompt-chinese { font-size: clamp(28px, 5vw, 45px); line-height: 1.45; margin: 0 auto 10px; max-width: 690px; }
.phonetic { color: var(--muted); font-family: Georgia, serif; font-size: 18px; }
.audio-button { margin-top: 22px; border-radius: 999px; padding: 11px 17px; color: var(--teal); background: white; border: 1px solid rgba(14,111,98,.2); }
.audio-button:hover { background: var(--mint); transform: translateY(-1px); }

.answer-form label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 9px; }
.answer-row { display: flex; gap: 10px; }
.answer-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid rgba(30,45,42,.15);
  background: white;
  border-radius: 15px;
  padding: 15px 17px;
  outline: none;
  color: var(--ink);
  font-size: 17px;
}
.answer-input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14,111,98,.09); }
.input-hint { color: #939c99; font-size: 11px; margin: 9px 0 0; }

.feedback { border-radius: 18px; padding: 20px 22px; animation: lift .25s ease both; }
.feedback.pass { background: var(--mint); border: 1px solid rgba(14,111,98,.14); }
.feedback.fail { background: var(--coral-soft); border: 1px solid rgba(214,99,77,.16); }
.feedback-title { display: flex; align-items: center; gap: 9px; font-weight: 800; margin-bottom: 12px; }
.feedback-title small { color: var(--muted); font-weight: 500; }
.source-badge { margin-left: auto; white-space: nowrap; border-radius: 999px; padding: 5px 8px; background: rgba(255,255,255,.65); color: var(--muted); font-size: 10px; font-style: normal; font-weight: 700; }
.feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.feedback-grid div { background: rgba(255,255,255,.54); padding: 11px 13px; border-radius: 11px; }
.feedback-grid small { display: block; color: var(--muted); margin-bottom: 4px; }
.morphology-feedback { margin-top: 14px; }
.morphology-toggle { width: 100%; text-align: center; }
.morphology-panel { margin-top: 10px; padding: 14px; border: 1px solid rgba(14,111,98,.16); border-radius: 14px; background: rgba(255,255,255,.62); }
.morphology-panel[hidden] { display: none; }
.morphology-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--teal-dark); }
.morphology-panel-head span { padding: 4px 8px; border-radius: 999px; background: var(--mint); color: var(--teal); font-size: 10px; font-weight: 700; white-space: nowrap; }
.morphology-disclaimer { margin: 7px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.morphology-hint-list { display: grid; gap: 9px; }
.morphology-hint-item { min-width: 0; padding: 12px 13px; border-radius: 12px; background: rgba(255,255,255,.78); overflow-wrap: anywhere; }
.morphology-hint-item p { margin: 6px 0 0; line-height: 1.55; }
.morphology-hint-head { display: flex; align-items: center; gap: 8px; }
.lexical-expansion-feedback { margin-top: 14px; }
.lexical-expansion-toggle { width: 100%; text-align: center; }
.lexical-expansion-panel { margin-top: 10px; padding: 14px; border: 1px solid rgba(14,111,98,.16); border-radius: 14px; background: rgba(255,255,255,.62); }
.lexical-expansion-panel[hidden] { display: none; }
.lexical-expansion-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--teal-dark); }
.lexical-expansion-head span { padding: 4px 8px; border-radius: 999px; background: var(--mint); color: var(--teal); font-size: 10px; font-weight: 700; white-space: nowrap; }
.lexical-expansion-disclaimer, .lexical-expansion-source { color: var(--muted); font-size: 11px; line-height: 1.6; }
.lexical-expansion-panel h4 { margin: 15px 0 8px; }
.lexical-phrase-list, .lexical-family-list, .lexical-usage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lexical-phrase-list li, .lexical-family-list li, .lexical-usage-list li { min-width: 0; padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,.78); overflow-wrap: anywhere; }
.lexical-phrase-list li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lexical-phrase-list span, .lexical-family-list span { color: var(--muted); font-size: 11px; }
.lexical-phrase-list p { margin: 5px 0 0; }
.lexical-family-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.free-study-lexical-expansion { width: min(760px,100%); margin: 14px 0 24px; }
.morphology-hint-head strong { color: var(--teal-dark); font-size: 16px; }
.morphology-hint-head span { padding: 3px 7px; border-radius: 999px; background: #f2efe8; color: var(--muted); font-size: 10px; }
.morphology-meaning { font-weight: 700; }
.morphology-word-hint, .morphology-alternatives { color: var(--muted); font-size: 12px; }
.morphology-word-hint small, .morphology-alternatives small { margin-right: 7px; color: var(--teal); font-weight: 700; }
.feedback-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; }
.secondary-button { background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; }
.secondary-button:hover { border-color: rgba(14,111,98,.35); color: var(--teal); }
.text-button { background: transparent; color: var(--coral); padding: 8px 0; font-size: 12px; }
.override-review { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.58); border: 1px solid rgba(14,111,98,.14); font-size: 12px; line-height: 1.65; }
.override-review.notice { border-color: rgba(196,132,29,.24); }
.override-review p { margin: 4px 0; }
.override-review small { color: var(--muted); }

.round-card, .finish-card { max-width: 760px; margin: 50px auto 0; border-radius: 30px; padding: 48px; text-align: center; }
.round-icon { margin: 0 auto 20px; width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; background: var(--mint); color: var(--teal); font-size: 28px; }
.round-card h1, .finish-card h1 { margin-bottom: 10px; font-size: 32px; }
.round-card > p, .finish-card > p { color: var(--muted); line-height: 1.7; }
.score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.score-box { padding: 18px; border-radius: 15px; background: #f2efe8; }
.score-box strong { display: block; font: 700 28px Georgia, serif; }
.score-box span { color: var(--muted); font-size: 11px; }
.round-results { margin: 0 0 28px; text-align: left; }
.round-results > h2 { font-size: 20px; margin: 0 0 7px; }
.round-results > p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0 0 13px; }
.round-result-group { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.64); margin-top: 10px; overflow: hidden; }
.round-result-group > h3, .round-result-group > summary { color: var(--ink); font-size: 14px; font-weight: 800; margin: 0; padding: 13px 15px; }
.round-result-group > summary { cursor: pointer; list-style-position: inside; }
.round-result-group > summary:focus-visible { outline: 3px solid rgba(14,111,98,.28); outline-offset: -3px; }
.failed-group { border-color: rgba(214,99,77,.30); background: var(--coral-soft); }
.passed-group { background: rgba(241,238,231,.72); }
.round-result-list { display: grid; gap: 8px; list-style: none; margin: 0; max-height: 330px; overflow: auto; padding: 0 12px 12px; }
.round-result-item { width: 100%; border: 0; border-radius: 12px; display: grid; gap: 8px; padding: 12px; text-align: left; background: white; color: var(--ink); cursor: pointer; }
.round-result-item:hover { background: #fcfbf8; }
.round-result-item:focus-visible { outline: 3px solid rgba(14,111,98,.32); outline-offset: 2px; }
.round-result-item.failed { border-left: 3px solid var(--coral); }
.round-result-item.passed { border-left: 3px solid rgba(14,111,98,.32); }
.round-result-word { display: grid; gap: 3px; min-width: 0; }
.round-result-word strong { font-size: 16px; overflow-wrap: anywhere; }
.round-result-word span, .round-result-meta { color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.round-result-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.round-results-perfect, .round-results-unavailable { border-radius: 12px; color: var(--teal-dark); background: var(--mint); font-size: 13px; margin: 0; padding: 12px 14px; }
.round-results-unavailable { color: var(--muted); background: #f1eee7; }
.round-word-card { width: min(620px, 100%); }
.round-word-phonetic { color: var(--teal-dark); font: 700 17px Georgia, serif; margin: 0 0 8px; }
.round-word-meaning { color: var(--ink); font-size: 17px; line-height: 1.65; margin: 0; overflow-wrap: anywhere; }
.round-word-actions { justify-content: flex-start; margin: 16px 0; }
.round-word-section { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.round-word-section h3 { font-size: 14px; margin: 0 0 8px; }
.round-word-section p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 4px 0; overflow-wrap: anywhere; }
.round-word-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.round-word-stats > div { border-radius: 11px; background: #f1eee7; padding: 10px 11px; min-width: 0; }
.round-word-stats dt { color: var(--muted); font-size: 10px; line-height: 1.4; }
.round-word-stats dd { color: var(--ink); font-weight: 800; font-size: 13px; line-height: 1.45; margin: 4px 0 0; overflow-wrap: anywhere; }
.result-levels { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 26px 0 30px; }
.level { border-radius: 14px; padding: 16px 8px; background: #f1eee7; }
.level.review { background: var(--coral-soft); }
.level strong { display:block; font: 700 24px Georgia,serif; }
.level span { color: var(--muted); font-size: 11px; }

.browse-view { max-width: 1120px; }
.browse-toolbar { margin-top: 0; padding: 22px 24px; }
.browse-search-form > label { display: block; color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.browse-search-form > div { display: flex; gap: 9px; }
.browse-search-form input { flex: 1; min-width: 0; }
.browse-search-form button { flex: 0 0 auto; padding: 12px 16px; }
.browse-search-results { margin: 16px 0 4px; border: 1px solid var(--line); border-radius: 16px; background: white; overflow: hidden; }
.browse-search-results.empty-search { color: var(--muted); padding: 18px; font-size: 12px; }
.search-result-head { display: flex; justify-content: space-between; gap: 16px; padding: 12px 15px; color: var(--muted); background: #f1eee7; font-size: 10px; }
.search-result-head strong { color: var(--ink); font-size: 11px; }
.search-result-list { max-height: 300px; overflow-y: auto; }
.search-result-item { width: 100%; display: grid; grid-template-columns: minmax(150px,.8fr) minmax(200px,1.4fr) auto; align-items: center; gap: 15px; padding: 13px 15px; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: white; cursor: pointer; text-align: left; }
.search-result-item:hover { background: var(--mint); }
.search-result-item span:first-child strong, .search-result-item span:first-child small { display: block; }
.search-result-item span:first-child strong { font: 700 18px Georgia, serif; }
.search-result-item span:first-child small, .search-result-item > span:nth-child(2), .search-result-item em { color: var(--muted); font-size: 10px; font-style: normal; }
.browse-group-nav { display: grid; grid-template-columns: auto minmax(240px,1fr) auto; align-items: end; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.browse-group-nav label span { display: block; color: var(--muted); font-size: 10px; margin: 0 0 6px; }
.browse-group-nav select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 34px 11px 13px; color: var(--ink); background: white; }
.browse-selection-bar { position: sticky; z-index: 5; top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 17px 0; padding: 15px 18px; border: 1px solid rgba(14,111,98,.18); border-radius: 18px; background: rgba(220,236,230,.96); box-shadow: 0 12px 30px rgba(44,53,47,.12); backdrop-filter: blur(10px); }
.browse-selection-bar strong, .browse-selection-bar span { display: block; }
.browse-selection-bar strong { color: var(--teal-dark); }
.browse-selection-bar span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.browse-selection-bar > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.browse-selection-bar button { padding: 11px 14px; border-radius: 12px; }
.browse-group-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 30px 4px 12px; }
.browse-group-heading span { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.browse-group-heading h2 { margin: 4px 0 0; font-size: 28px; }
.browse-group-heading p { color: var(--muted); font-size: 11px; margin: 0; }
.browse-pages { display: grid; gap: 18px; }
.browse-page { margin-top: 0; padding: 22px 24px; }
.browse-page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.browse-page-head span { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.browse-page-head h2 { margin: 3px 0; }
.browse-page-head p { color: var(--muted); font-size: 10px; margin: 0; }
.browse-page-head p strong { color: var(--teal); }
.browse-page-actions { display: flex; gap: 8px; }
.browse-word-list { list-style: none; margin: 0; padding: 8px 0 0; }
.browse-word-card { display: grid; grid-template-columns: 58px minmax(180px,.8fr) 38px minmax(260px,1.25fr); gap: 14px; align-items: center; min-height: 76px; padding: 11px 8px; border-bottom: 1px solid var(--line); border-radius: 12px; transition: background .18s ease, box-shadow .18s ease; }
.browse-word-card:last-child { border-bottom-color: transparent; }
.browse-word-card:hover { background: rgba(220,236,230,.45); }
.browse-word-card.search-highlight { background: #fff2ce; box-shadow: 0 0 0 3px rgba(213,168,72,.36); animation: searchPulse 1.1s ease 2; }
.word-check { display: grid; justify-items: center; gap: 3px; cursor: pointer; }
.word-check input { position: absolute; opacity: 0; pointer-events: none; }
.word-check span { width: 23px; height: 23px; display: grid; place-items: center; border: 1.5px solid rgba(30,45,42,.23); border-radius: 7px; background: white; }
.word-check input:checked + span { border-color: var(--teal); background: var(--teal); }
.word-check input:checked + span::after { content: "✓"; color: white; font-weight: 800; }
.word-check input:focus-visible + span { outline: 3px solid rgba(213,168,72,.65); outline-offset: 2px; }
.word-check small { color: var(--muted); font-size: 8px; }
.browse-word-english > span, .browse-word-english > strong, .browse-word-english > small { display: block; }
.browse-word-english > span { color: var(--muted); font-size: 9px; }
.browse-word-english > strong { margin: 2px 0; font: 700 22px Georgia, serif; overflow-wrap: anywhere; }
.browse-word-english > small { color: var(--muted); font: 12px Georgia, serif; }
.browse-word-card > p { color: #4e5e59; font-size: 13px; line-height: 1.65; margin: 0; }
.word-audio-button { width: 35px; height: 35px; border: 1px solid rgba(14,111,98,.18); border-radius: 50%; color: var(--teal); background: white; cursor: pointer; }
.word-audio-button:hover { background: var(--mint); }

.free-mode-view { max-width: 820px; }
.free-mode-status { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; color: var(--muted); font-size: 11px; }
.free-mode-status strong { color: var(--ink); font: 700 22px Georgia, serif; }
.free-mode-status em, .free-record-badge { margin-left: auto; padding: 7px 10px; border-radius: 999px; color: var(--teal-dark); background: var(--mint); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.flashcard-bilingual { min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; border: 1px solid rgba(255,255,255,.72); border-radius: 32px; background: rgba(251,249,244,.94); box-shadow: var(--shadow); text-align: center; }
.flashcard-number { color: var(--muted); font-size: 11px; }
.flashcard-bilingual h2 { margin: 10px 0 7px; font: 700 clamp(48px,9vw,78px) Georgia, serif; overflow-wrap: anywhere; }
.flashcard-divider { width: min(320px,70%); height: 1px; margin: 38px 0 28px; background: linear-gradient(90deg,transparent,var(--gold),transparent); }
.flashcard-bilingual > p { max-width: 640px; margin: 0; color: var(--ink); font-size: clamp(21px,4vw,31px); line-height: 1.55; }
.free-study-morphology { width: min(760px,100%); margin: 24px 0; text-align: left; }
.free-study-actions, .free-summary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.free-practice-shell .free-record-badge { margin-left: 0; }
.free-practice-errors { max-height: 260px; overflow-y: auto; list-style: none; margin: 20px 0; padding: 0; text-align: left; }
.free-practice-errors li { display: grid; grid-template-columns: minmax(120px,.6fr) 1fr 1fr; gap: 12px; align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--line); border-radius: 10px; }
.free-practice-errors li:nth-child(odd) { background: #f3f0e9; }
.free-practice-errors strong { font: 700 17px Georgia, serif; }
.free-practice-errors span, .free-practice-errors em { color: var(--muted); font-size: 10px; font-style: normal; }
.free-perfect { margin: 20px 0; color: var(--teal); font-weight: 800; }

@keyframes searchPulse { 50% { box-shadow: 0 0 0 8px rgba(213,168,72,.12); } }

.loading-card { max-width: 430px; margin: 120px auto; border-radius: 24px; padding: 48px; text-align: center; color: var(--muted); }
.loader { width: 26px; height: 26px; border: 3px solid var(--mint); border-top-color: var(--teal); border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; }
.loading-card p { margin: 14px 0 0; }
.error-card { color: var(--coral); }
.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop {
  position: fixed;
  z-index: 20;
  inset: 0 auto auto 0;
  width: var(--modal-viewport-width);
  height: var(--modal-viewport-height);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(17, 32, 29, .5);
}
.modal-card {
  width: min(560px, 100%);
  min-width: 0;
  max-height: var(--modal-max-height);
  overflow-y: auto;
  border-radius: 26px;
  padding: 30px;
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 90px rgba(17,32,29,.3);
  animation: lift .2s ease both;
}
.settings-modal-card { width: min(720px, 100%); }
.wordbook-modal-card { width: min(790px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal-head h2 { margin: 4px 0 0; font-size: 25px; }
.modal-kicker { color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.modal-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 28px; line-height: 1; padding: 2px 5px; }
.modal-copy { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 18px 0; }
.record-delete-card { width: min(520px, 100%); }
.record-delete-count { border-radius: 12px; padding: 11px 13px; background: #f1eee7; color: var(--muted); font-size: 12px; }
.settings-section { min-width: 0; border: 1px solid var(--line); border-radius: 18px; padding: 19px 20px; margin-top: 15px; background: rgba(255,255,255,.35); }
.settings-navigation-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 13px 0 4px; border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; color: var(--ink); background: color-mix(in srgb,var(--mint) 58%,var(--paper)); text-align: left; cursor: pointer; }
.settings-navigation-row span,.settings-navigation-row strong,.settings-navigation-row small { display: block; }
.settings-navigation-row small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.settings-navigation-row b { flex: 0 0 auto; color: var(--teal); font-size: 12px; }
.settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 4px; }
.settings-section-head span { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.settings-section-head h3 { margin: 3px 0 0; font-size: 18px; }
.settings-section-head > small { color: var(--muted); font-size: 10px; background: #efede7; border-radius: 999px; padding: 5px 9px; }
.section-copy { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 11px 0 14px; }
.ai-current-status { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; row-gap: 2px; background: var(--mint); border-radius: 14px; padding: 13px 15px; margin-bottom: 16px; }
.ai-current-status small { grid-column: 2; color: var(--muted); font-size: 11px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; cursor: pointer; }
.toggle-row span { display: block; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.toggle-row input { appearance: none; width: 46px; height: 26px; flex: 0 0 auto; border-radius: 999px; background: #cbc9c2; position: relative; cursor: pointer; transition: .18s ease; }
.toggle-row input::after { content: ""; position: absolute; width: 20px; height: 20px; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: .18s ease; }
.toggle-row input:checked { background: var(--teal); }
.toggle-row input:checked::after { transform: translateX(20px); }
.toggle-row input:disabled { cursor: not-allowed; opacity: .55; }
.compact-toggle { border-top: 1px solid var(--line); margin-top: 13px; }
.settings-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.keyboard-shortcut-list { display: grid; gap: 9px; margin: 12px 0; }
.keyboard-shortcut-group { margin: 8px 0 0; color: var(--teal); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.keyboard-shortcut-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.48); }
.keyboard-shortcut-row > span { min-width: 0; }
.keyboard-shortcut-row strong,.keyboard-shortcut-row small { display: block; }
.keyboard-shortcut-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.keyboard-shortcut-key { min-width: 92px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line)); border-bottom-width: 3px; border-radius: 10px; background: color-mix(in srgb, var(--mint) 68%, white); color: var(--teal-dark); font: 800 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }
.keyboard-shortcut-row.is-capturing { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent); }
.keyboard-shortcut-row.is-conflicted { border-color: rgba(193,70,54,.52); background: rgba(255,235,230,.72); }
.keyboard-shortcut-row.is-conflicted small,.keyboard-shortcut-row.is-conflicted .keyboard-shortcut-key { color: #9d392d; }
.keyboard-shortcut-row.is-locked { opacity: .62; }
.keyboard-shortcut-actions { display: flex; gap: 6px; }
.keyboard-shortcut-actions button { padding: 8px 10px; border-radius: 9px; box-shadow: none; font-size: 11px; }
@media (max-width: 620px) {
  .keyboard-shortcut-row { grid-template-columns: 1fr auto; }
  .keyboard-shortcut-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.range-control { display: block; border-radius: 13px; padding: 13px 14px 11px; background: #f1eee7; }
.range-control > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.range-control strong { font-size: 12px; }
.range-control output { color: var(--teal); font: 700 12px Georgia, serif; }
.range-control input { width: 100%; accent-color: var(--teal); cursor: pointer; }
.inline-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.compact-button { padding: 10px 13px; border-radius: 11px; font-size: 12px; box-shadow: none; }
.section-message { min-height: 16px; color: var(--muted); font-size: 11px; margin: 9px 0 0; }
.section-message.error { color: var(--coral); }
.backup-task-status { min-height: 18px; color: var(--muted); font-size: 12px; line-height: 1.65; margin: 10px 0 0; }
.backup-task-status.success { color: var(--teal-dark); }
.backup-task-status.error { color: var(--coral); }
.automatic-backup-status { display: grid; gap: 7px; margin-top: 13px; }
.automatic-backup-status .model-row { align-items: flex-start; flex-wrap: wrap; }
.automatic-backup-status .model-row strong { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.service-diagnostics-status { display: grid; gap: 7px; margin-top: 13px; }
.service-diagnostics-status .model-row { align-items: flex-start; flex-wrap: wrap; }
.service-diagnostics-status .model-row strong { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.server-readiness-section { border-color: color-mix(in srgb, var(--teal) 24%, var(--line)); }
.server-readiness-section .backup-task-status.success { color: var(--teal-dark); }
.server-readiness-section .backup-task-status.error { color: var(--coral); }
.account-admin-section { border-color: color-mix(in srgb, var(--gold) 32%, var(--line)); }
.account-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 13px; }
.account-invitation-result { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 15px; background: color-mix(in srgb, var(--mint) 72%, transparent); }
.account-invitation-result[hidden] { display: none; }
.account-invitation-result label { color: var(--teal-dark); font-size: 12px; font-weight: 800; }
.account-invitation-result small { color: var(--muted); line-height: 1.55; }
.account-invitation-result button { justify-self: end; }
.account-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 14px; }
.account-admin-form { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.5); }
.account-admin-form h4 { margin: 0 0 2px; font-size: 15px; }
.account-admin-form button { margin-top: 2px; }
.account-list { display: grid; gap: 7px; margin-top: 13px; }
.account-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 12px; background: #f0ede6; }
.account-list-item strong { min-width: 0; overflow-wrap: anywhere; }
.account-list-item small { color: var(--muted); text-align: right; }
.account-migration-card { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--mint) 58%, transparent); }
.account-migration-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-migration-head small { color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.account-migration-head h4 { margin: 3px 0 0; font-size: 16px; }
.account-migration-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.account-migration-result { display: grid; gap: 9px; }
.account-migration-result[hidden] { display: none; }
.account-migration-result > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.account-migration-manifest { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid var(--line); }
.account-migration-manifest[hidden] { display: none; }
.account-migration-manifest > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.account-migration-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.account-migration-summary.manifest-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.account-migration-summary span { display: grid; gap: 3px; padding: 10px; border-radius: 11px; color: var(--muted); background: color-mix(in srgb, var(--paper) 82%, transparent); font-size: 11px; }
.account-migration-summary strong { color: var(--ink); font-family: inherit; font-size: 20px; font-weight: 800; }
.account-migration-list { display: grid; gap: 6px; }
.account-migration-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--paper) 86%, transparent); }
.account-migration-item-copy { display: grid; gap: 3px; min-width: 0; }
.account-migration-item-copy small { color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.account-migration-item span { color: var(--muted); font-size: 11px; font-weight: 700; }
.account-migration-item.ready span { color: var(--teal-dark); }
.account-migration-item.ready-to-stage span,
.account-migration-item.already-identical span,
.account-migration-item.staged span { color: var(--teal-dark); }
.account-migration-item.conflict-review-required span { color: var(--coral); }
.account-migration-item.target-occupied span,
.account-migration-item.conflict-not-staged span { color: var(--coral); }
.backup-local-note { color: var(--coral); background: var(--coral-soft); border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.6; margin: 10px 0 0; }
.backup-readonly { opacity: .78; }
.restore-center-section { border-color: rgba(14,111,98,.22); }
.restore-selection { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.restore-selection legend { padding: 0 6px; color: var(--teal-dark); font-weight: 800; }
.restore-selection .toggle-row { margin: 0; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.55); }
.restore-selection:disabled { opacity: .72; }
.restore-file-drop.restore-disabled { cursor: not-allowed; opacity: .7; }
.restore-progress { display: block; width: 100%; height: 7px; margin: 12px 0; accent-color: var(--teal); }
.restore-summary { margin-top: 12px; }
.restore-summary-card { display: grid; gap: 5px; padding: 12px 14px; border-radius: 13px; background: #f1eee7; color: var(--muted); font-size: 11px; line-height: 1.55; }
.restore-summary-card > strong { color: var(--ink); font-size: 13px; }
.restore-change-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 6px; }
.restore-change-grid span { display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.7); }
.restore-change-grid strong { color: var(--teal-dark); font-size: 10px; }
.restore-conflict-list { display: grid; gap: 7px; margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--line); }
.restore-conflict-list ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.restore-conflict-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; border-radius: 9px; background: rgba(255,255,255,.7); }
.restore-conflict-list li strong { color: var(--ink); }
.restore-conflict-list li span { text-align: right; }
.restore-warnings { color: #8a5a17; background: #fff3df; border-radius: 11px; padding: 9px 11px; margin-top: 9px; font-size: 11px; line-height: 1.55; }
.restore-warnings:empty { display: none; }
.restore-terminal-card { width: min(720px, calc(100% - 28px)); margin: 58px auto; padding: 46px 36px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.84); text-align: center; box-shadow: 0 18px 55px rgba(29,43,40,.12); }
.restore-terminal-card h1 { margin: 18px 0 10px; }
.restore-terminal-card p { color: var(--muted); line-height: 1.7; }
.restore-terminal-card button { margin: 9px 5px 0; }
.restore-confirm-card { width: min(560px, calc(100% - 28px)); }
.restore-confirm-check { margin: 14px 0; }
.settings-fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.settings-fieldset:disabled { opacity: .62; }
.lan-status { color: var(--muted); font-size: 12px; line-height: 1.65; background: #f1eee7; border-radius: 12px; padding: 11px 13px; }
.lan-status.on { color: var(--teal-dark); background: var(--mint); }
.lan-status.error { color: var(--coral); background: var(--coral-soft); }
.device-sync-section { border-color: rgba(16,124,108,.28); }
.device-sync-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.device-sync-summary .model-row { min-width: 0; }
.device-sync-invitation,
.device-sync-join { min-width: 0; display: grid; gap: 9px; margin-top: 14px; padding: 15px; border-radius: 16px; background: rgba(16,124,108,.07); }
.device-sync-invitation[hidden] { display: none; }
.device-sync-invitation label,
.device-sync-join label { display: grid; gap: 4px; }
.device-sync-invitation small,
.device-sync-join small { color: var(--muted); }
.device-sync-code { min-height: 76px; resize: vertical; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; line-height: 1.55; }
.device-sync-qr { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.7); }
.device-sync-qr-image { display: grid; place-items: center; min-height: 260px; padding: 12px; border-radius: 12px; background: #fff; color: var(--muted); text-align: center; }
.device-sync-qr-image svg { display: block; width: 100%; height: auto; max-width: 360px; image-rendering: pixelated; }
.device-sync-qr p { margin: 0; color: var(--muted); line-height: 1.65; }
.device-sync-scanner { display: grid; gap: 9px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.7); }
.device-sync-scanner[hidden] { display: none; }
.device-sync-scanner video { display: block; width: 100%; max-height: 320px; border-radius: 12px; background: #172925; object-fit: cover; }
.device-sync-scanner video[hidden] { display: none; }
.device-sync-scanner img { display: block; width: 100%; max-height: 420px; border-radius: 12px; background: #f7f4ed; object-fit: contain; }
.device-sync-scanner img[hidden] { display: none; }
.device-sync-scanner p { margin: 0; color: var(--muted); line-height: 1.55; }
.device-sync-image-picker { display: inline-grid; place-items: center; cursor: pointer; }
.device-sync-peer-list { display: grid; gap: 10px; margin-top: 16px; }
.device-sync-peer-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.52); }
.device-sync-peer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.device-sync-peer-head span { color: var(--muted); font-size: 11px; }
.device-sync-peer-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.device-sync-peer-card .inline-actions { margin-top: 0; }
.device-sync-empty { margin: 14px 0 0; color: var(--muted); }
.device-sync-preview { display: grid; gap: 11px; margin-top: 7px; padding: 14px; border-radius: 14px; background: rgba(16,124,108,.07); border: 1px solid rgba(16,124,108,.18); }
.device-sync-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.device-sync-preview-head div { display: grid; gap: 3px; }
.device-sync-preview-head span { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.device-sync-preview-head small { color: var(--muted); }
.device-sync-direction-actions { justify-content: flex-start; }
.device-sync-preview-route { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.65); text-align: center; }
.device-sync-preview-route strong { overflow-wrap: anywhere; color: var(--ink); }
.device-sync-preview-route span { font-size: 10px; }
.device-sync-compatibility { display: flex; flex-wrap: wrap; gap: 7px; }
.device-sync-compatibility span { padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.device-sync-compatibility .ok { color: var(--teal-dark); background: rgba(16,124,108,.12); }
.device-sync-compatibility .blocked { color: var(--coral); background: rgba(226,97,67,.12); }
.device-sync-preview-table { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.62); }
.device-sync-preview-row { display: grid; grid-template-columns: minmax(86px,1.5fr) repeat(3,minmax(42px,.55fr)); gap: 7px; align-items: center; padding: 8px 10px; font-size: 10px; }
.device-sync-preview-row + .device-sync-preview-row { border-top: 1px solid var(--line); }
.device-sync-preview-row span:not(:first-child) { text-align: right; }
.device-sync-preview-table-head { color: var(--muted); font-weight: 700; background: rgba(238,235,227,.58); }
.device-sync-preview-messages { display: grid; gap: 6px; }
.device-sync-preview-messages p, .device-sync-preview-clear { padding: 9px 10px; border-radius: 10px; }
.device-sync-preview-messages .blocked { color: var(--coral); background: rgba(226,97,67,.1); }
.device-sync-preview-messages .warning { color: #8a5a00; background: rgba(222,165,55,.13); }
.device-sync-preview-clear { color: var(--teal-dark) !important; background: rgba(16,124,108,.1); }
.device-sync-transfer { border-color: rgba(222,165,55,.48); background: linear-gradient(145deg, rgba(255,251,240,.96), rgba(232,244,240,.92)); }
.device-sync-appearance-option { display:flex; align-items:center; gap:.85rem; margin:1rem 0; padding:.9rem 1rem; border:1px solid rgba(14,111,98,.2); border-radius:18px; background:rgba(255,255,255,.48); cursor:pointer; }
.device-sync-appearance-option input { width:1.25rem; height:1.25rem; accent-color:var(--teal); }
.device-sync-appearance-option span { display:grid; gap:.18rem; }
.device-sync-appearance-option small { color:var(--muted); }
.device-sync-transfer-complete { border-color: rgba(16,124,108,.42); }
.device-sync-transfer-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.device-sync-transfer-summary .model-row { min-width: 0; background: rgba(255,255,255,.72); }
.device-sync-confirmation { display: grid; gap: 7px; color: var(--ink); }
.device-sync-confirmation strong { font-size: 11px; }
.device-sync-conflict-domains { display: grid; gap: 8px; }
.device-sync-conflict-domains article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.66); }
.device-sync-conflict-domains article > span { color: var(--teal-dark); font-size: 10px; font-weight: 800; }
.device-sync-conflict-domains article > p { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.55; }
.device-sync-detail-row { display: grid; grid-template-columns: minmax(110px,1.5fr) repeat(4,minmax(42px,.5fr)); gap: 7px; align-items: center; padding: 8px 10px; font-size: 10px; }
.device-sync-detail-row + .device-sync-detail-row { border-top: 1px solid var(--line); }
.device-sync-detail-row span:not(:first-child) { text-align: right; }
.share-url-list { display: grid; gap: 8px; margin-top: 10px; }
.share-url-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; background: white; }
.share-url-item span { min-width: 0; }
.share-url-item strong, .share-url-item code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-url-item strong { font-size: 11px; }
.share-url-item code { color: var(--muted); font-size: 10px; margin-top: 3px; }
.copy-url-button { border: 0; border-radius: 9px; padding: 8px 10px; background: var(--mint); color: var(--teal-dark); cursor: pointer; font-weight: 700; font-size: 11px; }
.android-admin-access { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid rgba(14,111,98,.2); border-radius: 16px; background: rgba(222,240,234,.58); }
.android-admin-access[hidden] { display: none; }
.android-admin-access > div:first-child { display: grid; gap: 4px; }
.android-admin-access span { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.android-admin-access h4, .android-admin-access p { margin: 0; }
.android-admin-access h4 { font-size: 18px; }
.android-admin-access p { color: var(--muted); font-size: 11px; line-height: 1.65; }
.android-admin-access .device-sync-qr-image { min-height: 220px; }
.field-label { display: block; color: var(--muted); font-size: 12px; margin: 8px 0 8px; }
.settings-input { width: 100%; border: 1.5px solid var(--line); border-radius: 13px; padding: 13px 14px; color: var(--ink); background: white; outline: none; }
.settings-input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14,111,98,.09); }
.settings-select { cursor: pointer; margin-bottom: 6px; }
.security-note { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 8px 0 15px; }
.security-note a { color: var(--teal); }
.model-row { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); background: #f0ede6; border-radius: 11px; padding: 11px 13px; font-size: 12px; }
.model-row strong { color: var(--ink); }
.modal-message { min-height: 18px; color: var(--muted); font-size: 12px; margin: 13px 0 0; }
.modal-message.success { color: var(--teal); }
.modal-message.error { color: var(--coral); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.modal-open { overflow: hidden; }
.document-drop { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1.5px dashed rgba(14,111,98,.32); border-radius: 16px; padding: 16px 17px; background: var(--mint); cursor: pointer; }
.document-drop span, .document-drop strong, .document-drop small { display: block; }
.document-drop small { color: var(--muted); font-size: 10px; margin-top: 4px; line-height: 1.5; }
.document-drop input { max-width: 260px; color: var(--muted); font-size: 11px; }
.import-form-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 11px; margin-top: 13px; }
.import-field { display: block; }
.import-field > span { display: block; color: var(--muted); font-size: 11px; margin: 0 0 7px; }
.import-instructions { resize: vertical; min-height: 92px; line-height: 1.6; }
.import-jobs-section { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 19px; }
.import-job-list { display: grid; gap: 10px; margin-top: 12px; }
.empty-import-jobs { color: var(--muted); background: #f1eee7; border-radius: 13px; padding: 18px; text-align: center; font-size: 11px; margin: 0; }
.import-job { border: 1px solid var(--line); border-radius: 15px; background: white; padding: 14px 15px; }
.import-job.completed { border-color: rgba(14,111,98,.25); }
.import-job.failed, .import-job.paused { border-color: rgba(214,99,77,.28); }
.import-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.import-job-head strong, .import-job-head small { display: block; }
.import-job-head strong { font-size: 13px; }
.import-job-head small { color: var(--muted); font-size: 9px; margin-top: 4px; line-height: 1.5; }
.import-job-head > span { flex: 0 0 auto; border-radius: 999px; padding: 5px 8px; background: var(--mint); color: var(--teal-dark); font-size: 9px; font-weight: 800; }
.import-job.failed .import-job-head > span, .import-job.paused .import-job-head > span { background: var(--coral-soft); color: var(--coral); }
.import-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #e4e1da; margin: 12px 0 9px; }
.import-progress span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width .3s ease; }
.import-job > p { color: var(--muted); font-size: 10px; line-height: 1.55; margin: 0 0 8px; }
.import-job > p em { color: var(--coral); font-style: normal; }
.import-job-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 9px; margin-bottom: 9px; }
.import-job button + button { margin-left: 7px; }
.english-assistant { position: fixed; z-index: 24; right: 22px; bottom: 22px; display: grid; justify-items: end; pointer-events: none; }
.english-assistant-toggle { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; padding: 11px 16px 11px 11px; color: white; background: var(--teal); box-shadow: 0 14px 35px rgba(11,65,59,.24); cursor: pointer; }
.english-assistant-toggle > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--teal-dark); background: white; font: 800 12px/1 ui-sans-serif, sans-serif; }
.english-assistant-toggle > strong { font-size: 13px; }
.english-assistant-toggle[aria-expanded="true"] { display: none; }
.english-assistant-panel { pointer-events: auto; width: min(410px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 44px)); overflow: auto; border: 1px solid rgba(14,111,98,.26); border-radius: 22px; padding: 18px; color: var(--ink); background: rgba(250,249,245,.98); box-shadow: 0 24px 70px rgba(27,47,43,.25); }
.english-assistant-panel[hidden] { display: none; }
.english-assistant-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.english-assistant-head span { color: var(--teal); font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.english-assistant-head h2 { margin: 3px 0 0; font-size: 21px; }
.english-assistant-close { flex: 0 0 auto; border: 0; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); background: #efede6; font-size: 22px; line-height: 1; cursor: pointer; }
.english-assistant-context { margin: 13px 0 0; border-radius: 11px; padding: 9px 11px; color: var(--teal-dark); background: var(--mint); font-size: 11px; font-weight: 750; }
.english-assistant-safety { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.english-assistant-actions, .english-assistant-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.english-assistant-actions button, .english-assistant-suggestions button { border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; color: var(--teal-dark); background: white; font-size: 10px; cursor: pointer; }
.english-assistant-suggestions:empty { display: none; }
.english-assistant-suggestions button { background: var(--mint); }
.english-assistant-messages { display: grid; gap: 9px; min-height: 112px; max-height: 280px; overflow: auto; margin-top: 13px; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.72); scroll-behavior: smooth; }
.english-assistant-message { max-width: 92%; border-radius: 13px; padding: 9px 11px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.62; }
.english-assistant-message.assistant { justify-self: start; background: #efede6; }
.english-assistant-message.user { justify-self: end; color: white; background: var(--teal); }
.english-assistant-message.error { justify-self: start; color: var(--coral); background: var(--coral-soft); }
.english-assistant-form { display: grid; gap: 7px; margin-top: 13px; }
.english-assistant-form > label { color: var(--muted); font-size: 10px; font-weight: 750; }
.english-assistant-form textarea { width: 100%; min-height: 74px; resize: vertical; border: 1.5px solid var(--line); border-radius: 13px; padding: 11px 12px; color: var(--ink); background: white; outline: none; line-height: 1.55; }
.english-assistant-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14,111,98,.09); }
.english-assistant-status { min-height: 15px; margin: 0; color: var(--muted); font-size: 10px; }
.english-assistant-status.error { color: var(--coral); }
.english-assistant-form-actions { display: grid; grid-template-columns: auto auto 1fr; gap: 7px; }
.english-assistant-form-actions button { min-height: 38px; border: 1px solid var(--line); border-radius: 11px; padding: 8px 11px; color: var(--ink); background: white; cursor: pointer; font-size: 10px; }
.english-assistant-form-actions .primary-button { border-color: var(--teal); color: white; background: var(--teal); }
.english-assistant-form-actions button:disabled, .english-assistant-actions button:disabled { cursor: wait; opacity: .55; }
.assistant-quick-settings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 13px 0 0; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.assistant-quick-settings legend { padding: 0 6px; color: var(--muted); font-size: 10px; font-weight: 750; }
.assistant-quick-settings label { display: flex; align-items: center; gap: 7px; min-width: 0; border-radius: 10px; padding: 8px 9px; background: rgba(239,237,230,.72); color: var(--ink); font-size: 10px; cursor: pointer; }
.assistant-quick-settings input { accent-color: var(--teal); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; color: white; background: var(--ink); border-radius: 999px; padding: 11px 18px; font-size: 12px; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lift { from { opacity: 0; transform: translateY(8px); } }

.learning-tools { display: grid; gap: 12px; margin: 0 0 20px; }
.english-tool { border: 1px solid var(--line); border-radius: 14px; background: rgba(248,247,242,.78); padding: 12px 14px; }
.english-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.english-tool-head strong { color: var(--ink); font-size: 14px; }
.tool-empty, .english-tool small { color: var(--muted); font-size: 13px; margin: 9px 0 0; }
.example-sentence { color: var(--ink); font-size: 16px; line-height: 1.65; margin: 10px 0 3px; }
.example-translation { color: var(--muted); margin: 0; }
.sentence-form { display: grid; gap: 9px; margin-top: 10px; }
.sentence-form textarea { min-height: 80px; resize: vertical; }
.sentence-key-hint { color: var(--muted); font-size: 12px; margin-top: -3px; }
.correction-result { border-left: 3px solid var(--gold); margin-top: 12px; padding: 9px 0 9px 12px; }
.correction-result.pass { border-color: var(--green); }
.correction-result p { margin: 0 0 9px; line-height: 1.6; }
.correction-result dl, .sentence-log-item dl { display: grid; gap: 4px; margin: 0; }
.correction-result dt, .sentence-log-item dt { color: var(--green); font-size: 12px; font-weight: 800; }
.correction-result dd, .sentence-log-item dd { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.55; }
.sentence-required-note { background: #fff3df; border-radius: 10px; color: #8a5a17; font-size: 13px; margin: 0; padding: 9px 11px; }
.sentence-required-note.done { background: #e4f4ec; color: #087653; }
.browse-assist-toggles { display: flex; gap: 16px; color: var(--ink); font-size: 14px; font-weight: 700; margin-top: 14px; }
.browse-assist-toggles label { align-items: center; display: inline-flex; gap: 7px; }
.browse-word-card .english-tool { grid-column: 2 / 4; }
.sentence-log-list { display: grid; gap: 14px; list-style: none; margin: 18px 0 0; padding: 0; }
.sentence-log-item { border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.sentence-log-head { align-items: center; display: flex; gap: 10px; }
.sentence-log-head time { color: var(--muted); font-size: 12px; margin-left: auto; }
.sentence-log-item p { display: grid; gap: 4px; line-height: 1.6; margin: 11px 0; }
.sentence-log-item p small { color: var(--muted); font-weight: 800; }
.danger-text { color: #b93c38; }

@media (min-width: 761px) and (max-width: 1040px) {
  .wordbook-switcher { align-items: stretch; flex-direction: column; gap: 16px; }
  .wordbook-current, .wordbook-switch-actions { width: 100%; }
  .wordbook-switch-actions select { flex: 1 1 320px; min-width: 0; max-width: none; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .english-assistant { right: 12px; bottom: 12px; }
  .english-assistant-panel { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; padding: 15px; }
  .english-assistant-messages { max-height: min(34dvh, 270px); }
  .english-assistant-form-actions { grid-template-columns: 1fr 1fr; }
  .english-assistant-form-actions .primary-button { grid-column: 1 / -1; }
  .assistant-quick-settings { grid-template-columns: 1fr 1fr; }
  .site-header { padding: 20px 20px 5px; }
  .backup-link { font-size: 0; }
  .backup-link::after { content: "备份"; font-size: 12px; }
  .ai-settings-button .ai-label { font-size: 0; }
  .ai-settings-button .ai-label::after { content: "设置"; font-size: 12px; }
  .browse-button { font-size: 0; }
  .browse-button::after { content: "浏览"; font-size: 12px; }
  .app-shell { width: min(100% - 24px, 1120px); margin-top: 18px; }
  .wordbook-switcher, .wordbook-current, .wordbook-switch-actions { align-items: stretch; flex-direction: column; }
  .wordbook-current { gap: 10px; }
  .wordbook-switch-actions select { max-width: none; width: 100%; }
  .wordbook-switch-actions button { width: 100%; }
  .hero { grid-template-columns: 1fr; }
  .dashboard-shortcuts { gap: 8px; padding: 12px; }
  .dashboard-shortcuts button { border-radius: 14px; padding: 11px 4px 9px; }
  .dashboard-shortcut-icon { width: min(42px, 80%); }
  .dashboard-shortcuts strong { font-size: 9px; }
  .insight-grid { grid-template-columns: 1fr; }
  .hero-main { padding: 34px 28px; min-height: 245px; }
  .hero-main::after { font-size: 150px; }
  .today-card { padding: 28px; }
  .panel { padding: 22px; }
  .panel-head { align-items: stretch; flex-direction: column; }
  .compact-head .secondary-button { width: 100%; }
  .notebook-stats, .insight-panel .notebook-stats { grid-template-columns: repeat(2, 1fr); }
  .panel-actions { align-items: stretch; flex-direction: column; }
  .panel-actions button { width: 100%; }
  .view-head { align-items: stretch; flex-direction: column; }
  .view-head .secondary-button { width: 100%; }
  .wrong-word-item { grid-template-columns: 1fr; }
  .wrong-word-item.record-selecting { grid-template-columns: auto minmax(0, 1fr); }
  .wrong-word-item.record-selecting .wrong-word-meta { grid-column: 2; }
  .wrong-word-meta { justify-content: flex-start; }
  .record-management-actions, .record-management-bar { align-items: stretch; flex-direction: column; }
  .record-management-actions button, .record-management-bar button { width: 100%; }
  .record-selected-count { margin: 0; }
  .history-session summary { grid-template-columns: auto 1fr; }
  .history-summary-result, .history-session summary time { grid-column: 2; }
  .attempt-answers { grid-template-columns: 1fr; }
  .group-picker { align-items: stretch; flex-direction: column; }
  .group-picker select { width: 100%; }
  .group-strip { grid-template-columns: repeat(10,1fr); }
  .resume-banner { align-items: stretch; flex-direction: column; }
.resume-actions { align-items: stretch; flex-direction: column-reverse; }
.resume-actions button { width: 100%; }
.dictation-draft-card { align-items: stretch; flex-direction: column; }
.dictation-draft-actions { align-items: stretch; flex-direction: column-reverse; }
.dictation-draft-actions button { width: 100%; }
.quiz-top { align-items: flex-start; flex-direction: column; }
.quiz-session-actions { align-self: stretch; justify-content: flex-end; flex-wrap: wrap; }
.quiz-cancel { align-self: flex-end; }
  .quiz-progress { width: 100%; }
  .quiz-card { padding: 28px 20px 30px; border-radius: 24px; min-height: 480px; }
  .prompt-area { padding: 46px 0 38px; }
  .answer-row { flex-direction: column; }
  .feedback-grid { grid-template-columns: 1fr; }
  .feedback-actions { align-items: stretch; flex-direction: column-reverse; }
  .feedback-actions button { width: 100%; }
  .feedback-title { flex-wrap: wrap; }
  .source-badge { margin-left: 0; }
  .modal-card { padding: 24px 20px; border-radius: 22px; }
  .settings-section { padding: 17px 15px; }
  .settings-range-grid { grid-template-columns: 1fr; }
  .inline-actions { align-items: stretch; flex-direction: column-reverse; }
  .inline-actions button { width: 100%; }
  .account-admin-actions { align-items: stretch; flex-direction: column; }
  .account-admin-actions button { width: 100%; }
  .account-admin-grid { grid-template-columns: 1fr; }
  .account-invitation-result button { justify-self: stretch; width: 100%; }
  .account-migration-head { align-items: stretch; flex-direction: column; }
  .account-migration-actions { display: grid; grid-template-columns: 1fr; }
  .account-migration-head button { width: 100%; }
  .account-migration-summary { grid-template-columns: 1fr; }
  .account-migration-summary.manifest-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-migration-card.has-preview:not(.has-manifest) .account-migration-result,
  .account-migration-card.has-manifest:not(.has-staging) .account-migration-manifest,
  .account-migration-card.has-staging .account-migration-staging { padding-bottom: 64px; }
  .restore-change-grid { grid-template-columns: 1fr; }
  .device-sync-summary { grid-template-columns: 1fr; }
  .device-sync-transfer-summary { grid-template-columns: 1fr; }
  .device-sync-peer-head { display: grid; }
  .device-sync-qr { grid-template-columns: 1fr; }
  .device-sync-qr-image { width: min(100%, 320px); justify-self: center; }
  .device-sync-preview-head { display: grid; }
  .device-sync-preview-route { grid-template-columns: 1fr; }
  .device-sync-preview-row { grid-template-columns: minmax(72px,1.3fr) repeat(3,minmax(36px,.55fr)); padding-inline: 8px; }
  .restore-terminal-card { margin-top: 28px; padding: 34px 22px; }
  .share-url-item { grid-template-columns: 1fr; }
  .copy-url-button { width: 100%; }
  .modal-actions { align-items: stretch; flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
  .document-drop { align-items: stretch; flex-direction: column; }
  .document-drop input { max-width: 100%; }
  .import-form-grid { grid-template-columns: 1fr; }
  .import-job button { width: 100%; }
  .import-job button + button { margin: 7px 0 0; }
  .round-card, .finish-card { margin-top: 22px; padding: 34px 22px; }
  .result-levels { grid-template-columns: repeat(2,1fr); }
  .round-result-meta { display: grid; gap: 3px; }
  .round-word-stats { grid-template-columns: 1fr; }
  .browse-search-form > div, .browse-group-nav, .browse-selection-bar, .browse-group-heading, .browse-page-head { align-items: stretch; display: flex; flex-direction: column; }
  .browse-search-form button, .browse-group-nav button { width: 100%; }
  .browse-selection-bar { position: static; }
  .browse-selection-bar > div:last-child, .browse-page-actions { justify-content: stretch; }
  .browse-selection-bar button, .browse-page-actions button { flex: 1; }
  .search-result-item { grid-template-columns: 1fr; gap: 5px; }
  .browse-word-card { grid-template-columns: 45px minmax(0,1fr) 38px; gap: 9px; }
  .browse-word-card > p { grid-column: 2 / 4; padding: 0 0 6px; }
  .flashcard-bilingual { min-height: 410px; padding: 34px 20px; }
  .free-study-actions button, .free-summary-actions button { flex: 1 1 42%; }
  .free-practice-errors li { grid-template-columns: 1fr; gap: 4px; }
}

/* Keep the appearance workbench wider than ordinary dialogs. This rule lives
   after the shared modal styles so later generic declarations cannot squeeze it. */
.modal-card.appearance-modal-card {
  width: min(1120px, 100%);
  padding: 26px;
  overflow-x: hidden;
}

.appearance-modal { z-index: 26; }

:root[data-appearance-material="glass"] .modal-card.appearance-modal-card {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
}

:root[data-appearance-material="glass-clear"] .modal-card.appearance-modal-card {
  background: color-mix(in srgb, var(--paper) 76%, transparent);
}

:root[data-theme="dark"] .appearance-modal-card .secondary-button {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 78%, white 10%);
}

/* Dark liquid glass must stay translucent without sacrificing text contrast. */
:root[data-theme="dark"][data-appearance-material^="glass"] .modal-card {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}

:root[data-theme="dark"] .settings-section,
:root[data-theme="dark"] .appearance-control-card,
:root[data-theme="dark"] .appearance-preview,
:root[data-theme="dark"] .device-sync-peer-card,
:root[data-theme="dark"] .device-sync-preview,
:root[data-theme="dark"] .account-migration-card,
:root[data-theme="dark"] .account-admin-form {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

:root[data-theme="dark"] .range-control,
:root[data-theme="dark"] .model-row,
:root[data-theme="dark"] .device-sync-preview-route,
:root[data-theme="dark"] .device-sync-preview-table,
:root[data-theme="dark"] .device-sync-transfer-summary .model-row,
:root[data-theme="dark"] .device-sync-appearance-option,
:root[data-theme="dark"] .account-migration-summary span,
:root[data-theme="dark"] .account-migration-item,
:root[data-theme="dark"] .account-list-item {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, white 5%);
}

:root[data-theme="dark"] .device-sync-transfer {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--paper) 94%, var(--gold) 6%),
    color-mix(in srgb, var(--paper) 92%, var(--teal) 8%));
}

:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .settings-input {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, white 9%);
}

:root[data-theme="dark"] .device-sync-preview-messages .warning {
  color: #f0ca77;
  background: rgba(222,165,55,.16);
}

:root[data-theme="dark"] .device-sync-preview-clear {
  color: #7bdbc9 !important;
  background: rgba(52,175,154,.14);
}

:root[data-theme="dark"] .hero-main,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .quiz-card,
:root[data-theme="dark"] .round-card,
:root[data-theme="dark"] .finish-card,
:root[data-theme="dark"] .loading-card {
  color: var(--ink);
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 93%, transparent);
}

:root[data-theme="dark"] .today-card {
  color: #f3faf7;
  border-color: rgba(229,240,235,.14);
  background: #14231f;
}

:root[data-theme="dark"] .wordbook-switch-actions select,
:root[data-theme="dark"] .group-select,
:root[data-theme="dark"] .answer-input,
:root[data-theme="dark"] .audio-button,
:root[data-theme="dark"] .history-attempt,
:root[data-theme="dark"] .browse-search-results,
:root[data-theme="dark"] .search-result-item,
:root[data-theme="dark"] .browse-group-nav select,
:root[data-theme="dark"] .round-result-item,
:root[data-theme="dark"] .share-url-item,
:root[data-theme="dark"] .import-job {
  color: var(--ink);
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 84%, white 7%);
}

:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .search-result-head,
:root[data-theme="dark"] .passed-group,
:root[data-theme="dark"] .record-delete-count,
:root[data-theme="dark"] .settings-section-head > small {
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 88%, white 5%);
}

:root[data-theme="dark"] .morphology-panel,
:root[data-theme="dark"] .lexical-expansion-panel,
:root[data-theme="dark"] .morphology-hint-item,
:root[data-theme="dark"] .lexical-phrase-list li,
:root[data-theme="dark"] .lexical-family-list li,
:root[data-theme="dark"] .lexical-usage-list li,
:root[data-theme="dark"] .feedback-grid div,
:root[data-theme="dark"] .override-review,
:root[data-theme="dark"] .round-result-group {
  color: var(--ink);
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 86%, white 5%);
}

:root[data-theme="dark"] .notebook-stats div,
:root[data-theme="dark"] .wrong-word-item,
:root[data-theme="dark"] .wrong-word-meta > span {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, white 8%);
}

@media (max-width: 600px) {
  .appearance-modal {
    place-items: start center;
    padding: 6px;
  }

  .modal-card.appearance-modal-card {
    width: 100%;
    max-height: calc(var(--modal-viewport-height) - 12px);
    padding: 20px 15px;
    border-radius: 22px;
  }
}