/*
 * MedLit desktop product system
 * Scope: desktop only. Mobile rendering and mobile component styles stay in styles.css.
 * Direction: clinical instrumentation + spatial computing, one emerald accent.
 */

@property --search-orbit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes search-button-orbit {
  to {
    --search-orbit-angle: 360deg;
  }
}

@keyframes search-button-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(93, 240, 191, 0.24),
      0 0 16px rgba(39, 196, 145, 0.34);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(93, 240, 191, 0.16),
      0 0 30px rgba(39, 196, 145, 0.58);
  }
}

@media (min-width: 769px) {
  :root {
    --desk-bg: #070a0d;
    --desk-bg-raised: #0b1014;
    --desk-surface: rgba(14, 20, 24, 0.88);
    --desk-surface-strong: rgba(18, 26, 30, 0.96);
    --desk-surface-soft: rgba(126, 231, 200, 0.045);
    --desk-line: rgba(187, 216, 206, 0.13);
    --desk-line-strong: rgba(126, 231, 200, 0.34);
    --desk-ink: #edf7f3;
    --desk-ink-soft: #c4d2cd;
    --desk-muted: #83968f;
    --desk-accent: #7ee7c8;
    --desk-accent-strong: #a2f2db;
    --desk-accent-ink: #06120e;
    --desk-danger: #ff8f9d;
    --desk-radius-card: 16px;
    --desk-radius-control: 10px;
    --desk-shadow: 0 28px 80px rgba(0, 12, 10, 0.34);
  }

  html {
    color-scheme: dark;
    background: var(--desk-bg);
  }

  body.desktop-space-ui {
    min-height: 100dvh;
    margin: 0;
    color: var(--desk-ink);
    background:
      radial-gradient(ellipse 70% 54% at 12% -12%, rgba(72, 152, 126, 0.13), transparent 68%),
      radial-gradient(ellipse 50% 42% at 98% 22%, rgba(62, 108, 95, 0.08), transparent 74%),
      linear-gradient(180deg, #080b0e 0%, #070a0d 52%, #080c0f 100%);
    font-family: "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: -0.008em;
  }

  body.desktop-space-ui::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(126, 231, 200, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(126, 231, 200, 0.018) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 90%);
  }

  body.desktop-space-ui::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: 0.075;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,.28) 0 .45px, transparent .7px),
      radial-gradient(circle at 70% 65%, rgba(255,255,255,.18) 0 .4px, transparent .7px);
    background-size: 5px 5px, 7px 7px;
    mix-blend-mode: soft-light;
  }

  #desktopParticleField {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.66;
    pointer-events: none;
  }

  #app,
  .global-beian-footer {
    position: relative;
    z-index: 1;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  ::selection {
    color: var(--desk-accent-ink);
    background: var(--desk-accent);
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--desk-accent);
    outline-offset: 3px;
  }

  /* Authentication: asymmetrical product entry, not a centered generic card. */
  .auth {
    position: relative;
    isolation: isolate;
    width: min(1440px, 100%);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 5.5rem clamp(2rem, 6vw, 6.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.62fr);
    align-items: center;
    gap: clamp(4rem, 10vw, 10rem);
  }

  .auth::before {
    content: "MedLit";
    position: absolute;
    left: clamp(2rem, 6vw, 6.5rem);
    top: 2.1rem;
    color: var(--desk-ink);
    font-size: 18px;
    font-weight: 690;
    letter-spacing: -0.04em;
  }

  .auth::after {
    content: "医学文献精读系统";
    position: absolute;
    left: clamp(2rem, 6vw, 6.5rem);
    bottom: 2.2rem;
    color: var(--desk-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .auth-card {
    grid-column: 2;
    width: 100%;
    padding: 34px;
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius-card) !important;
    background: linear-gradient(150deg, rgba(20, 29, 33, 0.94), rgba(8, 13, 16, 0.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), var(--desk-shadow) !important;
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    transform-style: preserve-3d;
  }

  .auth-card::before {
    content: "READ  ·  UNDERSTAND  ·  RETAIN";
    position: absolute;
    right: calc(100% + clamp(4rem, 10vw, 10rem));
    top: 50%;
    width: min(38vw, 520px);
    padding-top: 250px;
    color: rgba(180, 207, 198, 0.62);
    font-size: 11px;
    letter-spacing: 0.22em;
    transform: translateY(-50%);
    background:
      radial-gradient(circle at 50% 46%, rgba(126,231,200,.16) 0 2%, transparent 2.5%),
      radial-gradient(ellipse at 50% 46%, transparent 0 22%, rgba(126,231,200,.21) 22.2% 22.7%, transparent 23%),
      radial-gradient(ellipse at 50% 46%, transparent 0 35%, rgba(126,231,200,.11) 35.2% 35.6%, transparent 36%),
      conic-gradient(from 30deg at 50% 46%, transparent, rgba(126,231,200,.13), transparent 28%, rgba(126,231,200,.06), transparent 62%);
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .auth-switch {
    gap: 6px;
    padding: 4px;
    margin-bottom: 32px;
    border: 1px solid var(--desk-line);
    border-radius: 12px;
    background: rgba(2, 7, 9, 0.48);
  }

  .auth .auth-switch .btn,
  .auth .auth-switch .btn.secondary,
  .auth-card #login,
  .auth-card #register {
    min-height: 42px;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--desk-muted) !important;
    box-shadow: none !important;
  }

  .auth .auth-switch .btn:not(.secondary) {
    border-color: rgba(126,231,200,.22) !important;
    color: var(--desk-ink) !important;
    background: rgba(126,231,200,.09) !important;
  }

  .auth-card h2 {
    margin: 0 0 8px;
    color: var(--desk-ink);
    font-size: 30px;
    font-weight: 640;
    text-align: left;
    letter-spacing: -0.045em;
    text-shadow: none;
  }

  .auth-card p {
    margin: 0 0 28px;
    color: var(--desk-muted);
    text-align: left;
    line-height: 1.6;
  }

  .auth-card input {
    width: 100%;
    min-height: 48px;
    margin: 0 0 12px;
    padding: 0 15px;
    border: 1px solid var(--desk-line);
    border-radius: var(--desk-radius-control);
    color: var(--desk-ink);
    background: rgba(2, 7, 9, 0.52);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }

  .auth-card input::placeholder { color: #6f827b; }

  .auth-card input:focus {
    border-color: rgba(126,231,200,.58);
    box-shadow: 0 0 0 3px rgba(126,231,200,.09);
  }

  .auth-card #login,
  .auth-card #register {
    width: 100%;
    margin-top: 6px;
    color: var(--desk-accent-ink) !important;
    background: var(--desk-accent) !important;
    font-weight: 720;
  }

  .auth-card #login:hover,
  .auth-card #register:hover {
    color: var(--desk-accent-ink) !important;
    background: var(--desk-accent-strong) !important;
    box-shadow: 0 14px 34px rgba(43, 118, 95, 0.22) !important;
    transform: translateY(-1px);
  }

  .auth-status { color: var(--desk-danger); }

  /* Persistent desktop navigation */
  .topbar {
    position: sticky;
    top: 12px;
    z-index: 20;
    width: min(1400px, calc(100% - 32px));
    margin: 12px auto 0;
    border: 1px solid var(--desk-line);
    border-radius: var(--desk-radius-card);
    background: rgba(8, 13, 16, 0.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 52px rgba(0,8,7,.28);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
  }

  .topbar-inner {
    width: 100%;
    min-height: 68px;
    padding: 8px 10px 8px 18px;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
    align-items: center;
    gap: 18px;
  }

  .brand {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 11px;
  }

  .brand::before {
    content: "M";
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(126,231,200,.29);
    border-radius: 9px;
    color: #cefff1;
    background: rgba(126,231,200,.07);
    font-size: 14px;
    font-weight: 740;
  }

  .brand h1 {
    min-height: 0;
    margin: 0;
    color: var(--desk-ink);
    background: none;
    font-size: 16px;
    font-weight: 690;
    line-height: 1.05;
    letter-spacing: -0.04em;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
  }

  .brand h1::before { content: none; }

  .brand span {
    grid-column: 2;
    color: #71857e;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: 0.035em;
  }

  .topbar-nav {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 3px;
  }

  .topbar-nav button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #91a39d;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
  }

  .topbar-nav button:hover,
  .topbar-nav button.is-active {
    border-color: rgba(126,231,200,.2);
    color: #d9fff3;
    background: rgba(126,231,200,.075);
  }

  .topbar-nav-count {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 6px;
    color: inherit;
    background: rgba(255,255,255,.055);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  .user-chip {
    display: flex;
    align-items: center;
    justify-self: end;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 4px;
    border: 1px solid rgba(187,216,206,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
  }

  .user-identity {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px auto;
    align-items: center;
    gap: 9px;
    padding: 2px 12px 2px 4px;
    border-right: 1px solid var(--desk-line);
  }

  .user-account-mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(126,231,200,.24);
    border-radius: 8px;
    color: #cefff1;
    background: rgba(126,231,200,.08);
    font-size: 12px;
    font-weight: 760;
  }

  .user-account-mark.is-member {
    border-color: #c9a653;
    color: #f5d37d;
    background:
      radial-gradient(circle at 30% 15%, rgba(255, 224, 149, 0.26), transparent 34%),
      linear-gradient(145deg, #2e765f, #174b3d);
    box-shadow:
      inset 0 1px 0 rgba(255, 235, 184, 0.24),
      inset 0 -1px 0 rgba(10, 61, 47, 0.28),
      0 4px 10px rgba(28, 91, 72, 0.16);
  }

  .user-account-v {
    display: block;
    color: #f6d68a;
    font-family: "Bodoni 72 Smallcaps", "Bodoni 72", Didot, Georgia, serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.08em;
    text-shadow: 0 1px 0 rgba(16, 68, 53, 0.58);
    transform: translateX(-1px) skewX(-7deg);
  }

  .user-account-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    line-height: 1.1;
  }

  .user-name { color: var(--desk-ink); font-weight: 680; }
  .user-membership,
  .user-level-line,
  .user-level-next { color: var(--desk-muted); }
  .user-membership.active { color: #8edfc6; }
  .user-level-track { height: 3px; background: rgba(255,255,255,.065); }
  .user-level-fill { background: var(--desk-accent); box-shadow: none; }

  .user-chip button,
  .user-chip .btn,
  .user-chip .btn.secondary {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #9baca6;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 640;
    white-space: nowrap;
  }

  .user-chip button:hover,
  .user-chip button.is-active {
    border-color: rgba(126,231,200,.22);
    color: #d9fff3;
    background: rgba(126,231,200,.075);
    transform: translateY(-1px);
  }

  /* Shared page frame and controls */
  .main {
    width: min(1400px, 100%);
    max-width: 1400px;
    margin: 0 auto;
    padding: 42px 28px 96px;
    overflow: visible;
  }

  .toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
  }

  .btn,
  .detail-translate-btn,
  .favorite-btn,
  .uncomplete-btn,
  .category-btn,
  .wordbook-manage-group-btn,
  .wordbook-create-group-btn {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(126,231,200,.34);
    border-radius: var(--desk-radius-control);
    color: var(--desk-accent-ink);
    background: var(--desk-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
    font-weight: 670;
    white-space: nowrap;
    transition: transform 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }

  .btn:hover,
  .detail-translate-btn:hover,
  .favorite-btn:hover,
  .uncomplete-btn:hover {
    color: var(--desk-accent-ink);
    background: var(--desk-accent-strong);
    box-shadow: 0 12px 28px rgba(36,104,83,.2);
    transform: translateY(-1px);
  }

  .btn:active,
  .detail-translate-btn:active,
  .favorite-btn:active,
  .uncomplete-btn:active,
  .category-btn:active { transform: translateY(1px) scale(.985); }

  .btn.secondary,
  .back-link-btn,
  .home-icon-btn,
  .category-btn,
  .wordbook-manage-group-btn,
  .wordbook-create-group-btn {
    border-color: var(--desk-line);
    color: var(--desk-ink-soft);
    background: rgba(255,255,255,.025);
    box-shadow: none;
  }

  .btn.secondary:hover,
  .back-link-btn:hover,
  .home-icon-btn:hover,
  .category-btn:hover,
  .category-btn.active,
  .wordbook-manage-group-btn:hover,
  .wordbook-manage-group-btn.is-active,
  .wordbook-create-group-btn:hover {
    border-color: var(--desk-line-strong);
    color: #d8fff2;
    background: rgba(126,231,200,.085);
    box-shadow: none;
  }

  .home-icon-btn { width: 40px; padding: 0; }
  .home-icon-btn svg { width: 16px; height: 16px; }

  input,
  select,
  textarea,
  .journal-picker-field {
    border-color: var(--desk-line);
    border-radius: var(--desk-radius-control);
    color: var(--desk-ink);
    background: rgba(3,8,10,.66);
  }

  input::placeholder,
  textarea::placeholder { color: #71837d; }

  input:focus,
  select:focus,
  textarea:focus,
  .journal-picker-field:focus-within {
    border-color: rgba(126,231,200,.54);
    box-shadow: 0 0 0 3px rgba(126,231,200,.08);
  }

  .wordbook-empty,
  .route-loading-card {
    min-height: 220px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(126,231,200,.24);
    border-radius: var(--desk-radius-card);
    color: var(--desk-muted);
    background: rgba(10,15,18,.56);
  }

  /* Home: a research workbench with a persistent progress instrument. */
  .right-panel {
    display: grid;
    grid-template-columns: minmax(280px, .66fr) minmax(0, 1.7fr);
    grid-template-areas: "sync tools" "sync papers" "sync pages";
    align-items: start;
    gap: 18px 24px;
  }

  .right-panel > .sync-panel { grid-area: sync; }
  .right-panel > .panel-toolbar { grid-area: tools; }
  .right-panel > .paper-list { grid-area: papers; }
  .right-panel > .pagination { grid-area: pages; }

  .sync-panel {
    position: sticky;
    top: 104px;
    min-height: 470px;
    padding: 26px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(126,231,200,.23);
    border-radius: var(--desk-radius-card);
    background:
      radial-gradient(circle at 76% 76%, rgba(126,231,200,.105), transparent 36%),
      linear-gradient(150deg, rgba(17,26,29,.95), rgba(7,12,15,.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--desk-shadow);
    transform: perspective(1000px) rotateX(var(--desktop-tilt-x, 0deg)) rotateY(var(--desktop-tilt-y, 0deg));
    transform-style: preserve-3d;
  }

  .sync-panel::before {
    content: "";
    position: absolute;
    right: -96px;
    bottom: -95px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(126,231,200,.18);
    border-radius: 50%;
    box-shadow: inset 0 0 0 28px rgba(126,231,200,.012), inset 0 0 0 68px rgba(126,231,200,.016);
    transform: rotateX(66deg) rotateZ(-14deg);
    pointer-events: none;
  }

  .sync-panel::after {
    content: "";
    position: absolute;
    right: 49px;
    bottom: 53px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c8ffef;
    box-shadow: 0 0 22px rgba(126,231,200,.72);
  }

  .sync-panel > * { position: relative; z-index: 1; transform: translateZ(10px); }
  .sync-panel-title { color: var(--desk-accent); font-size: 10px; letter-spacing: .15em; }
  .sync-panel-head { margin-top: 38px; align-items: end; }
  .sync-panel-head h3 { color: var(--desk-ink); font-size: clamp(26px, 2.3vw, 38px); line-height: 1.05; letter-spacing: -.05em; }
  .sync-panel-head span { color: var(--desk-accent); font-size: 12px; }
  .sync-panel p { max-width: 32ch; color: #95a8a1; line-height: 1.7; }
  .sync-progress-track { height: 4px; background: rgba(255,255,255,.065); }
  .sync-progress-fill { background: var(--desk-accent); box-shadow: none; }
  .sync-progress-note { color: #91dfc8; }
  .sync-rule-note { color: #6f827b; }

  .panel-toolbar {
    padding: 18px;
    border: 1px solid var(--desk-line);
    border-radius: var(--desk-radius-card);
    background: rgba(11,16,19,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .toolbar-meta { margin-bottom: 14px; }
  .current-filter { color: var(--desk-ink-soft); font-size: 12px; font-weight: 650; }
  .toolbar-filters { display: grid; grid-template-columns: .7fr 1.35fr 1fr; gap: 10px; }
  .filter-item label { color: #778b84; font-size: 10px; letter-spacing: .07em; }
  .panel-toolbar select,
  .panel-toolbar input { min-height: 42px; }
  .search-inline { margin-top: 10px; }
  .search-icon-btn {
    min-width: 74px;
    border-color: rgba(126,231,200,.3);
    color: var(--desk-accent-ink);
    background: var(--desk-accent);
    box-shadow: none;
    font-size: 0;
  }
  .search-icon-btn::after { content: "搜索"; font-size: 12px; font-weight: 720; }

  .paper-list {
    display: grid;
    gap: 10px;
    perspective: 1200px;
  }

  .paper-item,
  .home-paper-item,
  .favorites-page .paper-item,
  .completed-page .paper-item {
    position: relative;
    overflow: hidden;
    padding: 22px 23px;
    border: 1px solid rgba(187,216,206,.105);
    border-radius: var(--desk-radius-card);
    color: var(--desk-ink);
    background: linear-gradient(140deg, rgba(16,22,26,.88), rgba(8,13,16,.78));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.032);
    transform: perspective(1000px) rotateX(var(--desktop-tilt-x, 0deg)) rotateY(var(--desktop-tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 170ms cubic-bezier(.2,.8,.2,1), border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease;
  }

  .paper-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--desk-accent);
    opacity: 0;
    transform: scaleY(.25);
    transition: opacity 170ms ease, transform 220ms cubic-bezier(.16,1,.3,1);
  }

  .paper-item:hover {
    border-color: rgba(126,231,200,.34);
    background: linear-gradient(140deg, rgba(20,30,32,.94), rgba(9,15,18,.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 64px rgba(0,12,10,.3);
  }

  .paper-item:hover::before { opacity: 1; transform: scaleY(1); }
  .paper-item h3 { color: var(--desk-ink) !important; font-size: 17px; line-height: 1.45; letter-spacing: -.018em; }
  .paper-item:hover h3 { color: #d5fff3 !important; }
  .paper-title-zh { color: #aec4bc !important; }
  .paper-meta { color: var(--desk-muted); }
  .paper-source { color: #758981; }
  .paper-source a { color: var(--desk-accent) !important; }
  .paper-disclaimer { color: #65766f; }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--desk-muted);
  }

  /* Collections: page introduction and two-column editorial library. */
  .page-marker {
    margin: 4px 0 20px;
    padding: 26px 28px;
    display: grid;
    gap: 7px;
    border: 1px solid var(--desk-line);
    border-radius: var(--desk-radius-card);
    background: linear-gradient(140deg, rgba(15,22,25,.83), rgba(8,13,16,.72));
  }

  .page-marker strong { color: var(--desk-ink); font-size: 28px; line-height: 1.1; letter-spacing: -.04em; }
  .page-marker span { color: var(--desk-muted); }
  .favorites-toolbar { margin-bottom: 18px; }
  .category-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .category-btn { min-height: 36px; padding: 0 12px; }
  .favorites-page .paper-list,
  .completed-page .paper-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .favorite-card-actions { margin-top: 16px; }
  .favorite-btn,
  .uncomplete-btn { min-height: 36px; color: #ffd6dc; border-color: rgba(255,143,157,.26); background: rgba(255,143,157,.07); box-shadow: none; }
  .favorite-btn:hover,
  .uncomplete-btn:hover { color: #ffe4e8; border-color: rgba(255,143,157,.45); background: rgba(255,143,157,.12); box-shadow: none; }

  /* Wordbook and exam bank: dense but breathable data surface. */
  .wordbook-page,
  .exam-wordbank-page {
    padding: 26px;
    border: 1px solid var(--desk-line);
    border-radius: var(--desk-radius-card);
    background: rgba(11,16,19,.8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--desk-shadow);
  }

  .wordbook-header h2 { color: var(--desk-ink); font-size: 30px; letter-spacing: -.045em; }
  .wordbook-groups-bar { padding: 16px 0 20px; gap: 8px; border-bottom: 1px solid var(--desk-line); }
  .wordbook-group-filter-btn { min-height: 36px; }
  .wordbook-rename-group-btn,
  .icon-action-btn,
  .learn-speak,
  .speak-btn {
    border-color: var(--desk-line);
    color: #9db1aa;
    background: rgba(255,255,255,.025);
    box-shadow: none;
  }
  .wordbook-rename-group-btn:hover,
  .icon-action-btn:hover,
  .learn-speak:hover,
  .speak-btn:hover { border-color: var(--desk-line-strong); color: var(--desk-accent); background: rgba(126,231,200,.08); }
  .wordbook-list { margin-top: 16px; gap: 6px; }
  .wordbook-list-head { color: #6f827b; font-size: 10px; letter-spacing: .07em; }
  .wordbook-row {
    border: 1px solid rgba(187,216,206,.08);
    border-radius: 12px;
    background: rgba(5,10,12,.54);
    transform: perspective(900px) rotateX(var(--desktop-tilt-x, 0deg)) rotateY(var(--desktop-tilt-y, 0deg));
    transition: transform 170ms ease, border-color 170ms ease, background-color 170ms ease;
  }
  .wordbook-row:hover { border-color: rgba(126,231,200,.25); background: rgba(15,24,25,.78); }
  .wordbook-row-word { color: var(--desk-ink); }
  .wordbook-row-mastery,
  .wordbook-row-titer { color: var(--desk-muted); }
  .wordbook-group-chip { border-color: var(--desk-line) !important; color: #b9cbc5 !important; background: rgba(255,255,255,.03) !important; }
  .antibody-bar { background: rgba(255,255,255,.06); }
  .antibody-bar-fill { background: var(--desk-accent) !important; box-shadow: none !important; }

  /* Article study view: reading column plus pinned source map. */
  .detail-main { max-width: 1460px; }
  .detail-actions { margin-bottom: 18px; }
  .detail-actions-top { gap: 8px; }
  .detail {
    display: grid;
    grid-template-columns: minmax(310px, .76fr) minmax(0, 1.5fr);
    gap: 20px;
    align-items: start;
  }
  .sticky-summary {
    top: 104px;
    max-height: calc(100dvh - 124px);
    padding: 24px;
    border: 1px solid var(--desk-line);
    border-radius: var(--desk-radius-card);
    background: linear-gradient(150deg, rgba(17,24,28,.93), rgba(8,13,16,.9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--desk-shadow);
  }
  .summary-header h2 { color: var(--desk-ink); font-size: 22px; line-height: 1.35; letter-spacing: -.03em; }
  .summary-header a { color: var(--desk-accent); }
  .detail-title-zh { color: #aabfb7; }
  .summary-sentence { border-color: rgba(187,216,206,.08); color: #869991; background: rgba(255,255,255,.015); }
  .summary-sentence.active { border-color: rgba(126,231,200,.34); color: #d8fff2; background: rgba(126,231,200,.075); }
  .sentence-list { display: grid; gap: 10px; }
  .sentence-card {
    padding: 24px;
    border: 1px solid rgba(187,216,206,.1);
    border-radius: var(--desk-radius-card);
    background: rgba(11,17,20,.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.028);
  }
  .sentence-card.active { border-color: rgba(126,231,200,.4); box-shadow: inset 3px 0 0 var(--desk-accent), 0 20px 55px rgba(0,16,13,.2); }
  .sentence-en { color: var(--desk-ink); font-size: 17px; line-height: 1.75; }
  .sentence-zh { color: #96aaa2; line-height: 1.65; }
  .word { border-radius: 4px; }
  .word:hover { color: var(--desk-accent); background: rgba(126,231,200,.08); }

  /* Settings: two-column account console where space allows. */
  .settings-theme .main { max-width: 1180px; }
  .settings-card {
    padding: 30px;
    border: 1px solid var(--desk-line);
    border-radius: var(--desk-radius-card);
    background: linear-gradient(145deg, rgba(16,23,27,.9), rgba(8,13,16,.86));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--desk-shadow);
  }
  .settings-card > h2 { margin: 0 0 10px; color: var(--desk-ink); font-size: 31px; letter-spacing: -.045em; }
  .settings-card > p { color: var(--desk-muted); }
  .settings-card .settings-sync-panel { position: relative; top: auto; min-height: 330px; margin-top: 24px; }
  .settings-leaderboard-card { border-color: var(--desk-line); border-radius: var(--desk-radius-card); background: rgba(5,10,12,.48); }
  .settings-leaderboard-head h3 { color: var(--desk-ink); }
  .settings-leaderboard-head span { color: var(--desk-accent); }
  .settings-form { gap: 10px; }
  .settings-form input,
  .settings-form select { min-height: 46px; }

  /* Admin: light, dense and operational. */
  .admin-theme {
    min-height: 100dvh;
    color: #20352f;
    background:
      radial-gradient(circle at 7% 0%, rgba(44, 142, 111, .055), transparent 27%),
      #f4f7f5;
  }

  .admin-theme .topbar {
    top: 0;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #dce7e2;
    border-radius: 0;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 0 rgba(37, 83, 68, .025);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  .admin-theme .topbar-inner {
    width: min(1240px, calc(100% - 32px));
    min-height: 72px;
    margin: 0 auto;
    padding: 8px 0;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    gap: 20px;
  }

  .admin-theme .brand,
  .admin-theme .brand:hover {
    color: inherit;
    background: transparent;
    box-shadow: none;
  }

  .admin-theme .brand::before {
    border-color: #cfe2da;
    color: #fff;
    background: #287b65;
  }

  .admin-theme .brand h1,
  .admin-theme .user-name { color: #17332b; }
  .admin-theme .brand span,
  .admin-theme .user-membership { color: #71857e; }

  .admin-theme .topbar-nav {
    padding: 4px;
    border: 1px solid #e1ebe7;
    border-radius: 12px;
    background: #f5f8f6;
  }

  .admin-theme .topbar-nav button {
    min-height: 38px;
    color: #60766e;
    background: transparent;
  }

  .admin-theme .topbar-nav button:hover,
  .admin-theme .topbar-nav button.is-active {
    border-color: #d2e3dc;
    color: #1d604f;
    background: #fff;
    box-shadow: 0 1px 3px rgba(37, 83, 68, .07);
    transform: none;
  }

  .admin-theme .user-chip {
    gap: 9px;
    padding: 0;
    border: 0;
    color: #17332b;
    background: transparent;
  }

  .admin-theme .user-chip .topbar-settings-btn,
  .admin-theme .user-chip .btn.topbar-settings-btn,
  .admin-theme .user-chip .btn.secondary.topbar-settings-btn {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #d7e4df !important;
    border-radius: 8px;
    color: #526d64 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: none;
  }

  .admin-theme .user-chip .topbar-settings-btn:hover,
  .admin-theme .user-chip .topbar-settings-btn.is-active {
    border-color: #a9cdbf !important;
    color: #1d604f !important;
    background: #e7f1ed !important;
    box-shadow: none !important;
    transform: none;
  }

  .admin-theme .main.admin-main {
    width: min(1480px, calc(100% - 40px));
    max-width: none;
    padding: 34px 0 72px;
  }

  .admin-workspace {
    width: 100%;
  }

  .admin-workspace-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 4px 2px 24px;
  }

  .admin-workspace-kicker {
    margin: 0 0 7px;
    color: #2b8069;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .12em;
  }

  .admin-workspace-head h2 {
    margin: 0;
    color: #18352d;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -.055em;
  }

  .admin-workspace-copy {
    margin: 9px 0 0;
    color: #71827c;
    font-size: 14px;
  }

  .admin-live-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dce8e3;
    border-radius: 10px;
    color: #567168;
    background: rgba(255, 255, 255, .72);
    font-size: 12px;
    white-space: nowrap;
  }

  .admin-live-mark {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2c9474;
    box-shadow: 0 0 0 4px rgba(44, 148, 116, .1);
  }

  .admin-page-nav {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 18px;
    padding: 4px;
    gap: 3px;
    border: 1px solid #dde8e3;
    border-radius: 12px;
    background: #eaf0ed;
  }

  .admin-nav-btn {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #60756e;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 680;
    white-space: nowrap;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }

  .admin-nav-btn:hover,
  .admin-nav-btn.is-active {
    border-color: #d5e3dd;
    color: #1c604e;
    background: #fff;
    box-shadow: 0 2px 7px rgba(35, 81, 66, .07);
    transform: none;
  }

  .admin-content { min-width: 0; }

  .admin-overview {
    display: grid;
    grid-template-columns: 210px 230px minmax(280px, 1fr);
    gap: 12px;
    margin: 0 0 14px;
  }

  .admin-overview-card,
  .admin-overview-context {
    min-height: 122px;
    padding: 20px 22px;
    border: 1px solid #dce7e2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(39, 82, 68, .045);
  }

  .admin-overview-card {
    display: grid;
    align-content: space-between;
  }

  .admin-overview-title {
    color: #71847d;
    font-size: 12px;
    font-weight: 620;
  }

  .admin-overview-value {
    margin: 3px 0 0;
    color: #173e33;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.055em;
  }

  .admin-overview-foot {
    color: #94a39e;
    font-size: 11px;
  }

  .admin-overview-context {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 14px;
  }

  .admin-overview-context strong {
    grid-row: 1 / 3;
    align-self: center;
    color: #2b8069;
    font-size: 28px;
    letter-spacing: -.045em;
  }

  .admin-overview-context span {
    align-self: end;
    color: #29483f;
    font-size: 13px;
    font-weight: 680;
  }

  .admin-overview-context small {
    align-self: start;
    margin-top: 4px;
    color: #899a94;
    font-size: 11px;
  }

  .admin-table-wrap {
    margin: 0;
    overflow: hidden;
    border: 1px solid #dbe6e1;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(35, 73, 61, .055);
  }

  .admin-toolbar,
  .admin-batch-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
    padding: 15px 18px;
    border-bottom: 1px solid #e3ece8;
    background: #fff;
  }

  .admin-toolbar-primary { justify-content: flex-start; }
  .admin-toolbar-primary .admin-search-field { margin-right: 0; }

  .admin-field {
    display: grid;
    gap: 6px;
    min-width: 150px;
  }

  .admin-field > span {
    color: #6c8179;
    font-size: 11px;
    font-weight: 650;
  }

  .admin-search-field {
    width: min(410px, 100%);
  }

  .admin-field input,
  .admin-field select,
  .admin-inline input,
  .admin-create-form input,
  .admin-create-form select {
    min-height: 40px;
    border: 1px solid #d6e3dd;
    border-radius: 9px;
    color: #213d35;
    background: #f9fbfa;
    box-shadow: none;
    font-size: 13px;
  }

  .admin-field input::placeholder,
  .admin-inline input::placeholder,
  .admin-create-form input::placeholder { color: #9baaa5; }

  .admin-field input:focus,
  .admin-field select:focus,
  .admin-inline input:focus,
  .admin-create-form input:focus,
  .admin-create-form select:focus {
    border-color: #7eb5a4;
    outline: 3px solid rgba(61, 139, 114, .11);
    box-shadow: none;
  }

  .admin-refresh-btn,
  .admin-batch-btn {
    min-height: 40px;
    border-color: #d3e1db !important;
    color: #315d50 !important;
    background: #fff !important;
    box-shadow: none !important;
    white-space: nowrap;
  }

  .admin-refresh-btn:hover,
  .admin-batch-btn:hover {
    border-color: #a8cbbf !important;
    background: #f1f7f4 !important;
    transform: none;
  }

  .admin-batch-bar {
    align-items: center;
    justify-content: flex-start;
    padding-top: 12px;
    padding-bottom: 12px;
    background: #f6f9f7;
  }

  .admin-selection-copy {
    display: grid;
    gap: 2px;
    min-width: 118px;
    margin-right: 4px;
    padding-right: 18px;
    border-right: 1px solid #dce7e2;
  }

  .admin-selection-copy > span {
    color: #879992;
    font-size: 10px;
    font-weight: 690;
  }

  .admin-selection-copy > strong {
    color: #38574e;
    font-size: 13px;
  }

  .admin-selection-copy b { color: #22755e; }
  .admin-batch-controls {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .admin-batch-days-label {
    color: #60776f;
    font-size: 11px;
    font-weight: 680;
    white-space: nowrap;
  }

  .admin-batch-days-input {
    width: 92px;
    min-width: 92px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d6e3dd;
    border-radius: 9px;
    color: #213d35;
    background: #fff;
    box-shadow: none;
    font-size: 13px;
  }

  .admin-batch-days-input:focus {
    border-color: #7eb5a4;
    outline: 3px solid rgba(61, 139, 114, .11);
  }

  .admin-batch-btn {
    width: 96px;
    flex: 0 0 96px;
    padding: 0 14px;
  }

  .admin-table-scroll {
    max-height: min(68dvh, 720px);
    overflow: auto;
    scrollbar-color: #bfd2ca transparent;
    scrollbar-width: thin;
  }

  .admin-table {
    min-width: 1160px;
    color: #314a43;
    border-collapse: separate;
    border-spacing: 0;
  }

  .admin-cdk-table { min-width: 1040px; }

  .admin-users-table th:nth-child(1),
  .admin-users-table td:nth-child(1) { width: 42px; }
  .admin-users-table th:nth-child(2),
  .admin-users-table td:nth-child(2) { width: 64px; }
  .admin-users-table th:nth-child(3),
  .admin-users-table td:nth-child(3) { width: 170px; }
  .admin-users-table th:nth-child(4),
  .admin-users-table td:nth-child(4) { width: 105px; }
  .admin-users-table th:nth-child(5),
  .admin-users-table td:nth-child(5) { width: 126px; }
  .admin-users-table th:nth-child(6),
  .admin-users-table td:nth-child(6) { width: 106px; }
  .admin-users-table th:nth-child(7),
  .admin-users-table td:nth-child(7) { width: 156px; }
  .admin-users-table th:nth-child(8),
  .admin-users-table td:nth-child(8) { width: 188px; }
  .admin-users-table th:nth-child(9),
  .admin-users-table td:nth-child(9) { width: 76px; }

  .admin-table th,
  .admin-table td {
    padding: 12px 11px;
    border-bottom: 1px solid #e7eeeb;
    font-size: 12px;
    vertical-align: middle;
  }

  .admin-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #687d75;
    background: #f4f8f6;
    font-size: 11px;
    font-weight: 720;
    letter-spacing: .015em;
  }

  .admin-table tbody tr:last-child td { border-bottom: 0; }
  .admin-table tbody tr:hover td { background: #f7faf8; }
  .admin-table tbody tr:has(.userSelectBox:checked) td { background: #eef7f3; }

  .admin-select-cell {
    width: 42px;
    text-align: center !important;
  }

  .admin-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2b8069;
  }

  .admin-sort-btn {
    color: inherit;
    font-weight: 720;
  }

  .admin-sort-btn:hover,
  .admin-sort-btn:focus-visible,
  .admin-sort-btn.is-active {
    color: #1e715a;
    outline: none;
  }

  .admin-id-cell {
    color: #8a9a94;
    font-variant-numeric: tabular-nums;
  }

  .admin-account-cell,
  .admin-stack-cell {
    display: grid;
    gap: 4px;
  }

  .admin-account-cell strong,
  .admin-stack-cell strong {
    color: #243f37;
    font-size: 12px;
  }

  .admin-stack-cell > span:not(.admin-status) {
    color: #869690;
    font-size: 10px;
  }

  .admin-role-badge,
  .admin-status,
  .admin-protected-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid #dbe5e1;
    border-radius: 6px;
    color: #647971;
    background: #f4f7f6;
    font-size: 10px;
    font-weight: 690;
  }

  .admin-role-badge.is-admin {
    border-color: #c8dfd7;
    color: #1f6e58;
    background: #edf7f3;
  }

  .admin-status.is-online,
  .admin-status.is-unused {
    border-color: #bfe0d4;
    color: #17694f;
    background: #eaf7f2;
  }

  .admin-status.is-offline,
  .admin-status.is-used {
    border-color: #dfe6e3;
    color: #71817b;
    background: #f3f5f4;
  }

  .admin-expiry-cell { font-variant-numeric: tabular-nums; }

  .admin-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .admin-inline input {
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
  }

  .admin-inline .resetPasswordInput { width: 100%; }

  .admin-row-action,
  .admin-danger-btn {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 8px;
    box-shadow: none !important;
    font-size: 11px;
    white-space: nowrap;
  }

  .admin-row-action {
    border-color: #cfe0d9 !important;
    color: #315e51 !important;
    background: #fff !important;
  }

  .admin-danger-btn {
    border-color: #ead4d4 !important;
    color: #9c4a4a !important;
    background: #fffafa !important;
  }

  .admin-row-action:hover,
  .admin-danger-btn:hover { transform: none; }

  .admin-protected-label {
    border-color: transparent;
    color: #8a9893;
    background: transparent;
  }

  .admin-empty-cell {
    height: 180px;
    color: #83958e;
    text-align: center !important;
  }

  .admin-filter-tabs {
    display: flex;
    gap: 6px;
    padding: 14px 18px 0;
    background: #fff;
  }

  .admin-filter-tabs .category-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dbe6e1;
    border-radius: 8px;
    color: #61766e;
    background: #f8faf9;
    box-shadow: none;
    font-size: 11px;
    transform: none;
  }

  .admin-filter-tabs .category-btn:hover,
  .admin-filter-tabs .category-btn.active {
    border-color: #acd0c3;
    color: #1f6a54;
    background: #edf6f2;
    transform: none;
  }

  .admin-toolbar-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 170px 170px auto;
  }

  .admin-code-value {
    color: #245c4c;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .02em;
  }

  .admin-table-wrap > .pagination {
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid #e4ece9;
    color: #71837c;
    background: #fafcfb;
  }

  .admin-create-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1.15fr) minmax(300px, .85fr);
    gap: 14px;
  }

  .admin-create-form,
  .admin-create-guide {
    align-self: stretch;
    margin: 0;
    padding: 26px;
    border: 1px solid #dce7e2;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(37, 76, 63, .05);
  }

  .admin-create-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .admin-section-heading {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  .admin-section-heading h3,
  .admin-create-guide h3 {
    margin: 0;
    color: #1f3e35;
    font-size: 20px;
    letter-spacing: -.025em;
  }

  .admin-section-heading p {
    margin: 7px 0 0;
    color: #7a8c85;
    font-size: 12px;
  }

  .admin-create-field {
    display: grid;
    gap: 7px;
    color: #60756e;
    font-size: 11px;
    font-weight: 650;
  }

  .admin-create-form select,
  .admin-create-form input { width: 100%; }

  .admin-create-field.is-wide { grid-column: 1 / -1; }

  .admin-create-btn {
    grid-column: 1 / -1;
    min-height: 44px;
    margin-top: 4px;
    border-color: #27785f !important;
    color: #fff !important;
    background: #287b65 !important;
    box-shadow: 0 8px 18px rgba(40, 123, 101, .16) !important;
  }

  .admin-create-btn:hover {
    background: #236e5a !important;
    transform: translateY(-1px);
  }

  .admin-create-guide {
    display: grid;
    align-content: start;
    gap: 0;
  }

  .admin-create-guide h3 { margin-bottom: 12px; }

  .admin-create-guide > div {
    display: grid;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid #e7eeeb;
  }

  .admin-create-guide strong {
    color: #2f554a;
    font-size: 12px;
  }

  .admin-create-guide span,
  .admin-create-guide p {
    color: #7b8d86;
    font-size: 11px;
    line-height: 1.65;
  }

  .admin-create-guide p {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 9px;
    background: #f3f7f5;
  }

  @media (max-width: 1120px) {
    .admin-theme .main.admin-main { width: min(100% - 28px, 1480px); }
    .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-overview-context { grid-column: 1 / -1; min-height: 92px; }
    .admin-toolbar-filters { grid-template-columns: minmax(240px, 1fr) 150px 150px; }
    .admin-toolbar-filters .admin-refresh-btn { grid-column: 3; }
    .admin-create-layout { grid-template-columns: 1fr; }
  }

  /* Flashcard study: a single deep object, not nested generic panels. */
  .app-shell:has(#learnStageHost) .main { max-width: 1080px; min-height: calc(100dvh - 48px); }
  #learnStageHost { min-height: 620px; display: grid; place-items: center; perspective: 1400px; }
  .learn-stage { width: min(760px, 100%); }
  .learn-card {
    border: 1px solid rgba(126,231,200,.22);
    border-radius: var(--desk-radius-card);
    background: linear-gradient(145deg, rgba(18,27,30,.96), rgba(7,12,15,.97));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 44px 110px rgba(0,15,12,.36);
  }
  .learn-front,
  .learn-back { color: var(--desk-ink); background: transparent; }
  .learn-word-row h2,
  .learn-back-word { color: var(--desk-ink); font-size: clamp(34px,5vw,58px); letter-spacing: -.055em; }
  .exam-learn-meaning { color: #b8cbc4; }
  .exam-learn-meta-row { color: var(--desk-muted); }
  .exam-learn-detail-item { border-color: var(--desk-line); background: rgba(255,255,255,.025); }
  .exam-learn-detail-label { color: var(--desk-accent); }

  /* Overlays and state feedback */
  .modal-backdrop { background: rgba(2,6,8,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .modal-card,
  .word-popover {
    border: 1px solid var(--desk-line);
    border-radius: var(--desk-radius-card);
    color: var(--desk-ink);
    background: rgba(13,19,23,.97);
    box-shadow: var(--desk-shadow);
  }
  .toast {
    top: 24px;
    border: 1px solid rgba(126,231,200,.28);
    border-radius: var(--desk-radius-control);
    color: #d8fff2;
    background: rgba(10,18,19,.94);
    box-shadow: 0 18px 50px rgba(0,12,10,.3);
  }
  .global-beian-footer { color: rgba(156,180,171,.45); }

  /* Retire legacy purple/gold theme rules that have stronger page-specific selectors. */
  .home-paper-item .paper-meta .meta-journal,
  .home-paper-item .paper-meta .meta-time {
    color: #94aaa2 !important;
    text-shadow: none !important;
    font-weight: 620;
  }

  .paper-type-badge,
  .paper-type-badge[class*="paper-type-badge--"] {
    border: 1px solid rgba(126,231,200,.18) !important;
    color: #a9c9bf !important;
    background: rgba(126,231,200,.055) !important;
    box-shadow: none !important;
  }

  .main > .toolbar .home-icon-btn,
  .detail-actions-top .home-icon-btn {
    margin-left: 0 !important;
  }

  .wordbook-theme .toolbar #examWordbankEntryBtn {
    margin-left: auto;
  }

  .detail-actions-top #favoriteBtn {
    margin-left: auto;
  }

  .wordbook-theme {
    background: transparent !important;
  }

  .wordbook-theme .btn-learn-new,
  .wordbook-theme .btn-review-mastered,
  .wordbook-theme .btn-export-glass,
  .wordbook-theme #examWordbankEntryBtn,
  .wordbook-theme #examWordbankEntryBtn.is-locked {
    border: 1px solid var(--desk-line) !important;
    color: var(--desk-ink-soft) !important;
    background: rgba(255,255,255,.025) !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .wordbook-theme .btn-learn-new {
    border-color: rgba(126,231,200,.36) !important;
    color: var(--desk-accent-ink) !important;
    background: var(--desk-accent) !important;
  }

  .wordbook-theme .btn-learn-new:hover {
    color: var(--desk-accent-ink) !important;
    background: var(--desk-accent-strong) !important;
    box-shadow: 0 12px 28px rgba(36,104,83,.2) !important;
  }

  .wordbook-theme .btn-review-mastered:hover,
  .wordbook-theme .btn-export-glass:hover,
  .wordbook-theme #examWordbankEntryBtn:hover {
    border-color: var(--desk-line-strong) !important;
    color: #d8fff2 !important;
    background: rgba(126,231,200,.085) !important;
    box-shadow: none !important;
  }

  .wordbook-group-filter-btn[class*="wordbook-group-badge--"],
  .wordbook-group-chip[class*="wordbook-group-badge--"] {
    border: 1px solid var(--desk-line) !important;
    color: #b9cbc5 !important;
    background: rgba(255,255,255,.03) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .wordbook-theme .wordbook-groups-bar .btn.secondary.is-active,
  .wordbook-group-filter-btn.is-active {
    border-color: rgba(126,231,200,.34) !important;
    color: #d8fff2 !important;
    background: rgba(126,231,200,.09) !important;
    box-shadow: none !important;
  }

  .wordbook-select-box { accent-color: var(--desk-accent); }

  .settings-theme {
    background: transparent !important;
  }

  .settings-theme .settings-card {
    border: 1px solid var(--desk-line) !important;
    background: linear-gradient(145deg, rgba(16,23,27,.9), rgba(8,13,16,.86)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--desk-shadow) !important;
  }

  .settings-theme .settings-card h2 { color: var(--desk-ink) !important; }
  .settings-theme .settings-card p { color: var(--desk-muted) !important; }

  .settings-theme .settings-sync-panel {
    border-color: rgba(126,231,200,.23) !important;
    background:
      radial-gradient(circle at 76% 76%, rgba(126,231,200,.105), transparent 36%),
      linear-gradient(150deg, rgba(17,26,29,.95), rgba(7,12,15,.94)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--desk-shadow) !important;
  }

  .settings-theme .settings-sync-panel .sync-panel-title,
  .settings-theme .settings-sync-panel .sync-panel-head span,
  .settings-theme .settings-sync-panel .sync-progress-note {
    color: var(--desk-accent) !important;
  }

  .settings-theme .settings-sync-panel .sync-progress-fill {
    background: var(--desk-accent) !important;
    box-shadow: none !important;
  }

  .settings-theme .settings-form input,
  .settings-theme .settings-form select {
    border-color: var(--desk-line) !important;
    color: var(--desk-ink) !important;
    background: rgba(3,8,10,.66) !important;
  }

  .settings-theme #activateCdk,
  .settings-theme #changePassword {
    border-color: rgba(126,231,200,.36) !important;
    color: var(--desk-accent-ink) !important;
    background: var(--desk-accent) !important;
    box-shadow: none !important;
  }

  .settings-theme #logout {
    border: 1px solid rgba(255,143,157,.28) !important;
    color: #ffd6dc !important;
    background: rgba(255,143,157,.07) !important;
    box-shadow: none !important;
  }

  .sentence-card.active {
    border-color: rgba(126,231,200,.4) !important;
    background: rgba(13,23,23,.9) !important;
    box-shadow: inset 3px 0 0 var(--desk-accent), 0 20px 55px rgba(0,16,13,.2) !important;
  }

  .sentence-en,
  .summary-sentence {
    font-family: "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif !important;
  }

  .word.term-known,
  .word.term-med {
    border-bottom: 1px solid rgba(126,231,200,.7) !important;
    color: #d8fff2 !important;
    background: rgba(126,231,200,.105) !important;
    text-shadow: none !important;
  }

  .phrase-inline-bar {
    border-color: rgba(126,231,200,.2) !important;
    background: rgba(8,15,17,.82) !important;
  }
  .phrase-inline-label { color: var(--desk-accent) !important; }
  .phrase-inline-btn {
    border-color: rgba(126,231,200,.3) !important;
    color: var(--desk-accent-ink) !important;
    background: var(--desk-accent) !important;
  }

  /* Page entrance and motivated ambient motion. */
  .fade-in { animation: desk-page-in 320ms cubic-bezier(.16,1,.3,1) both; }
  .paper-list > .paper-item { animation: desk-row-in 360ms cubic-bezier(.16,1,.3,1) both; }
  .paper-list > .paper-item:nth-child(2) { animation-delay: 30ms; }
  .paper-list > .paper-item:nth-child(3) { animation-delay: 60ms; }
  .paper-list > .paper-item:nth-child(n+4) { animation-delay: 80ms; }
  .sync-panel::before { animation: desk-orbit 20s linear infinite; }
  .sync-panel::after { animation: desk-pulse 3.6s ease-in-out infinite; }

  @keyframes desk-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes desk-row-in {
    from { opacity: 0; transform: translateY(8px) rotateX(-1deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0); }
  }
  @keyframes desk-orbit {
    from { transform: rotateX(66deg) rotateZ(-14deg); }
    to { transform: rotateX(66deg) rotateZ(346deg); }
  }
  @keyframes desk-pulse {
    0%,100% { opacity: .4; transform: scale(.84); }
    50% { opacity: 1; transform: scale(1.14); }
  }

  ::view-transition-old(root) { animation: 110ms ease-out both desk-route-out; }
  ::view-transition-new(root) { animation: 240ms cubic-bezier(.16,1,.3,1) both desk-route-in; }
  ::view-transition-old(desktop-topbar),
  ::view-transition-new(desktop-topbar),
  ::view-transition-old(desktop-atmosphere),
  ::view-transition-new(desktop-atmosphere) { animation: none; }
  @keyframes desk-route-out { to { opacity: .7; } }
  @keyframes desk-route-in { from { opacity: 0; transform: translateY(5px); } }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .topbar-inner { grid-template-columns: minmax(170px,auto) 1fr auto; gap: 12px; }
  .brand span { display: none; }
  .user-identity { min-width: 150px; }
  .right-panel { grid-template-columns: 1fr; grid-template-areas: "sync" "tools" "papers" "pages"; }
  .right-panel > .sync-panel { position: relative; top: auto; min-height: 310px; }
  .toolbar-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .favorites-page .paper-list,
  .completed-page .paper-list { grid-template-columns: 1fr; }
  .detail { grid-template-columns: minmax(260px,.72fr) minmax(0,1.3fr); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  .fade-in,
  .paper-list > .paper-item,
  .sync-panel::before,
  .sync-panel::after { animation: none !important; }
  .paper-item,
  .wordbook-row,
  .sync-panel { transform: none !important; transition-duration: 1ms !important; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

@media (min-width: 769px) {
  .study-theme .study-main {
    width: min(1120px, calc(100% - 32px));
    max-width: 1120px;
    min-height: calc(100dvh - 72px);
    margin: 0 auto;
    padding: 40px 0 64px;
  }

  .study-center-shell {
    display: grid;
    gap: 24px;
  }

  .study-center-head {
    display: flex;
    min-height: 116px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 0 0 24px;
    border-bottom: 1px solid #dce7e2;
  }

  .study-center-head h1 {
    margin: 0;
    color: #17332b;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 690;
    line-height: 1.04;
    letter-spacing: -0.05em;
  }

  .study-center-head p {
    margin: 11px 0 0;
    color: #60766e;
    font-size: 15px;
    line-height: 1.6;
  }

  .study-center-metrics {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
  }

  .study-center-metrics > span {
    display: grid;
    min-width: 104px;
    align-content: end;
    gap: 5px;
    padding: 0 18px;
  }

  .study-center-metrics > span + span {
    border-left: 1px solid #dce7e2;
  }

  .study-center-metrics strong {
    overflow: hidden;
    color: #1f6654;
    font-size: 23px;
    font-weight: 720;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .study-center-metrics small {
    color: #7a8e87;
    font-size: 12px;
  }

  .study-center-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
    gap: 18px;
    align-items: stretch;
  }

  .study-checkin-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 28px;
    min-height: 92px;
    padding: 18px 20px;
    border: 1px solid #d5e5de;
    border-radius: 14px;
    background: #ffffff;
  }

  .study-checkin-panel.is-complete {
    border-color: #c6ddd3;
    background: #f4f9f6;
  }

  .study-checkin-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
  }

  .study-checkin-identity > span:last-child {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .study-checkin-identity small {
    color: #71857e;
    font-size: 12px;
  }

  .study-checkin-identity strong {
    color: #24493d;
    font-size: 17px;
    font-weight: 690;
  }

  .study-checkin-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 12px;
    color: #25745f;
    background: #eaf4ef;
  }

  .study-checkin-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .study-checkin-stats {
    display: flex;
    align-items: stretch;
  }

  .study-checkin-stats > span {
    display: grid;
    min-width: 82px;
    gap: 3px;
    padding: 0 18px;
  }

  .study-checkin-stats > span + span {
    border-left: 1px solid #dce7e2;
  }

  .study-checkin-stats strong {
    color: #1f6654;
    font-size: 21px;
    font-weight: 720;
    line-height: 1.1;
  }

  .study-checkin-stats small {
    color: #7a8e87;
    font-size: 11px;
  }

  .study-checkin-btn {
    min-width: 112px;
    min-height: 42px;
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
    box-shadow: none;
    font-size: 13px;
    font-weight: 680;
  }

  .study-checkin-btn:hover {
    border-color: #1d604f;
    background: #1d604f;
    transform: none;
  }

  .study-checkin-btn:disabled {
    border-color: #cfe0d8;
    color: #3d6d5e;
    background: #e2efe9;
    cursor: default;
  }

  .study-daily-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "copy sequence"
      "action sequence";
    gap: 24px 32px;
    min-height: 310px;
    padding: 34px 36px;
    border: 1px solid #cfe0d9;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #eef6f2 100%);
    box-shadow: 0 14px 38px rgba(37, 83, 68, 0.07);
  }

  .study-daily-copy {
    grid-area: copy;
    align-self: start;
  }

  .study-daily-copy > span {
    color: #60766e;
    font-size: 12px;
    font-weight: 680;
  }

  .study-daily-copy h2 {
    margin: 13px 0 0;
    color: #17332b;
    font-size: 32px;
    font-weight: 690;
    line-height: 1.08;
    letter-spacing: -0.045em;
  }

  .study-daily-copy p {
    max-width: 38ch;
    margin: 12px 0 0;
    color: #526d64;
    font-size: 14px;
    line-height: 1.65;
  }

  .study-daily-sequence {
    grid-area: sequence;
    display: grid;
    grid-template-columns: minmax(112px, 1fr);
    align-content: center;
    gap: 9px;
    min-width: 170px;
    padding-left: 28px;
    border-left: 1px solid #cfe0d9;
  }

  .study-daily-sequence > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 2px 10px;
  }

  .study-daily-sequence small {
    color: #71857e;
    font-size: 12px;
  }

  .study-daily-sequence strong {
    color: #1f6654;
    font-size: 31px;
    font-weight: 720;
    line-height: 1;
  }

  .study-daily-sequence div > span {
    grid-column: 1 / -1;
    color: #526d64;
    font-size: 12px;
  }

  .study-sequence-word {
    color: #91a39c;
    font-size: 11px;
  }

  .study-daily-start {
    grid-area: action;
    align-self: end;
    justify-self: start;
    min-width: 174px;
    min-height: 44px;
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
    box-shadow: none;
    font-size: 14px;
    font-weight: 690;
    white-space: nowrap;
  }

  .study-daily-start:hover {
    border-color: #1d604f;
    background: #1d604f;
    transform: none;
  }

  .study-daily-start:disabled {
    border-color: #d7e3de;
    color: #7d9089;
    background: #e8efec;
    cursor: default;
  }

  .study-free-panel {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 28px 24px;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #ffffff;
  }

  .study-free-panel header {
    padding: 0 4px 17px;
  }

  .study-free-panel h2 {
    margin: 0;
    color: #17332b;
    font-size: 20px;
    font-weight: 680;
    letter-spacing: -0.025em;
  }

  .study-free-panel p {
    margin: 7px 0 0;
    color: #71857e;
    font-size: 13px;
  }

  .study-mode-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 74px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #17332b;
    background: #f4f8f6;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
  }

  .study-mode-row:hover {
    border-color: #c9ddd5;
    background: #edf5f1;
    transform: none;
  }

  .study-mode-row:disabled {
    opacity: 0.56;
    cursor: default;
  }

  .study-mode-row > span {
    display: grid;
    gap: 5px;
  }

  .study-mode-row strong {
    color: #294b40;
    font-size: 14px;
    font-weight: 680;
  }

  .study-mode-row small {
    color: #71857e;
    font-size: 12px;
  }

  .study-mode-row b {
    color: #25745f;
    font-size: 20px;
    font-weight: 720;
  }

  .study-source-note {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 18px;
    padding: 16px 18px;
    border-radius: 11px;
    color: #60766e;
    background: #eef4f1;
    font-size: 13px;
    line-height: 1.55;
  }

  .study-source-note strong {
    color: #35594d;
    font-weight: 680;
  }

  .learn-session-empty .btn {
    justify-self: center;
    margin-top: 8px;
  }
}

/*
 * Desktop skin system
 * Skin selection lives in Settings and is intentionally scoped above the
 * mobile breakpoint so the existing phone interface remains untouched.
 */
@media (min-width: 769px) {
  html[data-desktop-skin="light"] {
    color-scheme: light;
    --skin-bg: #f4f7f5;
    --skin-surface: #ffffff;
    --skin-surface-raised: #f8fbf9;
    --skin-surface-soft: #edf5f1;
    --skin-line: #dce7e2;
    --skin-line-strong: #bed2ca;
    --skin-ink: #17332b;
    --skin-muted: #687d75;
    --skin-accent: #25745f;
    --skin-accent-hover: #1d604f;
    --skin-accent-soft: #e5f0eb;
    --skin-danger: #9a4351;
    --skin-danger-soft: #fbf3f4;
    --skin-shadow: 0 16px 42px rgba(37, 83, 68, 0.065);
  }

  html[data-desktop-skin="dark"] {
    color-scheme: dark;
    --skin-bg: #08110e;
    --skin-surface: #101b17;
    --skin-surface-raised: #14221d;
    --skin-surface-soft: #172922;
    --skin-line: #263a33;
    --skin-line-strong: #38554b;
    --skin-ink: #e8f2ee;
    --skin-muted: #91a69d;
    --skin-accent: #6fc8aa;
    --skin-accent-hover: #8bd9bd;
    --skin-accent-soft: #19352c;
    --skin-danger: #ef9aa6;
    --skin-danger-soft: #2a1b1e;
    --skin-shadow: 0 22px 58px rgba(0, 0, 0, 0.3);
    --skin-auth-rgb: 8 17 14;
  }

  html[data-desktop-skin="ocean"] {
    color-scheme: light;
    --skin-bg: #edf3f6;
    --skin-surface: #ffffff;
    --skin-surface-raised: #f7fafb;
    --skin-surface-soft: #e4eff3;
    --skin-line: #d1e0e6;
    --skin-line-strong: #acc8d3;
    --skin-ink: #17313d;
    --skin-muted: #647d88;
    --skin-accent: #326f88;
    --skin-accent-hover: #255b72;
    --skin-accent-soft: #dfeef3;
    --skin-danger: #a44856;
    --skin-danger-soft: #fbf3f4;
    --skin-shadow: 0 18px 46px rgba(32, 76, 94, 0.09);
    --skin-auth-rgb: 237 243 246;
  }

  .settings-theme .settings-primary-column {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .settings-appearance-panel {
    padding: 20px 22px 18px;
    border: 1px solid var(--skin-line, #dce7e2);
    border-radius: 16px;
    color: var(--skin-ink, #17332b);
    background: var(--skin-surface, #fff);
    box-shadow: var(--skin-shadow, 0 16px 42px rgba(37, 83, 68, 0.055));
  }

  .settings-appearance-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }

  .settings-section-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--skin-accent, #25745f);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.11em;
  }

  .settings-appearance-head h3 {
    margin: 0;
    color: var(--skin-ink, #17332b);
    font-size: 17px;
    font-weight: 690;
    letter-spacing: -0.025em;
  }

  .settings-device-note {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid var(--skin-line, #dce7e2);
    border-radius: 999px;
    color: var(--skin-muted, #687d75);
    background: var(--skin-surface-raised, #f8fbf9);
    font-size: 10px;
    font-weight: 650;
  }

  .desktop-skin-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .desktop-skin-option {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 9px;
    padding: 8px 8px 10px;
    border: 1px solid var(--skin-line, #dce7e2) !important;
    border-radius: 12px;
    color: var(--skin-ink, #17332b) !important;
    background: var(--skin-surface-raised, #f8fbf9) !important;
    box-shadow: none !important;
    text-align: left;
    transform: none !important;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
  }

  .desktop-skin-option:hover {
    border-color: var(--skin-line-strong, #bed2ca) !important;
    background: var(--skin-surface, #fff) !important;
  }

  .desktop-skin-option.is-active {
    border-color: var(--skin-accent, #25745f) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--skin-accent, #25745f) 14%, transparent) !important;
  }

  .desktop-skin-preview {
    position: relative;
    display: block;
    height: 66px;
    overflow: hidden;
    border: 1px solid var(--preview-line);
    border-radius: 8px;
    background: var(--preview-bg);
  }

  .desktop-skin-option-light {
    --preview-bg: #f4f7f5;
    --preview-panel: #ffffff;
    --preview-line: #dce7e2;
    --preview-accent: #25745f;
    --preview-text: #557067;
  }

  .desktop-skin-option-dark {
    --preview-bg: #08110e;
    --preview-panel: #14221d;
    --preview-line: #2b4139;
    --preview-accent: #6fc8aa;
    --preview-text: #769087;
  }

  .desktop-skin-option-ocean {
    --preview-bg: #edf3f6;
    --preview-panel: #ffffff;
    --preview-line: #d1e0e6;
    --preview-accent: #326f88;
    --preview-text: #69838e;
  }

  .desktop-skin-preview-bar {
    position: absolute;
    inset: 0 0 auto;
    height: 13px;
    border-bottom: 1px solid var(--preview-line);
    background: var(--preview-panel);
  }

  .desktop-skin-preview-bar::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 6px;
    width: 14px;
    height: 5px;
    border-radius: 2px;
    background: var(--preview-accent);
  }

  .desktop-skin-preview-rail {
    position: absolute;
    top: 20px;
    bottom: 7px;
    left: 6px;
    width: 20px;
    border: 1px solid var(--preview-line);
    border-radius: 5px;
    background: var(--preview-panel);
  }

  .desktop-skin-preview-rail::before,
  .desktop-skin-preview-rail::after {
    content: "";
    position: absolute;
    right: 4px;
    left: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--preview-text);
    opacity: 0.55;
  }

  .desktop-skin-preview-rail::before { top: 8px; }
  .desktop-skin-preview-rail::after { top: 15px; }

  .desktop-skin-preview-sheet {
    position: absolute;
    top: 20px;
    right: 6px;
    bottom: 7px;
    left: 32px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 0 7px;
    border: 1px solid var(--preview-line);
    border-radius: 5px;
    background: var(--preview-panel);
  }

  .desktop-skin-preview-sheet i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--preview-text);
    opacity: 0.5;
  }

  .desktop-skin-preview-sheet i:first-child {
    width: 64%;
    height: 3px;
    background: var(--preview-accent);
    opacity: 0.9;
  }

  .desktop-skin-preview-sheet i:last-child { width: 78%; }

  .desktop-skin-option-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding-right: 14px;
  }

  .desktop-skin-option-copy strong {
    color: var(--skin-ink, #17332b);
    font-size: 12px;
    font-weight: 690;
    line-height: 1.2;
  }

  .desktop-skin-option-copy small {
    overflow: hidden;
    color: var(--skin-muted, #687d75);
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-skin-check {
    position: absolute;
    right: 8px;
    bottom: 12px;
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    border: 1px solid var(--skin-line-strong, #bed2ca);
    border-radius: 50%;
    color: transparent;
    font-size: 9px;
    line-height: 1;
  }

  .desktop-skin-check::before { content: "✓"; }

  .desktop-skin-option.is-active .desktop-skin-check {
    border-color: var(--skin-accent, #25745f);
    color: #fff;
    background: var(--skin-accent, #25745f);
  }

  .settings-appearance-note {
    margin: 12px 0 0;
    color: var(--skin-muted, #687d75);
    font-size: 10px;
    line-height: 1.5;
  }

  body.desktop-skin-switching,
  body.desktop-skin-switching :is(.app-shell, .topbar, .panel-toolbar, .paper-item, .modal-card, .settings-appearance-panel, .settings-control-column, .settings-sync-panel, .settings-leaderboard-card, .wordbook-row, .favorite-library-item) {
    transition: color 260ms ease, background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]),
  html[data-desktop-skin]:not([data-desktop-skin="light"]):has(.auth),
  html[data-desktop-skin]:not([data-desktop-skin="light"]):has(.home-theme),
  html[data-desktop-skin]:not([data-desktop-skin="light"]):has(.settings-theme),
  html[data-desktop-skin]:not([data-desktop-skin="light"]):has(.detail-theme) {
    background: var(--skin-bg) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) body.desktop-space-ui,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) body.desktop-space-ui:has(.auth),
  html[data-desktop-skin]:not([data-desktop-skin="light"]) body.desktop-space-ui:has(.home-theme),
  html[data-desktop-skin]:not([data-desktop-skin="light"]) body.desktop-space-ui:has(.settings-theme),
  html[data-desktop-skin]:not([data-desktop-skin="light"]) body.desktop-space-ui:has(.detail-theme) {
    color: var(--skin-ink) !important;
    background: var(--skin-bg) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) body.desktop-space-ui::before,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) body.desktop-space-ui::after {
    content: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(.app-shell, .home-theme, .settings-theme, .detail-theme, .wordbook-theme, .favorites-page, .completed-page, .admin-theme, .learn-theme, .auth) {
    color: var(--skin-ink) !important;
    background-color: var(--skin-bg) !important;
  }

  html[data-desktop-skin="dark"] body.desktop-space-ui #desktopParticleField {
    display: block !important;
    opacity: 0.22;
  }

  html[data-desktop-skin="dark"] body.desktop-space-ui:has(.auth) #desktopParticleField {
    display: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .global-beian-footer {
    color: var(--skin-muted) !important;
    background: var(--skin-bg) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .global-beian-footer a {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(.home-theme, .settings-theme, .detail-theme, .wordbook-theme, .favorites-page, .admin-theme, .learn-theme) .topbar {
    border-bottom-color: var(--skin-line) !important;
    background: color-mix(in srgb, var(--skin-surface) 93%, transparent) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--skin-line) 45%, transparent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar :is(.brand h1, .user-name) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar :is(.brand span, .user-membership, .user-level-line, .user-level-next) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .brand::before {
    border-color: var(--skin-accent) !important;
    color: var(--skin-surface) !important;
    background: var(--skin-accent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .topbar-nav {
    border-color: var(--skin-line) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .topbar-nav button {
    color: var(--skin-muted) !important;
    background: transparent !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .topbar-nav button:is(:hover, .is-active) {
    border-color: var(--skin-line) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-surface) !important;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--skin-line) 55%, transparent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar :is(.user-identity, .user-account-mark) {
    border-color: var(--skin-line) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .user-account-mark:not(.is-member) {
    color: var(--skin-accent) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .user-chip .topbar-settings-btn,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .user-chip .btn.topbar-settings-btn,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .user-chip .btn.secondary.topbar-settings-btn {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar.shared-topbar .user-chip .topbar-settings-btn:is(:hover, .is-active) {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(
    .panel-toolbar,
    .paper-item,
    .focus-paper,
    .home-leaderboard-pill,
    .home-leaderboard-bubble,
    .leaderboard-full-card,
    .settings-control-column,
    .settings-sync-panel,
    .settings-leaderboard-card,
    .settings-appearance-panel,
    .detail-paper-head,
    .detail-reading-shell,
    .detail-reading-panel,
    .detail-navigation,
    .detail-sentence-card,
    .wordbook-commandbar,
    .wordbook-library-shell,
    .wordbook-groups-bar,
    .wordbook-row,
    .favorite-library-item,
    .admin-workspace,
    .admin-card,
    .admin-table-wrap,
    .learn-session-shell,
    .learn-card,
    .exam-learn-card,
    .modal-card
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background-color: var(--skin-surface) !important;
    box-shadow: var(--skin-shadow) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .settings-theme .settings-sync-panel {
    background:
      linear-gradient(90deg, var(--skin-accent) 0 86px, var(--skin-line) 86px 100%) top / 100% 3px no-repeat,
      var(--skin-surface) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(.settings-progress-metrics, .settings-danger-section, .home-leaderboard-item, .detail-sentence-position, .wordbook-list-head, .admin-table th, .learn-front, .learn-back, .exam-learn-front, .exam-learn-back) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(
    .settings-page-head,
    .settings-section + .settings-section,
    .settings-progress-metrics > div + div,
    .detail-paper-meta > span + span,
    .wordbook-row,
    .favorite-library-foot,
    .admin-table th,
    .admin-table td
  ) {
    border-color: var(--skin-line) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(
    .settings-page-copy h2,
    .settings-section-head h3,
    .settings-sync-panel .sync-panel-head h3,
    .settings-progress-metrics strong,
    .settings-leaderboard-head h3,
    .paper-item h3,
    .paper-item:hover h3,
    .focus-paper h3,
    .focus-paper:hover h3,
    .paper-title-zh,
    .detail-paper-head h1,
    .detail-reading-head h2,
    .detail-sentence-text,
    .wordbook-row-word,
    .favorite-library-item h3,
    .favorite-library-item:hover h3,
    .admin-workspace-head h2,
    .admin-section-heading h3,
    .learn-session-head h1,
    .learn-word-row,
    .exam-learn-back-word
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(
    .settings-page-copy p,
    .settings-section-head p,
    .settings-sync-panel p,
    .settings-sync-panel .sync-panel-title,
    .settings-progress-metrics span,
    .settings-leaderboard-head p,
    .settings-leaderboard-empty,
    .current-filter,
    .filter-item label,
    .paper-authors,
    .paper-abstract,
    .paper-abstract p,
    .paper-meta,
    .detail-paper-meta,
    .detail-title-zh,
    .detail-reading-head p,
    .wordbook-row-meaning,
    .wordbook-row-mastery,
    .wordbook-row-titer,
    .favorite-library-authors,
    .favorite-library-journal,
    .admin-workspace-copy,
    .admin-section-heading p,
    .learn-session-head p,
    .learn-card-phonetic
  ) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(input, select, textarea) {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    caret-color: var(--skin-accent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(input, textarea)::placeholder {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(input, select, textarea):focus {
    border-color: var(--skin-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 16%, transparent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .btn.secondary,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .detail-theme .detail-reading-actions .btn,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme .wordbook-commandbar .btn.secondary {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .btn.secondary:hover,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .detail-theme .detail-reading-actions .btn:hover {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) :is(.paper-type-badge, .tag, .wordbook-group-chip, .detail-highlight-legend) {
    border-color: var(--skin-line) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .paper-item:hover,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .favorite-library-item:hover,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-row:hover {
    border-color: var(--skin-line-strong) !important;
    background-color: var(--skin-surface-raised) !important;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--skin-line) 48%, transparent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-table tbody tr:hover td,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-table tbody tr:has(.userSelectBox:checked) td {
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .settings-theme #collapseHomeLeaderboardBtn {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .settings-theme #logout {
    border-color: color-mix(in srgb, var(--skin-danger) 42%, var(--skin-line)) !important;
    color: var(--skin-danger) !important;
    background: var(--skin-danger-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth {
    background: var(--skin-bg) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth-story {
    color: var(--skin-ink) !important;
    background: var(--skin-bg) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth-story::after {
    background:
      linear-gradient(90deg, transparent 54%, rgb(var(--skin-auth-rgb) / 0.08) 65%, rgb(var(--skin-auth-rgb) / 0.62) 86%, var(--skin-bg) 100%),
      linear-gradient(90deg, rgb(var(--skin-auth-rgb) / 0.72) 0%, rgb(var(--skin-auth-rgb) / 0.28) 41%, transparent 69%),
      linear-gradient(0deg, rgb(var(--skin-auth-rgb) / 0.18) 0%, transparent 38%) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth-card {
    color: var(--skin-ink) !important;
    background: var(--skin-bg) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth :is(.auth-story-brand, .auth-story-copy h1, .auth-card h2, .auth-field > label) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth :is(.auth-story-copy p, .auth-card > p) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth-switch {
    border-color: var(--skin-line) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth .auth-switch .btn.secondary {
    color: var(--skin-muted) !important;
    background: transparent !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .auth .auth-switch .btn:not(.secondary) {
    color: var(--skin-accent-hover) !important;
    background: var(--skin-surface) !important;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .settings-theme .settings-primary-column {
    grid-template-rows: auto auto auto;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  body.desktop-skin-switching,
  body.desktop-skin-switching * {
    transition-duration: 1ms !important;
  }
}

/* Desktop learning league: compact preview plus a complete, paginated ranking. */
@media (min-width: 769px) {
  .home-theme .home-leaderboard-float {
    right: 18px;
    bottom: 22px;
    align-items: flex-end;
  }

  .home-theme .home-leaderboard-pill {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 11px;
    font-size: 13px;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
    touch-action: manipulation;
  }

  .home-theme .home-leaderboard-bubble {
    width: 366px;
    padding: 14px;
    border-radius: 16px;
  }

  .home-theme .home-leaderboard-bubble-head {
    align-items: center;
    margin-bottom: 12px;
  }

  .home-theme .home-leaderboard-tabs {
    gap: 3px;
    padding: 3px;
    border: 1px solid #dce7e2;
    border-radius: 10px;
    background: #f5f8f6;
  }

  .home-theme .home-leaderboard-tab {
    min-height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
  }

  .home-theme .home-leaderboard-tab.is-active {
    color: #1d604f;
    background: #fff;
    box-shadow: 0 1px 3px rgba(37, 83, 68, 0.08);
  }

  .home-theme .home-leaderboard-bubble-actions {
    gap: 7px;
  }

  .home-theme .home-leaderboard-mini-btn {
    font-size: 11px;
  }

  .home-theme .home-leaderboard-bubble-body {
    gap: 5px;
  }

  .home-theme .home-leaderboard-item {
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
  }

  .home-theme .home-leaderboard-item + .home-leaderboard-item {
    border-top-color: #edf2ef;
    border-radius: 0;
  }

  .home-theme .home-leaderboard-item.is-current-user {
    border-color: #bcd8ce;
    border-radius: 10px;
    background: #edf6f2;
  }

  .home-leaderboard-rank {
    display: grid;
    justify-items: start;
    gap: 2px;
  }

  .home-leaderboard-rank b {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .home-leaderboard-trend {
    display: inline-flex;
    min-width: 22px;
    min-height: 15px;
    align-items: center;
    justify-content: center;
    color: #71857e;
    font-size: 9px;
    font-weight: 760;
    line-height: 1;
  }

  .home-leaderboard-trend.is-up,
  .home-leaderboard-trend.is-new {
    color: #25745f;
  }

  .home-leaderboard-trend.is-down {
    color: #a06464;
  }

  .home-theme .home-leaderboard-user {
    color: #17332b;
    font-size: 13px;
    font-weight: 690;
  }

  .home-theme .home-leaderboard-score {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .home-leaderboard-challenge {
    display: grid;
    margin-top: 10px;
    padding: 11px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    border: 1px solid #d7e6e0;
    border-radius: 10px;
    color: #526d64;
    background: #f5f9f7;
  }

  .home-leaderboard-challenge span,
  .home-leaderboard-challenge strong {
    font-size: 12px;
  }

  .home-leaderboard-challenge strong {
    color: #1d604f;
    font-variant-numeric: tabular-nums;
  }

  .home-leaderboard-challenge small {
    grid-column: 1 / -1;
    color: #7c8f88;
    font-size: 10px;
  }

  .home-leaderboard-challenge.is-complete {
    border-color: #afd2c5;
    background: #e8f4ef;
  }

  .home-leaderboard-full-btn {
    width: 100%;
    min-height: 38px;
    margin-top: 9px;
    border: 1px solid #25745f;
    border-radius: 9px;
    color: #fff;
    background: #25745f;
    font-size: 12px;
    font-weight: 690;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
  }

  .home-leaderboard-full-btn:hover {
    border-color: #1d604f;
    background: #1d604f;
  }

  .home-leaderboard-modal {
    z-index: 2200;
    padding: 28px;
    background: rgba(18, 36, 30, 0.34);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .home-leaderboard-modal .leaderboard-full-card {
    width: min(820px, calc(100vw - 48px));
    max-height: min(820px, calc(100dvh - 56px));
    padding: 0;
    overflow: hidden;
    border: 1px solid #d7e4df;
    border-radius: 18px;
    color: #17332b;
    background: #fff;
    box-shadow: 0 28px 80px rgba(25, 67, 54, 0.2);
  }

  .home-leaderboard-modal .leaderboard-full-card::before {
    content: none;
  }

  .leaderboard-full-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px 18px;
    border-bottom: 1px solid #e3ece8;
  }

  .leaderboard-full-kicker {
    display: block;
    margin-bottom: 8px;
    color: #25745f;
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.13em;
  }

  .home-leaderboard-modal .leaderboard-full-head h3 {
    margin: 0;
    color: #17332b;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.035em;
  }

  .leaderboard-full-head p {
    margin: 7px 0 0;
    color: #71857e;
    font-size: 12px;
  }

  .leaderboard-full-close {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    color: #60756d;
    background: transparent;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
  }

  .leaderboard-full-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 26px;
    border-bottom: 1px solid #e3ece8;
  }

  .leaderboard-full-tabs button {
    min-height: 46px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #71857e;
    background: transparent;
    font-size: 13px;
    font-weight: 680;
    cursor: pointer;
  }

  .leaderboard-full-tabs button.is-active {
    border-bottom-color: #25745f;
    color: #1d604f;
  }

  .leaderboard-full-body {
    min-height: 360px;
    max-height: calc(100dvh - 322px);
    padding: 18px 26px;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .leaderboard-podium {
    display: grid;
    margin-bottom: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
  }

  .leaderboard-podium-place {
    display: grid;
    min-height: 92px;
    padding: 13px;
    align-content: end;
    gap: 4px;
    border: 1px solid #dce7e2;
    border-radius: 12px;
    background: #f7faf8;
  }

  .leaderboard-podium-place.is-place-1 {
    order: 2;
    min-height: 112px;
    border-color: #b9d6cb;
    background: #eaf4f0;
  }

  .leaderboard-podium-place.is-place-2 {
    order: 1;
  }

  .leaderboard-podium-place.is-place-3 {
    order: 3;
  }

  .leaderboard-podium-rank {
    color: #25745f;
    font-size: 22px;
    font-weight: 760;
  }

  .leaderboard-podium-place strong {
    overflow: hidden;
    color: #17332b;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaderboard-podium-place small {
    color: #60756d;
    font-size: 11px;
  }

  .leaderboard-full-list {
    display: grid;
  }

  .leaderboard-full-row {
    display: grid;
    min-height: 58px;
    padding: 8px 10px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #edf2ef;
  }

  .leaderboard-full-row:first-child {
    border-top: 0;
  }

  .leaderboard-full-row.is-current-user {
    border: 1px solid #b9d6cb;
    border-radius: 10px;
    background: #edf6f2;
  }

  .leaderboard-full-rank {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .leaderboard-full-rank > strong {
    min-width: 22px;
    color: #526d64;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  .leaderboard-full-person {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .leaderboard-full-person > span {
    overflow: hidden;
    color: #17332b;
    font-size: 13px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaderboard-full-person > small {
    overflow: hidden;
    color: #7b8e87;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaderboard-full-score {
    color: #25745f;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .leaderboard-my-rank {
    display: grid;
    min-height: 52px;
    margin: 0 26px;
    padding: 8px 12px;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #b9d6cb;
    border-radius: 10px;
    color: #526d64;
    background: #edf6f2;
    font-size: 12px;
  }

  .leaderboard-my-rank strong,
  .leaderboard-my-rank b {
    color: #1d604f;
    font-variant-numeric: tabular-nums;
  }

  .leaderboard-full-footer {
    display: flex;
    min-height: 72px;
    padding: 14px 26px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .leaderboard-full-footer p {
    max-width: 480px;
    margin: 0;
    color: #7b8e87;
    font-size: 10px;
    line-height: 1.5;
  }

  .leaderboard-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .leaderboard-pagination button,
  .leaderboard-full-error button {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid #d5e3dd;
    border-radius: 8px;
    color: #526d64;
    background: #fff;
    cursor: pointer;
  }

  .leaderboard-pagination button:disabled {
    opacity: 0.42;
    cursor: default;
  }

  .leaderboard-pagination span {
    min-width: 46px;
    color: #71857e;
    font-size: 11px;
    text-align: center;
  }

  .leaderboard-full-loading {
    display: grid;
    gap: 10px;
  }

  .leaderboard-full-loading span {
    height: 58px;
    border-radius: 9px;
    background: linear-gradient(90deg, #f0f5f2 25%, #f8faf9 45%, #f0f5f2 65%);
    background-size: 220% 100%;
    animation: leaderboard-loading 1.2s ease-in-out infinite;
  }

  .leaderboard-full-error {
    display: grid;
    min-height: 280px;
    place-content: center;
    justify-items: center;
    gap: 14px;
    color: #60756d;
  }

  @keyframes leaderboard-loading {
    to { background-position: -120% 0; }
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .topbar-nav-count {
    display: none;
  }

  .study-center-head {
    align-items: flex-start;
  }

  .study-center-metrics > span {
    min-width: 86px;
    padding: 0 12px;
  }

  .study-center-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .study-checkin-panel {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .study-checkin-stats {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-top: 14px;
    border-top: 1px solid #e1ebe7;
  }

  .study-checkin-stats > span:first-child {
    padding-left: 0;
  }

  .study-free-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .study-free-panel header {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-transparency: reduce) and (min-width: 769px) {
  .topbar,
  .panel-toolbar,
  .auth-card,
  .settings-card,
  .modal-card { background: #0d1317 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/*
 * Light authentication page
 * The illustration and form are one full-height canvas; controls use a
 * consistent 10px radius.
 */
@media (min-width: 769px) {
  html:has(.auth) {
    color-scheme: light;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.auth) {
    color: #17332b;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.auth)::before,
  body.desktop-space-ui:has(.auth)::after {
    content: none;
  }

  body.desktop-space-ui:has(.auth) #desktopParticleField,
  body.desktop-space-ui:has(.auth) .global-beian-footer {
    display: none;
  }

  body.desktop-space-ui:has(.auth) #app {
    min-height: 100dvh;
  }

  .auth {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(390px, 0.65fr);
    place-items: stretch;
    gap: 0;
    overflow: hidden;
    color: #17332b;
    background: #f4f7f5;
  }

  .auth::before,
  .auth::after,
  .auth-card::before {
    content: none !important;
  }

  .auth-story {
    position: relative;
    isolation: isolate;
    grid-column: 1;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f4f7f5;
  }

  .auth-story::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("./assets/medlit-login-students-photo-v3.jpg?v=20260826-3");
    background-repeat: no-repeat;
    background-position: -112px center;
    background-size: cover;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.82) 77%, rgba(0, 0, 0, 0.42) 89%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.82) 77%, rgba(0, 0, 0, 0.42) 89%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .auth-story::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent 56%, rgba(244, 247, 245, 0.08) 66%, rgba(244, 247, 245, 0.58) 86%, #f4f7f5 100%),
      linear-gradient(90deg, rgba(244, 247, 245, 0.76) 0%, rgba(244, 247, 245, 0.34) 42%, transparent 69%),
      linear-gradient(0deg, rgba(244, 247, 245, 0.18) 0%, transparent 38%);
  }

  .auth-story-brand {
    position: absolute;
    top: clamp(24px, 3.4vw, 48px);
    left: clamp(26px, 4.2vw, 62px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #18372e;
    font-size: 18px;
    font-weight: 720;
    letter-spacing: -0.035em;
  }

  .auth-story-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #25745f;
    box-shadow: 0 9px 24px rgba(37, 116, 95, 0.2);
    font-size: 16px;
    font-weight: 780;
    letter-spacing: -0.04em;
  }

  .auth-story-copy {
    position: absolute;
    top: clamp(106px, 16vh, 168px);
    left: clamp(26px, 4.2vw, 62px);
    z-index: 3;
    width: min(52%, 520px);
  }

  .auth-story-copy h1 {
    margin: 0;
    color: #15352c;
    font-size: clamp(40px, 3.1vw, 52px);
    font-weight: 680;
    line-height: 1.12;
    letter-spacing: -0.065em;
  }

  .auth-story-copy h1 span {
    display: block;
    white-space: nowrap;
  }

  .auth-story-copy p {
    max-width: 430px;
    margin: 24px 0 0;
    color: #526d64;
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: 0;
  }

  .auth-card {
    grid-column: 2;
    align-self: stretch;
    display: flex;
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: clamp(36px, 3.4vw, 52px) clamp(30px, 3.4vw, 50px) !important;
    flex-direction: column;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    color: #17332b;
    background: #f4f7f5 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none !important;
  }

  .auth-switch {
    width: 100%;
    gap: 4px;
    margin: 0 0 30px;
    padding: 4px;
    border: 1px solid #dde7e2;
    border-radius: 12px;
    background: #eaf0ed;
  }

  .auth .auth-switch .btn,
  .auth .auth-switch .btn.secondary {
    min-height: 42px;
    border: 0 !important;
    border-radius: 8px !important;
    color: #667a73 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 650;
  }

  .auth .auth-switch .btn:not(.secondary) {
    color: #1d4e40 !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(38, 82, 69, 0.08) !important;
  }

  .auth-card h2 {
    margin: 0 0 10px;
    color: #17332b;
    font-size: 34px;
    font-weight: 680;
    line-height: 1.15;
    text-align: left;
    letter-spacing: -0.055em;
    text-shadow: none;
  }

  .auth-card > p {
    margin: 0 0 24px;
    color: #687b74;
    font-size: 15px;
    line-height: 1.65;
    text-align: left;
  }

  .auth-form-stage {
    min-height: 230px;
  }

  .auth-field {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
  }

  .auth-field > label {
    display: block;
    color: #334f46;
    font-size: 14px;
    font-weight: 640;
    line-height: 1.3;
  }

  .auth-card .auth-field input {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #cbdad4;
    border-radius: 10px;
    color: #17332b;
    background: #fff;
    box-shadow: 0 1px 0 rgba(38, 82, 69, 0.02);
    caret-color: #25745f;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  }

  .auth-card .auth-field input::placeholder {
    color: #74867f;
  }

  .auth-card .auth-field input:hover {
    border-color: #a9c2b9;
  }

  .auth-card .auth-field input:focus {
    outline: none;
    border-color: #25745f;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 116, 95, 0.12);
  }

  .auth-card #login,
  .auth-card #register {
    width: 100%;
    min-height: 50px;
    margin-top: 6px;
    border: 1px solid #25745f !important;
    border-radius: 10px !important;
    color: #fff !important;
    background: #25745f !important;
    box-shadow: 0 12px 28px rgba(37, 116, 95, 0.18) !important;
    font-weight: 700;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  }

  .auth-card #login:hover,
  .auth-card #register:hover {
    color: #fff !important;
    background: #1d604f !important;
    box-shadow: 0 16px 34px rgba(37, 116, 95, 0.24) !important;
    transform: translateY(-1px);
  }

  .auth-card #login:active,
  .auth-card #register:active {
    transform: scale(0.985);
  }

  .auth-card #login:disabled,
  .auth-card #register:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
  }

  .auth-status {
    min-height: 20px;
    margin-top: 10px;
    color: #9b3d4d;
    text-align: center;
  }
}

@media (min-width: 769px) {
  .desktop-word-modal {
    padding: 24px;
    background: rgba(18, 45, 36, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .desktop-word-modal .reading-word-popup-card {
    width: min(620px, 100%);
    max-height: calc(100dvh - 48px);
    padding: 0 !important;
    overflow: auto !important;
    border: 1px solid #d6e3de !important;
    border-radius: 16px !important;
    color: #17332b !important;
    background: #ffffff !important;
    box-shadow: 0 30px 90px rgba(29, 72, 57, 0.2) !important;
    font-family: "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif !important;
  }

  .desktop-word-modal .reading-word-popup-card::before {
    display: none;
  }

  .desktop-word-modal .reading-word-popup-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 28px 21px;
    border-bottom: 1px solid #e2ece8;
  }

  .desktop-word-modal .reading-word-popup-title {
    min-width: 0;
  }

  .desktop-word-modal .reading-word-popup-title-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
  }

  .desktop-word-modal .reading-word-popup-title h3 {
    min-width: 0;
    margin: 0;
    color: #17332b;
    font-family: "SF Pro Display", "Helvetica Neue", "PingFang SC", sans-serif;
    font-size: 32px;
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
  }

  .desktop-word-modal .reading-word-popup-title #speak,
  .desktop-word-modal .reading-word-popup-title #speakWordbookWord,
  .desktop-word-modal .reading-word-popup-title .reading-word-speak {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0;
    color: #60766e !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 150ms ease, transform 150ms ease;
  }

  .desktop-word-modal .reading-word-popup-title #speak svg,
  .desktop-word-modal .reading-word-popup-title #speakWordbookWord svg,
  .desktop-word-modal .reading-word-popup-title .reading-word-speak svg {
    width: 17px;
    height: 17px;
  }

  .desktop-word-modal .reading-word-popup-title #speak:hover,
  .desktop-word-modal .reading-word-popup-title #speakWordbookWord:hover,
  .desktop-word-modal .reading-word-popup-title .reading-word-speak:hover {
    color: #25745f !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-1px);
  }

  .desktop-word-modal .reading-word-phonetic {
    margin: 8px 0 0;
    color: #6b8179;
    font-size: 13px;
    font-weight: 540;
    line-height: 1.4;
  }

  .desktop-word-modal .reading-word-close {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    color: #526d64;
    background: transparent;
    font: inherit;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: color 150ms ease, transform 150ms ease;
  }

  .desktop-word-modal .reading-word-close:hover {
    color: #25745f;
    background: transparent;
    transform: scale(1.08);
  }

  .desktop-word-modal .reading-word-popup-title #speak:focus-visible,
  .desktop-word-modal .reading-word-popup-title #speakWordbookWord:focus-visible,
  .desktop-word-modal .reading-word-popup-title .reading-word-speak:focus-visible,
  .desktop-word-modal .reading-word-close:focus-visible {
    outline: 2px solid rgba(37, 116, 95, 0.45);
    outline-offset: 2px;
  }

  .desktop-word-modal .reading-word-status {
    margin: 0;
    padding: 10px 28px;
    border-bottom: 1px solid #e5eeea;
    color: #60766e;
    background: #f6faf8;
    font-size: 12px;
    line-height: 1.45;
  }

  .desktop-word-modal .reading-word-status[hidden],
  .desktop-word-modal [data-word-example-section][hidden],
  .desktop-word-modal [data-word-example-zh][hidden] {
    display: none;
  }

  .desktop-word-modal .reading-word-popup-body {
    padding: 2px 28px;
  }

  .desktop-word-modal .reading-word-section {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid #e7efeb;
  }

  .desktop-word-modal .reading-word-section:last-child {
    border-bottom: 0;
  }

  .desktop-word-modal .reading-word-label {
    padding-top: 2px;
    color: #72867f;
    font-size: 12px;
    font-weight: 660;
    line-height: 1.5;
  }

  .desktop-word-modal .reading-word-section p {
    margin: 0;
    color: #36574c;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
  }

  .desktop-word-modal .reading-word-section .reading-word-meaning {
    color: #17332b;
    font-size: 18px;
    font-weight: 680;
    line-height: 1.55;
  }

  .desktop-word-modal .reading-word-example-zh {
    margin-top: 8px !important;
    color: #71857e !important;
    font-size: 13px !important;
  }

  .desktop-word-modal .reading-word-save-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px 28px;
    border-top: 1px solid #e2ece8;
    background: #f7faf9;
  }

  .desktop-word-modal .reading-word-save-row .wordbook-save-group-label {
    margin: 0;
    color: #60766e;
    font-size: 12px;
    font-weight: 660;
  }

  .desktop-word-modal .reading-word-save-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
  }

  .desktop-word-modal .reading-word-save-row .wordbook-save-group-select {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #cadbd4;
    border-radius: 10px;
    color: #294b40;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    outline: none;
  }

  .desktop-word-modal .reading-word-save-row .wordbook-save-group-select:focus {
    border-color: #7fb19f;
    box-shadow: 0 0 0 3px rgba(37, 116, 95, 0.12);
  }

  .desktop-word-modal .reading-word-save-control .btn {
    width: auto;
    min-width: 112px;
    min-height: 40px;
    margin: 0;
    padding: 0 16px;
    border-radius: 10px;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 680;
  }

  .desktop-word-modal .reading-word-save-control #save {
    border: 1px solid #25745f !important;
    color: #ffffff !important;
    background: #25745f !important;
    box-shadow: none !important;
  }

  .desktop-word-modal .reading-word-save-control #save:hover {
    border-color: #1d604f !important;
    background: #1d604f !important;
    box-shadow: none !important;
  }

  .desktop-word-modal .reading-word-save-control #save.is-saved {
    border-color: #a9cdbf !important;
    color: #1d604f !important;
    background: #e5f0eb !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    .desktop-word-modal .reading-word-popup-card {
      animation: reading-word-popup-enter 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
  }

  @keyframes reading-word-popup-enter {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .auth {
    padding: 0;
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .auth-story {
    min-height: 100dvh;
    border-radius: 0;
  }

  .auth-story-brand {
    top: 26px;
    left: 28px;
  }

  .auth-story-copy {
    top: 104px;
    left: 28px;
    width: min(80%, 330px);
  }

  .auth-story-copy h1 {
    font-size: 30px;
    letter-spacing: -0.055em;
  }

  .auth-story-copy p {
    max-width: 300px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.65;
  }

  .auth-card {
    width: 100%;
    padding-inline: 28px !important;
  }

  .auth-switch {
    margin-bottom: 32px;
  }

  .auth-card h2 {
    font-size: 31px;
  }
}

@media (min-width: 769px) and (max-height: 700px) {
  .auth-story-copy {
    top: 92px;
  }

  .auth-story-copy h1 {
    font-size: 34px;
  }

  .auth-story-copy p {
    margin-top: 16px;
    line-height: 1.55;
  }

  .auth-switch {
    margin-bottom: 24px;
  }

  .auth-card > p {
    margin-bottom: 22px;
  }

  .auth-field {
    margin-bottom: 12px;
  }
}

/*
 * Header invariant: authenticated desktop routes must render the exact same
 * header. The app-level selector deliberately outranks the older page-theme
 * rules while those themes continue to style only their page content.
 */
@media (min-width: 769px) {
  #app > .app-shell > .topbar.shared-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #dce7e2 !important;
    border-radius: 0 !important;
    color: #17332b !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 1px 0 rgba(37, 83, 68, 0.025) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
    box-sizing: border-box;
  }

  #app > .app-shell > .topbar.shared-topbar > .topbar-inner {
    display: grid !important;
    width: min(1240px, calc(100% - 32px)) !important;
    height: 71px !important;
    min-height: 71px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr) !important;
    align-items: center !important;
    gap: 20px !important;
    box-sizing: border-box;
  }

  #app > .app-shell > .topbar.shared-topbar .brand,
  #app > .app-shell > .topbar.shared-topbar .brand:hover {
    display: grid !important;
    width: 230px !important;
    min-width: 230px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-self: start !important;
    column-gap: 11px !important;
    row-gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #17332b !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #app > .app-shell > .topbar.shared-topbar .brand::before {
    grid-row: 1 / 3 !important;
    border-color: #25745f !important;
    color: #fff !important;
    background: #25745f !important;
  }

  #app > .app-shell > .topbar.shared-topbar .brand h1 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    color: #17332b !important;
  }

  #app > .app-shell > .topbar.shared-topbar .brand:hover h1 {
    color: #1d604f !important;
  }

  #app > .app-shell > .topbar.shared-topbar .brand span {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    color: #71857e !important;
  }

  #app > .app-shell > .topbar.shared-topbar .topbar-nav {
    display: flex !important;
    width: max-content !important;
    margin: 0 !important;
    padding: 4px !important;
    align-items: center !important;
    justify-self: center !important;
    gap: 3px !important;
    border: 1px solid #e1ebe7 !important;
    border-radius: 12px !important;
    background: #f5f8f6 !important;
    box-shadow: none !important;
    box-sizing: border-box;
  }

  #app > .app-shell > .topbar.shared-topbar .topbar-nav button {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: #60766e !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #app > .app-shell > .topbar.shared-topbar .topbar-nav button:hover,
  #app > .app-shell > .topbar.shared-topbar .topbar-nav button.is-active {
    border-color: #d2e3dc !important;
    color: #1d604f !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(37, 83, 68, 0.07) !important;
    transform: none !important;
  }

  #app > .app-shell > .topbar.shared-topbar .user-chip {
    display: flex !important;
    width: 230px !important;
    min-width: 230px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #17332b !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
  }

  #app > .app-shell > .topbar.shared-topbar .user-identity {
    display: grid !important;
    width: 167px !important;
    min-width: 167px !important;
    margin: 0 !important;
    padding: 0 13px 0 0 !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    border: 0 !important;
    border-right: 1px solid #dce7e2 !important;
    border-radius: 0 !important;
    color: #17332b !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
  }

  #app > .app-shell > .topbar.shared-topbar .user-account-copy {
    display: grid !important;
    width: 114px !important;
    min-width: 114px !important;
    overflow: hidden !important;
  }

  #app > .app-shell > .topbar.shared-topbar .user-account-mark {
    border-color: #cfe1da !important;
    color: #1d604f !important;
    background: #edf5f1 !important;
  }

  #app > .app-shell > .topbar.shared-topbar .user-account-mark.is-member {
    border-color: #c9a653 !important;
    color: #f5d37d !important;
    background:
      radial-gradient(circle at 30% 15%, rgba(255, 224, 149, 0.26), transparent 34%),
      linear-gradient(145deg, #2e765f, #174b3d) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 235, 184, 0.24),
      inset 0 -1px 0 rgba(10, 61, 47, 0.28),
      0 4px 10px rgba(28, 91, 72, 0.16) !important;
  }

  #app > .app-shell > .topbar.shared-topbar .user-chip .topbar-settings-btn,
  #app > .app-shell > .topbar.shared-topbar .user-chip .btn.topbar-settings-btn,
  #app > .app-shell > .topbar.shared-topbar .user-chip .btn.secondary.topbar-settings-btn {
    display: inline-flex !important;
    width: 54px !important;
    min-width: 54px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 54px !important;
    border: 1px solid #d7e4df !important;
    border-radius: 8px !important;
    color: #526d64 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  #app > .app-shell > .topbar.shared-topbar > .topbar-inner {
    grid-template-columns: auto 1fr auto !important;
    gap: 10px !important;
  }

  #app > .app-shell > .topbar.shared-topbar .brand {
    width: auto !important;
    min-width: 0 !important;
  }

  #app > .app-shell > .topbar.shared-topbar .brand span,
  #app > .app-shell > .topbar.shared-topbar .user-account-copy {
    display: none !important;
  }

  #app > .app-shell > .topbar.shared-topbar .topbar-nav button {
    padding-inline: 10px !important;
  }

  #app > .app-shell > .topbar.shared-topbar .user-identity {
    width: 30px !important;
    min-width: 30px !important;
    padding-right: 0 !important;
    grid-template-columns: 30px !important;
    border-right: 0 !important;
  }

  #app > .app-shell > .topbar.shared-topbar .user-chip {
    width: 93px !important;
    min-width: 93px !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  .auth-story-copy,
  .auth-story-brand {
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) and (min-width: 769px) {
  .auth-card {
    background: #f4f7f5 !important;
  }
}

/*
 * Light desktop settings page
 * One calm canvas, a primary learning column and a grouped control column.
 */
@media (min-width: 769px) {
  html:has(.settings-theme) {
    color-scheme: light;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.settings-theme) {
    color: #17332b;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.settings-theme)::before,
  body.desktop-space-ui:has(.settings-theme)::after {
    content: none;
  }

  body.desktop-space-ui:has(.settings-theme) #desktopParticleField {
    display: none;
  }

  body.desktop-space-ui:has(.settings-theme) .global-beian-footer {
    margin-top: 0;
    color: #71857e;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.settings-theme) .global-beian-footer a {
    color: #526d64;
  }

  .settings-theme {
    min-height: 100dvh;
    color: #17332b;
    background: #f4f7f5 !important;
  }

  .settings-theme .topbar {
    top: 0;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #dce7e2;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 rgba(37, 83, 68, 0.025);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  .settings-theme .topbar-inner {
    width: min(1240px, calc(100% - 32px));
    min-height: 68px;
    margin: 0 auto;
    padding: 8px 0;
  }

  .settings-theme .brand::before {
    border-color: #25745f;
    color: #fff;
    background: #25745f;
  }

  .settings-theme .brand {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
  }

  .settings-theme .brand:hover h1 {
    color: #1d604f;
  }

  .settings-theme .brand h1 {
    color: #17332b;
  }

  .settings-theme .brand span {
    color: #71857e;
  }

  .settings-theme .user-chip {
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .settings-theme .user-identity {
    display: none;
  }

  .settings-theme .user-name {
    color: #17332b;
  }

  .settings-theme .user-membership,
  .settings-theme .user-level-line,
  .settings-theme .user-level-next {
    color: #687b74;
  }

  .settings-theme .user-membership.active {
    color: #25745f;
  }

  .settings-theme .user-level-track {
    background: #dce8e3;
  }

  .settings-theme .user-level-fill {
    background: #25745f;
  }

  .settings-theme .user-chip button,
  .settings-theme .user-chip .btn,
  .settings-theme .user-chip .btn.secondary {
    min-height: 38px;
    padding-inline: 14px;
    border-color: transparent;
    color: #526d64;
    background: transparent;
  }

  .settings-theme .user-chip button:hover,
  .settings-theme .user-chip button.is-active {
    border-color: #c9ddd5;
    color: #1d604f;
    background: #e5f0eb;
    transform: none;
  }

  .settings-theme .main {
    width: min(1240px, calc(100% - 32px));
    max-width: 1240px;
    padding: 24px 0 72px;
  }

  .settings-theme .main > .toolbar {
    margin: 0 0 18px;
  }

  .settings-theme .main > .toolbar .btn,
  .settings-theme .main > .toolbar .btn.secondary {
    min-height: 38px;
    border-color: #d8e5df;
    color: #36574c;
    background: #fff;
    box-shadow: none;
  }

  .settings-theme .main > .toolbar .btn:hover,
  .settings-theme .main > .toolbar .btn.secondary:hover {
    border-color: #b9d1c8;
    color: #1d604f;
    background: #eef5f2;
    transform: translateY(-1px);
  }

  .settings-theme .settings-card {
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .settings-theme .settings-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    margin-bottom: 24px;
    padding: 6px 2px 22px;
    border-bottom: 1px solid #dce7e2;
  }

  .settings-theme .settings-desktop-heading,
  .settings-theme .settings-desktop-copy {
    display: block;
  }

  .settings-theme .settings-mobile-heading,
  .settings-theme .settings-mobile-copy {
    display: none;
  }

  .settings-theme .settings-page-copy h2 {
    margin: 0 0 9px;
    color: #17332b !important;
    font-size: clamp(32px, 3vw, 44px);
    font-weight: 690;
    line-height: 1.08;
    letter-spacing: -0.06em;
  }

  .settings-theme .settings-page-copy p {
    margin: 0;
    color: #687b74 !important;
    font-size: 15px;
    line-height: 1.6;
  }

  .settings-theme .settings-account-summary {
    position: relative;
    display: grid;
    min-width: 330px;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    overflow: hidden;
    padding: 12px 14px;
    border: 1px solid #d7e7e0;
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 244, 0.94));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 12px 28px rgba(37, 116, 95, 0.08);
    transition:
      transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .settings-theme .settings-account-summary::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -44px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(70, 154, 129, 0.14), transparent 68%);
    pointer-events: none;
  }

  .settings-theme .settings-account-summary:hover {
    transform: translateY(-1px);
    border-color: #bfd9cf;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 16px 34px rgba(37, 116, 95, 0.12);
  }

  .settings-theme .settings-account-avatar {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(37, 116, 95, 0.2);
    border-radius: 14px;
    color: #fff;
    background:
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3), transparent 34%),
      linear-gradient(145deg, #3f9279, #21624f);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 8px 18px rgba(37, 116, 95, 0.18);
    font-size: 19px;
    font-weight: 760;
    line-height: 1;
  }

  .settings-theme .settings-account-identity {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .settings-theme .settings-account-label {
    color: #789087;
    font-size: 11px;
    font-weight: 620;
    letter-spacing: 0.04em;
  }

  .settings-theme .settings-account-name-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
  }

  .settings-theme .settings-account-name-row strong {
    overflow: hidden;
    color: #17332b;
    font-size: 18px;
    font-weight: 720;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-theme .settings-account-state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
  }

  .settings-theme .settings-account-state i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }

  .settings-theme .settings-account-state.is-active {
    width: 29px;
    height: 23px;
    justify-content: center;
    padding: 0;
    border-color: #d3ad59;
    color: #f7d78f;
    background:
      radial-gradient(circle at 30% 15%, rgba(255, 224, 149, 0.26), transparent 34%),
      linear-gradient(145deg, #2e765f, #174b3d);
    box-shadow:
      inset 0 1px 0 rgba(255, 235, 184, 0.24),
      inset 0 -1px 0 rgba(10, 61, 47, 0.28),
      0 5px 12px rgba(28, 91, 72, 0.2);
  }

  .settings-theme .settings-member-mark {
    display: block;
    color: #f6d68a;
    font-family: "Bodoni 72 Smallcaps", "Bodoni 72", Didot, Georgia, serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.08em;
    text-shadow: 0 1px 0 rgba(16, 68, 53, 0.58);
    transform: translateX(-1px) skewX(-7deg);
  }

  .settings-theme .settings-account-state.is-expired {
    border-color: #d9e0dd;
    color: #74817c;
    background: #eef1f0;
  }

  .settings-theme .settings-account-expiry {
    color: #6d827a;
    font-size: 12px;
    line-height: 1.35;
  }

  .settings-theme .settings-account-expiry b {
    color: #47675c;
    font-weight: 650;
  }

  .settings-theme .settings-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
  }

  .settings-theme .settings-primary-column {
    display: grid;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
  }

  .settings-theme .settings-control-column {
    display: block;
    overflow: hidden;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(37, 83, 68, 0.07);
  }

  .settings-theme .settings-section {
    display: block;
    padding: 24px;
  }

  .settings-theme .settings-section + .settings-section {
    border-top: 1px solid #e3ece8;
  }

  .settings-theme .settings-section-head {
    margin-bottom: 17px;
  }

  .settings-theme .settings-section-head h3 {
    margin: 0 0 5px;
    color: #17332b;
    font-size: 17px;
    font-weight: 680;
    letter-spacing: -0.025em;
  }

  .settings-theme .settings-section-head p {
    margin: 0;
    color: #71857e !important;
    font-size: 13px;
    line-height: 1.55;
  }

  .settings-theme .settings-form {
    gap: 9px;
    margin: 0;
  }

  .settings-theme .settings-form label {
    color: #36574c;
    font-size: 13px;
    font-weight: 640;
  }

  .settings-theme .settings-form input,
  .settings-theme .settings-form select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cbdad4 !important;
    border-radius: 10px;
    color: #17332b !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(37, 83, 68, 0.02);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  }

  .settings-theme .settings-form input::placeholder {
    color: #74867f;
  }

  .settings-theme .settings-form input:focus,
  .settings-theme .settings-form select:focus {
    outline: none;
    border-color: #25745f !important;
    box-shadow: 0 0 0 3px rgba(37, 116, 95, 0.12) !important;
  }

  .settings-theme #activateCdk,
  .settings-theme #changePassword {
    width: 100%;
    min-height: 46px;
    margin-top: 5px;
    border: 1px solid #25745f !important;
    border-radius: 10px;
    color: #fff !important;
    background: #25745f !important;
    box-shadow: 0 10px 24px rgba(37, 116, 95, 0.15) !important;
  }

  .settings-theme #activateCdk:hover,
  .settings-theme #changePassword:hover {
    color: #fff !important;
    background: #1d604f !important;
    box-shadow: 0 14px 30px rgba(37, 116, 95, 0.2) !important;
    transform: translateY(-1px);
  }

  .settings-theme .settings-sync-panel {
    position: relative;
    top: auto;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 24px 26px 22px;
    border: 1px solid #d5e4de !important;
    border-radius: 16px;
    color: #17332b;
    background:
      linear-gradient(90deg, #25745f 0 86px, #dceae5 86px 100%) top / 100% 3px no-repeat,
      #fff !important;
    box-shadow: 0 14px 38px rgba(37, 83, 68, 0.055) !important;
    transform: none;
  }

  .settings-theme .settings-sync-panel::before,
  .settings-theme .settings-sync-panel::after {
    content: none;
  }

  .settings-theme .settings-sync-panel > * {
    transform: none;
  }

  .settings-theme .settings-sync-panel .sync-panel-title {
    margin: 0 0 18px;
    color: #627970 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: none;
  }

  .settings-theme .settings-sync-panel .sync-panel-head {
    margin-top: 0;
    align-items: center;
  }

  .settings-theme .settings-sync-panel .sync-panel-head h3 {
    color: #17332b;
    font-size: clamp(23px, 2.1vw, 28px);
    font-weight: 710;
    line-height: 1.15;
    letter-spacing: -0.04em;
  }

  .settings-theme .settings-sync-panel .sync-panel-head span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #c9ded5;
    border-radius: 999px;
    color: #25745f !important;
    background: #eef6f2;
    font-size: 11px;
    font-weight: 720;
    line-height: 1;
  }

  .settings-theme .settings-sync-panel p {
    max-width: 50ch;
    margin: 7px 0 0;
    color: #61756e !important;
    font-size: 13px;
    line-height: 1.6;
  }

  .settings-theme .settings-progress-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 19px 0;
    padding: 15px 18px;
    border: 1px solid #e0ebe6;
    border-radius: 12px;
    background: #f7faf9;
  }

  .settings-theme .settings-mobile-progress-summary {
    display: none;
  }

  .settings-theme .settings-progress-metrics > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 9px;
  }

  .settings-theme .settings-progress-metrics > div + div {
    padding-left: 20px;
    border-left: 1px solid #dce8e3;
  }

  .settings-theme .settings-progress-metrics strong {
    color: #17332b;
    font-size: 25px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.035em;
  }

  .settings-theme .settings-progress-metrics span {
    overflow: hidden;
    color: #6b7f77;
    font-size: 11px;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-theme .settings-progress-block {
    margin-bottom: 13px;
  }

  .settings-theme .settings-sync-panel .sync-progress-row {
    margin-bottom: 9px;
    color: #36574c;
    font-size: 11px;
    font-weight: 680;
  }

  .settings-theme .settings-sync-panel .sync-progress-track {
    height: 7px;
    background: #e4eee9;
  }

  .settings-theme .settings-sync-panel .sync-progress-fill {
    background: linear-gradient(90deg, #25745f, #55a087) !important;
    box-shadow: none !important;
    transform-origin: left center;
    animation: settings-progress-reveal 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .settings-theme .settings-sync-panel .sync-progress-note {
    margin-top: 8px;
    color: #25745f !important;
    font-size: 11px;
    font-weight: 620;
  }

  .settings-theme .settings-sync-panel .sync-rule-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 0;
    color: #7a8c85;
    font-size: 10px;
    line-height: 1.5;
  }

  .settings-theme .settings-sync-panel .sync-rule-note::before {
    content: "";
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #83a99b;
  }

  @keyframes settings-progress-reveal {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .settings-theme .settings-leaderboard-card {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 23px 24px;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(37, 83, 68, 0.055);
    flex-direction: column;
  }

  .settings-theme .settings-leaderboard-head {
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .settings-theme .settings-leaderboard-head h3 {
    color: #17332b;
    font-size: 17px;
    font-weight: 680;
  }

  .settings-theme .settings-leaderboard-head p {
    margin: 5px 0 0;
    color: #71857e !important;
    font-size: 13px;
  }

  .settings-theme .settings-leaderboard-head > span {
    color: #25745f;
    font-weight: 650;
  }

  .settings-theme .settings-leaderboard-empty {
    max-width: 58ch;
    padding: 0;
    color: #687b74;
    line-height: 1.65;
  }

  .settings-theme .settings-leaderboard-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    width: 100%;
    margin: auto 0 0;
    padding-top: 18px;
  }

  .settings-theme #openHomeLeaderboardBtn {
    width: 100%;
    min-height: 44px;
    border: 1px solid #25745f !important;
    border-radius: 10px;
    color: #fff !important;
    background: #25745f !important;
    box-shadow: none !important;
  }

  .settings-theme #collapseHomeLeaderboardBtn {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cdded7 !important;
    border-radius: 10px;
    color: #36574c !important;
    background: #eef5f2 !important;
    box-shadow: none !important;
  }

  .settings-theme #openHomeLeaderboardBtn:hover {
    border-color: #1d604f !important;
    color: #fff !important;
    background: #1d604f !important;
  }

  .settings-theme #collapseHomeLeaderboardBtn:hover {
    border-color: #b7d0c6 !important;
    color: #1d604f !important;
    background: #e3efea !important;
  }

  .settings-theme .settings-danger-section {
    background: #fbf8f8;
  }

  .settings-theme .settings-logout-actions {
    display: block;
    width: 100%;
    margin: 0;
  }

  .settings-theme #logout {
    width: 100%;
    min-height: 46px;
    border: 1px solid #e6cfd3 !important;
    border-radius: 10px;
    color: #9a4351 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .settings-theme #logout:hover {
    border-color: #d9afb6 !important;
    color: #843744 !important;
    background: #fdf3f4 !important;
    transform: translateY(-1px);
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .settings-theme .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-theme .settings-control-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-theme .settings-primary-column {
    height: auto;
    grid-template-rows: auto auto;
  }

  .settings-theme .settings-sync-panel,
  .settings-theme .settings-leaderboard-card {
    height: auto;
  }

  .settings-theme .settings-section + .settings-section {
    border-top: 0;
    border-left: 1px solid #e3ece8;
  }

  .settings-theme .settings-security-section,
  .settings-theme .settings-danger-section {
    border-top: 1px solid #e3ece8 !important;
  }

  .settings-theme .settings-security-section {
    border-left: 0 !important;
  }
}

@media (min-width: 769px) {
  ::view-transition-group(desktop-topbar),
  ::view-transition-image-pair(desktop-topbar) {
    animation: none !important;
  }

  ::view-transition-old(desktop-topbar),
  ::view-transition-new(desktop-topbar) {
    animation: none !important;
  }

  /*
   * The home header is dark and translucent while the settings header is
   * light and translucent. Keeping both shared-element snapshots visible
   * lets the old dark rounded edge show through the new header until the
   * root transition finishes. Present only the new snapshot so the header
   * swaps atomically while the page content keeps its route transition.
   */
  ::view-transition-image-pair(desktop-topbar) {
    isolation: isolate;
  }

  ::view-transition-old(desktop-topbar) {
    opacity: 0 !important;
  }

  ::view-transition-new(desktop-topbar) {
    opacity: 1 !important;
    mix-blend-mode: normal;
  }

  .settings-theme .settings-main {
    animation: none !important;
  }
}

/*
 * Light desktop home
 * The information architecture stays intact while the visual layer follows
 * the same white clinical workspace used by Settings.
 */
@media (min-width: 769px) {
  html:has(.home-theme) {
    color-scheme: light;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.home-theme) {
    color: #17332b;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.home-theme)::before,
  body.desktop-space-ui:has(.home-theme)::after {
    content: none;
  }

  body.desktop-space-ui:has(.home-theme) #desktopParticleField {
    display: none;
  }

  body.desktop-space-ui:has(.home-theme) .global-beian-footer {
    margin-top: 0;
    color: #71857e;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.home-theme) .global-beian-footer a {
    color: #526d64;
  }

  .home-theme {
    --ink: #17332b;
    --muted: #71857e;
    --accent: #25745f;
    --accent-2: #25745f;
    --card: #ffffff;
    --card-2: #f1f6f3;
    --stroke: #dce7e2;
    --stroke-hover: #a9cdbf;
    --glow: 0 14px 34px rgba(37, 83, 68, 0.1);
    min-height: 100dvh;
    color: #17332b;
    background: #f4f7f5;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .topbar {
    top: 0;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #dce7e2;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 0 rgba(37, 83, 68, 0.025);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  :is(.home-theme, .settings-theme, .detail-theme) .topbar-inner {
    width: min(1240px, calc(100% - 32px));
    min-height: 72px;
    margin: 0 auto;
    padding: 8px 0;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    gap: 20px;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .brand::before {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .brand,
  :is(.home-theme, .settings-theme, .detail-theme) .brand:hover {
    color: inherit;
    background: transparent;
    box-shadow: none;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .brand h1 {
    color: #17332b;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .brand:hover h1 {
    color: #1d604f;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .brand span {
    color: #71857e;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .topbar-nav {
    padding: 4px;
    border: 1px solid #e1ebe7;
    border-radius: 12px;
    background: #f5f8f6;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .topbar-nav button {
    min-height: 38px;
    color: #60766e;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .topbar-nav button:hover,
  :is(.home-theme, .settings-theme, .detail-theme) .topbar-nav button.is-active {
    border-color: #d2e3dc;
    color: #1d604f;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(37, 83, 68, 0.07);
    transform: none;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .topbar-nav-count {
    color: #526d64;
    background: #e6efeb;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-chip {
    gap: 9px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-identity {
    display: grid;
    padding: 0 13px 0 0;
    border-right-color: #dce7e2;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-account-mark {
    border-color: #cfe1da;
    color: #1d604f;
    background: #edf5f1;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-account-mark.is-member {
    border-color: #c9a653;
    color: #f5d37d;
    background:
      radial-gradient(circle at 30% 15%, rgba(255, 224, 149, 0.26), transparent 34%),
      linear-gradient(145deg, #2e765f, #174b3d);
    box-shadow:
      inset 0 1px 0 rgba(255, 235, 184, 0.24),
      inset 0 -1px 0 rgba(10, 61, 47, 0.28),
      0 4px 10px rgba(28, 91, 72, 0.16);
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-name {
    color: #17332b;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-membership,
  :is(.home-theme, .settings-theme, .detail-theme) .user-level-line,
  :is(.home-theme, .settings-theme, .detail-theme) .user-level-next {
    color: #6f837b;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-membership.active {
    color: #25745f;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-level-track {
    background: #dce9e4;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-level-fill {
    background: #25745f;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-chip button,
  :is(.home-theme, .settings-theme, .detail-theme) .user-chip .btn,
  :is(.home-theme, .settings-theme, .detail-theme) .user-chip .btn.secondary {
    min-height: 38px;
    padding: 0 13px;
    border-color: #d7e4df;
    color: #526d64;
    background: #ffffff;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-chip button:hover,
  :is(.home-theme, .settings-theme, .detail-theme) .user-chip button.is-active {
    border-color: #a9cdbf;
    color: #1d604f;
    background: #e7f1ed;
    transform: none;
  }

  .home-theme .main {
    width: min(1240px, 100%);
    max-width: 1240px;
    padding: 32px 16px 88px;
  }

  .home-theme .right-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tools" "papers";
    gap: 16px;
  }

  .home-theme .panel-toolbar {
    padding: 19px;
    border-color: #dce7e2;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 10px 28px rgba(37, 83, 68, 0.055);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .home-theme .current-filter {
    color: #47675c;
  }

  .home-theme .filter-item label {
    color: #71857e;
  }

  .home-theme .panel-toolbar select,
  .home-theme .panel-toolbar input,
  .home-theme #panelSearch,
  .home-theme .search-source-select,
  .home-theme .journal-picker-field {
    border-color: #d7e4df !important;
    color: #17332b !important;
    background: #f8fbf9 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  .home-theme .search-inline {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .home-theme #panelSearch::placeholder,
  .home-theme .journal-picker-input::placeholder {
    color: #63776f !important;
  }

  .home-theme .journal-picker-input,
  .home-theme .journal-picker-ghost-rest {
    color: #17332b;
    caret-color: #25745f;
  }

  .home-theme .journal-picker-ghost-rest {
    opacity: 0.32;
  }

  .home-theme .journal-picker-toggle {
    color: #6f837b;
  }

  .home-theme .journal-picker-menu {
    border-color: #d7e4df;
    color: #17332b;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(37, 83, 68, 0.12);
  }

  .home-theme .journal-picker-option {
    color: #294b40;
  }

  .home-theme .journal-picker-option:hover,
  .home-theme .journal-picker-option.is-selected {
    color: #1d604f;
    background: #e8f2ee;
  }

  .home-theme .panel-toolbar select:focus,
  .home-theme .panel-toolbar input:focus,
  .home-theme .journal-picker-field:focus-within {
    border-color: #c2d0cb !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .home-theme .panel-toolbar select:focus-visible,
  .home-theme .panel-toolbar input:focus-visible,
  .home-theme .panel-toolbar button:focus,
  .home-theme .panel-toolbar button:focus-visible,
  .home-theme .journal-picker-input:focus-visible,
  .home-theme .journal-picker-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .home-theme .search-icon-btn {
    min-width: 92px;
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
    transition:
      border-color 240ms ease,
      box-shadow 240ms ease,
      background-color 240ms ease;
  }

  .home-theme .search-icon-btn::after {
    content: attr(data-label);
  }

  .home-theme .search-icon-btn[data-label="正在搜索"] {
    cursor: wait;
    opacity: 0.82;
  }

  .home-theme .search-icon-btn:hover {
    color: #ffffff;
    background: #1d604f;
    transform: translateY(-1px);
  }

  .home-theme .search-icon-btn[data-searching="true"],
  .home-theme .search-icon-btn[data-searching="true"]:hover {
    border-width: 2px;
    border-color: transparent;
    opacity: 1;
    cursor: wait;
    background:
      linear-gradient(#1f6d58, #1f6d58) padding-box,
      conic-gradient(
          from var(--search-orbit-angle),
          rgba(34, 110, 86, 0.36) 0deg 230deg,
          rgba(71, 227, 174, 0.28) 250deg,
          rgba(119, 255, 211, 0.72) 280deg,
          #d8fff2 307deg,
          #ffffff 320deg,
          #b6ffe7 331deg,
          rgba(84, 242, 190, 0.48) 349deg,
          transparent 360deg
        )
        border-box;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(224, 255, 245, 0.28);
    transform: none;
    animation:
      search-button-orbit 1.35s linear infinite,
      search-button-breathe 2.1s ease-in-out infinite;
  }

  .home-theme .ai-search-assist,
  .home-theme .ai-search-understanding {
    display: flex;
    gap: 10px;
    min-width: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2ebe7;
    color: #60756d;
  }

  .home-theme .ai-search-assist {
    align-items: center;
  }

  .home-theme .ai-search-understanding {
    align-items: stretch;
    flex-direction: column;
  }

  .home-theme .ai-search-understanding-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .home-theme .ai-search-assist[hidden] {
    display: none;
  }

  .home-theme .ai-search-assist-label {
    flex: 0 0 auto;
    color: #5f756d;
    font-size: 11px;
    font-weight: 720;
    white-space: nowrap;
  }

  .home-theme .ai-search-assist-message {
    min-width: 0;
    color: #465f56;
    font-size: 11px;
    line-height: 1.45;
  }

  .home-theme .ai-search-examples {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
  }

  .home-theme .ai-search-examples button {
    min-width: 0;
    min-height: 28px;
    overflow: hidden;
    padding: 0 9px;
    border: 1px solid #dce6e2;
    border-radius: 999px;
    color: #526a61;
    background: #f8faf9;
    font-size: 10px;
    font-weight: 560;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-theme .ai-search-examples button:hover {
    border-color: #bdd3ca;
    color: #245d4b;
    background: #f1f6f3;
    transform: none;
  }

  .home-theme .ai-search-understanding-label {
    flex: 0 0 auto;
    color: #25745f;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.04em;
  }

  .home-theme .ai-search-chips {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
  }

  .home-theme .ai-search-chips span {
    flex: 0 1 auto;
    max-width: 220px;
    overflow: hidden;
    padding: 5px 9px;
    border: 1px solid #d9e5e0;
    border-radius: 999px;
    color: #385f52;
    background: #f4f8f6;
    font-size: 11px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-theme .ai-search-counts {
    flex: 0 0 auto;
    color: #7b8e87;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .home-theme .ai-search-evidence {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 18px;
    padding: 10px 0 0 67px;
    border-top: 1px dashed #e3ece8;
  }

  .home-theme .ai-search-evidence-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 7px;
    min-width: 0;
  }

  .home-theme .ai-search-evidence-row > span {
    color: #7b8d86;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
  }

  .home-theme .ai-search-evidence-row p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #36584d;
    font-size: 10px;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-theme .ai-search-query-detail {
    grid-column: 1 / -1;
    min-width: 0;
    color: #536c63;
    font-size: 10px;
  }

  .home-theme .ai-search-query-detail summary {
    width: fit-content;
    cursor: pointer;
    color: #25745f;
    font-weight: 650;
    list-style-position: inside;
  }

  .home-theme .ai-search-query-detail code {
    display: block;
    max-height: 88px;
    margin-top: 7px;
    overflow: auto;
    padding: 9px 11px;
    border-left: 2px solid #9fc8b8;
    color: #38574d;
    background: #f7faf8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .home-theme .paper-card-badges {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
  }

  .home-theme .ai-result-source {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid #d8e4df;
    border-radius: 999px;
    color: #5d736a;
    background: #f8faf9;
    font-size: 10px;
    font-weight: 680;
    line-height: 1;
    white-space: nowrap;
  }

  .home-theme .ai-result-source--local {
    border-color: #c7ded5;
    color: #246550;
    background: #eef6f2;
  }

  .home-theme .ai-card-match {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 13px;
    color: #61766e;
  }

  .home-theme .ai-card-match-label {
    flex: 0 0 auto;
    padding-top: 4px;
    color: #6d817a;
    font-size: 10px;
    font-weight: 680;
    white-space: nowrap;
  }

  .home-theme .ai-card-match-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }

  .home-theme .ai-card-match-items > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    color: #285d4c;
    background: #f0f6f3;
    font-size: 10px;
    line-height: 1;
  }

  .home-theme .ai-card-match-items strong {
    font-weight: 700;
  }

  .home-theme .ai-card-match-items small {
    padding-left: 6px;
    border-left: 1px solid #cfdfd8;
    color: #74877f;
    font-size: 9px;
  }

  .home-theme .paper-list,
  .home-theme .paper-list > .paper-item {
    animation: none !important;
  }

  .home-theme .paper-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #ffffff;
    perspective: none;
  }

  .home-theme .paper-item,
  .home-theme .home-paper-item {
    padding: 24px 25px;
    border: 0;
    border-radius: 0;
    color: #17332b;
    background: transparent;
    box-shadow: none;
    transform: none;
    transform-style: flat;
  }

  .home-theme .paper-list > .paper-item + .paper-item {
    border-top: 1px solid #e3ece8;
  }

  .home-theme .paper-item:hover {
    background: #f6faf8;
    box-shadow: none;
    transform: none;
  }

  .home-theme .paper-item::before {
    content: "";
    width: 2px;
    background: #25745f;
    opacity: 0;
    transform: scaleY(0.35);
    transform-origin: center;
  }

  .home-theme .paper-item:hover::before {
    opacity: 1;
    transform: scaleY(1);
  }

  .home-theme .paper-item h3,
  .home-theme .paper-item:hover h3 {
    margin: 0;
    color: #17332b !important;
    font-size: 17px;
    line-height: 1.42;
    transform: none;
  }

  .home-theme .paper-card-title-row {
    align-items: flex-start;
    gap: 14px;
  }

  .home-theme .paper-authors {
    margin-top: 12px;
    display: -webkit-box;
    overflow: hidden;
    color: #71857e;
    font-size: 12px;
    line-height: 1.6;
    font-family: inherit;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-theme .paper-publication-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
  }

  .home-theme .paper-heading-block {
    min-width: 0;
  }

  .home-theme .paper-access-block {
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid #e7eeeb;
  }

  .home-theme .paper-journal-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    align-items: start;
    gap: 7px;
  }

  .home-theme .paper-journal-line {
    min-width: 0;
    color: #35594d;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
  }

  .home-theme .paper-meta-label {
    color: #879991;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
  }

  .home-theme .paper-journal-icon {
    position: relative;
    display: block;
    width: 16px;
    height: 13px;
    margin-top: 2px;
  }

  .home-theme .paper-journal-icon::before,
  .home-theme .paper-journal-icon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 8px;
    height: 12px;
    border: 1.5px solid #25745f;
    background: transparent;
  }

  .home-theme .paper-journal-icon::before {
    left: 0;
    border-right-width: 0.75px;
    border-radius: 3px 1px 1px 3px;
    transform: skewY(5deg);
  }

  .home-theme .paper-journal-icon::after {
    right: 0;
    border-left-width: 0.75px;
    border-radius: 1px 3px 3px 1px;
    transform: skewY(-5deg);
  }

  .home-theme .paper-publication-row .meta-journal {
    display: inline;
    max-width: none;
    overflow: visible;
    color: #35594d !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    text-shadow: none !important;
    white-space: normal;
    text-overflow: clip;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .home-theme .paper-publication-row .meta-time {
    display: inline;
    margin-left: 8px;
    color: #526d64 !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
  }

  .home-theme .paper-title-zh {
    margin: 7px 0 0;
    color: #47675c !important;
    font-size: 14px;
    font-weight: 560;
    line-height: 1.55;
    transform: none;
  }

  .home-theme .paper-type-badge,
  .home-theme .paper-type-badge[class*="paper-type-badge--"] {
    align-self: start;
    margin: 0;
    border-color: #cfe1da !important;
    color: #25745f !important;
    background: #edf6f2 !important;
    white-space: nowrap;
  }

  .home-theme .card-title-translate-btn {
    border-color: #cfe1da;
    color: #25745f;
    background: #edf6f2;
  }

  .home-theme .card-title-translate-btn:hover {
    border-color: #9fc5b7;
    color: #1d604f;
    background: #e2f0ea;
  }

  .home-theme .paper-abstract {
    margin-top: 15px;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0 !important;
    color: #526d64;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .home-theme .paper-abstract p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #526d64;
    font-size: 13px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .home-theme .paper-abstract::after {
    content: none;
  }

  .home-theme .paper-abstract.expanded p {
    display: block;
    overflow: visible;
  }

  .home-theme .paper-source {
    margin-top: 0;
    color: #71857e;
    transform: none;
  }

  .home-theme .paper-source a {
    color: #25745f !important;
  }

  .home-theme .paper-source a:hover {
    color: #1d604f !important;
    text-shadow: none;
  }

  .home-theme .paper-disclaimer {
    color: #879991;
  }

  .home-theme .paper-disclaimer .paper-official-link {
    color: #25745f;
    font-weight: 650;
    text-decoration: none;
    text-underline-offset: 3px;
  }

  .home-theme .paper-disclaimer .paper-official-link:hover {
    color: #1d604f;
    text-decoration: underline;
  }

  .home-theme .right-panel > .desktop-focus-feed {
    grid-area: papers;
  }

  .home-theme .right-panel > .desktop-search-grid {
    grid-area: papers;
  }

  .home-theme .desktop-search-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1px;
    overflow: hidden;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #dce7e2;
  }

  .home-theme .desktop-search-grid > .desktop-search-card {
    min-width: 0;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    border: 0;
    background: #ffffff;
  }

  .home-theme .desktop-search-grid > .desktop-search-card + .desktop-search-card {
    border-top: 0;
  }

  .home-theme .desktop-search-card .paper-heading-block {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .home-theme .desktop-search-card h3,
  .home-theme .desktop-search-card:hover h3 {
    font-size: 18px;
    line-height: 1.42;
  }

  .home-theme .desktop-search-card .paper-title-zh:not([hidden]) {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 8px 0 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
  }

  .home-theme .desktop-search-card .paper-abstract {
    margin-top: 16px;
  }

  .home-theme .desktop-search-card .paper-abstract p {
    -webkit-line-clamp: 4;
  }

  .home-theme .desktop-search-card .paper-access-block {
    margin-top: auto;
    padding-top: 16px;
  }

  .home-theme .desktop-search-card .paper-disclaimer {
    margin-top: 8px;
    line-height: 1.5;
  }

  .home-theme .desktop-focus-feed {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #ffffff;
  }

  .home-theme .focus-top-refresh-hint {
    position: absolute;
    top: 9px;
    left: 50%;
    z-index: 3;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 4px 8px;
    width: max-content;
    visibility: hidden;
    opacity: 0;
    color: #60766e;
    pointer-events: none;
    transform: translate(-50%, -7px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  }

  .home-theme .focus-top-refresh-hint.is-active {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }

  .home-theme .focus-top-refresh-title {
    color: #25745f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }

  .home-theme .focus-top-refresh-copy {
    color: #71857e;
    font-size: 10px;
    font-weight: 560;
    line-height: 1;
  }

  .home-theme .focus-top-refresh-track {
    grid-column: 1 / -1;
    width: 100%;
    height: 2px;
    overflow: hidden;
    background: #dce8e3;
  }

  .home-theme .focus-top-refresh-track i {
    display: block;
    width: 100%;
    height: 100%;
    background: #25745f;
    transform: scaleX(var(--focus-top-refresh-progress, 0));
    transform-origin: left center;
  }

  .home-theme .focus-top-refresh-hint.is-ready .focus-top-refresh-title,
  .home-theme .focus-top-refresh-hint.is-refreshing .focus-top-refresh-title {
    color: #1d604f;
  }

  .home-theme .focus-stage {
    position: relative;
    min-width: 0;
    height: 560px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    outline: none;
    background: #ffffff;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    transform: translateY(var(--focus-top-pull-offset, 0px));
  }

  .home-theme .focus-stage::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .home-theme .focus-stage:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(37, 116, 95, 0.12);
  }

  .home-theme .focus-stage > .focus-paper {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 100%;
    padding: 36px clamp(34px, 6vw, 82px);
    border: 0;
    background: transparent;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .home-theme .focus-stage > .focus-paper.is-active {
    background: #ffffff;
  }

  .home-theme .focus-stage > .paper-item + .paper-item {
    border-top: 0;
  }

  .home-theme .focus-stage .focus-paper:hover {
    background: transparent;
  }

  .home-theme .focus-stage .focus-paper::before {
    content: none;
  }

  .home-theme .focus-paper .paper-publication-row {
    margin: 0;
    padding-right: 0;
  }

  .home-theme .focus-paper .paper-heading-block {
    width: 100%;
    min-height: 0;
    align-self: stretch;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    padding: 26px 0 22px;
  }

  .home-theme .focus-paper h3,
  .home-theme .focus-paper:hover h3 {
    color: #17332b !important;
    font-size: clamp(24px, 2.25vw, 32px);
    font-weight: 710;
    line-height: 1.28;
    letter-spacing: -0.035em;
  }

  .home-theme .focus-paper .paper-title-zh {
    width: 100%;
    margin-top: 14px;
    color: #35594d !important;
    font-size: 16px;
    line-height: 1.6;
  }

  .home-theme .focus-paper .paper-authors {
    width: 100%;
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.75;
    -webkit-line-clamp: 2;
  }

  .home-theme .focus-paper .paper-abstract {
    min-height: 0;
    align-self: stretch;
    margin-top: 20px;
    overflow: hidden;
  }

  .home-theme .focus-paper .paper-abstract p {
    display: block;
    height: 100%;
    overflow: hidden;
    color: #526d64;
    font-size: 14px;
    line-height: 1.7;
    -webkit-line-clamp: unset;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }

  .home-theme .focus-paper .paper-access-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    margin: 0;
    padding-top: 17px;
    border-top: 1px solid #e3ece8;
  }

  .home-theme .focus-paper .paper-disclaimer {
    margin: 0;
    text-align: right;
    white-space: nowrap;
  }

  .home-theme .focus-swipe-gesture {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }

  .home-theme .focus-swipe-gesture.is-visible {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .home-theme .focus-swipe-gesture.is-visible.is-fading {
    visibility: visible;
    opacity: 0;
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .home-theme .focus-swipe-gesture svg {
    width: clamp(104px, 10vw, 142px);
    height: clamp(104px, 10vw, 142px);
    color: #25745f;
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.97);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  .home-theme .focus-swipe-gesture.is-visible svg {
    animation: home-focus-swipe-up 1.6s ease-out infinite;
  }

  .home-theme .focus-swipe-gesture.is-visible.is-fading svg {
    animation-play-state: paused;
  }

  .home-theme .focus-stage {
    transition: opacity 130ms ease, transform 130ms ease;
  }

  .home-theme .focus-stage.is-page-turning {
    opacity: 0;
    transform: translateY(-7px);
  }

  .home-theme .focus-stage.is-top-refreshing {
    opacity: 0.18;
    transform: translateY(18px);
  }

  @keyframes home-focus-swipe-up {
    0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.97); }
    18% { opacity: 0.14; }
    72% { opacity: 0.1; }
    100% { opacity: 0; transform: translate3d(0, -18px, 0) scale(1); }
  }

  .home-theme .pagination {
    justify-content: center;
    color: #71857e;
  }

  .home-theme .pagination .btn.secondary {
    border-color: #d1e0da;
    color: #35594d;
    background: #ffffff;
  }

  .home-theme .pagination .btn.secondary:hover:not(:disabled) {
    border-color: #9fc5b7;
    color: #1d604f;
    background: #e8f2ee;
  }

  .home-theme .wordbook-empty {
    border-color: #cfe1da;
    color: #71857e;
    background: #ffffff;
  }

  .home-theme .home-leaderboard-pill {
    border-color: #cfe1da;
    color: #1d604f;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(37, 83, 68, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .home-theme .home-leaderboard-pill:hover {
    border-color: #9fc5b7;
    background: #f5faf7;
  }

  .home-theme .home-leaderboard-pill-dot {
    display: none;
  }

  .home-theme .home-leaderboard-bubble {
    border-color: #d7e4df;
    color: #17332b;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 18px 42px rgba(37, 83, 68, 0.14);
  }

  .home-theme .home-leaderboard-tab {
    border-color: #dce7e2;
    color: #60776f;
    background: #f5f8f6;
  }

  .home-theme .home-leaderboard-tab.is-active {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  .home-theme .home-leaderboard-mini-btn,
  .home-theme .home-leaderboard-close-btn {
    color: #526d64;
  }

  .home-theme .home-leaderboard-item {
    color: #17332b;
    background: #f4f8f6;
  }

  .home-theme .home-leaderboard-rank,
  .home-theme .home-leaderboard-score {
    color: #25745f;
  }

  .home-theme .home-leaderboard-sub,
  .home-theme .home-leaderboard-empty {
    color: #71857e;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .home-theme .desktop-search-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.home-theme, .settings-theme, .detail-theme) .topbar-inner {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .topbar-nav button {
    padding: 0 10px;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-identity {
    min-width: 0;
    grid-template-columns: 30px;
    padding-right: 0;
    border-right: 0;
  }

  :is(.home-theme, .settings-theme, .detail-theme) .user-account-copy {
    display: none;
  }
}

@media (min-width: 1100px) {
  .home-theme .focus-stage {
    height: clamp(560px, calc(100dvh - 210px), 680px);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  .home-theme .search-icon-btn[data-searching="true"] {
    animation: none !important;
    border-color: #83e3c3;
    box-shadow: 0 0 0 3px rgba(37, 116, 95, 0.16);
  }

  .home-theme .focus-stage {
    scroll-behavior: auto;
  }

  .home-theme .focus-swipe-gesture.is-visible svg {
    animation: none;
    opacity: 0.1;
    transform: none;
  }
}

/*
 * Light desktop reading workspace
 * Shares the home navigation and canvas while keeping the article itself calm.
 */
@media (min-width: 769px) {
  html:has(.detail-theme) {
    color-scheme: light;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.detail-theme) {
    color: #17332b;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.detail-theme)::before,
  body.desktop-space-ui:has(.detail-theme)::after {
    content: none;
  }

  body.desktop-space-ui:has(.detail-theme) #desktopParticleField {
    display: none;
  }

  body.desktop-space-ui:has(.detail-theme) .global-beian-footer {
    margin-top: 0;
    color: #71857e;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.detail-theme) .global-beian-footer a {
    color: #526d64;
  }

  .detail-theme {
    --ink: #17332b;
    --muted: #71857e;
    --accent: #25745f;
    --accent-2: #25745f;
    --card: #ffffff;
    --card-2: #f1f6f3;
    --stroke: #dce7e2;
    --stroke-hover: #a9cdbf;
    min-height: 100dvh;
    color: #17332b;
    background: #f4f7f5;
  }

  .detail-theme .detail-main {
    width: min(1240px, calc(100% - 32px));
    max-width: 1240px;
    padding: 0 0 84px;
  }

  .detail-theme .detail-paper-head {
    padding: 34px 2px 28px;
    border-bottom: 1px solid #dce7e2;
  }

  .detail-theme .detail-paper-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    color: #60766e;
    font-size: 12px;
    font-weight: 620;
    line-height: 1.4;
  }

  .detail-theme .detail-paper-meta > span {
    overflow: hidden;
    max-width: min(58vw, 640px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail-theme .detail-paper-meta > span + span {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #cfddd7;
  }

  .detail-theme .detail-paper-meta > a {
    margin-left: auto;
    color: #25745f;
    font-weight: 680;
    text-decoration: none;
  }

  .detail-theme .detail-paper-meta > a:hover {
    color: #1d604f;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .detail-theme .detail-paper-head h1 {
    max-width: 1050px;
    margin: 0;
    color: #17332b;
    font-size: clamp(29px, 3.1vw, 42px);
    font-weight: 710;
    line-height: 1.18;
    letter-spacing: -0.048em;
  }

  .detail-theme .detail-paper-head .detail-title-zh {
    max-width: 960px;
    margin-top: 13px;
    color: #526d64;
    font-size: 16px;
    font-weight: 540;
    line-height: 1.65;
    letter-spacing: 0;
  }

  .detail-theme .detail-paper-head .detail-translate-controls {
    margin-top: 17px;
  }

  .detail-theme .detail-translate-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cdded7;
    border-radius: 9px;
    color: #36574c;
    background: #ffffff;
    box-shadow: none;
    font-size: 12px;
    font-weight: 650;
  }

  .detail-theme .detail-translate-btn:hover {
    border-color: #a9cdbf;
    color: #1d604f;
    background: #eaf3ef;
    transform: none;
  }

  .detail-theme .detail-reading-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
  }

  .detail-theme .detail-reading-actions .btn,
  .detail-theme .detail-top-phrase-slot .complete-btn {
    width: auto;
    min-width: 88px;
    min-height: 36px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid #d3e1dc;
    border-radius: 10px;
    color: #36574c;
    background: #ffffff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 660;
  }

  .detail-theme .detail-reading-actions .btn:hover,
  .detail-theme .detail-top-phrase-slot .complete-btn:hover {
    border-color: #a9cdbf;
    color: #1d604f;
    background: #eaf3ef;
    box-shadow: none;
    transform: translateY(-1px);
  }

  .detail-theme .detail-top-phrase-slot .complete-btn.is-phrase-mode-active {
    border-color: #8abaaa;
    color: #1d604f;
    background: #dfeee8;
    box-shadow: none;
  }

  .detail-theme .detail-reading-actions #favoriteBtn.is-favorited {
    border-color: #a9cdbf;
    color: #1d604f;
    background: #e5f0eb;
  }

  .detail-theme .detail-top-phrase-slot .btn-text .zh {
    margin: 0;
    color: inherit;
    font-size: 13px;
    font-weight: 660;
    letter-spacing: 0;
  }

  .detail-theme .detail-actions-top #markBtnTop:not(.secondary) {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  .detail-theme .detail-actions-top #markBtnTop:not(.secondary):hover {
    border-color: #1d604f;
    color: #ffffff;
    background: #1d604f;
  }

  .detail-theme .detail {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .detail-theme .sticky-summary {
    position: relative;
    top: auto;
    display: flex;
    min-height: 0;
    height: 320px;
    max-height: 320px;
    overflow: hidden;
    flex-direction: column;
    align-self: start;
    padding: 22px 18px;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(37, 83, 68, 0.04);
    scrollbar-width: thin;
    scrollbar-color: #bfd3cb transparent;
    overscroll-behavior: contain;
  }

  .detail-theme .summary-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 2px;
  }

  .detail-theme .summary-header h2 {
    margin: 0;
    color: #294b40;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  .detail-theme .summary-header > span {
    color: #7a8d86;
    font-size: 11px;
    font-weight: 620;
  }

  .detail-theme .summary-list {
    display: grid;
    min-height: 0;
    overflow: auto;
    align-content: start;
    flex: 1;
    gap: 5px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #bfd3cb transparent;
  }

  .detail-theme .summary-sentence {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 11px;
    overflow: visible;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    color: #71857e;
    background: transparent;
    font-family: inherit !important;
    font-size: 11px;
    font-weight: 520;
    line-height: 1.72;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  }

  .detail-theme .summary-sentence > span {
    display: block;
    overflow: visible;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }

  .detail-theme .summary-sentence:hover {
    color: #36574c;
    background: #edf4f1;
  }

  .detail-theme .summary-sentence.active {
    border-color: #25745f;
    color: #1d604f;
    background: #e5f0eb;
  }

  .detail-theme .sentence-list {
    display: flex;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(37, 83, 68, 0.055);
  }

  .detail-theme .detail-reading-head {
    padding: 23px 26px 20px;
    border-bottom: 1px solid #e3ece8;
  }

  .detail-theme .detail-reading-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  .detail-theme .detail-reading-title-copy {
    min-width: 0;
  }

  .detail-theme .detail-reading-head h2 {
    margin: 0;
    color: #17332b;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
  }

  .detail-theme .detail-reading-head p {
    margin: 5px 0 0;
    color: #71857e;
    font-size: 12px;
    line-height: 1.55;
  }

  .detail-theme .detail-highlight-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e7efeb;
  }

  .detail-theme .detail-highlight-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #60766e;
    font-size: 11px;
    font-weight: 620;
    line-height: 1;
    white-space: nowrap;
  }

  .detail-theme .detail-highlight-swatch {
    display: inline-block;
    width: 22px;
    height: 10px;
    border-radius: 3px;
  }

  .detail-theme .detail-highlight-swatch.is-medical {
    border-bottom: 1px solid #58a88f;
    background: #dcefe8;
  }

  .detail-theme .detail-highlight-swatch.is-known {
    border-bottom: 1px solid #b69a3c;
    background: #f3ecd2;
  }

  .detail-theme .detail-highlight-swatch.is-phrase {
    border-bottom: 1px solid #7398b4;
    background: #dce9f2;
  }

  .detail-theme .sentence-card {
    display: block;
    min-height: 0;
    overflow: visible;
    flex: 0 0 auto;
    margin: 0;
    padding: 30px 32px 32px;
    border: 0;
    border-bottom: 1px solid #e7efeb;
    border-radius: 0;
    color: #17332b;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transform: none;
    transition: background-color 150ms ease, box-shadow 150ms ease;
  }

  .detail-theme .sentence-card[hidden] {
    display: none;
  }

  .detail-theme .sentence-card:last-child {
    border-bottom: 0;
  }

  .detail-theme .sentence-card:hover {
    background: #fafcfb;
  }

  .detail-theme .sentence-card.active {
    border-color: #e7efeb !important;
    background: #f1f7f4 !important;
    box-shadow: inset 3px 0 0 #25745f !important;
  }

  .detail-theme .detail-sentence-nav {
    display: grid;
    grid-template-columns: minmax(108px, auto) 1fr minmax(108px, auto);
    gap: 14px;
    align-items: center;
    margin-top: auto;
    padding: 17px 22px;
    border-top: 1px solid #e3ece8;
    background: #fbfdfc;
  }

  .detail-theme .detail-sentence-nav[hidden],
  .detail-theme .detail-sentence-nav .btn[hidden] {
    display: none;
  }

  .detail-theme .detail-sentence-nav .btn {
    width: auto;
    min-width: 108px;
    min-height: 42px;
    margin: 0;
    padding: 0 18px;
    border-radius: 10px;
    box-shadow: none;
    white-space: nowrap;
  }

  .detail-theme .detail-sentence-nav #detailPrevSentence {
    grid-column: 1;
  }

  .detail-theme .detail-sentence-position {
    grid-column: 2;
    color: #71857e;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    text-align: center;
  }

  .detail-theme .detail-sentence-nav #detailNextSentence,
  .detail-theme .detail-sentence-nav #detailCompleteBtn {
    grid-column: 3;
  }

  .detail-theme .detail-sentence-nav #detailNextSentence,
  .detail-theme .detail-sentence-nav #detailCompleteBtn:not(.secondary) {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  .detail-theme .detail-sentence-nav #detailNextSentence:hover,
  .detail-theme .detail-sentence-nav #detailCompleteBtn:not(.secondary):hover {
    border-color: #1d604f;
    color: #ffffff;
    background: #1d604f;
  }

  .detail-theme .detail-recovery-state {
    width: min(760px, 100%);
    margin: 72px auto 0;
    padding: 44px;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #ffffff;
  }

  .detail-theme .detail-recovery-state h1 {
    margin: 0;
    color: #17332b;
    font-size: 24px;
  }

  .detail-theme .detail-recovery-state p {
    margin: 12px 0 0;
    color: #71857e;
  }

  .detail-theme .detail-recovery-state .btn {
    width: auto;
    margin-top: 24px;
  }

  .detail-theme .detail-recovery-line {
    width: 88%;
    height: 17px;
    margin-bottom: 14px;
    border-radius: 6px;
    background: #e8f0ec;
  }

  .detail-theme .detail-recovery-line.short {
    width: 56%;
  }

  .detail-theme .sentence-top {
    align-items: flex-start;
    gap: 18px;
    overflow: visible;
  }

  .detail-theme .sentence-en {
    display: block;
    min-width: 0;
    margin: 0;
    overflow: visible;
    flex: 1;
    color: #203f35;
    font-family: "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif !important;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.94;
    letter-spacing: -0.006em;
  }

  .detail-theme .sentence-zh {
    display: block;
    margin-top: 18px;
    padding-top: 0;
    overflow: visible;
    border-top: 0;
    color: #6b7f77;
    font-size: 14px;
    line-height: 1.9;
  }

  .detail-theme .sentence-zh[hidden] {
    display: none;
  }

  .detail-theme .sentence-top-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
  }

  .detail-theme .sentence-translate-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cdded7;
    border-radius: 9px;
    color: #36574c;
    background: #f6faf8;
    font: inherit;
    font-size: 12px;
    font-weight: 660;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 150ms ease;
  }

  .detail-theme .sentence-translate-btn:hover {
    border-color: #a9cdbf;
    color: #1d604f;
    background: #eaf3ef;
    transform: translateY(-1px);
  }

  .detail-theme .sentence-translate-btn:disabled {
    cursor: default;
    opacity: 0.68;
    transform: none;
  }

  .detail-theme .speak-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #d4e2dc;
    color: #526d64;
    background: #f6faf8;
    box-shadow: none;
    transform: none;
  }

  .detail-theme .speak-btn:hover {
    border-color: #a9cdbf;
    color: #1d604f;
    background: #e5f0eb;
    box-shadow: none;
    transform: translateY(-1px);
  }

  .detail-theme .word {
    line-height: inherit;
    border-radius: 3px;
    color: inherit;
    text-shadow: none;
    transform: none;
  }

  .detail-theme .word:hover {
    color: #1d604f;
    background: #e0eee8;
    transform: none;
  }

  .detail-theme .word.term-med {
    border-bottom: 1px solid #58a88f !important;
    color: #155b49 !important;
    background: #dcefe8 !important;
    box-shadow: inset 0 -1px 0 rgba(88, 168, 143, 0.32) !important;
    text-shadow: none !important;
  }

  .detail-theme .word.term-known {
    border-bottom: 1px solid #b69a3c !important;
    color: #665616 !important;
    background: #f3ecd2 !important;
    box-shadow: inset 0 -1px 0 rgba(182, 154, 60, 0.3) !important;
    text-shadow: none !important;
  }

  .detail-theme .word.term-med:hover {
    color: #104b3d !important;
    background: #cde7dd !important;
  }

  .detail-theme .word.term-known:hover {
    color: #51440f !important;
    background: #ebe0b8 !important;
  }

  .detail-theme .word.term-phrase-known,
  .detail-theme .word.term-phrase-known:hover {
    border-bottom: 1px solid #7398b4 !important;
    color: #28536f !important;
    background: #dce9f2 !important;
    box-shadow: inset 0 -1px 0 rgba(78, 124, 157, 0.3) !important;
    text-shadow: none !important;
  }

  .detail-theme .word.is-phrase-selected,
  .detail-theme .word.is-phrase-selected:hover {
    border-bottom-color: #315f7e !important;
    color: #ffffff !important;
    background: #467899 !important;
    box-shadow: 0 0 0 2px #d0e1ec !important;
  }

  .detail-theme .phrase-inline-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid #c9ddd5 !important;
    border-radius: 12px;
    background: #f4f9f7 !important;
    box-shadow: inset 3px 0 0 #25745f !important;
  }

  .detail-theme .phrase-inline-copy {
    min-width: 0;
  }

  .detail-theme .phrase-inline-label {
    margin: 0 0 6px;
    color: #4e6f64 !important;
    font-size: 12px;
    font-weight: 700;
  }

  .detail-theme .phrase-inline-value {
    color: #17332b !important;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .detail-theme .phrase-inline-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
  }

  .detail-theme .phrase-inline-btn,
  .detail-theme .phrase-inline-btn.secondary {
    min-width: 72px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    box-shadow: none !important;
    white-space: nowrap;
  }

  .detail-theme .phrase-inline-btn.secondary {
    border-color: #b8d0c7 !important;
    color: #36574c !important;
    background: #ffffff !important;
  }

  .detail-theme .phrase-inline-btn:not(.secondary) {
    border-color: #25745f !important;
    color: #ffffff !important;
    background: #25745f !important;
  }

  .detail-theme .phrase-inline-btn.secondary:hover {
    border-color: #8fb5a7 !important;
    color: #1d604f !important;
    background: #e9f2ee !important;
  }

  .detail-theme .phrase-inline-btn:not(.secondary):hover {
    border-color: #1d604f !important;
    color: #ffffff !important;
    background: #1d604f !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    .detail-theme .sentence-card.active {
      animation: detail-sentence-enter 150ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
  }

  @keyframes detail-sentence-enter {
    from { opacity: 0.7; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .detail-theme .detail {
    grid-template-columns: minmax(190px, 235px) minmax(0, 1fr);
    gap: 22px;
  }

  .detail-theme .detail-paper-head h1 {
    font-size: clamp(27px, 3.6vw, 35px);
  }

  .detail-theme .detail-reading-title-row {
    gap: 16px;
  }

  .detail-theme .detail-reading-actions .btn,
  .detail-theme .detail-top-phrase-slot .complete-btn {
    min-width: 82px;
    padding-right: 11px;
    padding-left: 11px;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  .detail-theme .detail-main {
    animation: none !important;
  }

  .detail-theme .summary-sentence,
  .detail-theme .sentence-card,
  .detail-theme .speak-btn {
    scroll-behavior: auto;
    transition-duration: 1ms !important;
  }
}

/*
 * Light desktop personal libraries
 * Wordbook and Favorites share the same calm clinical workspace as Home.
 * Mobile keeps the original rendering and styles from styles.css.
 */
@media (min-width: 769px) {
  html:has(.wordbook-theme),
  html:has(.favorites-page) {
    color-scheme: light;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.wordbook-theme),
  body.desktop-space-ui:has(.favorites-page) {
    color: #17332b;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.wordbook-theme)::before,
  body.desktop-space-ui:has(.wordbook-theme)::after,
  body.desktop-space-ui:has(.favorites-page)::before,
  body.desktop-space-ui:has(.favorites-page)::after {
    content: none;
  }

  body.desktop-space-ui:has(.wordbook-theme) #desktopParticleField,
  body.desktop-space-ui:has(.favorites-page) #desktopParticleField {
    display: none;
  }

  body.desktop-space-ui:has(.wordbook-theme) .global-beian-footer,
  body.desktop-space-ui:has(.favorites-page) .global-beian-footer {
    margin-top: 0;
    color: #71857e;
    background: #f4f7f5;
  }

  body.desktop-space-ui:has(.wordbook-theme) .global-beian-footer a,
  body.desktop-space-ui:has(.favorites-page) .global-beian-footer a {
    color: #526d64;
  }

  :is(.wordbook-theme, .favorites-page) {
    --ink: #17332b;
    --muted: #71857e;
    --accent: #25745f;
    --accent-2: #25745f;
    --card: #ffffff;
    --card-2: #f1f6f3;
    --stroke: #dce7e2;
    --stroke-hover: #a9cdbf;
    --glow: 0 14px 34px rgba(37, 83, 68, 0.1);
    min-height: 100dvh;
    color: #17332b;
    background: #f4f7f5 !important;
  }

  :is(.wordbook-theme, .favorites-page) .topbar {
    top: 0;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #dce7e2;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 0 rgba(37, 83, 68, 0.025);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  :is(.wordbook-theme, .favorites-page) .topbar-inner {
    width: min(1240px, calc(100% - 32px));
    min-height: 72px;
    margin: 0 auto;
    padding: 8px 0;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    gap: 20px;
  }

  :is(.wordbook-theme, .favorites-page) .brand,
  :is(.wordbook-theme, .favorites-page) .brand:hover {
    color: inherit;
    background: transparent;
    box-shadow: none;
  }

  :is(.wordbook-theme, .favorites-page) .brand::before {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  :is(.wordbook-theme, .favorites-page) .brand h1 {
    color: #17332b;
  }

  :is(.wordbook-theme, .favorites-page) .brand:hover h1 {
    color: #1d604f;
  }

  :is(.wordbook-theme, .favorites-page) .brand span {
    color: #71857e;
  }

  :is(.wordbook-theme, .favorites-page) .topbar-nav {
    padding: 4px;
    border: 1px solid #e1ebe7;
    border-radius: 12px;
    background: #f5f8f6;
  }

  :is(.wordbook-theme, .favorites-page) .topbar-nav button {
    min-height: 38px;
    color: #60766e;
    background: transparent;
  }

  :is(.wordbook-theme, .favorites-page) .topbar-nav button:hover,
  :is(.wordbook-theme, .favorites-page) .topbar-nav button.is-active {
    border-color: #d2e3dc;
    color: #1d604f;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(37, 83, 68, 0.07);
    transform: none;
  }

  :is(.wordbook-theme, .favorites-page) .topbar-nav-count {
    color: #526d64;
    background: #e6efeb;
  }

  :is(.wordbook-theme, .favorites-page) .user-chip {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  :is(.wordbook-theme, .favorites-page) .user-identity {
    min-width: 0;
    color: #17332b;
  }

  :is(.wordbook-theme, .favorites-page) .user-account-mark {
    border-color: #cbded6;
    color: #3f6759;
    background: #edf4f1;
  }

  :is(.wordbook-theme, .favorites-page) .user-account-mark.is-member {
    border-color: #c9a653;
    color: #f5d37d;
    background:
      radial-gradient(circle at 30% 15%, rgba(255, 224, 149, 0.26), transparent 34%),
      linear-gradient(145deg, #2e765f, #174b3d);
    box-shadow:
      inset 0 1px 0 rgba(255, 235, 184, 0.24),
      inset 0 -1px 0 rgba(10, 61, 47, 0.28),
      0 4px 10px rgba(28, 91, 72, 0.16);
  }

  :is(.wordbook-theme, .favorites-page) .user-name {
    color: #17332b;
  }

  :is(.wordbook-theme, .favorites-page) .user-membership {
    color: #687b74;
  }

  :is(.wordbook-theme, .favorites-page) .user-membership.active {
    color: #25745f;
  }

  :is(.wordbook-theme, .favorites-page) .user-chip button,
  :is(.wordbook-theme, .favorites-page) .user-chip .btn.secondary {
    border-color: #d6e3de !important;
    color: #35594d !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  :is(.wordbook-theme, .favorites-page) .user-chip button:hover {
    border-color: #aacbbf !important;
    color: #1d604f !important;
    background: #edf5f1 !important;
  }

  :is(.wordbook-theme, .favorites-page) > .main,
  .wordbook-theme .wordbook-main {
    width: min(1240px, calc(100% - 32px));
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 0 68px;
  }

  .library-kicker {
    display: block;
    margin-bottom: 11px;
    color: #25745f;
    font-size: 11px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0.16em;
  }

  /* Favorites: editorial saved-paper library. */
  .favorites-library-shell {
    display: grid;
    gap: 0;
  }

  .favorites-library-head,
  .wordbook-library-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
    padding: 8px 2px 30px;
    border-bottom: 1px solid #dce7e2;
  }

  .favorites-library-head h1,
  .wordbook-library-head h1 {
    margin: 0;
    color: #17332b;
    font-size: clamp(32px, 3.2vw, 45px);
    font-weight: 680;
    line-height: 1.02;
    letter-spacing: -0.055em;
  }

  .favorites-library-head p,
  .wordbook-library-head p {
    margin: 13px 0 0;
    color: #60756d;
    font-size: 14px;
    line-height: 1.55;
  }

  .favorites-library-stats,
  .wordbook-library-stats {
    display: flex;
    align-items: flex-end;
    gap: 0;
    flex: 0 0 auto;
  }

  .favorites-library-stats > span,
  .wordbook-library-stats > span {
    min-width: 92px;
    padding: 0 20px;
    border-left: 1px solid #dce7e2;
  }

  .favorites-library-stats strong,
  .wordbook-library-stats strong {
    display: block;
    color: #17332b;
    font-size: 25px;
    font-weight: 680;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .favorites-library-stats small,
  .wordbook-library-stats small {
    display: block;
    margin-top: 7px;
    color: #71857e;
    font-size: 12px;
  }

  .wordbook-theme .library-kicker {
    font-size: 12px;
  }

  .wordbook-theme .wordbook-library-stats small {
    font-size: 13px;
  }

  .favorites-library-filter {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    align-items: center;
    gap: 21px;
    padding: 21px 2px;
    border-bottom: 1px solid #e1eae6;
  }

  .favorites-library-filter-heading {
    display: grid;
    gap: 4px;
  }

  .favorites-library-filter-label {
    color: #17332b;
    font-size: 15px;
    font-weight: 760;
    line-height: 1.2;
  }

  .favorites-library-filter-heading small {
    color: #879991;
    font-size: 12px;
    font-weight: 520;
    line-height: 1.2;
  }

  .favorites-page .category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .favorites-page .category-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #60756d;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
  }

  .favorites-page .category-btn:hover {
    border-color: #d5e3dd;
    color: #1d604f;
    background: #eef5f2;
    box-shadow: none;
    transform: none;
  }

  .favorites-page .category-btn.active,
  .favorites-page .category-btn:active {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
    box-shadow: none;
    transform: none;
  }

  .favorites-library-list {
    display: grid;
    gap: 12px;
    padding-top: 22px;
  }

  .favorites-page .favorite-library-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 25px 24px 23px;
    overflow: visible;
    border: 1px solid #dce7e2;
    border-radius: 14px;
    color: #17332b;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 83, 68, 0.035);
    transform: none;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .favorites-page .favorite-library-item::before {
    content: none;
  }

  .favorites-page .favorite-library-item:hover,
  .favorites-page .favorite-library-item:focus-visible {
    border-color: #a9cdbf;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(37, 83, 68, 0.08);
    transform: translateY(-1px);
    outline: none;
  }

  .favorite-library-item-main {
    min-width: 0;
  }

  .favorite-library-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 13px;
    color: #526d64;
    font-size: 12px;
    font-weight: 650;
  }

  .favorite-library-journal-icon {
    position: relative;
    width: 16px;
    height: 13px;
    flex: 0 0 auto;
  }

  .favorite-library-journal-icon::before,
  .favorite-library-journal-icon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 8px;
    height: 12px;
    border: 1.5px solid #25745f;
  }

  .favorite-library-journal-icon::before {
    left: 0;
    border-right-width: 0.75px;
    border-radius: 3px 1px 1px 3px;
    transform: skewY(5deg);
  }

  .favorite-library-journal-icon::after {
    right: 0;
    border-left-width: 0.75px;
    border-radius: 1px 3px 3px 1px;
    transform: skewY(-5deg);
  }

  .favorite-library-journal {
    min-width: 0;
    overflow: hidden;
    color: #35594d;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .favorite-library-year::before {
    content: "·";
    margin-right: 8px;
    color: #9aaca5;
  }

  .favorites-page .favorite-library-eyebrow .paper-type-badge {
    margin-left: auto;
    border: 1px solid #cfe1da !important;
    color: #25745f !important;
    background: #edf6f2 !important;
    box-shadow: none !important;
    white-space: nowrap;
  }

  .favorites-page .favorite-library-item h3 {
    margin: 0;
    color: #17332b !important;
    font-size: 18px;
    font-weight: 680;
    line-height: 1.48;
    letter-spacing: -0.018em;
  }

  .favorites-page .favorite-library-item:hover h3 {
    color: #1d604f !important;
  }

  .favorites-page .favorite-library-item .paper-title-zh {
    display: block;
    margin: 8px 0 0;
    overflow: visible;
    color: #47675c !important;
    font-size: 14px;
    font-weight: 560;
    line-height: 1.58;
    -webkit-line-clamp: unset;
  }

  .favorite-library-authors {
    display: -webkit-box;
    margin-top: 13px;
    overflow: hidden;
    color: #71857e;
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .favorite-library-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid #e8efec;
    color: #879991;
    font-size: 12px;
  }

  .favorite-library-foot a {
    margin-left: auto;
    color: #25745f !important;
    font-weight: 680;
    text-decoration: none;
  }

  .favorite-library-foot a:hover {
    color: #1d604f !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .favorite-library-item-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 9px;
    padding-left: 22px;
    border-left: 1px solid #e3ebe8;
  }

  .favorite-library-open {
    display: flex;
    width: 100%;
    min-height: 41px;
    padding: 0 13px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #25745f;
    border-radius: 10px;
    color: #ffffff;
    background: #25745f;
    box-shadow: 0 7px 16px rgba(37, 83, 68, 0.12);
    font-size: 13px;
    font-weight: 690;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  }

  .favorite-library-open:hover {
    border-color: #1d604f;
    color: #ffffff;
    background: #1d604f;
    box-shadow: 0 10px 22px rgba(37, 83, 68, 0.16);
    transform: translateY(-1px);
  }

  .favorite-library-open-arrow {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
  }

  .favorites-page .favorite-library-item .favorite-btn {
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #e3c8cc;
    border-radius: 10px;
    color: #8d555d;
    background: #fffafb;
    box-shadow: none;
    font-size: 13px;
    font-weight: 620;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
  }

  .favorites-page .favorite-library-item .favorite-btn:hover {
    border-color: #dcaeb4;
    color: #a13f4a;
    background: #faeef0;
    box-shadow: none;
    transform: none;
  }

  .favorites-library-empty,
  .wordbook-library-empty {
    display: grid;
    gap: 7px;
    border-color: #cfe1da;
    color: #71857e;
    background: #ffffff;
  }

  .favorites-library-empty strong,
  .wordbook-library-empty strong {
    color: #35594d;
    font-size: 15px;
  }

  .favorites-library-empty span,
  .wordbook-library-empty span {
    font-size: 12px;
  }

  .wordbook-library-empty span {
    font-size: 13px;
  }

  /* Wordbook: group rail plus a dense vocabulary workspace. */
  .wordbook-theme .wordbook-commandbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 18px 0 0;
  }

  .wordbook-theme .wordbook-commandbar .btn,
  .wordbook-theme .wordbook-commandbar .btn.secondary,
  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn.is-locked {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #d4e2dc !important;
    border-radius: 9px;
    color: #35594d !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 660;
  }

  .wordbook-theme .wordbook-commandbar .btn:hover {
    border-color: #a9cdbf !important;
    color: #1d604f !important;
    background: #edf5f1 !important;
    transform: none;
  }

  .wordbook-theme .wordbook-commandbar-exam {
    display: flex;
    width: min(var(--wordbook-group-rail-width, 218px), 100%);
    min-height: 54px !important;
    padding: 8px 13px 8px 15px !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    text-align: left;
  }

  .wordbook-commandbar-exam-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .wordbook-commandbar-exam-copy small,
  .wordbook-commandbar-label {
    color: #879991;
    font-size: 12px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .wordbook-commandbar-exam-copy strong {
    color: #244b3e;
    font-size: 14px;
    font-weight: 690;
    line-height: 1.2;
  }

  .wordbook-commandbar-exam-state {
    flex: 0 0 auto;
    color: #25745f;
    font-size: 12px;
    font-weight: 690;
  }

  .wordbook-commandbar-utility,
  .wordbook-commandbar-study {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .wordbook-commandbar-study {
    padding-left: 18px;
    border-left: 1px solid #dce7e2;
  }

  .wordbook-commandbar-label {
    margin-right: 2px;
    white-space: nowrap;
  }

  .wordbook-theme .wordbook-commandbar .btn-learn-new {
    border-color: #25745f !important;
    color: #ffffff !important;
    background: #25745f !important;
  }

  .wordbook-theme .wordbook-commandbar .btn-learn-new:hover {
    border-color: #1d604f !important;
    color: #ffffff !important;
    background: #1d604f !important;
    box-shadow: 0 10px 24px rgba(37, 83, 68, 0.12) !important;
  }

  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn:not(.is-locked) {
    border-color: #9fc5b7 !important;
    color: #1d604f !important;
    background: #eaf3ef !important;
  }

  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn:not(.is-locked):hover {
    border-color: #78aa98 !important;
    color: #174f40 !important;
    background: #dfeee8 !important;
  }

  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn.is-locked,
  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn.is-locked:hover {
    border-color: #d8e1dd !important;
    color: #667a73 !important;
    background: #f0f4f2 !important;
    box-shadow: none !important;
    opacity: 1;
    transform: none;
  }

  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn.is-locked .wordbook-commandbar-exam-copy strong,
  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn.is-locked .wordbook-commandbar-exam-state {
    color: #667a73;
  }

  .wordbook-theme .wordbook-library-shell {
    --wordbook-group-rail-width: 218px;
    display: grid;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .wordbook-workspace {
    display: grid;
    grid-template-columns: var(--wordbook-group-rail-width, 218px) minmax(0, 1fr);
    min-height: 540px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #dce7e2;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(37, 83, 68, 0.045);
  }

  .wordbook-group-rail {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 20px 13px 16px;
    border-right: 1px solid #dce7e2;
    background: #f1f6f3;
  }

  .wordbook-group-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 13px;
    color: #526d64;
    font-size: 14px;
    font-weight: 760;
    letter-spacing: 0.08em;
  }

  .wordbook-theme .wordbook-create-group-btn {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #25745f;
    background: transparent;
    box-shadow: none;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
  }

  .wordbook-theme .wordbook-create-group-btn:hover {
    color: #1d604f;
    background: #dfece7;
    transform: rotate(90deg);
  }

  .wordbook-theme .wordbook-groups-bar {
    display: grid;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .wordbook-theme .wordbook-group-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    gap: 2px;
  }

  .wordbook-theme .wordbook-group-item.is-all {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 5px;
    padding-bottom: 7px;
    border-bottom: 1px solid #d9e5e0;
  }

  .wordbook-theme .wordbook-group-filter-btn,
  .wordbook-theme .wordbook-group-filter-btn[class*="wordbook-group-badge--"] {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 39px;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 9px;
    color: #526d64 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    text-align: left;
    filter: none !important;
    cursor: pointer;
  }

  .wordbook-theme .wordbook-group-filter-btn:hover {
    color: #1d604f !important;
    background: #e7f0ec !important;
  }

  .wordbook-theme .wordbook-group-filter-btn.is-active {
    border-color: #c4dcd2 !important;
    color: #174f40 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 7px rgba(37, 83, 68, 0.06) !important;
  }

  .wordbook-theme :is(.wordbook-group-filter-btn, .wordbook-group-chip).wordbook-group-badge--ungrouped {
    --wordbook-group-color: #6c7f78;
    --wordbook-group-line: #d4dfdb;
    --wordbook-group-soft: #f2f5f4;
  }

  .wordbook-theme :is(.wordbook-group-filter-btn, .wordbook-group-chip).wordbook-group-badge--all {
    --wordbook-group-color: #1f6654;
    --wordbook-group-line: #b9d5ca;
    --wordbook-group-soft: #e5f1ec;
  }

  .wordbook-theme :is(.wordbook-group-filter-btn, .wordbook-group-chip).wordbook-group-badge--emerald {
    --wordbook-group-color: #25745f;
    --wordbook-group-line: #bdd9cf;
    --wordbook-group-soft: #e8f3ee;
  }

  .wordbook-theme :is(.wordbook-group-filter-btn, .wordbook-group-chip).wordbook-group-badge--blue {
    --wordbook-group-color: #3d7392;
    --wordbook-group-line: #c3d9e5;
    --wordbook-group-soft: #eaf3f8;
  }

  .wordbook-theme :is(.wordbook-group-filter-btn, .wordbook-group-chip).wordbook-group-badge--indigo {
    --wordbook-group-color: #536aa0;
    --wordbook-group-line: #cad4e9;
    --wordbook-group-soft: #edf1f8;
  }

  .wordbook-theme :is(.wordbook-group-filter-btn, .wordbook-group-chip).wordbook-group-badge--violet {
    --wordbook-group-color: #755f91;
    --wordbook-group-line: #d8cde4;
    --wordbook-group-soft: #f2edf6;
  }

  .wordbook-theme :is(.wordbook-group-filter-btn, .wordbook-group-chip).wordbook-group-badge--rose {
    --wordbook-group-color: #9a5965;
    --wordbook-group-line: #e5cbd0;
    --wordbook-group-soft: #f8edef;
  }

  .wordbook-theme :is(.wordbook-group-filter-btn, .wordbook-group-chip).wordbook-group-badge--amber {
    --wordbook-group-color: #90681f;
    --wordbook-group-line: #e4d4ae;
    --wordbook-group-soft: #f8f2e4;
  }

  .wordbook-theme .wordbook-group-filter-btn.is-active[class*="wordbook-group-badge--"] {
    border-color: var(--wordbook-group-line) !important;
    color: var(--wordbook-group-color) !important;
    background: var(--wordbook-group-soft) !important;
  }

  .wordbook-group-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wordbook-group-color, #9cb8ae);
  }

  .wordbook-group-filter-btn.is-active .wordbook-group-dot {
    background: var(--wordbook-group-color, #25745f);
    box-shadow: 0 0 0 3px var(--wordbook-group-soft, #dcece6);
  }

  .wordbook-group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wordbook-group-count {
    color: #879991;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .wordbook-theme .wordbook-rename-group-btn {
    width: 25px;
    height: 25px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: #8a9d96;
    background: transparent;
    opacity: 0;
    transition: opacity 140ms ease, color 140ms ease, background-color 140ms ease;
  }

  .wordbook-theme .wordbook-group-item:hover .wordbook-rename-group-btn,
  .wordbook-theme .wordbook-rename-group-btn:focus-visible {
    opacity: 1;
  }

  .wordbook-theme .wordbook-rename-group-btn:hover {
    color: #1d604f;
    background: #dfece7;
  }

  .wordbook-group-rail-note {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding: 16px 8px 2px;
    border-top: 1px solid #d7e4df;
    color: #879991;
    font-size: 12px;
    line-height: 1.45;
  }

  .wordbook-library-content {
    min-width: 0;
    padding: 25px 25px 20px;
  }

  .wordbook-library-content-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    min-height: 62px;
    padding-bottom: 19px;
    border-bottom: 1px solid #e2ebe7;
  }

  .wordbook-section-label {
    display: block;
    margin-bottom: 6px;
    color: #879991;
    font-size: 12px;
    font-weight: 740;
    letter-spacing: 0.08em;
  }

  .wordbook-library-content-head h2 {
    margin: 0;
    color: #17332b;
    font-size: 23px;
    font-weight: 680;
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .wordbook-library-content-head p {
    margin: 7px 0 0;
    color: #71857e;
    font-size: 13px;
  }

  .wordbook-theme .wordbook-groups-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-left: 0;
  }

  .wordbook-theme .wordbook-manage-group-btn,
  .wordbook-theme .wordbook-group-apply-btn,
  .wordbook-theme .wordbook-group-cancel-btn {
    min-height: 35px;
    padding: 0 12px;
    border: 1px solid #d4e2dc;
    border-radius: 9px;
    color: #35594d;
    background: #ffffff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 660;
  }

  .wordbook-theme .wordbook-manage-group-btn:hover,
  .wordbook-theme .wordbook-manage-group-btn.is-active,
  .wordbook-theme .wordbook-group-cancel-btn:hover {
    border-color: #a9cdbf;
    color: #1d604f;
    background: #edf5f1;
  }

  .wordbook-theme .wordbook-group-apply-btn {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  .wordbook-theme .wordbook-group-apply-btn:disabled {
    border-color: #d7e4df;
    color: #8b9e97;
    background: #edf2f0;
    cursor: default;
  }

  .wordbook-theme .wordbook-list {
    display: grid;
    gap: 0;
    margin-top: 0;
  }

  .wordbook-theme .wordbook-list-head,
  .wordbook-theme .wordbook-row {
    grid-template-columns: minmax(230px, 1.55fr) minmax(105px, 0.7fr) minmax(105px, 0.68fr) minmax(105px, 0.75fr) 32px;
    gap: 14px;
  }

  .wordbook-theme .wordbook-list-head.is-grouping,
  .wordbook-theme .wordbook-row.is-grouping {
    grid-template-columns: 36px minmax(210px, 1.55fr) minmax(95px, 0.7fr) minmax(95px, 0.68fr) minmax(105px, 0.75fr) 32px;
  }

  .wordbook-theme .wordbook-list-head {
    min-height: 42px;
    padding: 0 8px;
    color: #879991;
    font-size: 12px;
    font-weight: 740;
    line-height: 1;
    letter-spacing: 0.08em;
  }

  .wordbook-theme .wordbook-row {
    min-height: 72px;
    padding: 12px 8px;
    border: 0;
    border-top: 1px solid #e7eeeb;
    border-radius: 0;
    color: #17332b;
    background: #ffffff;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: background-color 150ms ease;
  }

  .wordbook-theme .wordbook-row:hover {
    border-color: #e7eeeb;
    background: #f6faf8;
    box-shadow: none;
    transform: none;
  }

  .wordbook-theme .wordbook-row.is-grouping {
    cursor: pointer;
  }

  .wordbook-theme .wordbook-row.is-grouping.is-selected,
  .wordbook-theme .wordbook-row.is-grouping.is-selected:hover {
    background: #edf6f2;
    box-shadow: inset 3px 0 0 #25745f;
  }

  .wordbook-theme .wordbook-row-wordline {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
  }

  .wordbook-row-copy {
    min-width: 0;
  }

  .wordbook-theme .wordbook-row-word {
    overflow: hidden;
    color: #17332b;
    font-size: 17px;
    font-weight: 690;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wordbook-row-meaning {
    display: flex;
    gap: 7px;
    margin-top: 5px;
    overflow: hidden;
    color: #71857e;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wordbook-row-meaning span {
    flex: 0 0 auto;
    color: #879991;
  }

  .wordbook-theme .wordbook-group-chip,
  .wordbook-theme .wordbook-group-chip[class*="wordbook-group-badge--"] {
    min-height: 26px;
    max-width: 100%;
    padding: 0 9px;
    overflow: hidden;
    border: 1px solid var(--wordbook-group-line, #d5e3dd) !important;
    border-radius: 8px;
    color: var(--wordbook-group-color, #526d64) !important;
    background: var(--wordbook-group-soft, #f2f7f5) !important;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wordbook-theme .wordbook-row-mastery {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #60756d;
    font-size: 13px;
  }

  .wordbook-mastery-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #d7a54a;
  }

  .wordbook-row.mastered .wordbook-mastery-dot {
    background: #25745f;
  }

  .wordbook-theme .wordbook-row.mastered .wordbook-row-mastery {
    color: #356b5c;
  }

  .wordbook-theme .wordbook-row-titer {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .wordbook-theme .wordbook-row-titer span {
    color: #526d64;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .wordbook-theme .wordbook-row .antibody-bar {
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: #e3ece8;
  }

  .wordbook-theme .wordbook-row .antibody-bar-fill {
    border-radius: 999px;
    background: #6cae99 !important;
    box-shadow: none !important;
  }

  .wordbook-row-curve {
    display: flex;
    align-items: center;
  }

  .wordbook-curve-btn,
  .wordbook-detail-curve-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfe0d9;
    border-radius: 9px;
    color: #25745f;
    background: #f3f8f6;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
  }

  .wordbook-curve-btn {
    width: 38px;
    height: 32px;
    padding: 0;
  }

  .wordbook-curve-btn:hover,
  .wordbook-detail-curve-btn:hover {
    border-color: #9fc8b8;
    color: #1d604f;
    background: #e7f2ed;
    transform: none;
  }

  .wordbook-curve-btn:focus-visible,
  .wordbook-detail-curve-btn:focus-visible {
    outline: 2px solid rgba(37, 116, 95, 0.38);
    outline-offset: 2px;
  }

  .forgetting-curve-glyph {
    position: relative;
    display: inline-block;
    width: 21px;
    height: 15px;
    flex: 0 0 auto;
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;
    opacity: 0.92;
  }

  .forgetting-curve-glyph::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 1px;
    width: 17px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-radius: 70% 20% 0 0;
    transform: rotate(17deg) skewX(-14deg);
    transform-origin: left top;
  }

  .wordbook-theme .icon-action-btn,
  .wordbook-theme .audio-icon-btn,
  .wordbook-theme .delete-icon-btn {
    position: static;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #6d827a !important;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .wordbook-theme .icon-action-btn svg {
    width: 17px;
    height: 17px;
  }

  .wordbook-theme .audio-icon-btn:hover {
    color: #1d604f !important;
    background: #e5f0eb;
    box-shadow: none;
  }

  .wordbook-theme .delete-icon-btn {
    color: #9a7478 !important;
  }

  .wordbook-theme .delete-icon-btn:hover {
    color: #a13f4a !important;
    background: #faeeee;
    box-shadow: none;
  }

  .wordbook-theme .wordbook-select-box {
    accent-color: #25745f;
  }

  .wordbook-theme .wordbook-pagination {
    justify-content: center;
    margin-top: 20px;
    padding-top: 19px;
    border-top: 1px solid #e2ebe7;
    color: #71857e;
    font-size: 13px;
  }

  .wordbook-theme .wordbook-pagination .btn.secondary {
    min-height: 34px;
    border-color: #d1e0da;
    color: #35594d;
    background: #ffffff;
    box-shadow: none;
  }

  .wordbook-theme .wordbook-pagination .btn.secondary:hover:not(:disabled) {
    border-color: #9fc5b7;
    color: #1d604f;
    background: #e8f2ee;
  }

  .wordbook-theme .wordbook-pagination input {
    min-height: 34px;
    border-color: #d1e0da;
    color: #17332b;
    background: #ffffff;
    font-size: 13px;
  }

  .wordbook-theme .wordbook-pagination input:focus {
    border-color: #9fc5b7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 116, 95, 0.08);
  }

  .wordbook-group-glass-card {
    color: #17332b;
    background: #ffffff;
    border-color: #d5e3dd;
    box-shadow: 0 24px 60px rgba(37, 83, 68, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .wordbook-group-glass-card::before {
    background: #25745f;
  }

  .wordbook-group-glass-card h3,
  .wordbook-group-glass-card .muted,
  .wordbook-group-card label {
    color: #35594d;
  }

  .wordbook-group-card select,
  .wordbook-group-card input {
    border-color: #d1e0da;
    color: #17332b;
    background: #f7faf8;
  }

  .wordbook-group-color-fieldset {
    margin: 17px 0 0;
    padding: 0;
    border: 0;
  }

  .wordbook-group-color-fieldset legend {
    margin-bottom: 9px;
    color: #526d64;
    font-size: 13px;
    font-weight: 650;
  }

  .wordbook-group-color-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .wordbook-group-color-option {
    --picker-color: #25745f;
    --picker-line: #bdd9cf;
    --picker-soft: #e8f3ee;
    position: relative;
    min-height: 38px;
    margin: 0 !important;
    padding: 0 10px;
    display: flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid #d8e3df;
    border-radius: 9px;
    color: #526d64 !important;
    background: #ffffff;
    font-size: 13px !important;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
  }

  .wordbook-group-color-option--blue {
    --picker-color: #3d7392;
    --picker-line: #c3d9e5;
    --picker-soft: #eaf3f8;
  }

  .wordbook-group-color-option--indigo {
    --picker-color: #536aa0;
    --picker-line: #cad4e9;
    --picker-soft: #edf1f8;
  }

  .wordbook-group-color-option--violet {
    --picker-color: #755f91;
    --picker-line: #d8cde4;
    --picker-soft: #f2edf6;
  }

  .wordbook-group-color-option--rose {
    --picker-color: #9a5965;
    --picker-line: #e5cbd0;
    --picker-soft: #f8edef;
  }

  .wordbook-group-color-option--amber {
    --picker-color: #90681f;
    --picker-line: #e4d4ae;
    --picker-soft: #f8f2e4;
  }

  .wordbook-group-color-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .wordbook-group-color-swatch {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--picker-color);
    box-shadow: 0 0 0 3px var(--picker-soft);
  }

  .wordbook-group-color-option:has(input:checked) {
    border-color: var(--picker-line);
    color: var(--picker-color) !important;
    background: var(--picker-soft);
  }

  .wordbook-group-color-option:has(input:focus-visible) {
    outline: 2px solid var(--picker-color);
    outline-offset: 2px;
  }

  .wordbook-group-glass-card .btn,
  .wordbook-group-glass-card .btn.secondary {
    border-color: #cdded7;
    color: #35594d;
    background: #ffffff;
    box-shadow: none;
  }

  .wordbook-group-modal {
    padding: 24px;
    background: rgba(18, 45, 36, 0.26);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }

  .wordbook-group-modal .wordbook-group-editor-card {
    width: min(540px, 100%);
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d4e2dc !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 90px rgba(29, 72, 57, 0.2) !important;
  }

  .wordbook-group-modal .wordbook-group-editor-card::before {
    display: none;
  }

  .wordbook-group-editor-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    align-items: start;
    gap: 14px;
    padding: 24px 26px 21px;
    border-bottom: 1px solid #e2ece8;
  }

  .wordbook-group-editor-mark {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #ffffff;
    background: #25745f;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
  }

  .wordbook-group-editor-mark.is-edit {
    font-size: 19px;
  }

  .wordbook-group-editor-head h3 {
    margin: 1px 0 0;
    color: #17332b;
    font-size: 23px;
    font-weight: 710;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .wordbook-group-editor-head p {
    margin: 6px 0 0;
    color: #71857e;
    font-size: 13px;
    line-height: 1.5;
  }

  .wordbook-group-editor-close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    color: #60766e;
    background: transparent;
    box-shadow: none;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  .wordbook-group-editor-close:hover {
    color: #25745f;
    background: transparent;
    transform: scale(1.08);
  }

  .wordbook-group-editor-body {
    padding: 22px 26px 25px;
  }

  .wordbook-group-editor-body > label {
    display: block;
    margin: 0 0 9px;
    color: #35594d !important;
    font-size: 14px;
    font-weight: 680;
  }

  .wordbook-group-editor-body > input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cdded7;
    border-radius: 11px;
    color: #17332b;
    background: #ffffff;
    font-size: 15px;
    outline: none;
  }

  .wordbook-group-editor-body > input:focus {
    border-color: #7fb19f;
    box-shadow: 0 0 0 3px rgba(37, 116, 95, 0.11);
  }

  .wordbook-group-modal .wordbook-group-color-fieldset {
    margin-top: 21px;
  }

  .wordbook-group-modal .wordbook-group-color-fieldset legend {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 680;
  }

  .wordbook-group-modal .wordbook-group-color-option {
    min-height: 43px;
    padding: 0 12px;
    font-size: 13px !important;
  }

  .wordbook-group-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 17px 26px 19px;
    border-top: 1px solid #e2ece8;
    background: #f7faf9;
  }

  .wordbook-group-editor-actions .btn,
  .wordbook-group-editor-actions .btn.secondary {
    width: auto;
    min-width: 88px;
    min-height: 40px;
    margin: 0;
    padding: 0 17px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 680;
  }

  .wordbook-group-editor-actions .btn:not(.secondary) {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  .wordbook-group-editor-actions .btn:not(.secondary):hover {
    border-color: #1d604f;
    color: #ffffff;
    background: #1d604f;
  }

  .wordbook-group-editor-actions .btn:not(.secondary):disabled,
  .wordbook-group-editor-actions .btn:not(.secondary):disabled:hover {
    border-color: #d5e1dc;
    color: #82958e;
    background: #e9efec;
    cursor: default;
  }

  .wordbook-move-group-modal .wordbook-move-group-card {
    width: min(590px, 100%);
  }

  .wordbook-save-choice-modal .wordbook-save-choice-card {
    width: min(610px, 100%);
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d4e2dc !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 90px rgba(29, 72, 57, 0.2) !important;
  }

  .wordbook-save-choice-modal .wordbook-save-choice-card::before {
    display: none;
  }

  .wordbook-save-choice-head {
    padding-bottom: 19px;
  }

  .wordbook-save-choice-mark svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .wordbook-save-choice-preview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin: 20px 26px 0;
    padding: 13px 15px;
    border: 1px solid #d7e5df;
    border-radius: 11px;
    background: #f3f8f5;
  }

  .wordbook-save-choice-preview > span {
    padding: 4px 8px;
    border-radius: 6px;
    color: #2c6d59;
    background: #deede7;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.06em;
  }

  .wordbook-save-choice-preview > strong {
    overflow: hidden;
    color: #294b40;
    font-size: 14px;
    font-weight: 690;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wordbook-save-choice-body {
    max-height: min(390px, calc(100dvh - 330px));
    padding-top: 19px;
  }

  .wordbook-save-choice-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 11px;
  }

  .wordbook-save-choice-label strong {
    color: #35594d;
    font-size: 13px;
    font-weight: 700;
  }

  .wordbook-save-choice-label span {
    color: #879991;
    font-size: 11px;
  }

  .wordbook-save-choice-modal .wordbook-move-group-option {
    transform: none;
  }

  .wordbook-save-choice-modal .wordbook-move-group-option:hover {
    transform: none;
  }

  .wordbook-move-group-head {
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
  }

  .wordbook-move-group-head p.wordbook-move-group-term {
    max-width: 44ch;
    overflow: hidden;
    color: #526d64;
    font-size: 14px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wordbook-move-group-body {
    max-height: min(430px, calc(100dvh - 260px));
    padding: 22px 26px 24px;
    overflow: auto;
  }

  .wordbook-move-group-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .wordbook-move-group-option {
    --move-group-color: #6c7f78;
    --move-group-line: #d4dfdb;
    --move-group-soft: #f2f5f4;
    position: relative;
    display: grid !important;
    grid-template-columns: 12px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    margin: 0 !important;
    padding: 10px 12px;
    border: 1px solid #d8e3df;
    border-radius: 11px;
    color: #35594d !important;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
  }

  .wordbook-move-group-option.wordbook-group-badge--emerald {
    --move-group-color: #25745f;
    --move-group-line: #bdd9cf;
    --move-group-soft: #e8f3ee;
  }

  .wordbook-move-group-option.wordbook-group-badge--all {
    --move-group-color: #1f6654;
    --move-group-line: #b9d5ca;
    --move-group-soft: #e5f1ec;
  }

  .wordbook-move-group-option.wordbook-group-badge--blue {
    --move-group-color: #3d7392;
    --move-group-line: #c3d9e5;
    --move-group-soft: #eaf3f8;
  }

  .wordbook-move-group-option.wordbook-group-badge--indigo {
    --move-group-color: #536aa0;
    --move-group-line: #cad4e9;
    --move-group-soft: #edf1f8;
  }

  .wordbook-move-group-option.wordbook-group-badge--violet {
    --move-group-color: #755f91;
    --move-group-line: #d8cde4;
    --move-group-soft: #f2edf6;
  }

  .wordbook-move-group-option.wordbook-group-badge--rose {
    --move-group-color: #9a5965;
    --move-group-line: #e5cbd0;
    --move-group-soft: #f8edef;
  }

  .wordbook-move-group-option.wordbook-group-badge--amber {
    --move-group-color: #90681f;
    --move-group-line: #e4d4ae;
    --move-group-soft: #f8f2e4;
  }

  .wordbook-move-group-option:hover {
    border-color: var(--move-group-line);
    background: var(--move-group-soft);
    transform: translateY(-1px);
  }

  .wordbook-move-group-option:has(input:checked) {
    border-color: var(--move-group-line);
    background: var(--move-group-soft);
    box-shadow: inset 0 0 0 1px var(--move-group-line);
  }

  .wordbook-move-group-option:has(input:focus-visible) {
    outline: 2px solid rgba(37, 116, 95, 0.42);
    outline-offset: 2px;
  }

  .wordbook-move-group-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .wordbook-move-group-option-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--move-group-color);
    box-shadow: 0 0 0 3px var(--move-group-soft);
  }

  .wordbook-move-group-option-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .wordbook-move-group-option-copy strong {
    overflow: hidden;
    color: #294b40;
    font-size: 14px;
    font-weight: 680;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wordbook-move-group-option-copy small {
    color: #7a8f87;
    font-size: 12px;
    line-height: 1.2;
  }

  .wordbook-move-group-option-check {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d4e0db;
    border-radius: 50%;
    color: transparent;
    background: #ffffff;
    font-size: 12px;
    font-weight: 760;
  }

  .wordbook-move-group-option:has(input:checked) .wordbook-move-group-option-check {
    border-color: var(--move-group-color);
    color: #ffffff;
    background: var(--move-group-color);
  }

  .wordbook-detail-modal .wordbook-detail-status-row {
    align-items: start;
  }

  .wordbook-detail-status {
    display: grid;
    grid-template-columns: max-content minmax(150px, 1fr);
    align-items: center;
    gap: 13px;
  }

  .wordbook-detail-mastery {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #49685d;
    font-size: 13px;
    white-space: nowrap;
  }

  .wordbook-detail-mastery i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d7a54a;
  }

  .wordbook-detail-titer {
    display: grid;
    grid-template-columns: auto minmax(74px, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #60766e;
    font-size: 13px;
  }

  .wordbook-detail-titer .antibody-bar {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: #dfeae5;
  }

  .wordbook-detail-titer .antibody-bar-fill {
    border-radius: 999px;
    background: #6cae99 !important;
    box-shadow: none !important;
  }

  .wordbook-detail-curve-btn {
    min-height: 34px;
    gap: 8px;
    padding: 0 11px;
    color: #25745f;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
  }

  .wordbook-detail-curve-btn .forgetting-curve-glyph {
    width: 18px;
    height: 13px;
  }

  .ebbinghaus-modal {
    z-index: 70;
    padding: 24px;
    background: rgba(18, 45, 36, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .ebbinghaus-modal .ebbinghaus-modal-card {
    width: min(720px, 100%);
    max-height: calc(100dvh - 48px);
    padding: 0 !important;
    overflow: auto;
    border: 1px solid #d6e3de !important;
    border-radius: 16px !important;
    color: #17332b !important;
    background: #ffffff !important;
    box-shadow: 0 30px 90px rgba(29, 72, 57, 0.2) !important;
    font-family: "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif !important;
  }

  .ebbinghaus-modal .ebbinghaus-modal-card::before {
    display: none;
  }

  .ebbinghaus-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 28px 20px;
    border-bottom: 1px solid #e1ebe7;
  }

  .ebbinghaus-modal-head p {
    margin: 0 0 7px;
    color: #60766e;
    font-size: 13px;
    font-weight: 650;
  }

  .ebbinghaus-modal-head h3 {
    margin: 0;
    color: #17332b;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    word-break: break-word;
  }

  .ebbinghaus-modal .ebbinghaus-modal-close {
    flex: 0 0 auto;
  }

  .ebbinghaus-modal-body {
    display: grid;
    gap: 18px;
    padding: 22px 28px 25px;
  }

  .ebbinghaus-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #dce7e2;
    border-radius: 12px;
    background: #f6faf8;
  }

  .ebbinghaus-summary > div {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 15px 17px;
  }

  .ebbinghaus-summary > div + div {
    border-left: 1px solid #dce7e2;
  }

  .ebbinghaus-summary span {
    color: #71857e;
    font-size: 12px;
  }

  .ebbinghaus-summary strong {
    overflow: hidden;
    color: #1f6654;
    font-size: 18px;
    font-weight: 720;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ebbinghaus-chart-panel {
    padding: 14px 14px 12px;
    border: 1px solid #dce7e2;
    border-radius: 12px;
    background: #ffffff;
  }

  .ebbinghaus-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .ebbinghaus-grid line {
    stroke: #e5ede9;
    stroke-width: 1;
  }

  .ebbinghaus-threshold {
    stroke: #9aa9a3;
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
  }

  .ebbinghaus-threshold-label,
  .ebbinghaus-axis-label {
    fill: #7a8e87;
    font-family: "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif;
    font-size: 11px;
  }

  .ebbinghaus-curve-path {
    fill: none;
    stroke: #25745f;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ebbinghaus-current-guide {
    stroke: #25745f;
    stroke-width: 1;
    stroke-dasharray: 3 5;
    opacity: 0.48;
  }

  .ebbinghaus-current-point {
    fill: #25745f;
  }

  .ebbinghaus-current-ring {
    fill: none;
    stroke: #25745f;
    stroke-width: 2;
    opacity: 0.22;
  }

  .ebbinghaus-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 5px 8px 0 38px;
    color: #60766e;
    font-size: 12px;
  }

  .ebbinghaus-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .ebbinghaus-legend i {
    display: inline-block;
    width: 20px;
    height: 0;
    border-top: 2px solid #25745f;
  }

  .ebbinghaus-legend i.is-threshold {
    border-color: #9aa9a3;
    border-top-style: dashed;
  }

  .ebbinghaus-legend i.is-current {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: #25745f;
  }

  .ebbinghaus-records {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 10px;
  }

  .ebbinghaus-records > span {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #f3f7f5;
  }

  .ebbinghaus-records small {
    color: #7a8e87;
    font-size: 11px;
  }

  .ebbinghaus-records strong {
    color: #35594d;
    font-size: 13px;
    font-weight: 650;
  }

  .ebbinghaus-model-note {
    margin: 0;
    color: #71857e;
    font-size: 12px;
    line-height: 1.6;
  }

  .ebbinghaus-model-note sup {
    font-size: 9px;
  }

  /* Desktop vocabulary sessions: one calm workspace shared by learn and review. */
  .learn-theme .learn-main {
    width: min(1120px, calc(100% - 32px));
    max-width: 1120px;
    min-height: calc(100dvh - 72px);
    margin: 0 auto;
    padding: 34px 0 64px;
  }

  .learn-session-shell {
    min-height: calc(100dvh - 170px);
  }

  .learn-session-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
    padding: 4px 2px 26px;
    border-bottom: 1px solid #dce7e2;
  }

  .learn-session-copy {
    min-width: 0;
  }

  .learn-session-copy .library-kicker {
    margin-bottom: 10px;
    color: #25745f;
    font-size: 12px;
  }

  .learn-session-copy h1 {
    margin: 0;
    color: #17332b;
    font-size: clamp(32px, 3vw, 43px);
    font-weight: 680;
    line-height: 1.03;
    letter-spacing: -0.05em;
  }

  .learn-session-copy p {
    margin: 12px 0 0;
    color: #60756d;
    font-size: 14px;
    line-height: 1.55;
  }

  .learn-session-stats {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
  }

  .learn-session-stats > span {
    min-width: 104px;
    padding: 0 20px;
    border-left: 1px solid #dce7e2;
  }

  .learn-session-stats strong {
    display: block;
    color: #17332b;
    font-size: 25px;
    font-weight: 680;
    line-height: 1;
    letter-spacing: -0.035em;
  }

  .learn-session-stats small {
    display: block;
    margin-top: 7px;
    color: #71857e;
    font-size: 12px;
  }

  .learn-session-progress {
    height: 3px;
    margin: 18px 2px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #dde9e4;
  }

  .learn-session-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #25745f;
    transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .learn-theme #learnStageHost {
    display: grid;
    min-height: 520px;
    padding: 26px 0 0;
    place-items: center;
    perspective: 1400px;
  }

  .learn-theme .learn-stage,
  .learn-theme .exam-learn-stage {
    width: min(790px, 100%);
    min-height: 0;
  }

  .learn-theme .learn-card,
  .learn-theme .exam-learn-card {
    width: 100%;
    max-width: none;
    height: 410px;
    min-height: 410px;
    margin: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
  }

  .learn-theme .learn-inner,
  .learn-theme .exam-learn-card .learn-inner {
    min-height: 410px;
    border-radius: 16px;
    box-shadow: 0 18px 54px rgba(37, 83, 68, 0.09);
    transform: none !important;
    -webkit-transform: none !important;
    transform-style: flat;
    -webkit-transform-style: flat;
    transition: none;
  }

  .learn-theme .learn-card.revealed .learn-inner {
    transform: none !important;
    -webkit-transform: none !important;
  }

  .learn-theme .learn-front,
  .learn-theme .learn-back,
  .learn-theme .exam-learn-front,
  .learn-theme .exam-learn-back {
    padding: 38px 44px;
    border: 1px solid #d8e6e0;
    border-radius: 16px;
    color: #17332b;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .learn-theme .exam-learn-front {
    grid-template-rows: 34px minmax(0, 1fr) 22px;
    align-content: stretch;
    justify-items: stretch;
    gap: 10px;
  }

  .learn-theme .exam-learn-front h2,
  .learn-theme .exam-learn-back-word,
  .learn-theme .exam-learn-back-word span {
    color: #17332b;
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 680;
    line-height: 1.08;
    letter-spacing: -0.045em;
  }

  .learn-theme .exam-learn-meaning {
    color: #35594d;
    font-size: 21px;
    font-weight: 560;
    line-height: 1.45;
  }

  .learn-theme .exam-learn-meta-row {
    color: #60756d;
    font-size: 13px;
  }

  .learn-theme .exam-learn-meta-row span {
    padding: 5px 10px;
    border: 1px solid #d7e5df;
    color: #526d64;
    background: #f1f6f3;
  }

  .learn-theme .learn-card-topline {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .learn-theme .learn-card-center {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 8px 0 2px;
  }

  .learn-theme .learn-card-center .learn-word-row {
    max-width: 100%;
  }

  .learn-theme .learn-mastery-indicator {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  .learn-theme .learn-mastery-indicator small {
    color: #71857e;
    font-size: 12px;
    font-weight: 620;
    line-height: 1;
  }

  .learn-theme .learn-mastery-indicator strong {
    color: #25745f;
    font-size: 16px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .learn-theme .learn-card-phonetic {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    color: #60756d;
    background: transparent;
    font-size: 14px;
    font-weight: 540;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .learn-theme .exam-learn-hint {
    align-self: end;
    text-align: center;
    color: #879991;
    font-size: 13px;
  }

  .learn-theme .learn-speak,
  .learn-theme .exam-learn-card .learn-speak {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #25745f;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .learn-theme .learn-speak:hover {
    color: #1d604f;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .learn-theme .exam-learn-back {
    gap: 16px;
    overflow-y: auto;
  }

  .learn-theme .learn-front,
  .learn-theme .learn-back {
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: none;
  }

  .learn-theme .learn-front {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
  }

  .learn-theme .learn-back {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
  }

  .learn-theme .learn-card.is-flip-ready .learn-front,
  .learn-theme .learn-card.is-flip-ready .learn-back {
    transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .learn-theme .learn-card.revealed .learn-front {
    opacity: 0;
    pointer-events: none;
  }

  .learn-theme .learn-card.revealed .learn-back {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
  }

  .learn-theme .exam-learn-back-word {
    width: 100%;
    padding: 0 0 18px;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid #e1ebe7;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .learn-theme .exam-learn-detail-list {
    gap: 9px;
    margin-top: 0;
  }

  .learn-theme .exam-learn-detail-item {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: #f5f8f6;
  }

  .learn-theme .exam-learn-detail-label {
    color: #71857e;
    font-size: 12px;
    font-weight: 680;
  }

  .learn-theme .exam-learn-detail-value {
    color: #294c40;
    font-size: 14px;
    line-height: 1.55;
  }

  .learn-theme .learn-actions,
  .learn-theme .exam-learn-stage .learn-actions {
    gap: 10px;
    margin-top: 18px;
  }

  .learn-theme .learn-actions .btn,
  .learn-theme .exam-learn-stage .learn-actions .btn {
    min-width: 142px;
    min-height: 43px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 680;
    transform: none;
  }

  .learn-theme .learn-actions #knownBtn {
    border: 1px solid #25745f !important;
    color: #ffffff !important;
    background: #25745f !important;
    box-shadow: none !important;
  }

  .learn-theme .learn-actions #knownBtn:hover {
    border-color: #1d604f !important;
    color: #ffffff !important;
    background: #1d604f !important;
    box-shadow: none !important;
  }

  .learn-theme .learn-actions #unknownBtn {
    border: 1px solid #e1c8cc !important;
    color: #8d555d !important;
    background: #fffafb !important;
    box-shadow: none !important;
  }

  .learn-theme .learn-actions #unknownBtn:hover {
    border-color: #d6aeb4 !important;
    color: #9b3e49 !important;
    background: #faeef0 !important;
    box-shadow: none !important;
  }

  .learn-theme .learn-actions #nextBtn {
    border: 1px solid #cfe0d9 !important;
    color: #35594d !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .learn-session-loading,
  .learn-session-empty {
    display: grid;
    min-height: 430px;
    margin-top: 24px;
    place-items: center;
    align-content: center;
    gap: 12px;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    color: #71857e;
    background: #ffffff;
  }

  .learn-session-loading span {
    width: 38px;
    height: 3px;
    border-radius: 999px;
    background: #25745f;
    animation: learn-session-pulse 900ms ease-in-out infinite alternate;
  }

  .learn-session-loading strong,
  .learn-session-empty strong {
    color: #35594d;
    font-size: 16px;
  }

  .learn-session-empty span {
    font-size: 13px;
  }

  .learn-session-empty .btn {
    min-height: 40px;
    margin-top: 6px;
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  /* Exam vocabulary: a focused subject rail and compact lexical index. */
  .wordbook-theme .main:has(.exam-library-page) {
    width: min(1440px, calc(100% - 64px));
    max-width: 1440px;
    padding-top: 42px;
    padding-bottom: 56px;
  }

  .exam-library-page {
    color: #244b3e;
  }

  .exam-library-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 44px;
    padding: 8px 4px 28px;
    border-bottom: 1px solid #dce7e2;
  }

  .exam-library-intro {
    min-width: 0;
  }

  .exam-library-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #648078;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.13em;
  }

  .exam-library-kicker span {
    width: 25px;
    height: 2px;
    border-radius: 999px;
    background: #25745f;
  }

  .exam-library-intro h1 {
    margin: 9px 0 9px;
    color: #173d31;
    font-size: clamp(32px, 3vw, 43px);
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: -0.045em;
  }

  .exam-library-intro > p {
    margin: 0;
    color: #6b8179;
    font-size: 14px;
    line-height: 1.65;
  }

  .exam-library-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 18px;
    color: #788c85;
    font-size: 12px;
  }

  .exam-library-summary span {
    position: relative;
  }

  .exam-library-summary span + span::before {
    position: absolute;
    top: 50%;
    left: -13px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #b7c8c2;
    content: "";
    transform: translateY(-50%);
  }

  .exam-library-summary strong {
    margin-right: 3px;
    color: #2c5d4d;
    font-size: 13px;
    font-weight: 760;
  }

  .exam-library-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 2px;
  }

  .wordbook-theme .exam-library-actions .btn {
    min-height: 41px;
    padding: 0 16px;
    border: 1px solid #cfddd8 !important;
    border-radius: 10px;
    color: #35594d !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 680;
    transform: none;
  }

  .wordbook-theme .exam-library-actions .btn:hover {
    border-color: #a8c8bd !important;
    color: #1d604f !important;
    background: #edf5f1 !important;
    transform: none;
  }

  .wordbook-theme .exam-library-actions .exam-library-activate {
    color: #6c7d76 !important;
  }

  .wordbook-theme .exam-library-actions .btn-learn-new {
    border-color: #25745f !important;
    color: #ffffff !important;
    background: #25745f !important;
  }

  .wordbook-theme .exam-library-actions .btn-learn-new:hover {
    border-color: #1d604f !important;
    color: #ffffff !important;
    background: #1d604f !important;
    box-shadow: 0 9px 22px rgba(37, 83, 68, 0.13) !important;
  }

  .exam-library-workspace {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    min-height: 590px;
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(37, 83, 68, 0.05);
  }

  .exam-library-rail {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 22px 14px 18px;
    border-right: 1px solid #dce7e2;
    background: #f2f7f4;
  }

  .exam-library-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 9px 16px;
    border-bottom: 1px solid #dce7e2;
  }

  .exam-library-rail-head > div {
    display: grid;
    gap: 4px;
  }

  .exam-library-rail-head span {
    color: #294f42;
    font-size: 14px;
    font-weight: 750;
  }

  .exam-library-rail-head small {
    color: #85978f;
    font-size: 11px;
  }

  .exam-library-rail-head > strong {
    display: inline-flex;
    min-width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9dbd4;
    border-radius: 50%;
    color: #467064;
    background: #ffffff;
    font-size: 11px;
    font-weight: 760;
  }

  .exam-library-categories {
    display: grid;
    align-content: start;
    gap: 5px;
    margin-top: 13px;
  }

  .exam-library-category {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #547168;
    background: transparent;
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
  }

  .exam-library-category:hover {
    color: #1d604f;
    background: #e5efeb;
  }

  .exam-library-category.is-active {
    border-color: #c5dcd3;
    color: #174f40;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 83, 68, 0.055);
  }

  .exam-library-category:focus-visible {
    outline: 2px solid rgba(37, 116, 95, 0.34);
    outline-offset: 2px;
  }

  .exam-library-category-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9db3ab;
  }

  .exam-library-category.is-active .exam-library-category-dot {
    background: #25745f;
    box-shadow: 0 0 0 3px #e1eee9;
  }

  .exam-library-category-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exam-library-category-count {
    color: #90a099;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .exam-library-category.is-active .exam-library-category-count {
    color: #487366;
  }

  .exam-library-rail-empty {
    padding: 20px 9px;
    color: #879991;
    font-size: 12px;
    line-height: 1.6;
  }

  .exam-library-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 0 26px;
  }

  .exam-library-content-head {
    display: flex;
    min-height: 108px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid #e3ebe8;
  }

  .exam-library-content-head > div {
    min-width: 0;
  }

  .exam-library-content-label {
    color: #80938c;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.12em;
  }

  .exam-library-content-head h2 {
    margin: 5px 0 4px;
    overflow: hidden;
    color: #22483b;
    font-size: 22px;
    font-weight: 740;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exam-library-content-head p {
    margin: 0;
    color: #82948d;
    font-size: 12px;
  }

  .exam-library-sort {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    color: #73877f;
    font-size: 12px;
  }

  .exam-library-sort select {
    min-width: 114px;
    min-height: 38px;
    padding: 0 31px 0 12px;
    border: 1px solid #d2e0db;
    border-radius: 9px;
    color: #35594d;
    background-color: #ffffff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 630;
  }

  .exam-library-sort select:focus {
    border-color: #8bb9aa;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 116, 95, 0.09);
  }

  .exam-library-list {
    display: grid;
    align-content: start;
  }

  .exam-library-row {
    display: grid;
    grid-template-columns: 42px minmax(230px, 1.4fr) minmax(150px, 0.75fr) 86px 20px;
    min-height: 82px;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 13px 8px;
    border: 0;
    border-bottom: 1px solid #e7eeeb;
    border-radius: 0;
    color: #35594d;
    background: #ffffff;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 150ms ease;
  }

  .exam-library-row:hover,
  .exam-library-row:focus-visible {
    background: #f6faf8;
    outline: 0;
  }

  .exam-library-row:focus-visible {
    box-shadow: inset 3px 0 #4b927c;
  }

  .exam-library-index {
    color: #a2b1ab;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .exam-library-term {
    min-width: 0;
  }

  .exam-library-term-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
  }

  .exam-library-term h3 {
    margin: 0;
    overflow: hidden;
    color: #213f35;
    font-size: 17px;
    font-weight: 720;
    line-height: 1.28;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exam-library-term p {
    margin: 5px 0 0;
    overflow: hidden;
    color: #6f837b;
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exam-library-term p.is-muted {
    color: #a0aea8;
    font-size: 12px;
  }

  .exam-library-audio {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #6d827a !important;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
  }

  .exam-library-audio:hover {
    color: #1d604f !important;
    background: #e5f0eb;
  }

  .exam-library-audio svg {
    width: 17px;
    height: 17px;
  }

  .exam-library-row-meta {
    display: grid;
    min-width: 0;
    justify-items: start;
    gap: 7px;
  }

  .exam-library-row-meta > span {
    max-width: 100%;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 6px;
    color: #4f6f64;
    background: #edf4f1;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exam-library-row-meta small {
    color: #8b7a4e;
    font-size: 11px;
    font-weight: 630;
  }

  .exam-library-row-meta small.is-mastered {
    color: #28725c;
  }

  .exam-library-frequency {
    display: grid;
    justify-items: end;
    gap: 3px;
    font-variant-numeric: tabular-nums;
  }

  .exam-library-frequency small {
    color: #93a39d;
    font-size: 10px;
  }

  .exam-library-frequency strong {
    color: #35594d;
    font-size: 15px;
    font-weight: 720;
  }

  .exam-library-open {
    color: #9caca6;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
  }

  .exam-library-empty {
    display: grid;
    min-height: 330px;
    place-content: center;
    justify-items: center;
    gap: 7px;
    color: #81938c;
    text-align: center;
  }

  .exam-library-empty-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #518675;
    background: #e9f3ef;
  }

  .exam-library-empty-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .exam-library-empty strong {
    color: #35594d;
    font-size: 15px;
    font-weight: 700;
  }

  .exam-library-empty > span:last-child {
    font-size: 12px;
  }

  .exam-library-pagination {
    display: flex;
    min-height: 72px;
    margin-top: auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid #e3ebe8;
  }

  .exam-library-page-summary {
    color: #81938c;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .exam-library-page-controls,
  .exam-library-jump {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .exam-library-jump > span {
    color: #879991;
    font-size: 11px;
  }

  .exam-library-jump input {
    width: 54px;
    height: 34px;
    padding: 0 6px;
    border: 1px solid #d5e2dd;
    border-radius: 8px;
    color: #35594d;
    background: #ffffff;
    box-shadow: none;
    text-align: center;
  }

  .wordbook-theme .exam-library-page-controls .btn {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #d5e2dd !important;
    border-radius: 8px;
    color: #4b685e !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 12px;
    transform: none;
  }

  .wordbook-theme .exam-library-page-controls .btn:hover:not(:disabled) {
    border-color: #a9cdbf !important;
    color: #1d604f !important;
    background: #edf5f1 !important;
  }

  .wordbook-theme .exam-library-page-controls .btn:disabled {
    color: #a9b5b0 !important;
    background: #f4f7f6 !important;
    opacity: 1;
  }

  .exam-word-detail-modal {
    padding: 24px;
    background: rgba(19, 33, 28, 0.24);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .exam-word-detail-card {
    position: relative;
    width: min(650px, calc(100vw - 48px));
    overflow: hidden;
    border: 1px solid #d7e4df;
    border-radius: 18px;
    color: #35594d;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(23, 61, 49, 0.18);
  }

  .exam-word-detail-close {
    position: absolute;
    z-index: 2;
    top: 17px;
    right: 18px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #72877f;
    background: transparent;
    box-shadow: none;
    font-size: 26px;
    font-weight: 300;
    line-height: 28px;
    cursor: pointer;
  }

  .exam-word-detail-close:hover,
  .exam-word-detail-close:focus-visible {
    color: #1d604f;
    background: #e9f2ee;
    outline: 0;
  }

  .exam-word-detail-head {
    padding: 32px 36px 26px;
    border-bottom: 1px solid #dfe9e5;
    background: linear-gradient(145deg, #f5faf7 0%, #edf5f1 100%);
  }

  .exam-word-detail-kicker {
    color: #628076;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.14em;
  }

  .exam-word-detail-term-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    padding-right: 38px;
  }

  .exam-word-detail-term-line h3 {
    margin: 0;
    overflow-wrap: anywhere;
    color: #173d31;
    font-size: 31px;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
  }

  .exam-word-detail-audio {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #6d827a;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
  }

  .exam-word-detail-audio:hover {
    color: #1d604f;
    background: #e5f0eb;
  }

  .exam-word-detail-audio svg {
    width: 17px;
    height: 17px;
  }

  .exam-word-detail-head > p {
    margin: 11px 0 0;
    color: #4d6e63;
    font-size: 15px;
    line-height: 1.65;
  }

  .exam-word-detail-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }

  .exam-word-detail-facts > span {
    display: inline-flex;
    min-height: 27px;
    padding: 0 9px;
    align-items: center;
    gap: 4px;
    border: 1px solid #cfddd8;
    border-radius: 7px;
    color: #6d8179;
    background: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 640;
  }

  .exam-word-detail-facts > span.is-mastered {
    border-color: #bcd8ce;
    color: #216550;
    background: #e7f2ed;
  }

  .exam-word-detail-facts strong {
    color: #2c5d4d;
    font-size: 12px;
  }

  .exam-word-detail-body {
    display: grid;
    gap: 0;
    padding: 7px 36px 20px;
  }

  .exam-word-detail-body section {
    display: grid;
    gap: 8px;
    padding: 20px 0;
    border-bottom: 1px solid #e6eeeb;
  }

  .exam-word-detail-body section:last-child {
    border-bottom: 0;
  }

  .exam-word-detail-body section > span {
    color: #7c9189;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.11em;
  }

  .exam-word-detail-body p {
    margin: 0;
    color: #294c40;
    font-size: 14px;
    line-height: 1.7;
  }

  .exam-word-detail-example small {
    color: #71867e;
    font-size: 13px;
    line-height: 1.65;
  }

  .exam-word-detail-note {
    padding: 25px 0 12px;
    color: #7b8e87;
    font-size: 13px;
    line-height: 1.65;
  }

  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn.is-entering,
  .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn.is-entering:hover {
    border-color: #a7cabd !important;
    color: #1d604f !important;
    background: #e6f1ec !important;
    cursor: wait;
  }

  .wordbook-theme #examWordbankEntryBtn.is-entering .wordbook-commandbar-exam-state::before {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border: 1.5px solid rgba(37, 116, 95, 0.22);
    border-top-color: #25745f;
    border-radius: 50%;
    content: "";
    animation: exam-entry-spin 650ms linear infinite;
  }

  .exam-access-modal {
    padding: 24px;
    background: rgba(19, 33, 28, 0.24);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .exam-access-card {
    position: relative;
    width: min(860px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    overflow: auto;
    border: 1px solid #d5e3de;
    border-radius: 19px;
    color: #35594d;
    background: #ffffff;
    box-shadow: 0 28px 76px rgba(23, 61, 49, 0.2);
  }

  .exam-access-close {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 20px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #71867e;
    background: transparent;
    box-shadow: none;
    font-size: 27px;
    font-weight: 300;
    line-height: 30px;
    cursor: pointer;
  }

  .exam-access-close:hover,
  .exam-access-close:focus-visible {
    color: #1d604f;
    background: #e9f2ee;
    outline: 0;
  }

  .exam-access-head {
    padding: 29px 34px 25px;
    border-bottom: 1px solid #dfe9e5;
    background: #f6faf8;
  }

  .exam-access-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #628076;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.13em;
  }

  .exam-access-kicker span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #25745f;
  }

  .exam-access-head h3 {
    margin: 9px 0 7px;
    color: #173d31;
    font-size: 28px;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
  }

  .exam-access-head p {
    margin: 0;
    color: #71867e;
    font-size: 13px;
    line-height: 1.6;
  }

  .exam-access-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(260px, 0.76fr);
    align-items: stretch;
  }

  .exam-access-form {
    padding: 27px 32px 28px;
  }

  .exam-access-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
  }

  .exam-access-section-head > span {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: #327a65;
    font-size: 10px;
    font-weight: 760;
  }

  .exam-access-section-head > div {
    display: grid;
    gap: 3px;
  }

  .exam-access-section-head strong {
    color: #294c40;
    font-size: 14px;
    font-weight: 720;
  }

  .exam-access-section-head small {
    color: #879991;
    font-size: 11px;
  }

  .exam-access-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 17px;
  }

  .exam-access-field,
  .exam-access-code {
    display: grid;
    gap: 7px;
  }

  .exam-access-field > span,
  .exam-access-code > span {
    color: #61786f;
    font-size: 11px;
    font-weight: 680;
  }

  .exam-access-field select,
  .exam-access-code input {
    width: 100%;
    min-height: 43px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid #d3e1dc;
    border-radius: 9px;
    color: #294c40;
    background-color: #ffffff;
    box-shadow: none;
    font-size: 13px;
  }

  .exam-access-field select:focus,
  .exam-access-code input:focus {
    border-color: #8ab9a9;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 116, 95, 0.09);
  }

  .exam-access-field select:disabled {
    color: #9aa9a4;
    background: #f1f5f3;
    opacity: 1;
  }

  .exam-access-code-block {
    margin-top: 24px;
    padding-top: 23px;
    border-top: 1px solid #e3ebe8;
  }

  .exam-access-code {
    margin-top: 17px;
  }

  .exam-access-code input {
    min-height: 47px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0.035em;
  }

  .exam-access-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 24px;
  }

  .exam-access-actions .btn {
    min-width: 104px;
    min-height: 41px;
    padding: 0 16px;
    border: 1px solid #25745f !important;
    border-radius: 9px;
    color: #ffffff !important;
    background: #25745f !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 680;
    transform: none;
  }

  .exam-access-actions .btn:hover {
    border-color: #1d604f !important;
    background: #1d604f !important;
    transform: none;
  }

  .exam-access-actions .btn.secondary {
    border-color: #d1dfda !important;
    color: #526d64 !important;
    background: #ffffff !important;
  }

  .exam-access-actions .btn.secondary:hover {
    border-color: #afcbc0 !important;
    color: #1d604f !important;
    background: #edf5f1 !important;
  }

  .exam-access-guide {
    display: flex;
    flex-direction: column;
    padding: 29px 27px;
    border-left: 1px solid #dce7e2;
    background: #eef5f2;
  }

  .exam-access-guide-mark {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #2f7a63;
    background: #dcebe5;
  }

  .exam-access-guide-mark svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .exam-access-guide-label {
    margin-top: 20px;
    color: #688178;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.12em;
  }

  .exam-access-guide h4 {
    margin: 7px 0 17px;
    color: #244b3e;
    font-size: 18px;
    font-weight: 720;
    line-height: 1.4;
    letter-spacing: -0.02em;
  }

  .exam-access-guide-list {
    display: grid;
  }

  .exam-access-guide-list > div {
    display: grid;
    gap: 4px;
    padding: 13px 0;
    border-top: 1px solid #d5e4de;
  }

  .exam-access-guide-list strong {
    color: #345b4e;
    font-size: 12px;
  }

  .exam-access-guide-list span {
    color: #71867e;
    font-size: 11px;
    line-height: 1.6;
  }

  .exam-access-guide > p {
    display: flex;
    gap: 8px;
    margin: auto 0 0;
    padding-top: 20px;
    color: #647d74;
    font-size: 11px;
    line-height: 1.6;
  }

  .exam-access-guide > p i {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #3d8a72;
  }

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

  @keyframes learn-session-pulse {
    from { opacity: 0.4; transform: scaleX(0.55); }
    to { opacity: 1; transform: scaleX(1); }
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  :is(.wordbook-theme, .favorites-page) .topbar-inner {
    grid-template-columns: minmax(170px, auto) 1fr auto;
    gap: 12px;
  }

  :is(.wordbook-theme, .favorites-page) .brand span {
    display: none;
  }

  :is(.wordbook-theme, .favorites-page) .user-identity {
    display: none;
  }

  .wordbook-theme .wordbook-library-shell {
    --wordbook-group-rail-width: 190px;
  }

  .wordbook-workspace {
    grid-template-columns: var(--wordbook-group-rail-width, 190px) minmax(0, 1fr);
  }

  .wordbook-theme .main:has(.exam-library-page) {
    width: min(100% - 36px, 1440px);
    padding-top: 32px;
  }

  .exam-library-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }

  .exam-library-actions {
    justify-content: flex-start;
  }

  .exam-library-workspace {
    grid-template-columns: 196px minmax(0, 1fr);
  }

  .exam-library-content {
    padding: 0 18px;
  }

  .exam-library-row {
    grid-template-columns: 34px minmax(190px, 1.25fr) minmax(115px, 0.7fr) 74px 16px;
    gap: 10px;
  }

  .exam-library-row-meta > span {
    max-width: 120px;
  }

  .exam-access-layout {
    grid-template-columns: 1fr;
  }

  .exam-access-guide {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    border-top: 1px solid #dce7e2;
    border-left: 0;
  }

  .exam-access-guide-mark {
    grid-row: 1 / span 3;
  }

  .exam-access-guide-label,
  .exam-access-guide h4 {
    margin-top: 0;
  }

  .exam-access-guide-list,
  .exam-access-guide > p {
    grid-column: 1 / -1;
  }

  .exam-access-guide > p {
    margin-top: 8px;
  }

  .wordbook-theme .wordbook-commandbar {
    grid-template-columns: minmax(200px, 1fr) auto auto;
    gap: 10px;
  }

  .wordbook-theme .wordbook-commandbar-label {
    display: none;
  }

  .wordbook-theme .wordbook-commandbar-study {
    padding-left: 10px;
  }

  .learn-session-head {
    gap: 24px;
  }

  .learn-session-stats > span {
    min-width: 88px;
    padding: 0 14px;
  }

  .learn-theme .learn-card,
  .learn-theme .exam-learn-card {
    height: 390px;
    min-height: 390px;
  }

  .learn-theme .learn-inner,
  .learn-theme .exam-learn-card .learn-inner {
    min-height: 390px;
  }

  .learn-theme .learn-front,
  .learn-theme .learn-back {
    padding: 32px;
  }

  .wordbook-library-content {
    padding-right: 18px;
    padding-left: 18px;
  }

  .wordbook-theme .wordbook-list-head,
  .wordbook-theme .wordbook-row {
    grid-template-columns: minmax(210px, 1.5fr) minmax(92px, 0.65fr) minmax(92px, 0.62fr) minmax(100px, 0.72fr) 30px;
    gap: 10px;
  }

  .wordbook-theme .wordbook-list-head.is-grouping,
  .wordbook-theme .wordbook-row.is-grouping {
    grid-template-columns: 32px minmax(190px, 1.5fr) minmax(84px, 0.65fr) minmax(88px, 0.62fr) minmax(96px, 0.72fr) 30px;
  }

  .favorites-page .favorite-library-item {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 20px;
  }
}

/* One canonical desktop header shared by every authenticated route. */
@media (min-width: 769px) {
  html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }

  .topbar.shared-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #dce7e2;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 0 rgba(37, 83, 68, 0.025);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  .topbar.shared-topbar .topbar-inner {
    display: grid;
    width: min(1240px, calc(100% - 32px));
    min-height: 72px;
    margin: 0 auto;
    padding: 8px 0;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    align-items: center;
    gap: 20px;
  }

  .topbar.shared-topbar .brand,
  .topbar.shared-topbar .brand:hover {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
  }

  .topbar.shared-topbar .brand::before {
    border-color: #25745f;
    color: #ffffff;
    background: #25745f;
  }

  .topbar.shared-topbar .brand h1 {
    color: #17332b;
  }

  .topbar.shared-topbar .brand:hover h1 {
    color: #1d604f;
  }

  .topbar.shared-topbar .brand span {
    display: block;
    color: #71857e;
  }

  .topbar.shared-topbar .topbar-nav {
    display: flex;
    padding: 4px;
    align-items: center;
    justify-self: center;
    gap: 3px;
    border: 1px solid #e1ebe7;
    border-radius: 12px;
    background: #f5f8f6;
  }

  .topbar.shared-topbar .topbar-nav button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #60766e;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .topbar.shared-topbar .topbar-nav button:hover,
  .topbar.shared-topbar .topbar-nav button.is-active {
    border-color: #d2e3dc;
    color: #1d604f;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(37, 83, 68, 0.07);
    transform: none;
  }

  .topbar.shared-topbar .topbar-nav-count {
    color: #526d64;
    background: #e6efeb;
  }

  .topbar.shared-topbar .user-chip {
    display: flex;
    align-items: center;
    justify-self: end;
    flex-wrap: nowrap;
    gap: 9px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #17332b;
    background: transparent;
    width: 230px;
    min-width: 230px;
    justify-content: flex-end;
    box-sizing: border-box;
  }

  .topbar.shared-topbar .user-identity {
    display: grid;
    width: 167px;
    min-width: 167px;
    margin: 0;
    padding: 0 13px 0 0;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border-right: 1px solid #dce7e2;
  }

  .topbar.shared-topbar .user-account-copy {
    display: grid;
    width: 114px;
    min-width: 114px;
    overflow: hidden;
  }

  .topbar.shared-topbar .user-account-mark {
    border-color: #cfe1da;
    color: #1d604f;
    background: #edf5f1;
  }

  .topbar.shared-topbar .user-account-mark.is-member {
    border-color: #c9a653;
    color: #f5d37d;
    background:
      radial-gradient(circle at 30% 15%, rgba(255, 224, 149, 0.26), transparent 34%),
      linear-gradient(145deg, #2e765f, #174b3d);
    box-shadow:
      inset 0 1px 0 rgba(255, 235, 184, 0.24),
      inset 0 -1px 0 rgba(10, 61, 47, 0.28),
      0 4px 10px rgba(28, 91, 72, 0.16);
  }

  .topbar.shared-topbar .user-name {
    overflow: hidden;
    color: #17332b !important;
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar.shared-topbar .user-membership,
  .topbar.shared-topbar .user-level-line,
  .topbar.shared-topbar .user-level-next {
    overflow: hidden;
    color: #6f837b !important;
    font-size: 11px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar.shared-topbar .user-membership.active {
    color: #25745f !important;
  }

  .topbar.shared-topbar .user-chip .topbar-settings-btn,
  .topbar.shared-topbar .user-chip .btn.topbar-settings-btn,
  .topbar.shared-topbar .user-chip .btn.secondary.topbar-settings-btn {
    min-height: 38px;
    width: 54px;
    min-width: 54px;
    flex: 0 0 54px;
    padding: 0 13px;
    border: 1px solid #d7e4df !important;
    border-radius: 8px;
    color: #526d64 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: none;
  }

  .topbar.shared-topbar .user-chip .topbar-settings-btn:hover,
  .topbar.shared-topbar .user-chip .topbar-settings-btn.is-active {
    border-color: #a9cdbf !important;
    color: #1d604f !important;
    background: #e7f1ed !important;
    box-shadow: none !important;
    transform: none;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .topbar.shared-topbar .topbar-inner {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .topbar.shared-topbar .brand span {
    display: none;
  }

  .topbar.shared-topbar .topbar-nav button {
    padding: 0 10px;
  }

  .topbar.shared-topbar .user-identity {
    width: 30px;
    min-width: 30px;
    grid-template-columns: 30px;
    padding-right: 0;
    border-right: 0;
  }

  .topbar.shared-topbar .user-account-copy {
    display: none;
  }

  .topbar.shared-topbar .user-chip {
    width: 93px;
    min-width: 93px;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  .favorites-page .favorite-library-item,
  .wordbook-theme .wordbook-row,
  .wordbook-theme .wordbook-commandbar .btn {
    transition-duration: 1ms !important;
    transform: none !important;
  }

  .learn-theme .learn-inner,
  .learn-session-progress span,
  .learn-session-loading span {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* Final cascade lock for the shared desktop header and Settings layout. */
@media (min-width: 769px) {
  .settings-theme .settings-primary-column {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .topbar-nav {
    border-color: var(--skin-line) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .topbar-nav button {
    border-color: transparent !important;
    color: var(--skin-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .topbar-nav button:is(:hover, .is-active) {
    border-color: var(--skin-line) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-surface) !important;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--skin-line) 55%, transparent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .user-chip .topbar-settings-btn,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .user-chip .btn.topbar-settings-btn,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .user-chip .btn.secondary.topbar-settings-btn {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .user-chip .topbar-settings-btn:is(:hover, .is-active) {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .settings-theme .settings-sync-panel .sync-panel-head span {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .settings-theme .settings-sync-panel .sync-progress-track {
    background: var(--skin-line) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .brand,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .brand h1 {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app > .app-shell > .topbar.shared-topbar .brand span {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app .app-shell :is(input, select, textarea) {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    caret-color: var(--skin-accent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) #app .app-shell :is(input, textarea)::placeholder {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .home-theme :is(.paper-journal-line, .paper-publication-row .meta-journal, .paper-publication-row .meta-time) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .home-theme .paper-journal-icon::before,
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .home-theme .paper-journal-icon::after {
    border-color: var(--skin-accent) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .home-theme .card-title-translate-btn {
    border-color: var(--skin-line) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .home-theme .focus-stage > .focus-paper {
    border-color: var(--skin-line-strong) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme :is(.wordbook-workspace, .wordbook-library-content) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface) !important;
    box-shadow: var(--skin-shadow) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme .wordbook-group-rail {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme :is(
    .wordbook-library-head,
    .wordbook-library-content-head,
    .wordbook-group-item.is-all,
    .wordbook-group-rail-note,
    .wordbook-commandbar-study,
    .wordbook-library-stats > span
  ) {
    border-color: var(--skin-line) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme :is(
    .wordbook-library-head h1,
    .wordbook-library-content-head h2,
    .wordbook-library-stats strong,
    .wordbook-group-rail-head
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme :is(
    .wordbook-library-head p,
    .wordbook-library-content-head p,
    .wordbook-library-stats small,
    .wordbook-section-label,
    .wordbook-commandbar-label,
    .wordbook-group-rail-note
  ) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme .wordbook-group-filter-btn.is-active[class*="wordbook-group-badge--"] {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme .wordbook-group-filter-btn:hover {
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme .wordbook-commandbar #examWordbankEntryBtn:not(.is-locked),
  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme .wordbook-commandbar .btn.secondary {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .wordbook-theme :is(.icon-action-btn, .audio-icon-btn, .wordbook-row-curve, .wordbook-curve-btn, .delete-icon-btn, .wordbook-manage-group-btn, .btn-export-glass) {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin="ocean"] #app > .app-shell > .topbar.shared-topbar .brand::before {
    border-color: var(--skin-accent) !important;
    color: #fff !important;
    background: var(--skin-accent) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--skin-accent) 22%, transparent) !important;
  }

  html[data-desktop-skin="ocean"] .settings-theme :is(#activateCdk, #changePassword, #openHomeLeaderboardBtn),
  html[data-desktop-skin="ocean"] .home-theme .panel-toolbar .btn:not(.secondary),
  html[data-desktop-skin="ocean"] .wordbook-theme .wordbook-commandbar .btn-learn-new,
  html[data-desktop-skin="ocean"] .favorites-page .category-btn.active,
  html[data-desktop-skin="ocean"] .detail-theme .detail-sentence-nav :is(#detailNextSentence, #detailCompleteBtn:not(.secondary)) {
    border-color: var(--skin-accent) !important;
    color: #fff !important;
    background: var(--skin-accent) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-accent) 20%, transparent) !important;
  }

  html[data-desktop-skin="ocean"] .settings-theme .settings-sync-panel .sync-progress-fill {
    background: linear-gradient(90deg, var(--skin-accent), #65a4ba) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme :is(
    .admin-overview-card,
    .admin-overview-context,
    .admin-table-wrap,
    .admin-toolbar,
    .admin-create-form,
    .admin-create-guide,
    .admin-filter-tabs,
    .admin-table-wrap > .pagination,
    .admin-live-note
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface) !important;
    box-shadow: var(--skin-shadow) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme :is(.admin-batch-bar, .admin-table th, .admin-page-nav) {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme .admin-nav-btn {
    color: var(--skin-muted) !important;
    background: transparent !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme .admin-nav-btn:is(:hover, .is-active) {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-surface) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme :is(
    .admin-overview-value,
    .admin-overview-context span,
    .admin-account-cell strong,
    .admin-stack-cell strong,
    .admin-selection-copy > strong,
    .admin-create-guide h3
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme :is(
    .admin-overview-title,
    .admin-overview-foot,
    .admin-overview-context small,
    .admin-field > span,
    .admin-selection-copy > span,
    .admin-batch-days-label,
    .admin-table,
    .admin-id-cell,
    .admin-stack-cell > span:not(.admin-status)
  ) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme :is(.admin-refresh-btn, .admin-batch-btn, .admin-row-action) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme .admin-danger-btn {
    border-color: color-mix(in srgb, var(--skin-danger) 38%, var(--skin-line)) !important;
    color: var(--skin-danger) !important;
    background: var(--skin-danger-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme :is(.admin-role-badge, .admin-status, .admin-protected-label) {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .admin-theme :is(.admin-status.is-online, .admin-status.is-unused, .admin-role-badge.is-admin) {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .settings-theme .settings-primary-column {
    grid-template-rows: auto auto auto !important;
  }
}

/* Desktop leaderboard: stable header entry and metallic top-three crowns. */
@media (min-width: 769px) {
  .topbar.shared-topbar .user-chip.has-home-leaderboard {
    width: 326px;
    min-width: 326px;
  }

  .topbar-leaderboard-btn {
    display: inline-flex;
    min-width: 78px;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #d7e4df;
    border-radius: 8px;
    color: #36574c;
    background: #ffffff;
    box-shadow: none;
    font-size: 12px;
    font-weight: 680;
    transform: none;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  }

  .topbar-leaderboard-btn:hover,
  .topbar-leaderboard-btn[aria-expanded="true"] {
    border-color: #b8d2c8;
    color: #1d604f;
    background: #edf5f1;
    box-shadow: none;
    transform: none;
  }

  .topbar-leaderboard-btn b {
    color: #25745f;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  .topbar-leaderboard-crown {
    position: relative;
    display: block;
    width: 16px;
    height: 14px;
    flex: 0 0 auto;
  }

  .topbar-leaderboard-crown::before {
    position: absolute;
    inset: 1px 1px 3px;
    border-radius: 2px;
    background: linear-gradient(135deg, #f6da84, #c18a18 68%, #8e5e08);
    clip-path: polygon(0 18%, 24% 48%, 35% 0, 50% 48%, 65% 0, 76% 48%, 100% 18%, 88% 100%, 12% 100%);
    content: "";
    filter: drop-shadow(0 2px 3px rgba(150, 99, 9, 0.2));
  }

  .topbar-leaderboard-crown::after {
    position: absolute;
    right: 2px;
    bottom: 0;
    left: 2px;
    height: 3px;
    border-radius: 1px;
    background: #bd8415;
    content: "";
  }

  .home-theme .home-leaderboard-float {
    top: 82px;
    right: max(18px, calc((100vw - 1240px) / 2 + 16px));
    bottom: auto;
    align-items: flex-end;
  }

  .home-theme .home-leaderboard-pill {
    display: none;
  }

  .home-theme .home-leaderboard-bubble {
    transform-origin: top right;
    animation: leaderboard-panel-enter 190ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes leaderboard-panel-enter {
    from { opacity: 0; transform: translateY(-5px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .leaderboard-crown {
    --crown-light: #ffe69a;
    --crown-mid: #d2a02c;
    --crown-dark: #9c690b;
    position: relative;
    display: inline-block;
    width: 21px;
    height: 17px;
    flex: 0 0 auto;
  }

  .leaderboard-crown::before {
    position: absolute;
    inset: 1px 1px 4px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--crown-light), var(--crown-mid) 62%, var(--crown-dark));
    clip-path: polygon(0 18%, 24% 50%, 35% 0, 50% 50%, 65% 0, 76% 50%, 100% 18%, 88% 100%, 12% 100%);
    content: "";
    filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--crown-dark) 28%, transparent));
  }

  .leaderboard-crown::after {
    position: absolute;
    right: 2px;
    bottom: 0;
    left: 2px;
    height: 4px;
    border: 1px solid color-mix(in srgb, var(--crown-dark) 58%, transparent);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--crown-dark), var(--crown-mid), var(--crown-light), var(--crown-mid));
    content: "";
  }

  .leaderboard-crown.is-rank-2 {
    --crown-light: #f2f6f7;
    --crown-mid: #aab7be;
    --crown-dark: #697881;
  }

  .leaderboard-crown.is-rank-3 {
    --crown-light: #ebb083;
    --crown-mid: #ae6e42;
    --crown-dark: #75401f;
  }

  .home-theme .home-leaderboard-item {
    grid-template-columns: 58px minmax(0, 1fr) auto;
  }

  .home-theme .home-leaderboard-rank {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
  }

  .home-theme .home-leaderboard-rank b {
    color: #526d64;
    font-size: 11px;
  }

  .home-theme .home-leaderboard-item.is-top-1 {
    border-color: rgba(202, 151, 35, 0.34);
    background: linear-gradient(90deg, rgba(255, 235, 170, 0.28), rgba(255, 255, 255, 0.72));
  }

  .home-theme .home-leaderboard-item.is-top-2 {
    border-color: rgba(141, 158, 168, 0.28);
    background: linear-gradient(90deg, rgba(222, 231, 234, 0.42), rgba(255, 255, 255, 0.72));
  }

  .home-theme .home-leaderboard-item.is-top-3 {
    border-color: rgba(166, 100, 58, 0.26);
    background: linear-gradient(90deg, rgba(235, 177, 134, 0.26), rgba(255, 255, 255, 0.72));
  }

  .leaderboard-podium-rank {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .leaderboard-podium-rank .leaderboard-crown {
    width: 27px;
    height: 21px;
  }

  .leaderboard-podium-rank b {
    color: #526d64;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .leaderboard-full-rank {
    min-width: 52px;
    gap: 6px;
  }

  .leaderboard-full-rank .leaderboard-crown {
    width: 18px;
    height: 15px;
  }

  .leaderboard-full-row.is-top-1,
  .leaderboard-full-row.is-top-2,
  .leaderboard-full-row.is-top-3 {
    border-radius: 9px;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar-leaderboard-btn {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .topbar-leaderboard-btn:is(:hover, [aria-expanded="true"]) {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .home-theme .home-leaderboard-item.is-top-1 {
    background: linear-gradient(90deg, rgba(166, 119, 25, 0.18), var(--skin-surface-raised)) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .home-theme .home-leaderboard-item.is-top-2 {
    background: linear-gradient(90deg, rgba(130, 149, 158, 0.15), var(--skin-surface-raised)) !important;
  }

  html[data-desktop-skin]:not([data-desktop-skin="light"]) .home-theme .home-leaderboard-item.is-top-3 {
    background: linear-gradient(90deg, rgba(155, 87, 47, 0.16), var(--skin-surface-raised)) !important;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  .topbar.shared-topbar .user-chip.has-home-leaderboard {
    width: 159px;
    min-width: 159px;
  }

  .topbar-leaderboard-btn {
    min-width: 66px;
    padding: 0 8px;
  }

  .topbar-leaderboard-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  .home-theme .home-leaderboard-bubble {
    animation: none !important;
  }
}

/*
 * Desktop comfort skin v2
 * One semantic surface and control system for every authenticated desktop
 * route. This final cascade intentionally replaces page-local white fills so
 * light, dark and ocean skins remain coherent. Mobile stays untouched.
 */
@media (min-width: 769px) {
  html[data-desktop-skin="light"] {
    --skin-bg: #f2f6f4;
    --skin-surface: #fbfdfc;
    --skin-surface-raised: #f6faf8;
    --skin-surface-soft: #eaf3ef;
    --skin-line: #d7e4df;
    --skin-line-strong: #b9d0c7;
    --skin-ink: #17352c;
    --skin-muted: #657b73;
    --skin-accent: #287660;
    --skin-accent-hover: #1e5f4e;
    --skin-accent-soft: #e4f0eb;
    --skin-on-accent: #ffffff;
    --skin-danger: #984754;
    --skin-danger-soft: #f8edef;
    --skin-overlay: rgba(19, 42, 34, 0.28);
    --skin-shadow: 0 18px 48px rgba(35, 79, 64, 0.07);
    --skin-shadow-modal: 0 30px 90px rgba(26, 65, 52, 0.2);
  }

  html[data-desktop-skin="dark"] {
    --skin-bg: #07100d;
    --skin-surface: #0e1a16;
    --skin-surface-raised: #13231d;
    --skin-surface-soft: #183027;
    --skin-line: #263d35;
    --skin-line-strong: #3a5b4f;
    --skin-ink: #edf5f1;
    --skin-muted: #97aaa2;
    --skin-accent: #6fc8aa;
    --skin-accent-hover: #91ddc2;
    --skin-accent-soft: #193a2f;
    --skin-on-accent: #07100d;
    --skin-danger: #efa0aa;
    --skin-danger-soft: #321f23;
    --skin-overlay: rgba(2, 9, 7, 0.64);
    --skin-shadow: 0 22px 56px rgba(0, 0, 0, 0.25);
    --skin-shadow-modal: 0 34px 100px rgba(0, 0, 0, 0.5);
  }

  html[data-desktop-skin="ocean"] {
    --skin-bg: #edf3f6;
    --skin-surface: #f9fcfd;
    --skin-surface-raised: #f3f8fa;
    --skin-surface-soft: #e2eef2;
    --skin-line: #ccdde4;
    --skin-line-strong: #a7c3cf;
    --skin-ink: #17323e;
    --skin-muted: #637c87;
    --skin-accent: #326f88;
    --skin-accent-hover: #24586e;
    --skin-accent-soft: #dcebf1;
    --skin-on-accent: #ffffff;
    --skin-danger: #9c4855;
    --skin-danger-soft: #f7edef;
    --skin-overlay: rgba(19, 46, 58, 0.29);
    --skin-shadow: 0 19px 50px rgba(38, 79, 96, 0.09);
    --skin-shadow-modal: 0 32px 94px rgba(24, 63, 79, 0.23);
  }

  html[data-desktop-skin] body.desktop-space-ui,
  html[data-desktop-skin] body.desktop-space-ui :is(
    .app-shell,
    .home-theme,
    .settings-theme,
    .detail-theme,
    .wordbook-theme,
    .favorites-page,
    .completed-page,
    .admin-theme,
    .learn-theme
  ) {
    color: var(--skin-ink) !important;
    background-color: var(--skin-bg) !important;
  }

  html[data-desktop-skin] .global-beian-footer {
    color: var(--skin-muted) !important;
    background: var(--skin-bg) !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar {
    border-bottom-color: var(--skin-line) !important;
    background: color-mix(in srgb, var(--skin-surface) 94%, transparent) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--skin-line) 52%, transparent) !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar .topbar-nav {
    border-color: var(--skin-line) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--skin-surface) 80%, transparent) !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar .topbar-nav button {
    border-color: transparent !important;
    color: var(--skin-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar .topbar-nav button:is(:hover, .is-active) {
    border-color: var(--skin-line) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-surface) !important;
    box-shadow: 0 2px 7px color-mix(in srgb, var(--skin-line) 46%, transparent) !important;
    transform: none !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar :is(
    .brand h1,
    .user-name
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar :is(
    .brand span,
    .user-membership,
    .user-level-line,
    .user-level-next
  ) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar :is(
    .user-identity,
    .user-account-mark
  ) {
    border-color: var(--skin-line) !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar :is(
    .topbar-settings-btn,
    .topbar-leaderboard-btn
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html[data-desktop-skin] #app > .app-shell > .topbar.shared-topbar :is(
    .topbar-settings-btn,
    .topbar-leaderboard-btn
  ):is(:hover, .is-active, [aria-expanded="true"]) {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  /* Surface lock: no route may reintroduce an isolated pure-white sheet. */
  html[data-desktop-skin] :is(
    .panel-toolbar,
    .paper-item,
    .focus-paper,
    .home-leaderboard-bubble,
    .settings-card,
    .settings-control-column,
    .settings-sync-panel,
    .settings-leaderboard-card,
    .settings-appearance-panel,
    .detail-paper-head,
    .detail-navigation,
    .detail-reading-shell,
    .detail-reading-panel,
    .detail-sentence-card,
    .favorites-library-shell,
    .favorite-library-item,
    .admin-workspace,
    .admin-card,
    .admin-overview-card,
    .admin-overview-context,
    .admin-toolbar,
    .admin-table-wrap,
    .admin-create-form,
    .admin-create-guide,
    .admin-filter-tabs,
    .admin-page-nav,
    .study-center-shell,
    .study-checkin-panel,
    .study-free-panel,
    .learn-session-shell,
    .learn-card,
    .exam-learn-card,
    .exam-library-page,
    .exam-library-workspace,
    .exam-library-content
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background-color: var(--skin-surface) !important;
    box-shadow: var(--skin-shadow) !important;
  }

  html[data-desktop-skin] :is(
    .settings-progress-metrics,
    .settings-danger-section,
    .detail-sentence-position,
    .detail-highlight-legend,
    .admin-table th,
    .admin-batch-bar,
    .study-checkin-stats,
    .learn-front,
    .learn-back,
    .exam-learn-front,
    .exam-learn-back
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
  }

  /* Wordbook uses two related tones instead of a white sheet on a tinted page. */
  html[data-desktop-skin] .wordbook-theme .wordbook-library-shell {
    color: var(--skin-ink) !important;
    background: transparent !important;
  }

  html[data-desktop-skin] .wordbook-theme .wordbook-workspace {
    border-color: var(--skin-line) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: var(--skin-shadow) !important;
  }

  html[data-desktop-skin] .wordbook-theme .wordbook-group-rail {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface-soft) !important;
  }

  html[data-desktop-skin] .wordbook-theme .wordbook-library-content {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-theme #exportBtn {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-theme #exportBtn:hover {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-theme #examWordbankEntryBtn:not(.is-locked) .wordbook-commandbar-exam-copy strong,
  html[data-desktop-skin] body.desktop-space-ui .wordbook-theme #examWordbankEntryBtn:not(.is-locked) .wordbook-commandbar-exam-state {
    color: var(--skin-accent-hover) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-theme #examWordbankEntryBtn:not(.is-locked) .wordbook-commandbar-exam-copy small {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin] .wordbook-theme :is(.wordbook-list-head, .wordbook-row) {
    border-color: var(--skin-line) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin] .wordbook-theme .wordbook-row:is(:hover, .is-selected) {
    border-color: var(--skin-line-strong) !important;
    background: var(--skin-accent-soft) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin] .wordbook-theme :is(
    .wordbook-library-head h1,
    .wordbook-library-content-head h2,
    .wordbook-library-stats strong,
    .wordbook-row-word,
    .wordbook-group-rail-head
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin] .wordbook-theme :is(
    .wordbook-library-head p,
    .wordbook-library-content-head p,
    .wordbook-library-stats small,
    .wordbook-section-label,
    .wordbook-commandbar-label,
    .wordbook-group-rail-note,
    .wordbook-row-meaning,
    .wordbook-row-mastery
  ) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin] .wordbook-theme .wordbook-commandbar {
    border-color: var(--skin-line) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Form controls share height, radius and calm focus feedback. */
  html[data-desktop-skin] body.desktop-space-ui :is(input, select, textarea) {
    border-color: var(--skin-line-strong) !important;
    border-radius: 10px !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    caret-color: var(--skin-accent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--skin-surface) 72%, transparent) !important;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(input, textarea)::placeholder {
    color: color-mix(in srgb, var(--skin-muted) 82%, transparent) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(input, select, textarea):focus {
    outline: 0 !important;
    border-color: var(--skin-accent) !important;
    background: var(--skin-surface) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 15%, transparent) !important;
  }

  /* Shared button rhythm. Specialist icon controls remain visually quiet. */
  html[data-desktop-skin] body.desktop-space-ui button {
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .btn,
    .category-btn,
    .wordbook-manage-group-btn,
    .wordbook-create-group-btn,
    .admin-refresh-btn,
    .admin-batch-btn,
    .admin-create-btn,
    .admin-row-action,
    .admin-nav-btn,
    .journal-picker-toggle,
    .study-checkin-btn,
    .home-leaderboard-full-btn,
    .leaderboard-pagination button,
    .leaderboard-full-error button
  ) {
    min-height: 40px;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 680;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .btn.secondary,
    .category-btn,
    .wordbook-manage-group-btn,
    .wordbook-create-group-btn,
    .admin-refresh-btn,
    .admin-batch-btn,
    .admin-row-action,
    .admin-nav-btn,
    .journal-picker-toggle,
    .home-leaderboard-mini-btn,
    .leaderboard-pagination button,
    .leaderboard-full-error button
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .btn.secondary,
    .category-btn,
    .wordbook-manage-group-btn,
    .wordbook-create-group-btn,
    .admin-refresh-btn,
    .admin-batch-btn,
    .admin-row-action,
    .admin-nav-btn,
    .journal-picker-toggle,
    .home-leaderboard-mini-btn,
    .leaderboard-pagination button,
    .leaderboard-full-error button
  ):hover {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .btn:not(.secondary),
    .study-checkin-btn,
    .home-leaderboard-full-btn,
    .admin-create-btn,
    #activateCdk,
    #changePassword,
    #openHomeLeaderboardBtn,
    #detailNextSentence,
    #detailCompleteBtn
  ) {
    border-color: var(--skin-accent) !important;
    color: var(--skin-on-accent) !important;
    background: var(--skin-accent) !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--skin-accent) 18%, transparent) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .btn:not(.secondary),
    .study-checkin-btn,
    .home-leaderboard-full-btn,
    .admin-create-btn,
    #activateCdk,
    #changePassword,
    #openHomeLeaderboardBtn,
    #detailNextSentence,
    #detailCompleteBtn
  ):hover:not(:disabled) {
    border-color: var(--skin-accent-hover) !important;
    color: var(--skin-on-accent) !important;
    background: var(--skin-accent-hover) !important;
    box-shadow: 0 11px 26px color-mix(in srgb, var(--skin-accent) 22%, transparent) !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui button:active:not(:disabled) {
    transform: scale(0.985) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui button:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 18%, transparent) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui button:disabled {
    cursor: not-allowed !important;
    opacity: 0.5;
    box-shadow: none !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .admin-danger-btn,
    .deleteUserBtn,
    .favorite-btn,
    .uncomplete-btn,
    #logout
  ) {
    border-color: color-mix(in srgb, var(--skin-danger) 38%, var(--skin-line)) !important;
    color: var(--skin-danger) !important;
    background: var(--skin-danger-soft) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .icon-action-btn,
    .audio-icon-btn,
    .speak-btn,
    .reading-word-speak,
    .exam-word-detail-audio,
    .learn-speak
  ) {
    border-color: transparent !important;
    color: var(--skin-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .icon-action-btn,
    .audio-icon-btn,
    .speak-btn,
    .reading-word-speak,
    .exam-word-detail-audio,
    .learn-speak
  ):hover {
    border-color: transparent !important;
    color: var(--skin-accent-hover) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-theme .btn-export-glass {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-theme .btn-export-glass:hover {
    border-color: var(--skin-line-strong) !important;
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
  }

  /* Modal shell and every current desktop dialog family. */
  html[data-desktop-skin] body.desktop-space-ui :is(
    .modal,
    .modal-backdrop,
    .home-leaderboard-modal,
    .wordbook-group-modal,
    .desktop-word-modal,
    .ebbinghaus-modal,
    .exam-word-detail-modal,
    .exam-access-modal
  ) {
    background: var(--skin-overlay) !important;
    backdrop-filter: blur(12px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(108%) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .modal-card,
    .wordbook-group-editor-card,
    .wordbook-save-choice-card,
    .reading-word-popup-card,
    .leaderboard-full-card,
    .ebbinghaus-modal-card,
    .exam-word-detail-card,
    .exam-access-card
  ) {
    border: 1px solid var(--skin-line-strong) !important;
    border-radius: 18px !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface) !important;
    box-shadow: var(--skin-shadow-modal) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-group-editor-head,
    .reading-word-popup-head,
    .leaderboard-full-head,
    .ebbinghaus-modal-head,
    .exam-word-detail-head,
    .exam-access-head
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: linear-gradient(180deg, var(--skin-surface-raised), var(--skin-surface)) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-group-editor-head h3,
    .reading-word-popup-title h3,
    .leaderboard-full-head h3,
    .ebbinghaus-modal-head h3,
    .exam-word-detail-term-line h3,
    .exam-access-head h3
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-group-editor-head p,
    .reading-word-phonetic,
    .leaderboard-full-head p,
    .ebbinghaus-modal-head p,
    .exam-word-detail-head > p,
    .exam-access-head p
  ) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-group-editor-body > label,
    .wordbook-group-color-fieldset legend,
    .wordbook-save-choice-label strong,
    .filter-item label,
    .settings-form label,
    .admin-field > span,
    .exam-access-field > label
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-group-editor-close,
    .reading-word-close,
    .leaderboard-full-close,
    .ebbinghaus-modal-close,
    .exam-word-detail-close,
    .exam-access-close
  ) {
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--skin-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-group-editor-close,
    .reading-word-close,
    .leaderboard-full-close,
    .ebbinghaus-modal-close,
    .exam-word-detail-close,
    .exam-access-close
  ):hover {
    color: var(--skin-accent-hover) !important;
    background: var(--skin-accent-soft) !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-group-editor-body,
    .wordbook-move-group-body,
    .wordbook-save-choice-body,
    .reading-word-popup-body,
    .leaderboard-full-body,
    .ebbinghaus-modal-body,
    .exam-word-detail-body,
    .exam-access-body
  ) {
    color: var(--skin-ink) !important;
    background: var(--skin-surface) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-group-editor-actions,
  html[data-desktop-skin] body.desktop-space-ui .leaderboard-full-footer {
    border-color: var(--skin-line) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .reading-word-section,
    .exam-word-detail-body section,
    .leaderboard-full-row
  ) {
    border-color: var(--skin-line) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .reading-word-section p,
    .reading-word-meaning,
    .exam-word-detail-body p,
    .leaderboard-full-person > span
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .reading-word-label,
    .reading-word-example-zh,
    .exam-word-detail-body section > span,
    .exam-word-detail-example small,
    .leaderboard-full-person > small,
    .leaderboard-full-footer p
  ) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-save-choice-preview,
    .ebbinghaus-summary,
    .ebbinghaus-chart-panel,
    .ebbinghaus-records,
    .exam-word-detail-facts > span,
    .leaderboard-podium-place,
    .leaderboard-my-rank
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .reading-word-status {
    border-color: var(--skin-line) !important;
    color: var(--skin-muted) !important;
    background: var(--skin-surface-raised) !important;
  }

  /* Group colour choices remain identifiable without becoming white tiles. */
  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-group-color-option,
    .wordbook-move-group-option
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-group-color-option:has(input:checked) {
    border-color: var(--picker-line) !important;
    color: var(--picker-color) !important;
    background: var(--picker-soft) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-move-group-option:is(:hover, :has(input:checked)) {
    border-color: var(--move-group-line) !important;
    background: var(--move-group-soft) !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-move-group-option-copy strong,
    .wordbook-save-choice-preview > strong
  ) {
    color: var(--skin-ink) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .wordbook-move-group-option-copy small,
    .wordbook-save-choice-label span
  ) {
    color: var(--skin-muted) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-move-group-option-check {
    border-color: var(--skin-line-strong) !important;
    background: var(--skin-surface) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .wordbook-move-group-option:has(input:checked) .wordbook-move-group-option-check {
    border-color: var(--move-group-color) !important;
    color: #ffffff !important;
    background: var(--move-group-color) !important;
  }

  html[data-desktop-skin="dark"] body.desktop-space-ui .wordbook-group-color-option {
    --picker-line: color-mix(in srgb, var(--picker-color) 48%, var(--skin-line));
    --picker-soft: color-mix(in srgb, var(--picker-color) 16%, var(--skin-surface-raised));
  }

  html[data-desktop-skin="dark"] body.desktop-space-ui .wordbook-move-group-option {
    --move-group-line: color-mix(in srgb, var(--move-group-color) 46%, var(--skin-line));
    --move-group-soft: color-mix(in srgb, var(--move-group-color) 14%, var(--skin-surface-raised));
  }

  html[data-desktop-skin] body.desktop-space-ui .leaderboard-full-tabs {
    border-color: var(--skin-line) !important;
    background: var(--skin-surface) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .leaderboard-full-tabs button {
    color: var(--skin-muted) !important;
    background: transparent !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .leaderboard-full-tabs button.is-active {
    border-bottom-color: var(--skin-accent) !important;
    color: var(--skin-accent-hover) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .leaderboard-full-row.is-current-user {
    border-color: var(--skin-line-strong) !important;
    background: var(--skin-accent-soft) !important;
  }

  html[data-desktop-skin] body.desktop-space-ui .leaderboard-full-loading span {
    background: linear-gradient(90deg, var(--skin-surface-raised) 25%, var(--skin-surface-soft) 45%, var(--skin-surface-raised) 65%) !important;
    background-size: 220% 100% !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .desktop-skin-option,
    .study-mode-row,
    .exam-library-category,
    .journal-picker-option
  ) {
    border-color: var(--skin-line) !important;
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .desktop-skin-option,
    .study-mode-row,
    .exam-library-category,
    .journal-picker-option
  ):hover {
    border-color: var(--skin-line-strong) !important;
    background: var(--skin-accent-soft) !important;
    transform: none !important;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .desktop-skin-option.is-active,
    .study-mode-row.is-active,
    .exam-library-category.is-active,
    .journal-picker-option.is-active
  ) {
    border-color: var(--skin-accent) !important;
    background: var(--skin-accent-soft) !important;
  }

  /* Native scrollbars should recede into the active skin, especially inside dialogs. */
  html[data-desktop-skin] body.desktop-space-ui :is(
    .leaderboard-full-body,
    .reading-word-popup-body,
    .ebbinghaus-modal-body,
    .exam-word-detail-body,
    .exam-access-card,
    .exam-learn-back,
    .wordbook-library-content
  ) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--skin-muted) 42%, transparent) transparent;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .leaderboard-full-body,
    .reading-word-popup-body,
    .ebbinghaus-modal-body,
    .exam-word-detail-body,
    .exam-access-card,
    .exam-learn-back,
    .wordbook-library-content
  )::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .leaderboard-full-body,
    .reading-word-popup-body,
    .ebbinghaus-modal-body,
    .exam-word-detail-body,
    .exam-access-card,
    .exam-learn-back,
    .wordbook-library-content
  )::-webkit-scrollbar-track {
    background: transparent;
  }

  html[data-desktop-skin] body.desktop-space-ui :is(
    .leaderboard-full-body,
    .reading-word-popup-body,
    .ebbinghaus-modal-body,
    .exam-word-detail-body,
    .exam-access-card,
    .exam-learn-back,
    .wordbook-library-content
  )::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--skin-muted) 42%, transparent);
    background-clip: padding-box;
  }

  /* The leaderboard belongs to learning: one visible entry, one explicit rule system. */
  body.desktop-space-ui .study-leaderboard-panel {
    display: grid;
    min-height: 164px;
    padding: 22px 24px 18px;
    grid-template-columns: minmax(190px, 1.05fr) minmax(190px, 0.8fr) minmax(260px, 1.2fr) auto;
    grid-template-areas:
      "intro mine challenge action"
      "rules rules rules rules";
    align-items: center;
    gap: 18px 24px;
    border: 1px solid var(--skin-line) !important;
    border-radius: 16px;
    color: var(--skin-ink) !important;
    background: linear-gradient(145deg, var(--skin-surface), var(--skin-surface-raised)) !important;
    box-shadow: var(--skin-shadow) !important;
  }

  .study-leaderboard-intro {
    grid-area: intro;
  }

  .study-leaderboard-intro > span {
    color: var(--skin-accent-hover);
    font-size: 11px;
    font-weight: 760;
  }

  .study-leaderboard-intro h2 {
    margin: 5px 0 0;
    color: var(--skin-ink) !important;
    font-size: 24px;
    font-weight: 720;
    letter-spacing: -0.035em;
  }

  .study-leaderboard-intro p {
    margin: 7px 0 0;
    color: var(--skin-muted) !important;
    font-size: 12px;
    line-height: 1.5;
  }

  .study-leaderboard-mine {
    grid-area: mine;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--skin-line);
  }

  .study-leaderboard-mine > span {
    display: grid;
    gap: 6px;
    padding-left: 20px;
  }

  .study-leaderboard-mine small,
  .study-leaderboard-challenge small {
    color: var(--skin-muted) !important;
    font-size: 11px;
  }

  .study-leaderboard-mine strong {
    overflow: hidden;
    color: var(--skin-accent-hover) !important;
    font-size: 19px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .study-leaderboard-challenge {
    grid-area: challenge;
    display: flex;
    min-width: 0;
    padding: 12px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--skin-line);
    border-radius: 12px;
    background: var(--skin-surface-soft) !important;
  }

  .study-leaderboard-challenge > div {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .study-leaderboard-challenge strong {
    overflow: hidden;
    color: var(--skin-ink) !important;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .study-leaderboard-challenge > span {
    flex: 0 0 auto;
    color: var(--skin-accent-hover) !important;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .study-leaderboard-challenge.is-complete {
    border-color: var(--skin-line-strong);
    background: var(--skin-accent-soft) !important;
  }

  body.desktop-space-ui .study-leaderboard-open {
    grid-area: action;
    min-width: 112px;
    min-height: 42px;
  }

  .study-leaderboard-rules {
    grid-area: rules;
    display: grid;
    padding-top: 15px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid var(--skin-line);
  }

  .study-leaderboard-rules > span {
    color: var(--skin-muted) !important;
    font-size: 11px;
    line-height: 1.45;
  }

  .study-leaderboard-rules strong {
    margin-right: 4px;
    color: var(--skin-accent-hover) !important;
    font-size: 12px;
  }

  body.desktop-space-ui .leaderboard-rulebook {
    padding: 16px 26px 14px;
    border-bottom: 1px solid var(--skin-line);
    color: var(--skin-ink) !important;
    background: var(--skin-surface-raised) !important;
  }

  .leaderboard-rulebook-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .leaderboard-rulebook-head > div:first-child,
  .leaderboard-rulebook-copy {
    display: grid;
    gap: 4px;
  }

  .leaderboard-rulebook-head strong,
  .leaderboard-rulebook-copy strong {
    color: var(--skin-ink) !important;
    font-size: 13px;
  }

  .leaderboard-rulebook-head span,
  .leaderboard-rulebook-copy span,
  .leaderboard-rulebook > p {
    color: var(--skin-muted) !important;
    font-size: 10px;
    line-height: 1.5;
  }

  .leaderboard-challenge-status {
    display: grid;
    min-width: 250px;
    padding: 9px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 14px;
    border: 1px solid var(--skin-line);
    border-radius: 10px;
    background: var(--skin-surface-soft) !important;
  }

  .leaderboard-challenge-status span,
  .leaderboard-challenge-status small {
    color: var(--skin-muted) !important;
    font-size: 10px;
  }

  .leaderboard-challenge-status strong {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    color: var(--skin-accent-hover) !important;
    font-size: 12px;
    white-space: nowrap;
  }

  .leaderboard-challenge-status.is-complete {
    border-color: var(--skin-line-strong);
    background: var(--skin-accent-soft) !important;
  }

  .leaderboard-rule-grid {
    display: grid;
    margin-top: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .leaderboard-rule-grid > div {
    display: grid;
    min-width: 0;
    padding-right: 10px;
    gap: 2px;
  }

  .leaderboard-rule-grid > div + div {
    padding-left: 12px;
    border-left: 1px solid var(--skin-line);
  }

  .leaderboard-rule-grid span,
  .leaderboard-rule-grid small {
    overflow: hidden;
    color: var(--skin-muted) !important;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaderboard-rule-grid strong {
    color: var(--skin-accent-hover) !important;
    font-size: 13px;
  }

  .leaderboard-rulebook > p {
    margin: 9px 0 0;
  }

  .leaderboard-rulebook.is-total {
    padding-top: 13px;
    padding-bottom: 13px;
  }

  body.desktop-space-ui .leaderboard-full-body {
    min-height: 210px;
    max-height: calc(100dvh - 470px);
  }

  @media (max-width: 1099px) {
    body.desktop-space-ui .study-leaderboard-panel {
      grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr) auto;
      grid-template-areas:
        "intro challenge action"
        "mine mine mine"
        "rules rules rules";
    }

    .study-leaderboard-mine {
      padding-top: 14px;
      border-top: 1px solid var(--skin-line);
      border-left: 0;
    }

    .study-leaderboard-mine > span:first-child {
      padding-left: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  html[data-desktop-skin] body.desktop-space-ui *,
  html[data-desktop-skin] body.desktop-space-ui *::before,
  html[data-desktop-skin] body.desktop-space-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Single desktop theme: keep the learning leaderboard in the original clinical-white palette. */
@media (min-width: 769px) {
  html:has(#app > .app-shell),
  html:has(#app > .auth) {
    color-scheme: light;
    background: #ffffff !important;
  }

  body.desktop-space-ui {
    --skin-surface: #ffffff;
    --skin-surface-raised: #f8fbf9;
    --skin-surface-soft: #edf5f1;
    --skin-line: #dce7e2;
    --skin-line-strong: #bed2ca;
    --skin-ink: #17332b;
    --skin-muted: #687d75;
    --skin-accent: #25745f;
    --skin-accent-hover: #1d604f;
    --skin-accent-soft: #e5f0eb;
    --skin-shadow: 0 16px 42px rgba(37, 83, 68, 0.065);
    color: #17332b;
    background: #ffffff !important;
  }

  body.desktop-space-ui::before,
  body.desktop-space-ui::after {
    content: none !important;
  }

  body.desktop-space-ui #desktopParticleField {
    display: none !important;
  }

  body.desktop-space-ui :is(
    .home-theme,
    .settings-theme,
    .detail-theme,
    .wordbook-theme,
    .favorites-page,
    .completed-page,
    .admin-theme,
    .learn-theme,
    .auth
  ) {
    background-color: #ffffff !important;
  }

  body.desktop-space-ui .global-beian-footer {
    color: #71857e;
    background: #ffffff !important;
  }

  .settings-theme .settings-primary-column {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  /* Stable leaderboard composition after the single-theme rollback. */
  body.desktop-space-ui .study-leaderboard-panel {
    min-height: 0;
    padding: 20px 22px 16px;
    grid-template-columns: minmax(170px, 1.05fr) minmax(170px, 0.82fr) minmax(250px, 1.25fr) 124px;
    grid-template-areas:
      "intro mine challenge action"
      "rules rules rules rules";
    align-items: center;
    gap: 16px 20px;
    border-color: #dce7e2 !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(37, 83, 68, 0.055) !important;
  }

  body.desktop-space-ui .study-leaderboard-mine {
    min-width: 0;
    align-self: stretch;
    align-items: center;
  }

  body.desktop-space-ui .study-leaderboard-challenge {
    min-height: 58px;
  }

  body.desktop-space-ui .study-leaderboard-open {
    width: 124px;
    min-width: 124px;
    justify-self: end;
  }

  body.desktop-space-ui .study-leaderboard-rules {
    align-items: start;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  body.desktop-space-ui .study-leaderboard-panel {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
      "intro mine"
      "challenge action"
      "rules rules";
    gap: 16px 22px;
  }

  body.desktop-space-ui .study-leaderboard-mine {
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid #dce7e2;
  }

  body.desktop-space-ui .study-leaderboard-mine > span,
  body.desktop-space-ui .study-leaderboard-mine > span:first-child {
    padding-left: 18px;
  }

  body.desktop-space-ui .study-leaderboard-open {
    width: auto;
    min-width: 132px;
  }

  body.desktop-space-ui .study-leaderboard-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
  }
}

/* Learning center: primary daily task, supporting check-in, then secondary ranking. */
@media (min-width: 769px) {
  body.desktop-space-ui .study-theme .study-main {
    width: min(1160px, calc(100% - 40px));
    max-width: 1160px;
    padding-top: 30px;
  }

  body.desktop-space-ui .study-center-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(320px, 0.72fr);
    grid-template-areas:
      "head head"
      "daily checkin"
      "daily free"
      "leader leader"
      "source source";
    gap: 18px;
    align-items: stretch;
  }

  body.desktop-space-ui .study-center-head {
    grid-area: head;
    min-height: 100px;
    padding: 0 0 20px;
  }

  body.desktop-space-ui .study-center-head h1 {
    font-size: clamp(36px, 3.4vw, 44px);
  }

  body.desktop-space-ui .study-center-head p {
    margin-top: 9px;
  }

  body.desktop-space-ui .study-center-metrics > span {
    min-width: 100px;
    padding: 0 16px;
  }

  body.desktop-space-ui .study-center-layout {
    display: contents;
  }

  body.desktop-space-ui .study-daily-panel {
    grid-area: daily;
    min-height: 360px;
    padding: 30px 32px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "copy"
      "sequence"
      "action";
    gap: 22px;
    align-content: space-between;
    border-color: #cfe0d9;
    background: #ffffff;
    box-shadow: none;
  }

  body.desktop-space-ui .study-daily-copy h2 {
    margin-top: 10px;
    font-size: 34px;
  }

  body.desktop-space-ui .study-daily-copy p {
    max-width: 48ch;
    margin-top: 10px;
  }

  body.desktop-space-ui .study-daily-sequence {
    display: grid;
    min-width: 0;
    padding: 18px 20px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 18px;
    border: 1px solid #e1ebe7;
    border-radius: 12px;
    background: #f8fbf9;
  }

  body.desktop-space-ui .study-daily-sequence > div {
    min-width: 0;
  }

  body.desktop-space-ui .study-daily-sequence > div:last-child {
    padding-left: 20px;
    border-left: 1px solid #dce7e2;
  }

  body.desktop-space-ui .study-sequence-word {
    padding: 5px 10px;
    border-radius: 999px;
    color: #687d75;
    background: #edf5f1;
    white-space: nowrap;
  }

  body.desktop-space-ui .study-daily-start {
    min-width: 188px;
    min-height: 46px;
  }

  body.desktop-space-ui .study-checkin-panel {
    grid-area: checkin;
    min-height: 132px;
    padding: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 15px;
    align-self: stretch;
    border-color: #dce7e2;
    background: #ffffff;
  }

  body.desktop-space-ui .study-checkin-panel.is-complete {
    border-color: #cfe0d9;
    background: #f8fbf9;
  }

  body.desktop-space-ui .study-checkin-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 10px;
  }

  body.desktop-space-ui .study-checkin-stats {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-top: 13px;
    border-top: 1px solid #e1ebe7;
  }

  body.desktop-space-ui .study-checkin-stats > span {
    min-width: 0;
    flex: 1 1 0;
    padding: 0 14px;
  }

  body.desktop-space-ui .study-checkin-stats > span:first-child {
    padding-left: 0;
  }

  body.desktop-space-ui .study-checkin-btn {
    min-width: 102px;
  }

  body.desktop-space-ui .study-free-panel {
    grid-area: free;
    min-height: 0;
    padding: 20px;
    gap: 8px;
    align-content: start;
    border-color: #dce7e2;
    background: #ffffff;
  }

  body.desktop-space-ui .study-free-panel header {
    padding: 0 2px 11px;
  }

  body.desktop-space-ui .study-mode-row {
    min-height: 66px;
    padding: 11px 13px;
    background: #f8fbf9;
  }

  body.desktop-space-ui .study-leaderboard-panel {
    grid-area: leader;
    padding: 18px 20px 14px;
    border-color: #dce7e2 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.desktop-space-ui .study-leaderboard-open {
    border-color: #bfd4cc !important;
    color: #1f6654 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.desktop-space-ui .study-leaderboard-open:hover {
    border-color: #9fc3b6 !important;
    color: #174f41 !important;
    background: #edf5f1 !important;
    transform: none !important;
  }

  body.desktop-space-ui .study-source-note {
    grid-area: source;
    padding: 14px 2px 0;
    border-top: 1px solid #e1ebe7;
    border-radius: 0;
    color: #687d75;
    background: transparent;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  body.desktop-space-ui .study-center-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "checkin"
      "daily"
      "free"
      "leader"
      "source";
  }

  body.desktop-space-ui .study-checkin-panel {
    min-height: 0;
  }

  body.desktop-space-ui .study-free-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.desktop-space-ui .study-free-panel header {
    grid-column: 1 / -1;
  }
}

/* Settings progress: keep related actions together without stretch-filled cards. */
@media (min-width: 769px) {
  body.desktop-space-ui .settings-theme .settings-layout {
    align-items: start;
  }

  body.desktop-space-ui .settings-theme .settings-primary-column {
    display: block;
    height: auto;
  }

  body.desktop-space-ui .settings-theme .settings-sync-panel {
    height: auto;
  }

  body.desktop-space-ui .settings-theme .settings-progress-leaderboard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #dce8e3;
  }

  body.desktop-space-ui .settings-theme .settings-progress-leaderboard > div {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  body.desktop-space-ui .settings-theme .settings-progress-leaderboard strong {
    color: #234f42;
    font-size: 15px;
    font-weight: 680;
    line-height: 1.3;
  }

  body.desktop-space-ui .settings-theme .settings-progress-leaderboard span {
    color: #6b7f77;
    font-size: 12px;
    line-height: 1.45;
  }

  body.desktop-space-ui .settings-theme .settings-progress-leaderboard #openHomeLeaderboardBtn {
    width: auto;
    min-width: 112px;
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid #bfd4cc !important;
    border-radius: 9px;
    color: #1f6654 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.desktop-space-ui .settings-theme .settings-progress-leaderboard #openHomeLeaderboardBtn:hover {
    border-color: #9fc3b6 !important;
    color: #174f41 !important;
    background: #edf5f1 !important;
    transform: none;
  }
}

/* Keep the browser's root scrollbar in the same light canvas as desktop pages. */
@media (min-width: 769px) {
  html {
    color-scheme: light;
    background: #f8faf9;
    scrollbar-color: #b9cbc4 #f8faf9;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: #f8faf9;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    border: 2px solid #f8faf9;
    border-radius: 999px;
    background: #b9cbc4;
    background-clip: padding-box;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  body.desktop-space-ui .study-center-head {
    display: grid;
    gap: 18px;
  }

  body.desktop-space-ui .study-center-metrics {
    width: 100%;
  }

  body.desktop-space-ui .study-center-metrics > span {
    min-width: 0;
    flex: 1 1 0;
  }
}

/* Learning center v3: an editorial task desk, not a wall of cards. */
@media (min-width: 769px) {
  body.desktop-space-ui .study-theme .study-main {
    width: min(1180px, calc(100% - 48px));
    max-width: 1180px;
    padding: 28px 0 58px;
  }

  body.desktop-space-ui .study-center-shell {
    grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.7fr);
    grid-template-areas:
      "head head"
      "daily checkin"
      "daily free"
      "leader leader"
      "source source";
    column-gap: 0;
    row-gap: 0;
  }

  body.desktop-space-ui .study-center-head {
    min-height: 104px;
    padding: 0 0 22px;
    border-bottom-color: #d7e2dd;
  }

  body.desktop-space-ui .study-center-head h1 {
    font-size: clamp(36px, 3.5vw, 46px);
    font-weight: 700;
  }

  body.desktop-space-ui .study-center-metrics strong {
    color: #175f4c;
    font-size: 22px;
  }

  body.desktop-space-ui .study-daily-panel {
    min-height: 370px;
    padding: 34px 38px 34px 0;
    gap: 28px;
    border: 0;
    border-right: 1px solid #d7e2dd;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.desktop-space-ui .study-daily-copy > span {
    color: #25745f;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  body.desktop-space-ui .study-daily-copy h2 {
    margin-top: 9px;
    font-size: 38px;
    font-weight: 700;
  }

  body.desktop-space-ui .study-daily-copy p {
    margin-top: 10px;
    color: #60766e;
  }

  body.desktop-space-ui .study-daily-sequence {
    padding: 24px 0 0;
    gap: 26px;
    border: 0;
    border-top: 1px solid #dce7e2;
    border-radius: 0;
    background: transparent;
  }

  body.desktop-space-ui .study-daily-sequence > div:last-child {
    padding-left: 26px;
  }

  body.desktop-space-ui .study-daily-sequence small {
    font-size: 11px;
  }

  body.desktop-space-ui .study-daily-sequence strong {
    color: #175f4c;
    font-size: 36px;
  }

  body.desktop-space-ui .study-daily-sequence div > span {
    margin-top: 3px;
  }

  body.desktop-space-ui .study-sequence-word {
    padding: 0;
    border-radius: 0;
    color: #8a9b95;
    background: transparent;
  }

  body.desktop-space-ui .study-daily-start {
    min-width: 202px;
    min-height: 48px;
    border-radius: 10px;
  }

  body.desktop-space-ui .study-checkin-panel {
    min-height: 0;
    padding: 32px 0 24px 30px;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid #dce7e2;
    border-radius: 0;
    background: transparent;
  }

  body.desktop-space-ui .study-checkin-panel.is-complete {
    border-color: #dce7e2;
    background: transparent;
  }

  body.desktop-space-ui .study-checkin-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 0;
    background: transparent;
  }

  body.desktop-space-ui .study-checkin-icon svg {
    width: 22px;
    height: 22px;
  }

  body.desktop-space-ui .study-checkin-identity {
    gap: 10px;
  }

  body.desktop-space-ui .study-checkin-identity strong {
    font-size: 18px;
  }

  body.desktop-space-ui .study-checkin-btn {
    min-width: 96px;
    min-height: 38px;
    border-radius: 9px;
  }

  body.desktop-space-ui .study-checkin-stats {
    padding-top: 16px;
  }

  body.desktop-space-ui .study-checkin-stats strong {
    font-size: 20px;
  }

  body.desktop-space-ui .study-free-panel {
    padding: 24px 0 30px 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.desktop-space-ui .study-free-panel header {
    padding: 0 0 12px;
  }

  body.desktop-space-ui .study-free-panel h2 {
    font-size: 22px;
  }

  body.desktop-space-ui .study-mode-row {
    min-height: 66px;
    padding: 13px 2px;
    border: 0;
    border-bottom: 1px solid #e1e9e6;
    border-radius: 0;
    background: transparent;
  }

  body.desktop-space-ui .study-mode-row:hover {
    border-color: #bfd4cc;
    color: #175f4c;
    background: transparent;
  }

  body.desktop-space-ui .study-mode-row strong {
    font-size: 14px;
  }

  body.desktop-space-ui .study-mode-row b {
    color: #175f4c;
    font-size: 22px;
  }

  body.desktop-space-ui .study-leaderboard-panel {
    padding: 26px 0 16px;
    gap: 18px 26px;
    border: 0 !important;
    border-top: 1px solid #d7e2dd !important;
    border-bottom: 1px solid #d7e2dd !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.desktop-space-ui .study-leaderboard-intro h2 {
    font-size: 26px;
  }

  body.desktop-space-ui .study-leaderboard-mine {
    border-left-color: #dce7e2;
  }

  body.desktop-space-ui .study-leaderboard-challenge {
    min-height: 54px;
    border: 0;
    border-radius: 10px;
    background: #f4f8f6 !important;
  }

  body.desktop-space-ui .study-leaderboard-open {
    border-radius: 9px;
  }

  body.desktop-space-ui .study-leaderboard-rules {
    padding-top: 14px;
    border-top-color: #e1e9e6;
  }

  body.desktop-space-ui .study-source-note {
    padding: 18px 0 0;
    border-top: 0;
    color: #71857e;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  body.desktop-space-ui .study-center-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "checkin"
      "daily"
      "free"
      "leader"
      "source";
  }

  body.desktop-space-ui .study-daily-panel {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid #d7e2dd;
  }

  body.desktop-space-ui .study-checkin-panel,
  body.desktop-space-ui .study-free-panel {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Learning center v4: quiet entry page, details live inside each tool. */
@media (min-width: 769px) {
  body.desktop-space-ui .study-center-shell {
    grid-template-areas:
      "head head"
      "daily checkin"
      "daily free";
  }

  body.desktop-space-ui .study-center-head {
    display: block;
    min-height: 0;
    padding-bottom: 26px;
  }

  body.desktop-space-ui .study-center-head p {
    max-width: 520px;
  }

  body.desktop-space-ui .study-daily-panel {
    min-height: 340px;
  }

  body.desktop-space-ui .study-daily-copy h2 {
    margin-top: 0;
  }

  body.desktop-space-ui .study-daily-sequence strong {
    margin-top: 7px;
    color: #234f42;
    font-size: 18px;
    line-height: 1.35;
  }

  body.desktop-space-ui .study-daily-sequence div > span {
    margin-top: 5px;
  }

  body.desktop-space-ui .study-checkin-panel {
    align-content: center;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.desktop-space-ui .study-free-panel {
    gap: 4px;
  }

  body.desktop-space-ui .study-mode-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.desktop-space-ui .study-leaderboard-panel.is-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 112px;
    padding: 24px 0;
  }

  body.desktop-space-ui .study-leaderboard-panel.is-minimal .study-leaderboard-intro {
    max-width: 520px;
  }

  body.desktop-space-ui .study-leaderboard-panel.is-minimal .study-leaderboard-intro h2 {
    margin: 0;
    font-size: 24px;
  }

  body.desktop-space-ui .study-leaderboard-panel.is-minimal .study-leaderboard-intro p {
    margin: 7px 0 0;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  body.desktop-space-ui .study-center-shell {
    grid-template-areas:
      "head"
      "checkin"
      "daily"
      "free";
  }
}

/* Learning center v5: one coherent desktop workbench. */
@media (min-width: 769px) {
  body.desktop-space-ui .study-theme .study-main {
    width: min(1120px, calc(100% - 48px));
    max-width: 1120px;
    padding: 34px 0 64px;
  }

  body.desktop-space-ui .study-theme .study-center-shell {
    display: block;
  }

  body.desktop-space-ui .study-theme .study-center-head {
    display: block;
    min-height: 0;
    padding: 0 0 24px;
    border: 0;
  }

  body.desktop-space-ui .study-theme .study-center-head h1 {
    margin: 0;
    color: #173f34;
    font-size: clamp(34px, 3.2vw, 42px);
    font-weight: 720;
    letter-spacing: -0.035em;
    line-height: 1.1;
  }

  body.desktop-space-ui .study-theme .study-center-head p {
    max-width: 560px;
    margin: 9px 0 0;
    color: #687c75;
    font-size: 15px;
    line-height: 1.65;
  }

  body.desktop-space-ui .study-desktop-board {
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(0, 1.48fr) minmax(310px, 0.82fr);
    min-height: 430px;
    border: 1px solid #d8e4df;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(38, 83, 68, 0.07);
  }

  body.desktop-space-ui .study-desktop-board > .study-daily-panel,
  body.desktop-space-ui .study-desktop-board > .study-desktop-rail,
  body.desktop-space-ui .study-desktop-rail > .study-checkin-panel,
  body.desktop-space-ui .study-desktop-rail > .study-free-panel {
    grid-area: auto;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-panel {
    display: grid;
    min-width: 0;
    min-height: 428px;
    padding: 38px 42px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 30px;
    align-content: stretch;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-copy h2 {
    margin: 0;
    color: #1c463a;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-copy p {
    max-width: 48ch;
    margin: 10px 0 0;
    color: #667b73;
    font-size: 14px;
    line-height: 1.65;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-sequence {
    display: grid;
    min-width: 0;
    padding: 25px 0;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-self: center;
    align-items: center;
    gap: 24px;
    border: 0;
    border-top: 1px solid #dfe9e5;
    border-bottom: 1px solid #dfe9e5;
    border-radius: 0;
    background: transparent;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-sequence > div {
    min-width: 0;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-sequence > div:last-child {
    padding-left: 0;
    border: 0;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-sequence small {
    display: block;
    color: #6f837b;
    font-size: 12px;
    font-weight: 620;
    line-height: 1.4;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-sequence strong {
    display: block;
    margin-top: 7px;
    color: #1f5d4c;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-sequence div > span {
    display: block;
    margin-top: 5px;
    color: #7a8d86;
    font-size: 13px;
    line-height: 1.5;
  }

  body.desktop-space-ui .study-desktop-board .study-sequence-word {
    padding: 0;
    color: #8a9b95;
    font-size: 12px;
    background: transparent;
    white-space: nowrap;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-start {
    width: fit-content;
    min-width: 176px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: none;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 100ms ease;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-start:hover {
    transform: none;
  }

  body.desktop-space-ui .study-desktop-board .study-daily-start:active:not(:disabled) {
    transform: translateY(1px);
  }

  body.desktop-space-ui .study-desktop-rail {
    display: grid;
    min-width: 0;
    grid-template-rows: auto minmax(0, 1fr);
    border-left: 1px solid #dfe9e5;
    background: #fafcfb;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-panel {
    display: grid;
    min-height: 0;
    padding: 28px 28px 26px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    align-items: center;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid #dfe9e5;
    border-radius: 0;
    background: transparent;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-panel.is-complete {
    border-color: #dfe9e5;
    background: transparent;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-identity {
    min-width: 0;
    gap: 11px;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    color: #1f6b56;
    background: #eaf3ef;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-icon svg {
    width: 20px;
    height: 20px;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-identity small {
    color: #71837c;
    font-size: 12px;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-identity strong {
    margin-top: 3px;
    color: #284f43;
    font-size: 16px;
    line-height: 1.35;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-btn {
    width: auto;
    min-width: 98px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    box-shadow: none;
  }

  body.desktop-space-ui .study-desktop-rail .study-free-panel {
    display: grid;
    min-height: 0;
    padding: 27px 28px 30px;
    align-content: start;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.desktop-space-ui .study-desktop-rail .study-free-panel header {
    padding: 0 0 18px;
  }

  body.desktop-space-ui .study-desktop-rail .study-free-panel h2 {
    margin: 0;
    color: #244d40;
    font-size: 20px;
    font-weight: 690;
    line-height: 1.3;
  }

  body.desktop-space-ui .study-desktop-rail .study-free-panel p {
    margin: 6px 0 0;
    color: #74877f;
    font-size: 12px;
    line-height: 1.55;
  }

  body.desktop-space-ui .study-desktop-rail .study-mode-row {
    display: grid;
    min-height: 72px;
    padding: 15px 2px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    border: 0;
    border-top: 1px solid #e1eae6;
    border-radius: 0;
    color: #284f43;
    background: transparent;
    box-shadow: none;
    transition: color 150ms ease, background-color 150ms ease;
  }

  body.desktop-space-ui .study-desktop-rail .study-mode-row:hover:not(:disabled) {
    padding-right: 2px;
    padding-left: 2px;
    border-color: #e1eae6;
    color: #155f4a;
    background: #f3f8f6;
    transform: none;
  }

  body.desktop-space-ui .study-desktop-rail .study-mode-row:active:not(:disabled) {
    background: #ebf3ef;
    transform: none;
  }

  body.desktop-space-ui .study-desktop-rail .study-mode-row strong {
    color: inherit;
    font-size: 15px;
    font-weight: 670;
  }

  body.desktop-space-ui .study-desktop-rail .study-mode-row small {
    margin-top: 4px;
    color: #7a8c85;
    font-size: 12px;
    line-height: 1.45;
  }

  body.desktop-space-ui .study-desktop-rail .study-mode-row b {
    color: #4f7166;
    font-size: 12px;
    font-weight: 620;
  }

  body.desktop-space-ui .study-desktop-rail .study-mode-row:disabled b {
    visibility: hidden;
  }
}

@media (min-width: 769px) and (max-width: 980px) {
  body.desktop-space-ui .study-desktop-board {
    grid-template-columns: minmax(0, 1fr);
  }

  body.desktop-space-ui .study-desktop-rail {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto;
    border-top: 1px solid #dfe9e5;
    border-left: 0;
  }

  body.desktop-space-ui .study-desktop-rail .study-checkin-panel {
    border-right: 1px solid #dfe9e5;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
  body.desktop-space-ui .study-desktop-board .study-daily-start,
  body.desktop-space-ui .study-desktop-rail .study-mode-row {
    transition: none;
  }
}

/* Settings account controls: one aligned management panel. */
@media (min-width: 769px) {
  body.desktop-space-ui .settings-theme .settings-control-column {
    display: block;
    overflow: hidden;
    border: 1px solid #d8e4df;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(38, 83, 68, 0.065);
  }

  body.desktop-space-ui .settings-theme .settings-control-column .settings-section {
    display: grid;
    padding: 25px 27px;
    grid-template-columns: minmax(132px, 0.58fr) minmax(0, 1.42fr);
    align-items: start;
    gap: 24px;
    border: 0;
    background: #ffffff;
  }

  body.desktop-space-ui .settings-theme .settings-control-column .settings-section + .settings-section {
    border-top: 1px solid #e1eae6;
    border-left: 0;
  }

  body.desktop-space-ui .settings-theme .settings-control-column .settings-section-head {
    min-width: 0;
    margin: 2px 0 0;
  }

  body.desktop-space-ui .settings-theme .settings-control-column .settings-section-head h3 {
    margin: 0;
    color: #244d40;
    font-size: 16px;
    font-weight: 690;
    letter-spacing: -0.02em;
    line-height: 1.35;
  }

  body.desktop-space-ui .settings-theme .settings-control-column .settings-section-head p {
    margin: 6px 0 0;
    color: #74877f !important;
    font-size: 12px;
    line-height: 1.55;
  }

  body.desktop-space-ui .settings-theme .settings-control-column .settings-form {
    display: grid;
    min-width: 0;
    margin: 0;
    gap: 7px 10px;
  }

  body.desktop-space-ui .settings-theme .settings-control-column .settings-form label {
    color: #49675d;
    font-size: 12px;
    font-weight: 630;
    line-height: 1.4;
  }

  body.desktop-space-ui .settings-theme .settings-control-column .settings-form input {
    min-width: 0;
    min-height: 44px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 13px;
  }

  body.desktop-space-ui .settings-theme .settings-activation-section .settings-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  body.desktop-space-ui .settings-theme .settings-activation-section .settings-form label {
    grid-column: 1 / -1;
  }

  body.desktop-space-ui .settings-theme #activateCdk {
    width: auto;
    min-width: 126px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border-radius: 9px;
    box-shadow: none !important;
    white-space: nowrap;
  }

  body.desktop-space-ui .settings-theme .settings-security-section .settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.desktop-space-ui .settings-theme .settings-security-section label[for="oldPassword"] {
    grid-column: 1;
    grid-row: 1;
  }

  body.desktop-space-ui .settings-theme .settings-security-section #oldPassword {
    grid-column: 1;
    grid-row: 2;
  }

  body.desktop-space-ui .settings-theme .settings-security-section label[for="newPassword"] {
    grid-column: 2;
    grid-row: 1;
  }

  body.desktop-space-ui .settings-theme .settings-security-section #newPassword {
    grid-column: 2;
    grid-row: 2;
  }

  body.desktop-space-ui .settings-theme #changePassword {
    width: auto;
    min-height: 42px;
    margin: 4px 0 0;
    grid-column: 1 / -1;
    border-radius: 9px;
    box-shadow: none !important;
  }

  body.desktop-space-ui .settings-theme #activateCdk:hover,
  body.desktop-space-ui .settings-theme #changePassword:hover {
    box-shadow: none !important;
    transform: none;
  }

  body.desktop-space-ui .settings-theme .settings-danger-section {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    background: #fbfcfb !important;
  }

  body.desktop-space-ui .settings-theme .settings-danger-section .settings-section-head {
    margin: 0;
  }

  body.desktop-space-ui .settings-theme .settings-logout-actions {
    width: auto;
  }

  body.desktop-space-ui .settings-theme #logout {
    width: auto;
    min-width: 112px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 9px;
    white-space: nowrap;
  }

  body.desktop-space-ui .settings-theme #logout:hover {
    transform: none;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  body.desktop-space-ui .settings-theme .settings-control-column .settings-section {
    grid-template-columns: minmax(118px, 0.45fr) minmax(0, 1.55fr);
    gap: 20px;
  }
}

/* Leaderboard daily challenge: a readable task strip, not a squeezed card. */
@media (min-width: 769px) {
  body.desktop-space-ui .leaderboard-rulebook-head {
    display: block;
  }

  body.desktop-space-ui .leaderboard-challenge-status.is-desktop {
    display: grid;
    min-width: 0;
    margin-top: 14px;
    padding: 12px 0;
    grid-template-columns: minmax(170px, 1.25fr) repeat(2, minmax(120px, 0.82fr)) minmax(128px, 0.72fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 1px solid #dce7e2;
    border-bottom: 1px solid #dce7e2;
    border-radius: 0;
    background: transparent !important;
  }

  body.desktop-space-ui .leaderboard-challenge-status.is-desktop.is-complete {
    border-color: #cfe0d9;
    background: transparent !important;
  }

  body.desktop-space-ui .leaderboard-challenge-copy,
  body.desktop-space-ui .leaderboard-challenge-task,
  body.desktop-space-ui .leaderboard-challenge-reward {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 4px;
  }

  body.desktop-space-ui .leaderboard-challenge-copy {
    padding-right: 22px;
  }

  body.desktop-space-ui .leaderboard-challenge-copy span {
    color: #244d40 !important;
    font-size: 13px;
    font-weight: 690;
    line-height: 1.35;
  }

  body.desktop-space-ui .leaderboard-challenge-copy small {
    color: #74877f !important;
    font-size: 10px;
    line-height: 1.45;
  }

  body.desktop-space-ui .leaderboard-challenge-task {
    min-height: 38px;
    padding: 0 20px;
    border-left: 1px solid #dce7e2;
  }

  body.desktop-space-ui .leaderboard-challenge-task span {
    color: #71837c !important;
    font-size: 10px;
    line-height: 1.35;
  }

  body.desktop-space-ui .leaderboard-challenge-task strong {
    grid-row: auto;
    grid-column: auto;
    color: #345f51 !important;
    font-size: 15px;
    font-weight: 720;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  body.desktop-space-ui .leaderboard-challenge-task.is-complete strong {
    color: #1f735b !important;
  }

  body.desktop-space-ui .leaderboard-challenge-reward {
    min-height: 38px;
    padding-left: 20px;
    justify-items: end;
    border-left: 1px solid #dce7e2;
    text-align: right;
  }

  body.desktop-space-ui .leaderboard-challenge-reward span,
  body.desktop-space-ui .leaderboard-challenge-reward small {
    color: #71837c !important;
    font-size: 10px;
    line-height: 1.25;
  }

  body.desktop-space-ui .leaderboard-challenge-reward strong {
    grid-row: auto;
    grid-column: auto;
    color: #1f735b !important;
    font-size: 15px;
    font-weight: 730;
    line-height: 1.2;
    white-space: nowrap;
  }

  body.desktop-space-ui .leaderboard-rule-grid {
    margin-top: 14px;
  }
}