/*
 * Scheme 2 visual polish.
 * This stylesheet is intentionally scoped to home, online practice, and the
 * learning-node manager so existing data actions and unrelated modules keep
 * their current behavior.
 */

:is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) {
    --scheme2-visual-refresh: 20260831;
    --s2-canvas: #f3f6f5;
    --s2-surface: #ffffff;
    --s2-surface-muted: #f6f8f7;
    --s2-surface-strong: #e8efec;
    --s2-ink: #182421;
    --s2-muted: #5f6f6a;
    --s2-brand: #176b5a;
    --s2-brand-strong: #104d42;
    --s2-brand-soft: #e6f1ed;
    --s2-blue: #2d5f7d;
    --s2-blue-soft: #eaf1f5;
    --s2-warm: #c86135;
    --s2-warm-soft: #fff0e8;
    --s2-line: #d5dfdb;
    --s2-line-strong: #b7c7c1;
    --s2-danger: #a23b32;
    --s2-success: #23715b;
    --s2-focus: #bd5a31;
    --s2-radius-section: 12px;
    --s2-radius-control: 8px;
    --s2-shadow-header: 0 2px 8px rgba(30, 55, 49, 0.08);
    --s2-shadow-float: 0 4px 12px rgba(30, 55, 49, 0.12);
    background: var(--s2-canvas);
    color: var(--s2-ink);
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) :focus-visible {
    outline: 3px solid var(--s2-focus);
    outline-offset: 2px;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) ::selection {
    background: var(--s2-brand-soft);
    color: var(--s2-brand-strong);
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) :is(h1, h2, h3) {
    color: var(--s2-ink);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) :is(p, .hint) {
    text-wrap: pretty;
  }

  /* Shared application header */
  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .site-header {
    min-block-size: 68px;
    border-block-start: 4px solid var(--s2-brand);
    border-block-end: 1px solid var(--s2-line);
    padding-block: 0.45rem;
    background: rgba(255, 255, 255, 0.98);
    color: var(--s2-ink);
    box-shadow: var(--s2-shadow-header);
    backdrop-filter: none;
  }

  html :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .site-header {
    border-block-start-color: var(--s2-brand);
    border-block-end: 1px solid var(--s2-line);
    background: rgba(255, 255, 255, 0.98);
    color: var(--s2-ink);
    box-shadow: var(--s2-shadow-header);
    backdrop-filter: none;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .brand-logo {
    inline-size: 2.65rem;
    block-size: 2.65rem;
    border: 0;
    padding: 0.15rem;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(30, 55, 49, 0.13);
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .brand strong {
    color: var(--s2-ink);
    font-size: 0.96rem;
    font-weight: 750;
    letter-spacing: 0;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .brand span {
    color: var(--s2-muted);
    font-size: 0.72rem;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) :is(.nav, .account-nav) .tab {
    min-block-size: 44px;
    border: 1px solid transparent;
    border-radius: var(--s2-radius-control);
    background: transparent;
    color: #40524d;
    box-shadow: none;
    font-size: 0.88rem;
    font-weight: 650;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) :is(.nav, .account-nav) .tab:is(:hover, :focus-visible) {
    border-color: var(--s2-line);
    background: var(--s2-surface-muted);
    color: var(--s2-brand-strong);
    box-shadow: none;
    transform: none;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) :is(.nav, .account-nav) .tab.is-active {
    border-color: transparent;
    background: var(--s2-brand-soft);
    color: var(--s2-brand-strong);
    box-shadow: inset 0 -2px 0 var(--s2-brand);
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .account-nav .account-tab {
    border-color: var(--s2-line-strong);
    background: #ffffff;
    color: var(--s2-brand-strong);
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .public-nav-toggle {
    min-inline-size: 44px;
    min-block-size: 44px;
    border-color: var(--s2-line-strong);
    background: #ffffff;
  }

  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .public-nav-toggle span,
  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .public-nav-toggle span::before,
  :is(
    body[data-role][data-page-module="home"],
    body[data-role][data-page-module="onlinePractice"],
    body[data-role][data-page-module="learningNodeAdmin"]
  ) .public-nav-toggle span::after {
    background: var(--s2-brand-strong);
  }

  /* Public and signed-in home */
  body[data-role][data-page-module="home"] .home-banner,
  body[data-role][data-page-module="home"] .member-home-banner-section {
    inline-size: min(100%, 86rem);
    margin-inline: auto;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: #e9eeec;
    box-shadow: var(--s2-shadow-float);
  }

  body[data-role][data-page-module="home"] #home-banner {
    inline-size: calc(100% + var(--page-inline-gutter) + var(--page-inline-gutter));
    max-inline-size: none;
    margin-inline: calc(0px - var(--page-inline-gutter));
    justify-self: stretch;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: #e9eeec;
    box-shadow: var(--s2-shadow-float);
  }

  body[data-role][data-page-module="home"] .home-banner-arrow,
  body[data-role][data-page-module="home"] .member-home-banner-arrow {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.76);
    background: rgba(17, 57, 50, 0.9);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(10, 36, 31, 0.2);
  }

  body[data-role][data-page-module="home"] :is(.home-banner-arrow, .member-home-banner-arrow):hover {
    background: var(--s2-brand-strong);
    transform: none;
  }

  body[data-role][data-page-module="home"] :is(.home-banner-dots, .member-home-banner-dots) button[aria-current="true"]::after,
  body[data-role][data-page-module="home"] .member-home-banner-dots button[aria-current="true"] {
    background: var(--s2-warm);
  }

  body[data-role][data-page-module="home"] #main .intro-panel.public-home-intro {
    inline-size: min(100%, 70rem);
    max-inline-size: 70rem;
    grid-template-areas: "primary lookup";
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
    gap: 1rem;
    align-items: stretch;
    margin: 1.25rem auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-role][data-page-module="home"] #main .intro-panel.public-home-intro::before,
  body[data-role][data-page-module="home"] #main .intro-panel.public-home-intro::after {
    display: none;
  }

  body[data-role][data-page-module="home"] :is(.public-home-intro-primary, .public-home-word-lookup) {
    min-inline-size: 0;
    padding: 1.25rem;
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-radius-control);
    background: var(--s2-surface);
    box-shadow: none;
  }

  body[data-role][data-page-module="home"] .public-home-intro-primary::before {
    display: none;
  }

  body[data-role][data-page-module="home"] #main .intro-panel.public-home-intro h1 {
    max-inline-size: 12ch;
    margin-block: 0.25rem 0.7rem;
    font-size: 2.35rem;
    font-weight: 760;
    line-height: 1.14;
    letter-spacing: -0.025em;
  }

  body[data-role][data-page-module="home"] :is(.intro-panel.public-home-intro, .learning-home) .eyebrow {
    color: var(--s2-brand);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  body[data-role][data-page-module="home"] .public-home-intro-copy {
    padding: 0.4rem 0.25rem;
  }

  body[data-role][data-page-module="home"] .public-home-intro .public-home-word-lookup {
    min-inline-size: 0;
    align-content: start;
    border: 0;
    border-inline-start: 1px solid var(--s2-line);
    border-radius: 0;
    padding: 0.35rem 0.25rem 0.35rem 1.25rem;
    background: transparent;
    box-shadow: none;
  }

  body[data-role][data-page-module="home"] .public-home-intro .public-home-word-lookup h2 {
    margin-block: 0.15rem 0.3rem;
    font-size: 1.2rem;
  }

  body[data-role][data-page-module="home"] .public-home-intro :is(input, .button),
  body[data-role][data-page-module="home"] .school-practice-search :is(input, .button) {
    min-block-size: 44px;
    border-radius: var(--s2-radius-control);
  }

  body[data-role][data-page-module="home"] .public-home-intro input,
  body[data-role][data-page-module="home"] .school-practice-search input {
    border-color: var(--s2-line-strong);
    background: #ffffff;
    color: var(--s2-ink);
  }

  body[data-role][data-page-module="home"] .public-home-intro input::placeholder,
  body[data-role][data-page-module="home"] .school-practice-search input::placeholder {
    color: #63736e;
    opacity: 1;
  }

  body[data-role][data-page-module="home"] .public-home-intro .button,
  body[data-role][data-page-module="home"] .school-practice-search .button {
    border-color: var(--s2-brand);
    background: var(--s2-brand);
    color: #ffffff;
    box-shadow: none;
  }

  body[data-role][data-page-module="home"] .public-home-intro .button:hover:not(:disabled),
  body[data-role][data-page-module="home"] .school-practice-search .button:hover:not(:disabled) {
    background: var(--s2-brand-strong);
    transform: translateY(-1px);
  }

  body[data-role][data-page-module="home"] :is(
    .public-practice-entries,
    #public-external-practice-preview,
    #public-trust-preview > .public-trust-section,
    .public-live-section .panel,
    .learning-section,
    .module-dev-panel
  ) {
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-radius-section);
    background: var(--s2-surface);
    box-shadow: none;
  }

  body[data-role][data-page-module="home"] .public-section {
    max-inline-size: 76rem;
    margin-block-start: 1.5rem;
  }

  body[data-role][data-page-module="home"] .public-section .section-title h2,
  body[data-role][data-page-module="home"] .learning-section .panel-title-row h3 {
    font-size: 1.35rem;
    font-weight: 740;
    letter-spacing: -0.015em;
  }

  body[data-role][data-page-module="home"] :is(.public-practice-entries, .learning-section) {
    padding: 1.25rem;
  }

  body[data-role][data-page-module="home"] :is(.module-entry-card, .course-cover-card, .voice-topic-card, .external-practice-card) {
    overflow: hidden;
    border: 1px solid var(--s2-line);
    border-radius: 10px;
    background: var(--s2-surface);
    box-shadow: none;
  }

  body[data-role][data-page-module="home"] :is(.module-entry-card, .course-cover-card, .voice-topic-card, .external-practice-card)::before {
    display: none;
  }

  body[data-role][data-page-module="home"] :is(.module-entry-card, .course-cover-card, .voice-topic-card, .external-practice-card):is(:hover, :focus-visible) {
    border-color: var(--s2-brand);
    background: var(--s2-surface-muted);
    box-shadow: 0 2px 8px rgba(30, 55, 49, 0.1);
    transform: translateY(-1px);
  }

  body[data-role][data-page-module="home"] :is(.course-cover-card, .voice-topic-card, .module-entry-card) strong {
    color: var(--s2-ink);
    font-weight: 700;
  }

  body[data-role][data-page-module="home"] :is(.course-cover-card, .voice-topic-card, .module-entry-card) span {
    color: var(--s2-muted);
  }

  body[data-role][data-page-module="home"] .course-cover-media {
    background: var(--s2-surface-strong);
  }

  body[data-role][data-page-module="home"] .course-cover-copy {
    background: #ffffff;
  }

  body[data-role][data-page-module="home"] :is(.home-course-grid, .module-entry-grid, .voice-topic-grid) {
    gap: 0.85rem;
  }

  body[data-role][data-page-module="home"] .home-course-grid {
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  }

  body[data-role][data-page-module="home"] .voice-topic-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  body[data-role][data-page-module="home"] .home-ad-placeholder {
    min-block-size: 7rem;
    border: 1px dashed var(--s2-line-strong);
    border-radius: 8px;
    background: #eef2f1;
    color: var(--s2-muted);
    box-shadow: none;
  }

  body[data-role][data-page-module="home"] .home-content-with-ad {
    gap: 1rem;
  }

  body[data-role][data-page-module="home"] .home-content-with-ad > .home-ad-right {
    margin-block-start: 0;
  }

  body[data-role][data-page-module="home"] .home-content-main {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: 1rem;
  }

  body[data-role][data-page-module="home"] .member-home-banner-section {
    order: 1;
  }

  body[data-role][data-page-module="home"] .home-latest-lookup-grid {
    order: 2;
  }

  body[data-role][data-page-module="home"] [data-home-ad="after-lookup"] {
    order: 3;
  }

  body[data-role][data-page-module="home"] [data-home-section="school-practice"] {
    order: 4;
    gap: 1rem;
  }

  body[data-role][data-page-module="home"] .learning-home .home-ad-placeholder:not([data-ad-filled="true"]):not(:has(iframe, ins, [data-ad-filled="true"])) {
    display: none;
  }

  body[data-role][data-page-module="home"] [data-home-section="voice"] {
    order: 5;
  }

  body[data-role][data-page-module="home"] [data-home-section="games"] {
    order: 6;
  }

  body[data-role][data-page-module="home"] [data-home-ad="before-testimonials"] {
    order: 7;
  }

  body[data-role][data-page-module="home"] [data-home-section="testimonials"] {
    order: 8;
  }

  body[data-role][data-page-module="home"] [data-home-section="schools"] { order: 9; }
  body[data-role][data-page-module="home"] [data-home-section="booking"] { order: 10; }
  body[data-role][data-page-module="home"] [data-home-section="disclaimer"] { order: 11; }
  body[data-role][data-page-module="home"] [data-home-ad="after-disclaimer"] { order: 12; }
  body[data-role][data-page-module="home"] [data-home-section="social"] { order: 13; }
  body[data-role][data-page-module="home"] [data-home-section="sitemap"] { order: 14; }

  body[data-role][data-page-module="home"] :is(.home-banner, .member-home-banner-section, .member-home-banner-slide) {
    border-radius: 0;
  }

  body[data-role][data-page-module="home"] #home-banner {
    border-radius: 0;
  }

  body[data-role][data-page-module="home"] [data-home-section="school-practice"] {
    background: #ffffff;
  }

  body[data-role][data-page-module="home"] .home-latest-lookup-grid > .learning-section {
    min-block-size: 100%;
  }

  /* Online practice directory and player */
  body[data-role][data-page-module="onlinePractice"] #module-content > .module-page {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    gap: 1rem;
  }

  body[data-role][data-page-module="onlinePractice"] .module-head {
    border: 0;
    padding: 0.65rem 0 0.9rem;
    background: transparent;
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] .module-head h2 {
    margin-block: 0.15rem 0.35rem;
    font-size: 1.7rem;
    font-weight: 760;
  }

  body[data-role][data-page-module="onlinePractice"] .module-head .eyebrow {
    color: var(--s2-brand);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  body[data-role][data-page-module="onlinePractice"] .module-page > .learning-section:has(.study-dashboard) {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] :is(.practice-structure, .practice-directory-compact, .practice-entry-banner) {
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-radius-section);
    background: var(--s2-surface);
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-structure {
    padding: 1.2rem;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-entry-banner {
    padding: 1rem 1.15rem;
    background: var(--s2-brand-soft);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-entry-banner .tag {
    border-radius: 6px;
    background: #ffffff;
    color: var(--s2-brand-strong);
  }

  body[data-role][data-page-module="onlinePractice"] .study-dashboard {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.85rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] :is(.study-card, .course-cover-card, .catalog-card) {
    border: 1px solid var(--s2-line);
    border-radius: 10px;
    background: var(--s2-surface);
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] :is(.study-card, .course-cover-card, .catalog-card):is(:hover, :focus-within) {
    border-color: var(--s2-brand);
    box-shadow: 0 2px 8px rgba(30, 55, 49, 0.1);
  }

  body[data-role][data-page-module="onlinePractice"] .study-card :is(input, select) {
    min-block-size: 44px;
    border-color: var(--s2-line-strong);
    border-radius: var(--s2-radius-control);
    background: #ffffff;
    color: var(--s2-ink);
  }

  body[data-role][data-page-module="onlinePractice"] .study-card .button {
    min-block-size: 44px;
    border-color: var(--s2-brand);
    border-radius: var(--s2-radius-control);
    background: var(--s2-brand);
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] .study-card .button:hover:not(:disabled) {
    background: var(--s2-brand-strong);
    transform: translateY(-1px);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-directory-scope-row {
    border-block-end: 1px solid var(--s2-line);
    background: var(--s2-surface-muted);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-directory-kicker,
  body[data-role][data-page-module="onlinePractice"] .practice-directory-column h4 {
    color: var(--s2-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-directory-current,
  body[data-role][data-page-module="onlinePractice"] .practice-directory-crumb.is-current {
    color: var(--s2-brand-strong);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-directory-cascade {
    border-color: var(--s2-line);
    background: #ffffff;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-directory-column + .practice-directory-column {
    border-color: var(--s2-line);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-directory-option {
    min-block-size: 44px;
    border: 1px solid transparent;
    border-radius: var(--s2-radius-control);
    background: var(--s2-surface-muted);
    color: var(--s2-ink);
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-directory-option:is(:hover, :focus-visible),
  body[data-role][data-page-module="onlinePractice"] .practice-directory-option.is-active {
    border-color: var(--s2-brand);
    background: var(--s2-brand-soft);
    color: var(--s2-brand-strong);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-player {
    inline-size: min(100%, 52rem);
    margin-inline: auto;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-player-top {
    align-items: center;
    border-block-end: 1px solid var(--s2-line);
    padding-block-end: 0.85rem;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-player-top h3 {
    margin-block: 0.2rem 0;
    font-size: 1.3rem;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-progress {
    block-size: 8px;
    border-radius: 4px;
    background: var(--s2-surface-strong);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-progress > span {
    border-radius: inherit;
    background: var(--s2-brand);
  }

  body[data-role][data-page-module="onlinePractice"] :is(.practice-answer-card, .practice-question-card, .attempt-summary, .practice-result-item) {
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-radius-section);
    background: var(--s2-surface);
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-answer-card summary {
    min-block-size: 44px;
    border-radius: 11px;
    color: var(--s2-brand-strong);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-answer-number {
    min-inline-size: 44px;
    min-block-size: 44px;
    border-color: var(--s2-line-strong);
    border-radius: 7px;
    background: #ffffff;
    color: var(--s2-ink);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-answer-number.is-answered {
    border-color: var(--s2-success);
    background: var(--s2-brand-soft);
    color: var(--s2-brand-strong);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-answer-number.is-current {
    outline: 3px solid var(--s2-warm);
    outline-offset: 2px;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-question-card {
    padding: 1.4rem;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-question-text {
    color: var(--s2-ink);
    font-size: 1.2rem;
    line-height: 1.55;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-option {
    min-block-size: 48px;
    border: 1px solid var(--s2-line-strong);
    border-radius: var(--s2-radius-control);
    background: #ffffff;
    color: var(--s2-ink);
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-option:hover {
    border-color: var(--s2-brand);
    background: var(--s2-surface-muted);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-option.is-selected,
  body[data-role][data-page-module="onlinePractice"] .practice-option[aria-pressed="true"] {
    border-color: var(--s2-brand);
    background: var(--s2-brand-soft);
    color: var(--s2-brand-strong);
  }

  body[data-role][data-page-module="onlinePractice"] .practice-player-actions {
    border-block-start: 1px solid var(--s2-line);
    padding-block-start: 0.85rem;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-player-actions .button:not(.ghost) {
    border-color: var(--s2-brand);
    background: var(--s2-brand);
    box-shadow: none;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-result-item.is-correct {
    border-color: #9bc7b8;
    background: #edf7f3;
  }

  body[data-role][data-page-module="onlinePractice"] .practice-result-item.is-wrong {
    border-color: #d9aaa4;
    background: #fff2f0;
  }

  /* Learning-node manager */
  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-manager {
    --learning-accent: var(--s2-brand);
    --learning-accent-soft: var(--s2-brand-soft);
    inline-size: min(100%, 86rem);
    margin-inline: auto;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-manager > .panel-title-row {
    align-items: end;
    border-block-end: 1px solid var(--s2-line);
    padding-block-end: 1rem;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-manager > .panel-title-row h2 {
    margin-block-end: 0.35rem;
    font-size: 1.6rem;
    font-weight: 760;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-toolbar {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(10rem, 0.32fr);
    gap: 0.8rem;
    margin-block: 1rem;
    border: 1px solid var(--s2-line);
    border-radius: 10px;
    padding: 0.9rem;
    background: var(--s2-surface-muted);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-toolbar .field {
    margin: 0;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-toolbar :is(input, select),
  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-form :is(input, select, textarea) {
    min-block-size: 44px;
    border-color: var(--s2-line-strong);
    border-radius: var(--s2-radius-control);
    background: #ffffff;
    color: var(--s2-ink);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-layout {
    grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: 1rem;
  }

  body[data-role][data-page-module="learningNodeAdmin"] :is(.learning-node-tree-panel, .learning-node-detail-panel) {
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-radius-section);
    background: var(--s2-surface);
    box-shadow: none;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-tree-panel {
    position: sticky;
    inset-block-start: 1rem;
    max-block-size: calc(100dvh - 8.5rem);
    overflow: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-tree-panel > h3 {
    margin: 0;
    color: var(--s2-ink);
    font-size: 1.05rem;
    font-weight: 730;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-stage-order-note {
    display: inline-flex;
    min-block-size: 34px;
    align-items: center;
    margin-block: 0.55rem 0.85rem;
    border-radius: 6px;
    padding-inline: 0.7rem;
    background: var(--s2-surface-strong);
    color: var(--s2-muted);
    font-size: 0.82rem;
    font-weight: 650;
  }

  body[data-role][data-page-module="learningNodeAdmin"] :is(.learning-tree-root, .learning-tree-children) {
    gap: 0.35rem;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-children {
    margin-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--s2-line);
    padding-inline-start: 0.45rem;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-row {
    min-block-size: 48px;
    gap: 0.35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.35rem;
    background: #ffffff;
    box-shadow: none;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-row:is(:hover, :focus-within) {
    border-color: var(--s2-line-strong);
    background: var(--s2-surface-muted);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-root > .learning-tree-item > .learning-tree-row {
    border-color: var(--s2-line-strong);
    background: var(--s2-surface-muted);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-root > .learning-tree-item[data-learning-stage="primary"] > .learning-tree-row {
    border-color: #c9dbd4;
    background: var(--s2-brand-soft);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-root > .learning-tree-item[data-learning-stage="secondary"] > .learning-tree-row {
    border-color: #c7d7e0;
    background: var(--s2-blue-soft);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-root > .learning-tree-item[data-learning-stage="adult"] > .learning-tree-row {
    border-color: #eccab9;
    background: var(--s2-warm-soft);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-row.is-selected {
    border-color: var(--s2-brand);
    background: #dcece6;
    box-shadow: inset 0 0 0 1px var(--s2-brand);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-button {
    min-block-size: 40px;
    color: var(--s2-ink);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-button strong {
    color: var(--s2-ink);
    font-weight: 700;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-button span {
    color: var(--s2-muted);
  }

  body[data-role][data-page-module="learningNodeAdmin"] :is(.learning-tree-row .icon-button, .learning-node-move-button) {
    min-inline-size: 40px;
    min-block-size: 40px;
    border-radius: 7px;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-move-button {
    color: var(--s2-blue);
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-form {
    gap: 0.85rem;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-form h3 {
    margin: 0;
    font-size: 1.2rem;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-form .button:not(.ghost) {
    border-color: var(--s2-brand);
    background: var(--s2-brand);
    box-shadow: none;
  }

  body[data-role][data-page-module="learningNodeAdmin"] .learning-node-form .button.ghost {
    border-color: var(--s2-line-strong);
    background: #ffffff;
    color: var(--s2-brand-strong);
    box-shadow: none;
  }

  /* Member and mobile navigation */
  :is(body[data-role][data-page-module="home"], body[data-role][data-page-module="onlinePractice"]) .bottom-nav {
    border-block-start: 1px solid var(--s2-line);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -2px 8px rgba(30, 55, 49, 0.08);
    backdrop-filter: none;
  }

  :is(body[data-role][data-page-module="home"], body[data-role][data-page-module="onlinePractice"]) .bottom-nav button {
    color: var(--s2-muted);
  }

  :is(body[data-role][data-page-module="home"], body[data-role][data-page-module="onlinePractice"]) .bottom-nav button.is-active {
    background: var(--s2-brand-soft);
    color: var(--s2-brand-strong);
  }

  body[data-shell="app"][data-page-module="home"] .public-home-course-item {
    display: grid;
    grid-template-columns: 2.85rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
  }

  body[data-shell="app"][data-page-module="home"] .public-home-course-icon {
    display: grid;
    inline-size: 2.85rem;
    block-size: 2.85rem;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--s2-teal-soft) 76%, #ffffff);
    color: var(--s2-teal);
  }

  body[data-shell="app"][data-page-module="home"] .public-home-course-icon svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  @media (max-width: 980px) {
    body[data-role][data-page-module="learningNodeAdmin"] .learning-node-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    body[data-role][data-page-module="learningNodeAdmin"] .learning-node-tree-panel {
      position: static;
      max-block-size: none;
      overflow: visible;
      scrollbar-gutter: auto;
    }
  }

  @media (max-width: 760px) {
    body[data-role][data-page-module="home"] #main .intro-panel.public-home-intro {
      grid-template-areas:
        "primary"
        "lookup";
      grid-template-columns: minmax(0, 1fr);
    }

    body[data-role][data-page-module="home"] .public-home-intro .public-home-word-lookup {
      border-inline-start: 0;
      border-block-start: 1px solid var(--s2-line);
      padding: 1rem 0 0;
    }

  body[data-role][data-page-module="home"] .home-latest-lookup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

    body[data-role][data-page-module="onlinePractice"] .practice-directory-cascade {
      grid-template-columns: minmax(0, 1fr);
    }

    body[data-role][data-page-module="onlinePractice"] .practice-directory-column + .practice-directory-column {
      border-inline-start: 0;
      border-block-start: 1px solid var(--s2-line);
    }
  }

  @media (max-width: 620px) {
    :is(
      body[data-role][data-page-module="home"],
      body[data-role][data-page-module="onlinePractice"],
      body[data-role][data-page-module="learningNodeAdmin"]
    ) .site-header {
      min-block-size: 62px;
      padding-inline: 0.75rem;
    }

    :is(
      body[data-role][data-page-module="home"],
      body[data-role][data-page-module="onlinePractice"],
      body[data-role][data-page-module="learningNodeAdmin"]
    ) .brand-logo {
      inline-size: 2.35rem;
      block-size: 2.35rem;
    }

    body[data-role][data-page-module="home"] .home-banner,
    body[data-role][data-page-module="home"] .member-home-banner-section {
      border-radius: 0;
      box-shadow: none;
    }

    body[data-role][data-page-module="home"] #home-banner {
      border-radius: 0;
      box-shadow: none;
    }

    body[data-role][data-page-module="home"] :is(.public-practice-entries, .learning-section) {
      padding: 0.9rem;
      border-radius: 10px;
    }

    body[data-role][data-page-module="home"] #main .intro-panel.public-home-intro h1 {
      max-inline-size: none;
      font-size: 1.8rem;
      line-height: 1.2;
    }

    body[data-role][data-page-module="home"] .public-home-intro .home-word-lookup-form > div,
    body[data-role][data-page-module="home"] .school-practice-search {
      grid-template-columns: minmax(0, 1fr);
    }

    body[data-role][data-page-module="home"] :is(.home-course-grid, .voice-topic-grid) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
    }

    body[data-role][data-page-module="home"] .home-ad-placeholder {
      display: none;
    }

    body[data-role][data-page-module="onlinePractice"] #module-content > .module-page {
      gap: 0.8rem;
    }

    body[data-role][data-page-module="onlinePractice"] .module-head {
      padding-inline: 0.15rem;
    }

    body[data-role][data-page-module="onlinePractice"] :is(.practice-structure, .practice-entry-banner, .practice-question-card) {
      padding: 0.9rem;
      border-radius: 10px;
    }

    body[data-role][data-page-module="onlinePractice"] .study-dashboard {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem;
    }

    body[data-role][data-page-module="onlinePractice"] .study-card {
      min-inline-size: 0;
      padding: 0.75rem;
    }

    body[data-role][data-page-module="onlinePractice"] .practice-player-top,
    body[data-role][data-page-module="onlinePractice"] .practice-player-actions {
      align-items: stretch;
      flex-direction: column;
    }

    body[data-role][data-page-module="onlinePractice"] .practice-player-actions .button,
    body[data-role][data-page-module="onlinePractice"] .practice-player-top-actions .button {
      inline-size: 100%;
      min-block-size: 48px;
    }

    body[data-role][data-page-module="onlinePractice"] .practice-option {
      min-block-size: 52px;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .learning-node-toolbar {
      grid-template-columns: minmax(0, 1fr);
      min-inline-size: 0;
      inline-size: 100%;
      padding: 0.75rem;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .admin-module-page > .module-head .row-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      inline-size: 100%;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .admin-module-page > .module-head .row-actions .button {
      inline-size: 100%;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .learning-node-manager > .panel-title-row > div:first-child {
      display: none;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .learning-node-manager > .panel-title-row {
      border-block-end: 0;
      padding-block-end: 0;
    }

    body[data-role][data-page-module="learningNodeAdmin"] :is(
      .learning-node-toolbar .field,
      .learning-node-toolbar .field > span,
      .learning-node-toolbar input,
      .learning-node-toolbar select
    ) {
      min-inline-size: 0;
      inline-size: 100%;
      max-inline-size: 100%;
    }

    body[data-role][data-page-module="learningNodeAdmin"] :is(
      .learning-node-manager,
      .learning-node-layout,
      .learning-node-tree-panel,
      .learning-node-detail-panel,
      .learning-node-form,
      .detail-grid,
      .detail-grid > div
    ) {
      min-inline-size: 0;
      max-inline-size: 100%;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .detail-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    body[data-role][data-page-module="learningNodeAdmin"] .detail-grid :is(dt, dd) {
      min-inline-size: 0;
      max-inline-size: 100%;
      margin-inline: 0;
      overflow-wrap: anywhere;
    }

    body[data-role][data-page-module="learningNodeAdmin"] :is(.learning-node-tree-panel, .learning-node-detail-panel) {
      border-radius: 10px;
      padding: 0.75rem;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-children {
      margin-inline-start: 0.4rem;
      padding-inline-start: 0.3rem;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-row {
      grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-row .tag {
      grid-column: 2;
      justify-self: start;
    }
  }

  @media (max-width: 360px) {
    body[data-role][data-page-module="home"] :is(.home-course-grid, .voice-topic-grid),
    body[data-role][data-page-module="onlinePractice"] .study-dashboard {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (pointer: coarse) {
    :is(
      body[data-role][data-page-module="home"],
      body[data-role][data-page-module="onlinePractice"],
      body[data-role][data-page-module="learningNodeAdmin"]
    ) :is(button, .button, .tab, input, select) {
      min-block-size: 44px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :is(
      body[data-role][data-page-module="home"],
      body[data-role][data-page-module="onlinePractice"],
      body[data-role][data-page-module="learningNodeAdmin"]
    ) :is(button, .button, .tab, .course-cover-card, .voice-topic-card, .module-entry-card, .practice-option) {
      scroll-behavior: auto;
      transition-duration: 0.01ms;
    }
  }

  @media (forced-colors: active) {
    :is(
      body[data-role][data-page-module="home"],
      body[data-role][data-page-module="onlinePractice"],
      body[data-role][data-page-module="learningNodeAdmin"]
    ) :focus-visible {
      outline-color: Highlight;
    }

    body[data-role][data-page-module="learningNodeAdmin"] .learning-tree-row.is-selected,
    body[data-role][data-page-module="onlinePractice"] .practice-option.is-selected {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }