:root {
  --v9-ui-font: 'Microsoft YaHei', 'PingFang SC', -apple-system, 'Segoe UI', sans-serif;
  --v9-ink: #152b48;
  --v9-muted: #52647c;
  --v9-focus: #d5a82f;
}
html, body { font-family: var(--v9-ui-font); }
button, input, select, textarea { font-family: inherit; letter-spacing: 0; }
::selection { color: #ffffff; background: #245daa; }

/* A single navigation geometry also applies inside both mobile drawers. */
.learning-layout .learning-sidebar {
  padding: 16px 12px 12px;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #36537a transparent;
}
.learning-layout .learning-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  flex: 0 0 76px;
  width: 100%;
  padding: 0 10px 14px;
  text-align: left;
}
.learning-layout .learning-brand-mark { width: 46px; height: 46px; border-radius: 8px; }
.learning-layout .learning-brand small { display: block; margin: 0; font-size: 20px; line-height: 1.4; }
.learning-layout .learning-sidebar .learning-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(11, minmax(48px, 1fr));
  gap: 6px;
  flex: 1 0 588px;
  min-height: 588px;
  align-content: stretch;
  overflow: visible;
}
.learning-layout .learning-nav-divider { display: none; }
.learning-layout .learning-sidebar .learning-nav-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: start;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: 600 15px/1.5 var(--v9-ui-font);
  text-align: left;
  color: #f6d16a;
  background: transparent;
  box-shadow: none;
}
.learning-layout .learning-nav-item .learning-nav-text { width: 100%; font-weight: 600; white-space: nowrap; text-shadow: none; letter-spacing: 0; }
.learning-layout .learning-nav-icon { width: 34px; height: 34px; border-radius: 6px; border-color: #bdab705c; font-size: 18px; line-height: 1; }
.learning-layout .learning-nav-item:hover:not(.is-active) { color: #ffe293; background: #ffffff0b; border-color: #ffffff12; }
.learning-layout .learning-nav-item.is-active { color: #ffe293; background: #164780; border-color: #376ba2; box-shadow: none; }
.learning-layout:has(.time-home) .learning-nav-item.is-active { background: #164780; border-color: #376ba2; }
.learning-layout:has(.time-home) .learning-nav-item:hover:not(.is-active) { background: #ffffff0b; border-color: #ffffff12; }
.learning-layout .learning-nav-item.is-active .learning-nav-icon { color: #ffffff; border-color: #e3c05b; background: #123963; }
.learning-layout .learning-nav-item:focus-visible { outline: 2px solid #f6d16a; outline-offset: -2px; }
.learning-layout .learning-sidebar-foot { min-height: 30px; margin-top: 12px; padding: 8px 10px 0; flex: 0 0 auto; font-size: 11px; }

.learning-layout .app-shell :is(.page-head, .topbar) .brand { font-size: 24px; font-weight: 700; line-height: 1.4; }
.learning-layout .app-shell :is(.page-head, .topbar) .sub { margin-top: 3px; font-size: 13px; line-height: 1.6; }
.learning-layout .app-shell :is(.section-heading h2, .extension-intro h1, .favorites-intro h1) { font-size: 26px; font-weight: 700; line-height: 1.4; }
.learning-layout .app-shell :is(.book-info h2, .word-list-card h2, .extension-card-info h2, .quiz-book-card h3) { color: var(--v9-ink); font-size: 18px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.learning-layout .app-shell .textbook-reading-volume-title > strong { font-size: 22px; font-weight: 700; line-height: 1.4; }
.learning-layout .app-shell :is(.word-list-card p, .extension-card-info p, .book-info > p, .textbook-reading-volume-edition) { color: var(--v9-muted); font-size: 13px; line-height: 1.6; }
.learning-layout .app-shell .project-kicker { color: var(--v9-muted); font-size: 12px; line-height: 1.6; }
.learning-layout .app-shell :is(.book-card, .word-list-card, .extension-card, .quiz-book-card, .textbook-reading-volume-card) { border-radius: 8px; border-color: #d4deec; box-shadow: 0 4px 12px #0000000a; }
.learning-layout .app-shell :is(.book-card, .word-list-card, .extension-card, .quiz-book-card, .textbook-reading-volume-card) .btn { min-height: 38px; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.learning-layout .app-shell :is(.word-filter-panel, .textbook-reading-filter-panel) { border-radius: 8px; }
.learning-layout .app-shell :is(button, a, select, input):focus-visible { outline: 2px solid var(--v9-focus); outline-offset: 3px; }
.learning-layout .app-shell button:disabled { cursor: not-allowed; }

@media (min-width: 701px) and (max-width: 1100px) {
  .learning-layout:not(:has(.time-home)) { --learning-sidebar-width: 204px; }
}
@media (max-width: 700px) {
  .learning-layout .learning-brand small { font-size: 18px; }
  .learning-layout .app-shell :is(.page-head, .topbar) .brand { font-size: 21px; }
  .learning-layout .app-shell :is(.section-heading h2, .extension-intro h1, .favorites-intro h1) { font-size: 23px; }
  .learning-layout .app-shell .textbook-reading-volume-title > strong { font-size: 20px; }
  .learning-layout .app-shell :is(.book-card, .word-list-card, .extension-card, .quiz-book-card, .textbook-reading-volume-card) .btn { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .learning-layout .learning-nav-item, .learning-layout .learning-nav-text { transition: none; }
}