/* =========================================================================
   江西省学业水平考试机考 · 考生练习系统 —— 移动端适配层
   -------------------------------------------------------------------------
   本文件在站点原样式之后加载，全部使用 !important 覆盖，不改动任何原始文件。
   断点：≤900px 视为移动端；桌面端（>900px）完全不受影响。
   ========================================================================= */

/* ---------- 0. 全局基础 ---------- */
html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button,
a,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
  font-family: inherit;
}
img,
svg {
  max-width: 100%;
}
/* 输入框字号 ≥16px，否则 iOS Safari 聚焦时会自动放大页面 */
input,
textarea,
select {
  font-size: 16px;
}

@media (max-width: 900px) {

  /* =======================================================================
     1. 科目选择页（原为 1920×1080 缩放画布，手机上会被缩到 0.2 倍）
     ======================================================================= */
  .jxxk-viewport {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .jxxk-page {
    width: 100% !important;
    height: auto !important;
    min-height: 100%;
    transform: none !important;   /* 关掉 JS 计算的 scale() */
    will-change: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* 两块装饰性大圆在手机上会造成横向溢出 */
  .jxxk-page::before,
  .jxxk-page::after {
    display: none !important;
  }
  .jxxk-header {
    height: auto !important;
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
    gap: 10px;
    align-items: center !important;
  }
  .jxxk-brand {
    gap: 10px !important;
  }
  .jxxk-brand__mark {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    border-radius: 9px !important;
  }
  .jxxk-brand__name {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  .jxxk-meta {
    gap: 10px !important;
    flex-wrap: wrap;
  }
  .jxxk-meta__location {
    font-size: 12px !important;
  }
  .jxxk-step {
    padding: 6px 10px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }
  .jxxk-body {
    display: block !important;
    padding: 4px 16px 16px !important;
    min-height: 0 !important;
  }
  /* 标题原为绝对定位悬浮在卡片上方，改为正常流 */
  .jxxk-heading {
    position: static !important;
    margin: 4px 0 16px !important;
    pointer-events: auto !important;
  }
  .jxxk-title {
    font-size: 25px !important;
  }
  .jxxk-options {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 16px !important;
  }
  .jxxk-options--single {
    grid-template-columns: 1fr !important;
  }
  .jxxk-options--multi {
    grid-auto-rows: auto !important;
  }
  .jxxk-card {
    height: auto !important;
    padding: 20px !important;
    border-radius: 18px !important;
    gap: 18px !important;
  }
  .jxxk-card__emblems {
    height: auto !important;
    gap: 16px !important;
    padding: 4px 0;
  }
  .jxxk-card__emblem-tile {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
  }
  .jxxk-card__emblem-tile svg {
    width: 30px !important;
    height: 30px !important;
  }
  .jxxk-card__title {
    font-size: 26px !important;
  }
  .jxxk-card__desc {
    font-size: 14px !important;
    max-width: none !important;
  }
  .jxxk-card__cta {
    height: 50px !important;
    font-size: 15px !important;
  }
  .jxxk-actions {
    position: static !important;
    padding: 4px 16px 8px !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .jxxk-confirm {
    width: 100% !important;
    height: 48px !important;
    font-size: 15px !important;
  }
  .jxxk-hint {
    position: static !important;
    padding: 0 16px 20px !important;
    font-size: 12px !important;
  }

  /* =======================================================================
     2. 登录页
     ======================================================================= */
  .login-page {
    padding: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .login-card {
    width: min(620px, 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    border-radius: 16px !important;
  }
  .login-card__title {
    width: 100% !important;
    margin-top: 40px !important;
    padding: 0 20px !important;
    font-size: 22px !important;
  }
  .login-form {
    padding: 0 20px 28px !important;
  }
  .login-card__subtitle,
  .login-card__text {
    font-size: 14px !important;
    padding: 0 20px !important;
  }

  /* =======================================================================
     3. 座位号页
     ======================================================================= */
  .seat-number-page {
    padding: 16px !important;
    gap: 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .seat-number-page__card {
    width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
  }
  .seat-number-page__header {
    padding: 20px 16px 8px !important;
  }
  .seat-number-page__center-name {
    font-size: 20px !important;
  }
  .seat-number-page__exam-room {
    font-size: 26px !important;
  }
  .seat-number-page__body {
    padding: 20px 16px !important;
    margin: 10px 0 0 !important;
    gap: 20px !important;
  }
  .seat-number-page__digits {
    gap: 10px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .seat-number-page__actions {
    gap: 10px !important;
  }
  .seat-number-page__btn {
    height: 44px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
  }
}


@media (max-width: 900px) {

  /* =======================================================================
     4. 考试页 —— 侧栏改为抽屉
     ======================================================================= */
  .exam-page__content {
    position: relative;
  }
  .exam-page__sidebar-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 84vw) !important;
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 90;
    background: #fff;
    box-shadow: 6px 0 30px rgba(15, 23, 42, .2);
  }
  html.m-drawer-open .exam-page__sidebar-wrap {
    transform: translateX(0) !important;
  }
  .exam-sidebar {
    width: 100% !important;
    height: 100% !important;
  }
  /* 桌面版的 12px 收纳手柄在手机上无意义 */
  .exam-page__toggle {
    display: none !important;
  }

  /* 抽屉触发按钮 + 遮罩（由 mobile.js 注入）
     放在右下角、底栏上方：左上角会压住小节标题与题号徽标 */
  .m-drawer-btn {
    position: fixed;
    right: 14px;
    bottom: 82px;
    z-index: 95;
    min-width: 54px;
    height: 54px;
    padding: 0 10px;
    border: none;
    border-radius: 18px;
    background: #3370ff;
    color: #fff;
    box-shadow: 0 8px 22px rgba(51, 112, 255, .42);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }
  .m-drawer-btn__bars {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  .m-drawer-btn__label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: .02em;
  }
  .m-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 85;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
  }
  html.m-drawer-open .m-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  /* 抽屉打开时按钮保持在右侧（抽屉占左侧），点击可关闭 */
  html.m-drawer-open .m-drawer-btn {
    right: 14px;
  }

  /* ---------- 4.1 顶栏：绝对居中的计时器会与标题重叠，改为两行 ---------- */
  .exam-top-bar {
    height: auto !important;
    min-height: 44px;
    padding: 6px 10px !important;
    flex-wrap: wrap !important;
    row-gap: 6px;
    column-gap: 8px;
  }
  .exam-top-bar__left {
    flex: 1 1 100% !important;
    order: 1;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .exam-top-bar__center {
    position: static !important;
    transform: none !important;
    left: auto !important;
    order: 2;
  }
  .exam-top-bar__right {
    order: 3 !important;
    margin-left: auto;
  }
  .exam-top-bar__timer {
    padding: 3px 14px !important;
    margin: 0 !important;
    font-size: 13px !important;
  }
  .exam-top-bar__submit-btn {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  .exam-top-bar__guide-btn {
    width: 26px !important;
    height: 26px !important;
    margin-left: 8px;
  }

  /* ---------- 4.2 侧栏内的题号导航：加大点按区域 ---------- */
  .question-nav {
    padding: 8px 10px 24px !important;
    gap: 12px !important;
  }
  .question-nav__header,
  .exam-sidebar__question-nav {
    padding-top: 8px !important;
  }
  .question-nav-grid {
    padding: 8px !important;
    gap: 6px !important;
  }
  .question-nav-grid__item {
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 14px !important;
  }
  .question-nav-section {
    margin-bottom: 2px;
  }
  .question-nav-legend {
    gap: 14px !important;
    font-size: 11px !important;
    height: auto !important;
    padding: 6px 0;
    flex-wrap: wrap;
  }

  /* ---------- 4.3 答题区 ---------- */
  .answer-area {
    min-width: 0 !important;
  }
  .question-body {
    padding: 12px !important;
    gap: 16px !important;
    -webkit-overflow-scrolling: touch;
  }
  .question-header {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .question-options {
    gap: 10px !important;
  }
  .question-option {
    padding: 12px 14px !important;
    min-height: 48px;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .question-option__text {
    font-size: 15px !important;
    line-height: 1.65 !important;
    word-break: break-word;
  }
  .question-option__radio,
  .question-option__checkbox {
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* ---------- 4.4 底部操作条：留出 iPhone 底部安全区 ---------- */
  .answer-area__toolbar,
  .bottom-toolbar {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center !important;
  }
  .bottom-toolbar__btn {
    min-height: 40px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  /* ---------- 4.5 复合题 / 表格 / 代码：允许横向滚动，避免被裁切 ---------- */
  .compound-renderer__stem {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .compound-renderer__sub-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .compound-renderer__tabs {
    height: auto !important;
    flex: 1;
    min-height: 0;
  }
  .compound-renderer__tab-bar {
    flex-wrap: wrap;
    gap: 4px;
  }
  .compound-renderer__tab {
    min-height: 38px !important;
    padding: 0 14px !important;
  }
  /* 题干占 30% 太矮，手机上给到 45% */
  .split-pane--vertical > .split-pane__first {
    height: 45% !important;
  }
  .split-pane__trigger {
    min-height: 16px;
  }
  .fill-code__block {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }
  .fill-code__input {
    min-width: 84px !important;
    font-size: 15px !important;
  }
  .fill-blank-renderer__inline {
    overflow-x: auto !important;
    line-height: 2 !important;
  }
  .fill-blank-renderer__inline input {
    min-width: 76px !important;
    font-size: 16px !important;
  }

  /* 富文本作答区与图片查看器 */
  .rich-text-answer__body,
  .w-e-text-container {
    min-height: 140px !important;
  }
  .image-viewer__img {
    max-width: 92vw !important;
  }

  /* =======================================================================
     5. 等待页（考生须知）
     ======================================================================= */
  .waiting-page {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .waiting-page__info-row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    gap: 16px !important;
  }
  .waiting-page__info-card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  .waiting-page__info-section {
    min-width: 0;
  }
  .waiting-page__countdown-card {
    padding: 16px !important;
  }
  .waiting-page__main {
    padding: 0 16px 24px !important;
  }
  .waiting-page__seat-box {
    align-self: stretch !important;
    justify-content: center !important;
  }

  /* =======================================================================
     6. 完成页 / 异常页 / 防作弊页
     ======================================================================= */
  .finished-page__card {
    margin: 12px !important;
    padding: 20px 16px !important;
    flex: none !important;
    overflow-y: auto !important;
  }
  .config-error {
    padding: 20px 16px !important;
  }
  .config-error .config-error__card,
  .config-error__card {
    width: 100% !important;
    max-width: 720px !important;
    padding: 24px 18px !important;
  }
  .tamper-warning {
    padding: 20px 16px !important;
  }

  /* =======================================================================
     7. 防御：任何遗留的固定宽度都不应撑破视口
     ======================================================================= */
  .login-card__title,
  .config-error__card,
  .config-error__text,
  .finished-page__card {
    max-width: 100%;
  }
  pre,
  code {
    max-width: 100%;
  }
}

/* =======================================================================
   8. 手机横屏：高度紧张，进一步压缩顶栏并把抽屉触发按钮下移
   ======================================================================= */
@media (max-width: 900px) and (max-height: 480px) {
  .m-drawer-btn {
    bottom: 66px;
    min-width: 48px;
    height: 48px;
  }
  .jxxk-card {
    padding: 16px !important;
    gap: 12px !important;
  }
  .jxxk-card__emblems {
    display: none !important;
  }
  .jxxk-title {
    font-size: 21px !important;
  }
  .question-option {
    min-height: 44px !important;
    padding: 9px 12px !important;
  }
}

/* =======================================================================
   9. 超小屏（≤360px）再收一档
   ======================================================================= */
@media (max-width: 360px) {
  .jxxk-card__title {
    font-size: 23px !important;
  }
  .jxxk-title {
    font-size: 22px !important;
  }
  .question-nav-grid__item {
    min-width: 34px !important;
    min-height: 34px !important;
  }
  .bottom-toolbar__btn {
    padding: 8px 11px !important;
    font-size: 12px !important;
  }
}


/* =======================================================================
   10. 补充：抽屉内题号列表必须撑满高度才能正常滚动
   ======================================================================= */
@media (max-width: 900px) {
  .question-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100%;
    overscroll-behavior: contain;
  }
  .exam-sidebar__question-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .exam-sidebar__placeholder {
    flex-shrink: 0;
  }
  /* 顶栏可能换成两行，触发按钮位置留出余量 */
  .m-drawer-btn {
    bottom: 86px;
  }
  /* 题干/选项区域滚动时不要被底栏遮住 */
  .answer-area__body {
    -webkit-overflow-scrolling: touch;
  }
}


/* =======================================================================
   11. 补充：html/body/#app 均为 overflow:hidden，
       所有整页型页面必须自己提供纵向滚动，否则小屏内容会被截断。
   ======================================================================= */
@media (max-width: 900px) {
  .config-error,
  .tamper-warning {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    height: 100% !important;
  }
  .finished-page,
  .finished-page__card {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 通用兜底：任何整页容器都不应产生横向滚动条 */
  .exam-page,
  .waiting-page,
  .login-page,
  .seat-number-page,
  .finished-page {
    overflow-x: hidden !important;
  }
}


/* =======================================================================
   12. 修复：免责声明横幅与座位号数字块
   -------------------------------------------------------------------------
   - .disclaimer-banner__text 原为 flex-shrink:0（桌面端 1920 可放下），
     手机上会保持 702px 的整行宽度并向两侧溢出；
   - .digit-card 固定 160×230 且字号 180px，导致无法收缩而竖排。
   ======================================================================= */
@media (max-width: 900px) {
  .disclaimer-banner {
    flex-wrap: wrap !important;
    padding: 10px 16px !important;
    line-height: 1.65 !important;
    gap: 6px !important;
  }
  .disclaimer-banner__text {
    flex: 1 1 100% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: normal !important;
    font-size: 12.5px !important;
  }
  .disclaimer-banner svg {
    flex-shrink: 0;
  }

  /* 座位号：三个数字块保持一行，按比例缩放 */
  .seat-number-page__digits {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100%;
  }
  .digit-card {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 160 / 230;
    max-height: 190px;
  }
  .digit-card__half {
    font-size: clamp(56px, 17vw, 92px) !important;
  }
}


/* =======================================================================
   13. 修复：登录卡片在桌面端为左右双栏（flex:1 1 0），
       手机上两栏各分到一半宽度，表单被挤成 175px。改为纵向堆叠。
   ======================================================================= */
@media (max-width: 900px) {
  .login-card {
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .12);
  }
  .login-card__left,
  .login-card__right,
  .login-card__right--jxx {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .login-card__left {
    padding: 28px 20px 0 !important;
  }
  .login-card__title {
    margin-top: 0 !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    text-align: center !important;
  }
  .login-card__right {
    padding: 20px 20px 28px !important;
    gap: 14px !important;
  }
  /* 座位号牌与科目标签改为居中一行 */
  .login-card__right .login-card__seat,
  .login-card__seat {
    align-self: center !important;
  }
  .login-card__subject-pill,
  .login-card__selected-subject {
    align-self: center !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
  /* 输入与按钮撑满宽度，便于点按 */
  .login-card__right input,
  .login-form input {
    width: 100% !important;
    height: 46px !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }
  .login-card__actions,
  .login-form__actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
  }
  .login-card__actions > *,
  .login-form__actions > * {
    flex: 1 1 0 !important;
    height: 46px !important;
    font-size: 15px !important;
    justify-content: center !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
}


/* =======================================================================
   14. 修复：登录卡右上角的座位号牌是绝对定位（top:30px; right:40px），
       手机上会压住第一个输入框。改为正常流并居中。
   ======================================================================= */
@media (max-width: 900px) {
  .login-card__badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    align-self: center !important;
    margin: 0 0 8px !important;
  }
  .login-card__right {
    position: relative !important;
  }
  /* 页面顶部有免责声明横幅，避免卡片被其遮住 */
  .login-page {
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }
}


/* =======================================================================
   15. 手机横屏 · 座位号/登录页纵向空间紧张时收紧垂直间距
   ======================================================================= */
@media (max-width: 900px) and (max-height: 480px) {
  .disclaimer-banner {
    padding: 6px 12px !important;
    font-size: 11.5px !important;
  }
  .disclaimer-banner__text {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }
  .seat-number-page {
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .seat-number-page__card {
    height: auto !important;
  }
  .seat-number-page__header {
    padding: 10px 12px 0 !important;
  }
  .seat-number-page__center-name {
    font-size: 16px !important;
    margin-bottom: 0 !important;
  }
  .seat-number-page__exam-room {
    font-size: 20px !important;
  }
  .seat-number-page__body {
    padding: 10px 12px 14px !important;
    gap: 10px !important;
    margin: 6px 0 0 !important;
  }
  .digit-card {
    flex: 0 0 auto !important;
    width: clamp(70px, 18vw, 110px) !important;
    height: 96px !important;
    aspect-ratio: auto !important;
    max-height: none !important;
  }
  .digit-card__half {
    font-size: clamp(38px, 9vw, 54px) !important;
  }
  .seat-number-page__btn {
    height: 38px !important;
  }
  .login-page {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .login-card__left {
    padding-top: 14px !important;
  }
  .login-card__title {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  .login-card__badge {
    margin-bottom: 4px !important;
  }
  .login-card__right {
    padding: 10px 16px 16px !important;
    gap: 8px !important;
  }
  .login-card__right input,
  .login-form input {
    height: 40px !important;
  }
  .login-card__actions > *,
  .login-form__actions > * {
    height: 40px !important;
  }
  /* 考试页：横屏时底栏与答题卡按钮更紧凑 */
  .exam-top-bar {
    padding: 4px 8px !important;
    min-height: 38px !important;
  }
  .question-body {
    padding: 10px !important;
    gap: 12px !important;
  }
}