/* ============================================================
   移动优先响应式层（2026-08-19）
   与 app.css 配合：仅补充手机端布局与触控优化，
   不修改原有桌面样式。桌面端默认隐藏底部导航与菜单按钮。
   ============================================================ */

/* 桌面端：底部导航与菜单按钮隐藏，顶部导航保持 app.css 原样 */
.bottom-nav { display: none; }
.menu-toggle { display: none; }

/* 中等屏：统计/卡片网格两列 */
@media (min-width: 481px) and (max-width: 768px) {
  .stats, .library-grid { grid-template-columns: 1fr 1fr; }
}

/* 手机端（≤768px） */
@media (max-width: 768px) {
  /* 顶部栏：紧凑 + 吸顶 */
  header.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 14px;
  }
  .brand { font-size: 18px; }

  /* 菜单按钮 */
  .menu-toggle {
    display: inline-block;
    background: none;
    border: 0;
    color: #fff;
    font-size: 15px;
    padding: 6px 10px;
    cursor: pointer;
  }

  /* 顶部导航：默认隐藏，点击菜单展开为下拉 */
  nav.topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #183c34;
    padding: 6px 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  nav.topnav.open { display: flex; }
  nav.topnav a,
  nav.topnav form {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }
  nav.topnav form { margin: 0; }
  nav.topnav .link { padding: 12px 16px; }

  /* 主体：单列、满宽、底部留白给固定导航 */
  main {
    max-width: none;
    margin: 0;
    padding: 12px 12px calc(72px + env(safe-area-inset-bottom));
    font-size: 14px; /* 全局缩小到小程序风格 */
    line-height: 1.55;
  }

  /* 标题字号层级 */
  main h1 { font-size: 20px; }
  main h2 { font-size: 16px; }
  main h3 { font-size: 15px; }
  p, li, td, th, .card p { font-size: 14px; }
  .muted, small, .notice, .card small { font-size: 12px; }

  /* 卡片紧凑化 */
  .card {
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  /* 底部角色导航：固定、均分、触控友好 */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #183c34;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 7px 4px 6px;
    color: #cfe0d9;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
  }
  .bottom-nav a:hover,
  .bottom-nav a:focus { color: #fff; }

  /* 卡片/网格：手机单列，大数字也缩小 */
  .stats, .library-grid { grid-template-columns: 1fr; gap: 12px; }
  .stats strong, .library-card strong,
  .library-panel > strong,
  .task-card strong, .tool-card strong { font-size: 20px; }
  .library-panel span { font-size: 12px; }
  .task-card span, .task-card p,
  .tool-card span, .tool-card small { font-size: 12px; }
  .tool-card strong { margin-bottom: 2px; }

  /* ============================================================
     表格：默认仍允许横向滚动；加了 .card-table 的表格变成卡片，
     每行一张竖排卡片，无需左右滑动。
     ============================================================ */
  main table:not(.card-table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  main table:not(.card-table) th,
  main table:not(.card-table) td { white-space: nowrap; }

  /* 卡片表：手机端每行变一张卡片 */
  table.card-table,
  table.card-table thead,
  table.card-table tbody,
  table.card-table th,
  table.card-table td,
  table.card-table tr { display: block; box-sizing: border-box; }

  table.card-table { border-collapse: collapse; }

  /* 隐藏表头 */
  table.card-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.card-table tr {
    margin-bottom: 14px;
    border: 1px solid #e3ded0;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(44, 57, 43, 0.05);
  }

  table.card-table td {
    border: none;
    border-bottom: 1px solid #f0ede4;
    padding: 9px 0 9px 45%;
    text-align: right;
    position: relative;
    white-space: normal;
    min-height: 38px;
  }

  table.card-table td:last-child { border-bottom: 0; }

  /* 用 data-label 显示列名 */
  table.card-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 9px;
    width: 42%;
    text-align: left;
    font-weight: 600;
    color: #596761;
    font-size: 12px;
  }

  /* 操作类单元格：左对齐、铺满 */
  table.card-table td[data-label="账号操作"],
  table.card-table td[data-label="操作"],
  table.card-table td[data-label="选择"] {
    padding-left: 0;
    text-align: left;
  }
  table.card-table td[data-label="账号操作"]::before,
  table.card-table td[data-label="操作"]::before,
  table.card-table td[data-label="选择"]::before { display: none; }

  /* 卡片内的按钮不要撑爆 */
  table.card-table button,
  table.card-table .button {
    margin: 4px 4px 0 0;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* 触控目标 ≥44px */
  .button, button, .choices label, input, select {
    min-height: 44px;
  }
  .choices label { font-size: 14px; padding: 10px 12px; }
  .choices label small { font-size: 12px; }

  /* ============================================================
     工具栏：按钮太多时改为网格，避免挤成细长条
     ============================================================ */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .toolbar > div:last-child,
  .toolbar > div:only-child > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .toolbar .button,
  .toolbar button,
  .toolbar .secondary {
    width: 100%;
    text-align: center;
    min-height: 46px;
    font-size: 14px;
    padding: 11px 8px;
  }

  /* 筛选/表单行 */
  .practice-head, .filters, .question-meta, .section-title {
    flex-wrap: wrap;
    gap: 10px;
  }
  .filters > * { flex: 1 1 100%; }
  .filters label { display: block; width: 100%; }
  .filters input, .filters select { width: 100%; }

  /* 双栏布局：手机上下堆叠 */
  .two-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 词选择器：6列太挤，改为3列 */
  .word-picker {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
  }
  .word-picker label {
    min-height: 44px;
    padding: 8px;
    font-size: 14px;
    justify-content: center;
  }
  .word-picker input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: auto;
  }

  /* 字典首页300实词网格：10列太挤，改为5列 */
  .word-link-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .word-link-grid a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 8px 4px;
  }

  /* 学生 Hero 区：更紧凑 */
  .student-hero {
    padding: 14px 16px;
    gap: 12px;
    border-radius: 12px;
  }
  .student-hero p { font-size: 12px; }
  .student-hero h1 { font-size: 20px; }
  .student-hero > div > span { font-size: 12px; }
  .student-summary { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .student-summary article { padding: 10px; min-width: 0; }
  .student-summary strong { font-size: 18px; }
  .student-summary span { font-size: 12px; }

  /* 首页工具/资料卡片更紧凑 */
  .home-tools, .library-panels { gap: 10px; }
  .library-panel .quick-actions { margin-top: 12px; }
  .library-panel .progress-bar { margin: 8px 0 12px; }
  .tool-card { padding: 14px 12px; }
  .tool-card span { font-size: 14px; }

  /* 积分排名：紧凑行列表 */
  .ranking-row {
    padding: 7px 4px;
    font-size: 14px;
    gap: 8px;
  }
  .ranking-rank { width: 30px; font-size: 13px; }
  .ranking-score small { font-size: 11px; }
  .ranking-card .section-title strong { font-size: 14px; }

  /* 表单：单列满宽 + 防 iOS 缩放 */
  .stack input, .stack select { width: 100%; }
  .narrow { max-width: none; margin: 24px auto; padding: 0 14px; }

  /* 通用表单输入 */
  input, select, textarea {
    font-size: 16px;
    max-width: 100%;
  }

  /* 题目/解析区域在小屏更宽松 */
  .question, .result { padding: 0 2px; }

  /* 自动学习卡片 */
  .auto-learning-card {
    flex-direction: column;
    gap: 14px;
  }
  .auto-learning-card form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .auto-learning-card label { display: block; width: 100%; }
  .auto-learning-card select,
  .auto-learning-card button { width: 100%; }

  /* 顶部下拉菜单按钮更大 */
  .menu-toggle {
    min-height: 40px;
    min-width: 56px;
    font-size: 14px;
  }
  nav.topnav a, nav.topnav .link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* ====== 登录 / 注册页（移动端优化）====== */
  .auth-page {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px 16px calc(78px + env(safe-area-inset-bottom));
    text-align: center;
  }
  .auth-brand {
    margin-bottom: 24px;
  }
  .auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #183c34;
    color: #c8a464;
    border-radius: 18px;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
  }
  .auth-brand h1 { font-size: 20px; margin: 0 0 6px; }
  .auth-brand p { font-size: 13px; margin: 0; }
  .auth-card {
    text-align: left;
    padding: 24px 20px !important;
  }
  .auth-form .field {
    margin-bottom: 16px;
  }
  .auth-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #3a5a52;
    margin-bottom: 6px;
  }
  .auth-form input[type="text"],
  .auth-form input[type="password"] {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #d0ddd8;
    border-radius: 8px;
    font-size: 16px; /* 防止 iOS 自动缩放 */
    background: #fafcfb;
    transition: border-color 0.2s;
  }
  .auth-form input:focus {
    outline: none;
    border-color: #183c34;
    box-shadow: 0 0 0 3px rgba(24, 60, 52, 0.1);
  }
  .auth-form small {
    display: block;
    font-size: 12px;
    color: #889a94;
    margin-top: 4px;
  }
  .btn-primary {
    width: 100%;
    min-height: 48px;
    background: #183c34;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
  }
  .btn-primary:hover { background: #22574a; }
  .btn-primary:active { background: #102822; }
  .auth-links {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
  }
  .auth-links a { color: #183c34; text-decoration: none; }
  .auth-links a:hover { text-decoration: underline; }
  .auth-footer {
    text-align: center;
    font-size: 12px;
    margin-top: 28px;
  }
  /* 注册页错误提示 */
  .auth-card .notice.error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
  }

  /* ============================================================
     新增优化项（2026-08-19 第二轮）
     ============================================================ */

  /* ---- 连线检测页：双栏改单列 ---- */
  .matching-board {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .match-column button {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
    white-space: normal;
    word-break: break-all;
  }
  .match-column small { font-size: 12px; }
  .match-column h2 { font-size: 15px; margin-bottom: 8px; }

  /* ---- 阶段辨误检测：选项触控友好 ---- */
  .stage-question label {
    display: block;
    padding: 12px 14px;
    border: 1px solid #cfc9bc;
    border-radius: 8px;
    margin-bottom: 8px;
    min-height: 48px;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    word-break: break-all;
    cursor: pointer;
  }
  .stage-question label:has(input:checked) {
    border-color: #476b61;
    background: #f7faf8;
  }
  .stage-question input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: auto;
    margin-right: 8px;
    vertical-align: middle;
  }

  /* ---- checkbox 列表（班级选择、教材课目）触控友好 ---- */
  .check-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 12px 0;
  }
  .check-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    min-height: 44px;
    background: #f6f7f5;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
  }
  .check-list label:has(input:checked) {
    border-color: #476b61;
    background: #e8f3ec;
  }
  .check-list input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: auto;
    flex-shrink: 0;
  }

  /* ---- 课下注释训练：教材选择器 & 课目勾选 ---- */
  .textbook-picker {
    margin-bottom: 10px;
    border: 1px solid #e3ded0;
    border-radius: 10px;
    overflow: hidden;
  }
  .textbook-picker summary {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 48px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #f6f7f5;
  }
  .textbook-picker summary label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .lesson-checks {
    display: grid;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid #e3ded0;
  }
  .lesson-checks label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #ece8df;
    font-size: 14px;
    cursor: pointer;
  }
  .lesson-checks label span { flex: 1; }
  .lesson-checks label small { flex-shrink: 0; }
  .lesson-checks input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: auto;
    flex-shrink: 0;
  }

  /* ---- 训练顺序选择（radio 行） ---- */
  .order-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    font-size: 14px;
  }
  .order-choice b { width: 100%; }
  .order-choice label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    min-height: 44px;
    background: #f6f7f5;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 14px;
  }
  .order-choice label:has(input:checked) {
    border-color: #476b61;
    background: #e8f3ec;
  }
  .order-choice input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: auto;
  }

  /* ---- 竞赛页面：布局适配 ---- */
  .competition-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .competition-status {
    padding: 10px 14px;
    font-size: 15px;
    border-radius: 10px;
  }
  .competition-question h2 {
    font-size: 17px;
    line-height: 1.6;
    word-break: break-all;
  }
  .competition-options {
    gap: 8px;
    margin: 14px 0;
  }
  .competition-options > div {
    padding: 10px 12px;
    font-size: 14px;
    white-space: normal;
    word-break: break-all;
    border-radius: 8px;
  }
  .fill-examples > div {
    padding: 10px 14px;
    border-left-width: 3px;
  }
  .fill-examples p { font-size: 15px; }
  .fill-answer-panel { padding: 14px; }
  .live-answer {
    gap: 12px;
    padding-top: 14px;
  }
  .live-answer label { min-height: 44px; }
  .group-buttons {
    gap: 8px;
  }
  .group-button {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
    flex: 1;
  }
  .answer-buttons {
    gap: 8px;
  }
  .answer-buttons button {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 15px;
    border-radius: 8px;
    flex: 1;
  }
  .competition-controls {
    gap: 8px;
    margin-bottom: 14px;
  }
  .competition-controls form { flex: 1; min-width: 0; }
  .competition-controls button {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    padding: 10px 8px;
  }
  .score-board div {
    padding: 8px 0;
    font-size: 14px;
  }
  .score-board strong { font-size: 18px; }
  .compact-form { margin-top: 10px; }
  .compact-form select,
  .compact-form input { width: 100%; min-height: 44px; }
  .compact-form button { width: 100%; min-height: 44px; margin-top: 8px; }
  .event-row {
    font-size: 13px;
    gap: 2px 8px;
    padding-bottom: 6px;
  }

  /* ---- 管理员审核行：适配窄屏 ---- */
  .approval-row {
    padding: 14px !important;
    border: 1px solid #e3ded0;
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .approval-row h3 { font-size: 15px; }
  .approval-row p { font-size: 13px; white-space: normal; word-break: break-all; }
  .approval-row label { font-size: 14px; }
  .approval-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: auto;
    margin-right: 4px;
  }
  .approval-row input[type="text"],
  .approval-row input[name="review_note"] {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
  }
  .approval-row button { margin-top: 8px; }

  /* ---- 字典详情页：释义卡片与例句 ---- */
  .word-card h1 { font-size: 24px; }
  .sense-card {
    margin: 12px 0;
    padding: 12px 14px;
    border-left-width: 4px;
  }
  .sense-card h2 { font-size: 15px; }
  .sense-card h2 small { font-size: 12px; }
  .example-row {
    padding: 8px 0;
  }
  .example-row p {
    font-size: 15px;
    white-space: normal;
    word-break: break-all;
  }
  .example-row small { font-size: 12px; }

  /* ---- 错题本：wrong-card 紧凑化 ---- */
  .wrong-card {
    padding: 12px !important;
    margin-bottom: 10px;
  }
  .wrong-card > p {
    font-size: 13px;
    white-space: normal;
    word-break: break-all;
  }
  .wrong-card .question-meta {
    flex-wrap: wrap;
    gap: 6px;
  }
  .wrong-card .button,
  .wrong-card button {
    margin-top: 6px;
    min-height: 40px;
    font-size: 13px;
    padding: 8px 12px;
  }
  .wrong-card .favorite {
    min-height: 36px;
    font-size: 13px;
    padding: 4px 10px;
  }

  /* ---- 收藏按钮（各页面通用） ---- */
  .favorite {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    background: none;
    border: 1px solid #b9c0bc;
    border-radius: 6px;
    cursor: pointer;
  }

  /* ---- 纠错反馈框 ---- */
  .feedback-box { margin-top: 14px; }
  .feedback-box summary { font-size: 14px; }
  .feedback-box textarea {
    width: 100%;
    min-height: 80px;
    font-size: 16px;
    margin-top: 10px;
  }
  .feedback-box button { margin-top: 8px; }

  /* ---- Django form.as_p 通用样式修复 ---- */
  .card form p {
    margin: 0 0 12px;
    font-size: 14px;
  }
  .card form p label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #3a5a52;
  }
  .card form p input,
  .card form p select,
  .card form p textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    padding: 8px 12px;
  }
  .card form p textarea {
    min-height: 80px;
  }
  .card form p small,
  .card form p .helptext {
    display: block;
    font-size: 12px;
    color: #889a94;
    margin-top: 4px;
  }
  /* Django 错误列表 */
  .card form p ul.errorlist {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
  }
  .card form p ul.errorlist li {
    color: #a52f2f;
    font-size: 13px;
  }

  /* ---- 分页组件 ---- */
  .quick-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .quick-actions .button,
  .quick-actions button {
    min-height: 44px;
    font-size: 14px;
  }
  .quick-actions > span {
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #6c7773;
  }

  /* ---- 跳题表单 ---- */
  .jump-form {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 0 14px;
  }
  .jump-form label {
    flex: 1 1 100%;
    font-size: 14px;
  }
  .jump-form input[name="number"] {
    width: 60px;
    min-height: 44px;
    text-align: center;
  }
  .jump-form small { font-size: 12px; }

  /* ---- 大操作按钮 ---- */
  .large-action {
    padding: 14px;
    font-size: 16px;
    border-radius: 10px;
    min-height: 50px;
  }

  /* ---- 通知/提示条 ---- */
  .notice {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
    white-space: normal;
    word-break: break-all;
  }

  /* ---- 长文本换行保护 ---- */
  .question h2,
  .result h2,
  .result p,
  .answer-result p,
  .answer-result h3 {
    white-space: normal;
    word-break: break-all;
  }

  /* ---- 实词闯关总览网格 ---- */
  .word-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .word-summary strong { font-size: 20px; }
  .word-summary span { font-size: 12px; }

  /* ---- 任务/作业列表 ---- */
  .assignment-list article {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }
  .assignment-list small { font-size: 12px; }
  .assignment-list .button,
  .assignment-list button {
    width: 100%;
    min-height: 44px;
    text-align: center;
  }

  /* ---- 连线结果 ---- */
  .matching-results article { padding: 12px; }
  .matching-results p { font-size: 13px; white-space: normal; word-break: break-all; }
  .result-actions {
    gap: 8px;
  }
  .result-actions .button {
    flex: 1;
    text-align: center;
    min-height: 44px;
    font-size: 14px;
  }

  /* ---- 阶段辨误结果 ---- */
  .stage-result { margin-bottom: 10px; padding: 12px; }
  .stage-result h3 { font-size: 14px; white-space: normal; word-break: break-all; }

  /* ---- 教师端补作业 radio 行 ---- */
  .card p label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    min-height: 44px;
    background: #f6f7f5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    margin: 4px 4px 4px 0;
  }
  .card p input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: auto;
  }

  /* ---- 纠错中心 & 账号页：未加 card-table 的表格给最小宽度防截断 ---- */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }
  .table-wrap table {
    min-width: 500px;
  }

  /* ---- 竞赛创建表单 ---- */
  .competition-form .form-field { margin-bottom: 14px; }
  .competition-form .form-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
  .competition-form .form-field input,
  .competition-form .form-field select,
  .competition-form .form-field textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  .competition-form .form-field textarea { min-height: 80px; }
  .competition-form ul {
    columns: 1;
    gap: 6px;
  }
  .competition-form ul li label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    min-height: 44px;
    background: #f6f7f5;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .competition-form ul li label:has(input:checked) {
    border-color: #476b61;
    background: #e8f3ec;
  }

  /* ---- 返回链接 ---- */
  .card > p > a:first-child,
  main > p > a:first-child {
    display: inline-block;
    padding: 6px 0;
    margin-bottom: 8px;
    min-height: 44px;
    line-height: 32px;
    font-size: 14px;
    color: #476b61;
  }

  /* ---- 进度条：触控不误触 ---- */
  .progress-bar {
    height: 8px;
    border-radius: 4px;
    margin: 6px 0;
  }
  .progress-bar i { border-radius: 4px; }

  /* ---- 底部导航当前页面高亮 ---- */
  .bottom-nav a.active {
    color: #c8a464;
    font-weight: 600;
  }

  /* ---- 防止点击穿透：底部导航区域 ---- */
  main {
    -webkit-tap-highlight-color: transparent;
  }

  /* ---- 安全区域：页面内超链接避免贴边 ---- */
  .card a:not(.button):not(.tool-card) {
    padding: 2px 0;
  }

  /* ---- 输入框聚焦时防止被键盘遮挡 ---- */
  input:focus,
  select:focus,
  textarea:focus {
    scroll-margin-bottom: 80px;
  }

  /* ============================================================
     PWA 安装提示栏
     ============================================================ */
  .pwa-install-bar {
    position: fixed;
    bottom: calc(56px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    z-index: 55;
    background: #fff;
    border: 1px solid #e3ded0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    animation: slideUp 0.3s ease-out;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .pwa-install-icon { font-size: 20px; flex-shrink: 0; }
  .pwa-install-text {
    flex: 1;
    font-size: 13px;
    color: #24312d;
    line-height: 1.4;
  }
  .pwa-install-action {
    background: #183c34;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    min-height: 36px;
  }
  .pwa-install-close {
    background: none;
    border: none;
    color: #889a94;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    min-height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* 题目选项选中状态 */
  .choice-option {
    position: relative;
    padding-left: 40px !important;
  }
  .choice-option input[type="radio"] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    min-height: auto;
    margin: 0;
  }
  .choice-option.selected {
    border-color: #183c34 !important;
    background: #e8f3ec !important;
    box-shadow: 0 0 0 2px #183c34;
  }
  .choice-option:active {
    background: #f0f5f2;
  }

  /* ============================================================
     触摸反馈与过渡动画
     ============================================================ */
  /* 按钮点击反馈 */
  .button, button, .tool-card, .library-card,
  .word-link-grid a, .match-column button,
  .group-button, .answer-buttons button {
    transition: transform 0.1s, background-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .button:active, button:active:not(:disabled),
  .tool-card:active, .library-card:active,
  .word-link-grid a:active, .match-column button:active,
  .group-button:active, .answer-buttons button:active {
    transform: scale(0.97);
  }

  /* 卡片悬停/点击效果 */
  .card {
    transition: box-shadow 0.2s, transform 0.15s;
  }
  .card:active {
    box-shadow: 0 2px 12px rgba(44, 57, 43, 0.08);
  }

  /* 底部导航项点击反馈 */
  .bottom-nav a {
    transition: color 0.15s, background-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a:active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* 选择项高亮过渡 */
  .choices label, .check-list label, .lesson-checks label,
  .order-choice label, .word-picker label,
  .competition-form ul li label {
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  }

  /* 加载状态骨架屏 */
  .skeleton {
    background: linear-gradient(90deg, #f0ede4 25%, #e8e4d8 50%, #f0ede4 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
  }
  @keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* 页面切换淡入 */
  main {
    animation: fadeIn 0.2s ease-out;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* 通知条滑入 */
  .notice {
    animation: noticeSlideIn 0.3s ease-out;
  }
  @keyframes noticeSlideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* 离线提示条 */
  .offline-notice {
    animation: noticeSlideIn 0.3s ease-out;
  }

  /* 表格行加载动画 */
  table.card-table tr {
    animation: rowFadeIn 0.2s ease-out;
    animation-fill-mode: both;
  }
  table.card-table tr:nth-child(1) { animation-delay: 0.05s; }
  table.card-table tr:nth-child(2) { animation-delay: 0.1s; }
  table.card-table tr:nth-child(3) { animation-delay: 0.15s; }
  table.card-table tr:nth-child(4) { animation-delay: 0.2s; }
  table.card-table tr:nth-child(5) { animation-delay: 0.25s; }
  @keyframes rowFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* 平滑滚动 */
  html {
    scroll-behavior: smooth;
  }

  /* 隐藏滚动条但保留功能（可选） */
  .word-picker::-webkit-scrollbar,
  .word-link-grid::-webkit-scrollbar,
  .lesson-checks::-webkit-scrollbar {
    width: 4px;
  }
  .word-picker::-webkit-scrollbar-thumb,
  .word-link-grid::-webkit-scrollbar-thumb,
  .lesson-checks::-webkit-scrollbar-thumb {
    background: #c0c8c4;
    border-radius: 2px;
  }

  /* ============================================================
     表单优化
     ============================================================ */
  /* 搜索框清除按钮 */
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  /* 禁用元素样式 */
  button:disabled, .button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
  }

  /* 焦点样式 */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible {
    outline: 2px solid #476b61;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* 选中文字颜色 */
  ::selection {
    background: #c8a46433;
    color: #183c34;
  }
}