/* study999-mobile-reading-fixed-v1 */

@media screen and (max-width: 720px) {

  /* 只在课文页锁定外层网页滚动。 */
  html.study999-lesson-reading-fixed,
  body.study999-lesson-reading-fixed {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* 整个课文区域固定在网站顶部导航栏下方。 */
  #app.study999-lesson-reading-fixed {
    position: fixed !important;

    top: var(--study999-lesson-top, 80px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 10;

    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 920px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 8px 10px
      max(8px, env(safe-area-inset-bottom)) !important;

    gap: 8px !important;
    overflow: hidden !important;
    background: #f3f6fb;
  }

  /* 上方标题及三个操作按钮：保持静止。 */
  #app.study999-lesson-reading-fixed
  > .study999-lesson-static {
    position: relative !important;
    top: auto !important;

    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 12px !important;

    z-index: 2;
  }

  /* 中间正文：唯一随朗读滚动的区域。 */
  #app.study999-lesson-reading-fixed
  > .study999-lesson-text {
    position: relative !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 12px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* 正文字号略微缩小。 */
  #app .study999-lesson-text .hanzi,
  #app .study999-lesson-text .hanzi .char,
  #app .study999-lesson-text .english-click-word {
    font-size: 24px !important;
    line-height: 1.65 !important;
  }

  /* 拼音与英文课文译文。 */
  #app .study999-lesson-text .pinyin,
  #app .study999-lesson-text .study999-english-chinese {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* 原有底部三个课程导航键保留在正文外。 */
  #app.study999-lesson-reading-fixed
  > .study999-lesson-nav-section {
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 8px !important;
  }
}


/* study999-lesson-compact-v1
   只压缩手机端课文布局。
   原有滚动锁定、按钮功能及配色保持不变。
*/

@media screen and (max-width: 720px) {

  /* 缩小课文各区域之间的间距。 */
  #app.study999-lesson-reading-fixed {
    gap: 4px !important;
    padding: 4px 7px
      max(4px, env(safe-area-inset-bottom)) !important;
  }

  /* 顶部课文标题及操作区：压缩外边距和内边距。 */
  #app.study999-lesson-reading-fixed
  > .study999-lesson-static {
    padding: 6px 8px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* 课文标题：约缩小30%。 */
  #app.study999-lesson-reading-fixed
  > .study999-lesson-static > h1 {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  /* 课程说明保留，但限制为一行，避免占据正文空间。 */
  #app.study999-lesson-reading-fixed
  > .study999-lesson-static > p {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* 上方操作区：原有三个按钮排列。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions {
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 找到“显示中文/显示拼音”后，改为四列。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions.study999-actions-four {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }

  /* 上方按钮：压缩约30%，保留原有颜色。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > button:is(
    #loop,
    #stop,
    #exam,
    .study999-lesson-inline-toggle
  ) {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    margin: 0 !important;
    padding: 2px !important;

    font-size: clamp(10px, 2.85vw, 12px) !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;

    /* 原有背景色、图标不删除，仅缩小图标。 */
    background-size: 13px 13px !important;
  }

  /* 切换按钮与其余按钮等高。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-inline-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 正文区域：保留独立滚动，优先占用剩余高度。 */
  #app.study999-lesson-reading-fixed
  > .study999-lesson-text {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    padding: 7px 9px !important;
    margin: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* 正文：24px缩小约20%，调整为19px。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-text .hanzi,
  #app.study999-lesson-reading-fixed
  .study999-lesson-text .hanzi .char,
  #app.study999-lesson-reading-fixed
  .study999-lesson-text .english-click-word {
    font-size: 19px !important;
    line-height: 1.5 !important;
  }

  /* 拼音及英文课文中文译文：16px缩小至13px。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-text .pinyin,
  #app.study999-lesson-reading-fixed
  .study999-lesson-text .study999-english-chinese {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* 缩小每句课文的上下空隙。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-text .sentence {
    padding: 6px 0 !important;
  }

  /* 底部导航外框：减少占用高度。 */
  #app.study999-lesson-reading-fixed
  > .study999-lesson-nav-section {
    flex: 0 0 auto !important;

    padding: 4px !important;
    margin: 0 !important;
  }

  #app.study999-lesson-reading-fixed
  .study999-lesson-nav-row {
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 5px !important;
    margin: 0 !important;
  }

  /* 底部三个按钮：压缩到约28px高。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-nav-btn {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    margin: 0 !important;
    padding: 2px !important;

    gap: 0 !important;
    font-size: clamp(11px, 3vw, 12px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* 删除底部导航图标，只保留按钮文字。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-nav-btn svg {
    display: none !important;
  }
}


/* study999-lesson-controls-four-fixed-v2 */

@media screen and (max-width: 720px) {

  /* 中文 label 和英文 button 一律在第四列。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions.study999-actions-four {
    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  /* 中文「显示拼音」原本是 label：
     覆盖它独占一行的宽度和高度。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > label#study999-chinese-pinyin-control {
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    margin: 0 !important;
    padding: 2px !important;
    gap: 3px !important;

    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > label#study999-chinese-pinyin-control
  > span {
    font-size: clamp(10px, 2.8vw, 11px) !important;
    line-height: 1.1 !important;
  }

  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > label#study999-chinese-pinyin-control
  > input[type="checkbox"] {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    flex: 0 0 13px !important;
  }

  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > label#study999-chinese-pinyin-control
  > input[type="checkbox"]:checked::after {
    font-size: 13px !important;
  }

  /* 英文「显示中文」覆盖原来的 38px 高度。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > button.study999-english-zh-toggle {
    box-sizing: border-box !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    margin: 0 !important;
    padding: 2px !important;
    gap: 3px !important;

    font-size: clamp(10px, 2.8vw, 11px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* 英文切换按钮的方框和勾号同步缩小。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > button.study999-english-zh-toggle::before {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    flex: 0 0 13px !important;
  }

  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > button.study999-english-zh-toggle.is-active::after {
    left: 2px !important;
    width: 13px !important;
    height: 13px !important;
    font-size: 13px !important;
  }

  /* 英文旧卡片不再占据独立的一行，
     但保留内部状态元素以供翻译脚本使用。 */
  #app.study999-lesson-reading-fixed
  .study999-english-zh-panel {
    display: contents !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 状态为空时，不留下任何额外高度。 */
  #app.study999-lesson-reading-fixed
  .study999-english-zh-panel > p:empty {
    display: none !important;
  }

  /* 加载中或出错时，在操作按钮下方显示简短提示。 */
  #app.study999-lesson-reading-fixed
  .study999-english-zh-panel > p:not(:empty) {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
  }

}

/* 手机版网站顶部：
   课程库／注册登录／忘记密码由约67px压缩到46px。 */
@media screen and (max-width: 720px) {

  body.study999-guest-nav-ready:not(.study999-logged-nav)
  > header {
    padding: 5px 10px !important;
    gap: 5px !important;
  }

  body.study999-guest-nav-ready:not(.study999-logged-nav)
  #study999-guest-nav {
    gap: 5px !important;
  }

  body.study999-guest-nav-ready:not(.study999-logged-nav)
  #study999-guest-nav .study999-guest-btn {
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    margin: 0 !important;
    padding: 3px 2px !important;
    gap: 4px !important;

    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  body.study999-guest-nav-ready:not(.study999-logged-nav)
  #study999-guest-nav .study999-guest-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }
}


/* study999-mobile-header-and-check-fix-v3 */

@media screen and (max-width: 720px) {

  /* 1. 顶部三个导航按钮：46px → 32px。 */
  body.study999-guest-nav-ready:not(.study999-logged-nav)
  > header #study999-guest-nav .study999-guest-btn {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    padding: 1px 2px !important;
    gap: 3px !important;

    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.1 !important;
  }

  body.study999-guest-nav-ready:not(.study999-logged-nav)
  > header #study999-guest-nav .study999-guest-btn svg {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
  }

  /* 2. 压缩 Logo 和网站名所在区域。 */
  body.study999-guest-nav-ready:not(.study999-logged-nav)
  > header {
    padding: 3px 8px !important;
    gap: 3px !important;
  }

  /* Logo 最大高度：60px → 42px。 */
  body.study999-guest-nav-ready:not(.study999-logged-nav)
  > header img {
    max-width: 48px !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  /* 网站名字体缩小约10%，同时压缩行高。 */
  body.study999-guest-nav-ready:not(.study999-logged-nav)
  > header .study999-site-title {
    font-size: clamp(16px, 4.5vw, 22.5px) !important;
    line-height: 1.15 !important;
  }

  /* 3. 显示中文：勾号直接放进方框内部。
     不再使用原来的绝对定位勾号。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > button.study999-english-zh-toggle::before {
    content: "" !important;

    display: inline-grid !important;
    place-items: center !important;

    position: static !important;

    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    flex: 0 0 13px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  /* 开启显示中文时：红色勾号就在方框里。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > button.study999-english-zh-toggle.is-active::before {
    content: "✓" !important;
    color: #dc2626 !important;
    border-color: #dc2626 !important;
    font: 900 11px/1 Arial, sans-serif !important;
  }

  /* 删除旧样式中定位在按钮左边的独立勾号。 */
  #app.study999-lesson-reading-fixed
  .study999-lesson-main-actions
  > button.study999-english-zh-toggle.is-active::after {
    content: none !important;
    display: none !important;
  }

}