/* Yibentong page styles — single owner.
 * Loaded after desktop-shell.css. Safe balanced extract.
 */


@media (min-width:981px) {
  body.route-learning-card-detail #app .desktop-subject-reader-mounted {
    width:min(1240px,calc(100% - 64px)) !important;
    min-height:100vh !important;
    margin:0 auto !important;
    padding:34px 0 72px !important;
    background:
      radial-gradient(circle at 14% 0%, rgba(78,170,164,.12), transparent 34%),
      linear-gradient(180deg,#080a0d,#090a0d 48%,#08090b) !important;
    color:#eef3f3 !important;
  }

  #desktop-subject-reader,
  .subject-reader-shell {
    min-height:calc(100vh - 106px);
  }

  .subject-reader-shell {
    --subject-tone:#62d3c5;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .subject-reader-head {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    border:1px solid rgba(128,140,162,.24);
    border-radius:10px;
    background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 58%,color-mix(in srgb,var(--subject-tone) 12%,transparent)),#10151a;
    box-shadow:0 22px 54px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
  }

  .subject-reader-head button,
  .subject-reader-head a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:38px;
    padding:0 14px;
    border:1px solid rgba(128,140,162,.28);
    border-radius:7px;
    background:rgba(255,255,255,.035);
    color:#dce5e5;
    font-size:12px;
    font-weight:760;
    text-decoration:none;
    white-space:nowrap;
  }

  .subject-reader-head a {
    border-color:color-mix(in srgb,var(--subject-tone) 38%,#303844);
    background:color-mix(in srgb,var(--subject-tone) 15%,#131a20);
    color:color-mix(in srgb,var(--subject-tone) 70%,#fff);
  }

  .subject-reader-head > div span {
    display:block;
    color:color-mix(in srgb,var(--subject-tone) 74%,#fff);
    font-size:11px;
    font-weight:850;
    letter-spacing:.08em;
  }

  .subject-reader-head h1 {
    margin:4px 0 0;
    color:#f5f7f7;
    font-size:27px;
    font-weight:850;
    line-height:1.22;
  }

  .subject-reader-head p {
    margin:7px 0 0;
    color:#95a3aa;
    font-size:13px;
    line-height:1.5;
  }

  .subject-reader-workspace {
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
    gap:18px;
    min-height:calc(100vh - 230px);
  }

  .subject-reader-nav,
  .subject-reader-main {
    border:1px solid rgba(128,140,162,.22);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),#101419;
    box-shadow:0 18px 42px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
  }

  .subject-reader-nav {
    position:sticky;
    top:18px;
    align-self:start;
    max-height:calc(100vh - 150px);
    overflow:auto;
    padding:14px;
  }

  .subject-reader-nav-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 4px 13px;
    border-bottom:1px solid rgba(128,140,162,.18);
    margin-bottom:12px;
  }

  .subject-reader-nav-title strong { color:#f1f4f4; font-size:15px; font-weight:820; }
  .subject-reader-nav-title span { color:#88949c; font-size:12px; }
  .subject-reader-nav section + section { margin-top:15px; }
  .subject-reader-nav h2 { margin:0 0 8px; color:#aeb8be; font-size:12px; font-weight:760; line-height:1.45; }

  .subject-reader-nav button {
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:10px;
    width:100%;
    min-height:58px;
    margin:0 0 7px;
    padding:9px 10px;
    border:1px solid rgba(128,140,162,.2);
    border-radius:8px;
    background:rgba(255,255,255,.025);
    text-align:left;
    cursor:pointer;
    transition:background .16s ease,border-color .16s ease,transform .16s ease;
  }

  .subject-reader-nav button:hover,
  .subject-reader-nav button.active {
    border-color:color-mix(in srgb,var(--subject-tone) 48%,#303844);
    background:color-mix(in srgb,var(--subject-tone) 12%,#151b20);
  }

  .subject-reader-nav button.active { transform:translateX(2px); }
  .subject-reader-nav button > span {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:6px;
    background:color-mix(in srgb,var(--subject-tone) 18%,#1b2028);
    color:color-mix(in srgb,var(--subject-tone) 74%,#fff);
    font-size:10px;
    font-weight:850;
  }
  .subject-reader-nav strong,
  .subject-reader-nav small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .subject-reader-nav strong { color:#e8eded; font-size:13px; font-weight:760; }
  .subject-reader-nav small { margin-top:4px; color:#84909a; font-size:11px; }

  .subject-reader-main {
    min-height:100%;
    max-height:calc(100vh - 150px);
    overflow:auto;
  }

  .subject-reader-main > header {
    position:sticky;
    top:0;
    z-index:1;
    padding:24px 28px 20px;
    border-bottom:1px solid rgba(128,140,162,.2);
    background:linear-gradient(180deg,rgba(16,20,25,.98),rgba(16,20,25,.92));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .subject-reader-main > header span { color:color-mix(in srgb,var(--subject-tone) 70%,#fff); font-size:12px; font-weight:800; }
  .subject-reader-main > header h2 { margin:7px 0 0; color:#f5f7f7; font-size:24px; line-height:1.3; }
  .subject-reader-main > header p { max-width:760px; margin:10px 0 0; color:#95a3aa; font-size:13px; line-height:1.7; }

  .subject-reader-content {
    padding:24px 28px 34px;
  }

  .subject-reader-point {
    padding:0 0 22px;
    margin:0 0 24px;
    border-bottom:1px solid rgba(128,140,162,.14);
  }

  .subject-reader-point > header {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
  }

  .subject-reader-point > header span {
    display:grid;
    place-items:center;
    min-width:30px;
    height:30px;
    padding:0 7px;
    border-radius:7px;
    background:color-mix(in srgb,var(--subject-tone) 18%,#1b2028);
    color:color-mix(in srgb,var(--subject-tone) 74%,#fff);
    font-size:11px;
    font-weight:850;
  }

  .subject-reader-point h3 {
    margin:0;
    color:#eef3f3;
    font-size:18px;
    line-height:1.45;
  }

  .subject-reader-point-node h4 {
    margin:18px 0 8px;
    color:#dfe6e6;
    font-size:15px;
    line-height:1.45;
  }

  .subject-reader-point-node p {
    margin:0 0 12px;
    color:#c4ced2;
    font-size:15px;
    line-height:1.95;
    white-space:normal;
  }

  .subject-reader-point-node p.is-muted { color:#78858d; }
  .subject-reader-empty,
  .subject-reader-loading {
    display:flex;
    min-height:280px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#8e9aa3;
    text-align:center;
  }
  .subject-reader-loading i { font-size:28px; color:var(--subject-tone); animation:spin 1s linear infinite; }
  .subject-reader-empty strong,
  .subject-reader-loading strong { color:#edf2f2; font-size:16px; }
  .subject-reader-empty button { margin-top:8px; padding:9px 16px; border:1px solid rgba(128,140,162,.28); border-radius:7px; background:#151a20; color:#dce5e5; }

  .subject-anki-topic-picker {
    border:1px solid rgba(128,140,162,.22);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),#101419;
    box-shadow:0 18px 42px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
    overflow:hidden;
  }

  .subject-anki-topic-picker > header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    padding:24px 28px 20px;
    border-bottom:1px solid rgba(128,140,162,.18);
  }

  .subject-anki-topic-picker > header span,
  .subject-anki-topic-picker > header strong {
    color:color-mix(in srgb,var(--subject-tone) 70%,#fff);
    font-size:12px;
    font-weight:820;
  }

  .subject-anki-topic-picker h2 { margin:7px 0 0; color:#f5f7f7; font-size:24px; }
  .subject-anki-topic-picker p { margin:9px 0 0; color:#95a3aa; font-size:13px; }
  .subject-anki-topic-picker > div {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:18px;
  }

  .subject-anki-topic-card {
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    min-height:78px;
    padding:14px;
    border:1px solid rgba(128,140,162,.2);
    border-radius:8px;
    background:rgba(255,255,255,.025);
    color:#edf2f2;
    text-decoration:none;
    transition:background .16s ease,border-color .16s ease,transform .16s ease;
  }

  .subject-anki-topic-card:hover {
    border-color:color-mix(in srgb,var(--subject-tone) 46%,#303844);
    background:color-mix(in srgb,var(--subject-tone) 10%,#151b20);
    transform:translateY(-1px);
  }

  .subject-anki-topic-card > span {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:7px;
    background:color-mix(in srgb,var(--subject-tone) 16%,#1b2028);
    color:color-mix(in srgb,var(--subject-tone) 74%,#fff);
    font-size:12px;
    font-weight:850;
  }

  .subject-anki-topic-card strong,
  .subject-anki-topic-card small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .subject-anki-topic-card strong { font-size:15px; }
  .subject-anki-topic-card small { margin-top:5px; color:#84909a; font-size:12px; }
  .subject-anki-topic-card b { color:color-mix(in srgb,var(--subject-tone) 68%,#fff); font-size:12px; white-space:nowrap; }

  .subject-anki-topic-strip {
    display:flex;
    align-items:center;
    gap:8px;
    overflow:auto;
    padding:10px;
    border:1px solid rgba(128,140,162,.2);
    border-radius:9px;
    background:#101419;
  }

  .subject-anki-topic-strip strong,
  .subject-anki-topic-strip a {
    flex:0 0 auto;
    color:#aeb8be;
    font-size:12px;
    font-weight:760;
    text-decoration:none;
  }

  .subject-anki-topic-strip a {
    padding:8px 11px;
    border:1px solid rgba(128,140,162,.2);
    border-radius:7px;
    background:rgba(255,255,255,.025);
  }

  .subject-anki-topic-strip a.active {
    border-color:color-mix(in srgb,var(--subject-tone) 48%,#303844);
    background:color-mix(in srgb,var(--subject-tone) 12%,#151b20);
    color:color-mix(in srgb,var(--subject-tone) 74%,#fff);
  }
}
@media (min-width:981px) {
  #desktop-subject-reader,
  #desktop-yibentong-landing,
  #desktop-subject-anki {
    position:fixed;
    inset:0 var(--desktop-right-width) 0 var(--desktop-left-width);
    z-index:82;
    overflow-y:auto;
    padding:56px min(4vw,56px) 72px;
    background:
      radial-gradient(circle at 16% 0%, rgba(78,170,164,.12), transparent 34%),
      linear-gradient(180deg,#080a0d,#090a0d 48%,#08090b);
    color:#eef3f3;
    box-sizing:border-box;
  }

  body.desktop-nav-collapsed #desktop-subject-reader,
  body.desktop-nav-collapsed #desktop-yibentong-landing,
  body.desktop-nav-collapsed #desktop-subject-anki { left:0; }
  body.context-collapsed #desktop-subject-reader,
  body.context-collapsed #desktop-yibentong-landing,
  body.context-collapsed #desktop-subject-anki { right:0; }

  #desktop-subject-reader .subject-reader-shell,
  #desktop-yibentong-landing > .min-h-screen,
  #desktop-subject-anki .subject-reader-shell {
    width:min(1240px,100%);
    margin:0 auto;
  }

  body.route-learning-card-detail #desktop-subject-reader :is(button,a) {
    min-width:0 !important;
    min-height:0 !important;
    border-radius:7px !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    box-shadow:none !important;
  }

  body.route-learning-card-detail #desktop-subject-reader .subject-reader-head :is(button,a) {
    height:38px !important;
    padding:0 14px !important;
    border:1px solid rgba(128,140,162,.28) !important;
    background:rgba(255,255,255,.035) !important;
    color:#dce5e5 !important;
    font-size:12px !important;
    font-weight:760 !important;
  }

  body.route-learning-card-detail #desktop-subject-reader .subject-reader-head a {
    border-color:color-mix(in srgb,var(--subject-tone) 38%,#303844) !important;
    background:color-mix(in srgb,var(--subject-tone) 15%,#131a20) !important;
    color:color-mix(in srgb,var(--subject-tone) 70%,#fff) !important;
  }

  body.route-learning-card-detail #desktop-subject-reader .subject-reader-nav button {
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) !important;
    width:100% !important;
    min-height:58px !important;
    padding:9px 10px !important;
    border:1px solid rgba(128,140,162,.2) !important;
    background:rgba(255,255,255,.025) !important;
    text-align:left !important;
  }

  body.route-learning-card-detail #desktop-subject-reader .subject-reader-nav button.active {
    border-color:color-mix(in srgb,var(--subject-tone) 48%,#303844) !important;
    background:color-mix(in srgb,var(--subject-tone) 12%,#151b20) !important;
  }

  body.route-learning-card-detail #desktop-subject-reader .subject-reader-point-node p {
    color:#c4ced2 !important;
    font-size:15px !important;
    line-height:1.95 !important;
  }

  #desktop-subject-anki .subject-anki-workspace {
    grid-template-columns:340px minmax(0,1fr);
  }

  #desktop-subject-anki .subject-anki-main {
    display:flex;
    align-items:stretch;
    min-height:calc(100vh - 250px);
  }

  #desktop-subject-anki .subject-anki-card {
    display:flex;
    flex:1;
    flex-direction:column;
    min-height:620px;
    border:1px solid rgba(128,140,162,.22);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.014)),#101419;
    box-shadow:0 18px 42px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
    overflow:hidden;
  }

  #desktop-subject-anki .subject-anki-card > header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid rgba(128,140,162,.18);
  }

  #desktop-subject-anki .subject-anki-card > header span {
    color:color-mix(in srgb,var(--subject-tone) 68%,#fff);
    font-size:12px;
    font-weight:800;
  }

  #desktop-subject-anki .subject-anki-card > header strong {
    color:#98a6ad;
    font-size:12px;
  }

  #desktop-subject-anki .subject-anki-face {
    display:flex;
    flex:1;
    flex-direction:column;
    justify-content:center;
    padding:44px 58px;
    background:
      radial-gradient(circle at 84% 18%, color-mix(in srgb,var(--subject-tone) 12%,transparent), transparent 30%),
      linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  }

  #desktop-subject-anki .subject-anki-face small {
    color:color-mix(in srgb,var(--subject-tone) 72%,#fff);
    font-size:11px;
    font-weight:850;
    letter-spacing:.12em;
  }

  #desktop-subject-anki .subject-anki-face h2 {
    max-width:820px;
    margin:14px 0 0;
    color:#f6f8f8;
    font-size:30px;
    line-height:1.35;
  }

  #desktop-subject-anki .subject-anki-face p {
    margin:18px 0 0;
    color:#98a6ad;
    font-size:15px;
  }

  #desktop-subject-anki .subject-anki-answer {
    max-width:860px;
    margin-top:22px;
    color:#c8d1d5;
    font-size:16px;
    line-height:1.95;
  }

  #desktop-subject-anki .subject-anki-source-material {
    margin-top:22px;
    padding-top:16px;
    border-top:1px solid rgba(128,140,162,.18);
  }

  #desktop-subject-anki .subject-anki-source-material > header {
    display:flex;
    align-items:center;
    gap:7px;
    margin:0 0 12px;
    color:color-mix(in srgb,var(--subject-tone) 70%,#fff);
    font-size:12px;
    font-weight:820;
  }

  #desktop-subject-anki .subject-anki-source-material > header i { font-size:16px; }

  #desktop-subject-anki .subject-anki-source-image {
    margin:0 0 14px;
    padding:10px;
    border:1px solid rgba(128,140,162,.20);
    border-radius:8px;
    background:rgba(255,255,255,.025);
  }

  #desktop-subject-anki .subject-anki-source-image img {
    display:block;
    width:100%;
    max-height:460px;
    object-fit:contain;
    border-radius:5px;
    background:#fff;
  }

  #desktop-subject-anki .subject-anki-source-image figcaption {
    margin-top:8px;
    color:#84909a;
    font-size:11px;
    text-align:center;
  }

  #desktop-subject-anki .subject-anki-source-table { margin:0 0 14px; }
  #desktop-subject-anki .subject-anki-source-table > strong {
    display:block;
    margin:0 0 8px;
    color:#b9c6ca;
    font-size:12px;
    font-weight:780;
  }

  #desktop-subject-anki .subject-anki-source-table > div {
    overflow:auto;
    border:1px solid rgba(128,140,162,.20);
    border-radius:8px;
  }

  #desktop-subject-anki .subject-anki-source-table table {
    width:100%;
    min-width:560px;
    border-collapse:collapse;
    color:#cbd5d8;
    font-size:12px;
    line-height:1.65;
  }

  #desktop-subject-anki .subject-anki-source-table th,
  #desktop-subject-anki .subject-anki-source-table td {
    padding:8px 10px;
    border-right:1px solid rgba(128,140,162,.16);
    border-bottom:1px solid rgba(128,140,162,.16);
    vertical-align:top;
    text-align:left;
  }

  #desktop-subject-anki .subject-anki-source-table th {
    position:sticky;
    top:0;
    background:#172128;
    color:#eff7f7;
    font-weight:800;
  }

  #desktop-subject-anki .subject-anki-source-table tr:last-child td { border-bottom:0; }
  #desktop-subject-anki .subject-anki-source-table :is(th,td):last-child { border-right:0; }

  #desktop-subject-anki .subject-anki-card footer,
  #desktop-subject-anki .subject-anki-rating {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    padding:16px 24px;
    border-top:1px solid rgba(128,140,162,.16);
  }

  #desktop-subject-anki .subject-anki-card button {
    height:42px;
    border:1px solid rgba(128,140,162,.26);
    border-radius:7px;
    background:rgba(255,255,255,.035);
    color:#dce5e5;
    font-size:13px;
    font-weight:760;
  }

  #desktop-subject-anki .subject-anki-card button.is-primary,
  #desktop-subject-anki .subject-anki-rating button:last-child {
    border-color:color-mix(in srgb,var(--subject-tone) 42%,#303844);
    background:color-mix(in srgb,var(--subject-tone) 18%,#131a20);
    color:color-mix(in srgb,var(--subject-tone) 72%,#fff);
  }
}
@media (min-width:981px) {
  #desktop-subject-anki .subject-reader-shell {
    width:min(1320px,100%) !important;
  }

  #desktop-subject-anki .subject-anki-workspace {
    grid-template-columns:400px minmax(0,1fr) !important;
  }

  #desktop-subject-anki .subject-anki-nav {
    padding:16px !important;
  }

  #desktop-subject-anki .subject-anki-nav section {
    padding:10px 0 14px;
    border-bottom:1px solid rgba(128,140,162,.12);
  }

  #desktop-subject-anki .subject-anki-nav section:last-child {
    border-bottom:0;
  }

  #desktop-subject-anki .subject-anki-nav h2 {
    display:block;
    width:100%;
    min-width:0;
    min-height:28px;
    margin:0 0 8px !important;
    padding:0 2px;
    color:#72d9ce !important;
    font-size:12px !important;
    font-weight:850 !important;
    line-height:1.45 !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap !important;
  }

  #desktop-subject-anki .subject-anki-nav .subject-anki-nav-item {
    grid-template-columns:38px minmax(0,1fr) !important;
    align-items:flex-start !important;
    min-height:auto !important;
    margin-bottom:7px !important;
    padding:11px 12px !important;
  }

  #desktop-subject-anki .subject-anki-nav .subject-anki-nav-item.is-subpoint {
    margin-left:22px !important;
    width:calc(100% - 22px) !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    background:rgba(255,255,255,.018) !important;
  }

  #desktop-subject-anki .subject-anki-nav .subject-anki-nav-item > span {
    width:auto !important;
    min-width:30px !important;
    height:28px !important;
    padding:0 7px !important;
    white-space:nowrap !important;
  }

  #desktop-subject-anki .subject-anki-nav .subject-anki-nav-item.is-subpoint > span {
    background:rgba(46,207,192,.10) !important;
    color:#9be9e0 !important;
  }

  #desktop-subject-anki .subject-anki-nav .subject-anki-nav-item strong,
  #desktop-subject-anki .subject-anki-nav .subject-anki-nav-item small {
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  #desktop-subject-anki .subject-anki-nav .subject-anki-nav-item strong {
    color:#edf4f4 !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }

  #desktop-subject-anki .subject-anki-nav .subject-anki-nav-item small {
    margin-top:4px !important;
    color:#839099 !important;
    font-size:11px !important;
    line-height:1.35 !important;
  }

  /* Catalog reading deliberately shares the Anki outline component. */
  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-workspace {
    grid-template-columns:400px minmax(0,1fr) !important;
  }

  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-nav {
    padding:16px !important;
  }

  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-nav section {
    padding:10px 0 14px;
    border-bottom:0;
  }

  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-nav h2 {
    display:block;
    width:100%;
    min-width:0;
    min-height:28px;
    margin:0 0 8px !important;
    padding:0 2px;
    overflow:hidden;
    color:#72d9ce !important;
    font-size:12px !important;
    font-weight:850 !important;
    line-height:1.45 !important;
    text-overflow:ellipsis;
    white-space:nowrap !important;
  }

  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-nav .subject-anki-nav-item {
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) !important;
    align-items:flex-start !important;
    min-height:auto !important;
    margin-bottom:7px !important;
    padding:11px 12px !important;
  }

  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-nav .subject-anki-nav-item.is-subpoint {
    margin-left:22px !important;
    width:calc(100% - 22px) !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    background:rgba(255,255,255,.018) !important;
  }

  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-nav .subject-anki-nav-item > span {
    width:auto !important;
    min-width:30px !important;
    height:28px !important;
    padding:0 7px !important;
    white-space:nowrap !important;
  }

  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-nav .subject-anki-nav-item strong,
  #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-anki-nav .subject-anki-nav-item small {
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
  }

  #desktop-subject-reader.subject-anki-nav-collapsed .subject-reader-shell.is-yibentong-reader .subject-anki-workspace {
    grid-template-columns:72px minmax(0,1fr) !important;
  }

  #desktop-subject-reader.subject-anki-nav-collapsed .subject-reader-shell.is-yibentong-reader .subject-anki-nav {
    overflow:hidden;
    padding:12px !important;
  }

  #desktop-subject-reader.subject-anki-nav-collapsed .subject-reader-shell.is-yibentong-reader .subject-anki-nav :is(h2, .subject-anki-nav-item > div, .subject-reader-nav-title strong, .subject-reader-nav-title span) {
    display:none;
  }
}
#desktop-subject-reader .subject-reader-shell.is-yibentong-reader {
  width:min(1160px,calc(100% - 56px)) !important;
  gap:14px !important;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-head {
  min-height:112px;
  padding:22px 24px;
  border-color:rgba(128,140,162,.20);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015) 62%,color-mix(in srgb,var(--subject-tone) 8%,transparent)),#11161b;
  box-shadow:none;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-head h1 {
  font-size:26px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-head p {
  max-width:620px;
  color:#89959d;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip {
  display:none !important;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-workspace {
  grid-template-columns:300px minmax(0,1fr) !important;
  gap:14px;
  min-height:calc(100vh - 238px) !important;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav,
#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-main {
  border-color:rgba(128,140,162,.18);
  border-radius:8px;
  background:#10151a;
  box-shadow:none;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav {
  max-height:calc(100vh - 196px) !important;
  padding:12px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav-title {
  margin-bottom:10px;
  padding:4px 2px 12px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-group {
  margin:0 0 12px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-group h2 {
  margin:0 0 7px;
  color:#aab4bb;
  font-size:12px;
  font-weight:820;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav .subject-reader-nav-point {
  grid-template-columns:34px minmax(0,1fr);
  min-height:50px;
  margin:0 0 6px;
  padding:8px 10px;
  border-color:rgba(128,140,162,.16);
  border-radius:7px;
  background:rgba(255,255,255,.025);
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav .subject-reader-nav-point.active {
  border-color:color-mix(in srgb,var(--subject-tone) 42%,#38444c);
  background:color-mix(in srgb,var(--subject-tone) 10%,#151a1f);
  transform:none;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav .subject-reader-nav-point > span {
  width:30px;
  height:30px;
  border-radius:6px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav strong {
  font-size:13px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav small {
  color:#78848c;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-main {
  max-height:calc(100vh - 196px);
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-main > header {
  padding:24px 28px 18px;
  background:#10151a;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-main > header h2 {
  font-size:25px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-content {
  padding:24px 28px 44px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point {
  margin-bottom:18px;
  padding-bottom:18px;
}

/* Keep the catalog sidebar visually aligned with the Anki sidebar: each
 * topic is a heading and its points are standard full-width study cards. */
#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group {
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group + .subject-reader-point-group {
  margin-top:12px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary {
  display:block;
  list-style:none;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary > button.subject-reader-topic-button {
  display:flex;
  align-items:center;
  min-height:28px;
  margin:0;
  padding:10px 2px 8px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#aeb8be;
  box-shadow:none;
  transform:none;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary > button.subject-reader-topic-button > span {
  display:none;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary > button.subject-reader-topic-button strong {
  color:#72d9ce;
  font-size:12px;
  font-weight:850;
  line-height:1.45;
  white-space:normal;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary > button.subject-reader-topic-button small {
  display:none;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary > em {
  display:none;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div {
  display:grid;
  gap:7px;
  padding:0 0 8px;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div [data-reader-key] {
  grid-template-columns:38px minmax(0,1fr);
  align-items:flex-start;
  min-height:auto;
  margin:0;
  padding:11px 12px;
  border-color:rgba(128,140,162,.2);
  border-radius:7px;
  background:rgba(255,255,255,.025);
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div [data-reader-key] > span {
  width:auto;
  min-width:30px;
  height:30px;
  padding:0 7px;
  border-radius:6px;
  font-size:10px;
  white-space:nowrap;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div [data-reader-key] strong,
#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div [data-reader-key] small {
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div [data-reader-key] strong {
  color:#edf4f4;
  font-size:13px;
  line-height:1.45;
}

#desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div [data-reader-key] small {
  margin-top:4px;
  color:#839099;
  font-size:11px;
  line-height:1.35;
}

/* subject-reader outside #app — shell still targets #app #desktop-subject-reader */
@media (min-width:981px) {
  body.route-learning-card-detail #desktop-subject-reader .subject-reader-shell.is-yibentong-reader {
    width:min(1180px,calc(100% - 48px));
    max-width:1180px;
  }
  body.route-learning-card-detail #desktop-subject-reader .subject-reader-workspace {
    grid-template-columns:300px minmax(0,1fr) !important;
    min-height:calc(100vh - 210px);
  }
  body.route-learning-card-detail #desktop-subject-reader .subject-reader-nav {
    position:sticky;
    top:18px;
    align-self:start;
  }
  body.route-learning-card-detail #desktop-subject-reader .subject-reader-main {
    min-width:0;
  }
  body.route-learning-card-detail #desktop-subject-reader .subject-reader-volume-switch {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
  }
  body.route-learning-card-detail #desktop-subject-reader .subject-reader-volume-switch a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 12px;
    border:1px solid rgba(128,140,162,.28);
    border-radius:6px;
    color:#dce5e5;
    text-decoration:none;
    font-size:12px;
    font-weight:760;
  }
  body.route-learning-card-detail #desktop-subject-reader .subject-reader-volume-switch a.active {
    border-color:#168f84;
    background:#168f84;
    color:#fff;
  }
}


/* Internal student card gate */
#internal-student-card-gate {
  position:fixed;
  inset:0;
  z-index:240;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(6,8,12,.72);
  backdrop-filter:blur(8px);
}
#internal-student-card-gate > section {
  width:min(420px,100%);
  padding:28px 26px 24px;
  border:1px solid rgba(72,216,200,.28);
  border-radius:10px;
  background:#12151a;
  color:#eef3f3;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.42);
}
#internal-student-card-gate > section > span {
  display:block;
  color:#48d8c8;
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
}
#internal-student-card-gate h2 {
  margin:12px 0 0;
  font-size:22px;
  line-height:1.3;
}
#internal-student-card-gate p {
  margin:10px 0 0;
  color:#9aa3ad;
  font-size:13px;
  line-height:1.6;
}
#internal-student-card-gate a {
  display:inline-flex;
  margin-top:18px;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-radius:6px;
  background:#168f84;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:760;
}
#internal-student-card-gate footer { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; }
#internal-student-card-gate footer a { margin-top:0; }
#internal-student-card-gate footer button { min-height:38px; padding:0 13px; border:1px solid #38414a; border-radius:6px; background:transparent; color:#b9c3cb; font-size:12px; cursor:pointer; }
#internal-student-card-gate footer button:hover { border-color:#6d7a86; color:#eef3f3; }

/* Pro entitlement gate for AI Q&A, grading, and exam practice. */
#pro-feature-gate { position:fixed; inset:0; z-index:240; display:grid; place-items:center; padding:24px; background:rgba(6,8,12,.72); backdrop-filter:blur(8px); }
#pro-feature-gate > section { width:min(420px,100%); padding:28px 26px 24px; border:1px solid rgba(72,216,200,.28); border-radius:10px; background:#12151a; color:#eef3f3; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.42); }
#pro-feature-gate > section > i { display:block; margin:0 auto 10px; color:#48d8c8; font-size:28px; }
#pro-feature-gate > section > span { display:block; color:#48d8c8; font-size:11px; font-weight:850; letter-spacing:.08em; }
#pro-feature-gate h2 { margin:12px 0 0; font-size:22px; line-height:1.3; }
#pro-feature-gate p { margin:10px 0 0; color:#9aa3ad; font-size:13px; line-height:1.6; }
#pro-feature-gate footer { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; }
#pro-feature-gate footer button { min-height:38px; padding:0 13px; border:1px solid #38414a; border-radius:6px; background:transparent; color:#b9c3cb; font-size:12px; cursor:pointer; }
#pro-feature-gate footer button:last-child { border-color:#168f84; background:#168f84; color:#fff; font-weight:760; }
#pro-feature-gate footer button:hover { border-color:#6d7a86; color:#eef3f3; }
#pro-feature-gate footer button:last-child:hover { border-color:#20a99d; background:#20a99d; color:#fff; }
#visitor-registration-gate { position:fixed; inset:0; z-index:250; display:grid; place-items:center; padding:24px; background:rgba(6,8,12,.72); backdrop-filter:blur(8px); }
#visitor-registration-gate > section { width:min(390px,100%); padding:28px 26px 24px; border:1px solid rgba(72,216,200,.28); border-radius:10px; background:#12151a; color:#eef3f3; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.42); }
#visitor-registration-gate i { display:block; margin-bottom:10px; color:#48d8c8; font-size:27px; } #visitor-registration-gate span { display:block; color:#48d8c8; font-size:11px; font-weight:850; letter-spacing:.08em; } #visitor-registration-gate h2 { margin:12px 0 0; font-size:22px; } #visitor-registration-gate p { margin:10px 0 0; color:#9aa3ad; font-size:13px; line-height:1.6; } #visitor-registration-gate footer { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px; } #visitor-registration-gate button { min-height:38px; padding:0 13px; border:1px solid #38414a; border-radius:6px; background:transparent; color:#b9c3cb; font-size:12px; cursor:pointer; } #visitor-registration-gate .registration-login { border-color:#4a8f89; color:#d9fff9; } #visitor-registration-gate .registration-register { border-color:#168f84; background:#168f84; color:#fff; font-weight:760; } #visitor-registration-gate .registration-later { color:#8f9ca5; }
#internal-student-card-gate .feature-preview, #pro-feature-gate .feature-preview { margin:18px 0 0; padding:14px; border:1px solid rgba(114,137,145,.24); border-radius:7px; background:rgba(255,255,255,.035); text-align:left; }
#internal-student-card-gate .feature-preview small, #pro-feature-gate .feature-preview small { display:block; color:#48d8c8; font-size:10px; font-weight:800; letter-spacing:.08em; }
#internal-student-card-gate .feature-preview strong, #pro-feature-gate .feature-preview strong { display:block; margin-top:6px; color:#eef3f3; font-size:14px; line-height:1.45; }
#internal-student-card-gate .feature-preview > span, #pro-feature-gate .feature-preview > span { display:block; margin-top:6px; color:#98a4ac; font-size:12px; line-height:1.6; }
#internal-student-card-gate .feature-preview ul { display:grid; gap:7px; margin:11px 0 0; padding:0; list-style:none; }
#internal-student-card-gate .feature-preview li { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#b7c0c7; font-size:12px; line-height:1.35; }
#internal-student-card-gate .feature-preview li i { color:#61717a; font-size:15px; }

/* Hide card workspace while Ultra entitlement resolves — no lock-modal flash */
body.learning-card-checking #app,
body.learning-card-checking #desktop-subject-reader,
body.learning-card-checking #desktop-subject-anki {
  visibility:hidden;
}