/* ============================================================ 英语单词过关 · 全局样式 设计：简约工具型；统一圆角 14px；细边框 + 轻阴影；克制用色 主题：默认跟随系统，可手动切换（） ============================================================ */ /* ---------- 主题变量 ---------- */ :root { --bg: #f4f4f0; --surface: #ffffff; --surface-2: #fafaf7; --text: #1f2328; --muted: #68707a; --border: #e2e3dc; --primary: #0f766e; /* 唯一强调色（墨青） */ --primary-contrast: #ffffff; --primary-soft: #e0f0ee; --ok: #15803d; --ok-soft: #e4f3e9; --err: #b3261e; --err-soft: #fae9e7; --chip-bg: #ecece6; --shadow: 0 1px 2px rgba(20, 26, 32, .05), 0 2px 8px rgba(20, 26, 32, .04); --radius: 14px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --font-en: "Georgia", "Times New Roman", "Palatino Linotype", serif; } html[data-theme="dark"] { --bg: #15181c; --surface: #1f242b; --surface-2: #242a32; --text: #e7eaee; --muted: #99a2ad; --border: #323a44; --primary: #37cfc0; --primary-contrast: #0c1b19; --primary-soft: #173431; --ok: #4ade80; --ok-soft: #16301f; --err: #fb8b84; --err-soft: #3a2020; --chip-bg: #2b323c; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25); } /* 未手动指定时跟随系统 */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #15181c; --surface: #1f242b; --surface-2: #242a32; --text: #e7eaee; --muted: #99a2ad; --border: #323a44; --primary: #37cfc0; --primary-contrast: #0c1b19; --primary-soft: #173431; --ok: #4ade80; --ok-soft: #16301f; --err: #fb8b84; --err-soft: #3a2020; --chip-bg: #2b323c; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25); } } /* ---------- 基础 ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; min-height: 100dvh; -webkit-font-smoothing: antialiased; } button, input, select { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ---------- 布局骨架 ---------- */ .app { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; } .app-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; max-width: 1200px; margin: 0 auto; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; white-space: nowrap; } .brand .mark { width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--primary); color: var(--primary-contrast); display: grid; place-items: center; font-size: 14px; } .app-bar .spacer { flex: 1; } .icon-btn { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--text); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; } .icon-btn:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent); } .icon-btn:active { transform: scale(.92); } .icon-btn svg { width: 20px; height: 20px; } .nav { display: none; } /* ---------- 左侧收纳栏（抽屉菜单） ---------- */ .drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(80vw, 288px); z-index: 45; background: var(--surface); border-right: 1px solid var(--border); transform: translateX(-105%); transition: transform .22s ease; display: flex; flex-direction: column; padding: calc(12px + env(safe-area-inset-top)) 12px 12px; overflow-y: auto; } html.drawer-open .drawer { transform: none; box-shadow: var(--shadow); } .drawer-mask { position: fixed; inset: 0; z-index: 40; background: rgba(10, 14, 18, .42); opacity: 0; pointer-events: none; transition: opacity .22s ease; } html.drawer-open .drawer-mask { opacity: 1; pointer-events: auto; } .drawer-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; padding: 6px 10px 14px; } .drawer-head .mark { width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--primary); color: var(--primary-contrast); display: grid; place-items: center; font-size: 14px; } .drawer-group-label { font-size: 12px; color: var(--muted); font-weight: 600; padding: 14px 12px 6px; letter-spacing: .04em; } .drawer-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-height: 44px; margin: 2px 0; border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 600; border: 1px solid transparent; } .drawer-nav a svg { width: 19px; height: 19px; flex: none; } .drawer-nav a:hover { color: var(--text); background: var(--chip-bg); } .drawer-nav a.active { color: var(--primary); background: var(--primary-soft); } .drawer-foot { margin-top: auto; padding: 14px 12px 4px; font-size: 12px; color: var(--muted); } .search-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } .search-row .input { flex: 1; min-width: 200px; } main.view { padding-top: 14px; } /* ---------- 通用组件 ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .section-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .section-title .hint { font-weight: 400; font-size: 13px; color: var(--muted); } .h-between { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .h-between .section-title { margin: 0; } .field-label { font-size: 13px; color: var(--muted); margin: 14px 0 8px; font-weight: 600; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease, filter .2s ease; } .btn:hover { border-color: var(--primary); box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 15%, transparent); } .btn:active { transform: translateY(1px) scale(.98); } .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 38%, transparent); transform: translateY(-1px); } .btn.primary:active { transform: translateY(1px) scale(.97); } .btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--border)); } .btn.danger:hover { background: var(--err-soft); } .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn.ghost:hover { color: var(--text); background: var(--chip-bg); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.block { width: 100%; } .btn.sm { min-height: 36px; padding: 4px 12px; font-size: 14px; } .input, .select, textarea.input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 16px; } .input:focus, .select:focus { outline: none; border-color: var(--primary); background: var(--surface); } textarea.input { resize: vertical; min-height: 72px; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2368707a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease; } .chip:hover { border-color: var(--primary); } .chip:active { transform: scale(.96); } .chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); animation: pop-in .22s ease, glow-pulse .6s ease; box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 25%, transparent); } .chip:disabled { opacity: .55; cursor: not-allowed; } .chip .note { font-size: 12px; font-weight: 400; opacity: .75; } /* 模式卡片 */ .mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .mode-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 92px; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease; } .mode-card:active { transform: scale(.97); } .mode-card .mc-name { font-weight: 700; font-size: 15px; } .mode-card .mc-desc { font-size: 13px; color: var(--muted); line-height: 1.4; } .mode-card.on { border-color: var(--primary); background: var(--primary-soft); animation: pop-in .22s ease, glow-pulse .6s ease; box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 20%, transparent); } .mode-card.on .mc-name { color: var(--primary); } /* 练习区 */ .quiz-wrap { display: grid; gap: 14px; grid-template-columns: 1fr; } .prompt-card { text-align: center; padding: 28px 18px; } .prompt-card .prompt-main { font-size: clamp(30px, 8vw, 44px); font-weight: 700; line-height: 1.25; word-break: break-word; font-family: var(--font-en); } .prompt-card .prompt-sub { margin-top: 8px; color: var(--muted); font-size: 15px; } .prompt-card .prompt-tag { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; } .answer-row { display: flex; gap: 10px; } .answer-row .input { flex: 1; min-width: 0; } .opts { display: grid; gap: 10px; } .opt { min-height: 52px; padding: 10px 14px; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 16px; line-height: 1.4; display: flex; align-items: center; gap: 10px; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease; } .opt .key { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); transition: background .18s ease, color .18s ease, border-color .18s ease; } .opt:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 3px 12px color-mix(in srgb, var(--primary) 14%, transparent); } .opt:active { transform: scale(.98); } .opt.right { border-color: var(--ok); background: var(--ok-soft); animation: flash-ok .45s ease; } .opt.right .key { background: var(--ok); border-color: var(--ok); color: #fff; } .opt.wrong { border-color: var(--err); background: var(--err-soft); animation: shake-x .4s ease; } .opt.wrong .key { background: var(--err); border-color: var(--err); color: #fff; } .opt.dim { opacity: .55; } .feedback { border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.5; } .feedback.ok { background: var(--ok-soft); color: var(--ok); } .feedback.bad { background: var(--err-soft); color: var(--err); } .feedback.neutral { background: var(--chip-bg); color: var(--text); } .feedback .fb-ans { font-weight: 700; font-family: var(--font-en); } .progress-line { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); } .progress-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; } .progress-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .2s; } /* 统计面板 */ .stats-panel { display: grid; gap: 14px; } .stats-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat-num { border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; } .stat-num b { display: block; font-size: clamp(22px, 5vw, 30px); font-weight: 700; } .stat-num.ok b { color: var(--ok); } .stat-num.err b { color: var(--err); } .stat-num.acc b { color: var(--primary); } .stat-num span { font-size: 12px; color: var(--muted); } .pie-box { display: grid; gap: 12px; align-items: center; } .pie-box canvas { width: 100%; max-width: 320px; margin: 0 auto; } .legend { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .legend .lg-item { display: flex; align-items: center; gap: 8px; } .legend .swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; } .compare { font-size: 14px; font-weight: 700; } .compare.up { color: var(--ok); } .compare.down { color: var(--err); } .compare.flat { color: var(--muted); } /* 表格（记录 / 错题 / 词库预览） */ .tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; } table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; } .tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .tbl th { background: var(--surface-2); font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; } .tbl tr:last-child td { border-bottom: none; } .tbl td.w, .tbl th.w { font-family: var(--font-en); } /* 列表行（题库 / 错题卡片） */ .list { display: grid; gap: 10px; } .row-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; } .row-item .ri-main { flex: 1; min-width: 0; } .row-item .ri-title { font-weight: 600; font-size: 15px; } .row-item .ri-sub { font-size: 13px; color: var(--muted); margin-top: 2px; } .row-item .ri-actions { display: flex; gap: 8px; flex: none; } .check { width: 22px; height: 22px; flex: none; accent-color: var(--primary); } /* 弹窗 */ .modal-mask { position: fixed; inset: 0; z-index: 50; background: rgba(10, 14, 18, .45); display: grid; place-items: center; padding: 16px; } .modal { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); } .modal h3 { margin: 0 0 12px; font-size: 17px; } .modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } /* Toast */ .toast-wrap { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none; } .toast { background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); max-width: 90vw; animation: toast-in .18s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* 空态 */ .empty { text-align: center; color: var(--muted); padding: 30px 10px; font-size: 15px; } .empty .empty-act { margin-top: 12px; } /* 页脚小字 */ .foot-note { margin-top: 26px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; } /* ---------- 自带题库：筛选 + 竖版书卡 + 教材模块 ---------- */ .filter-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .filter-row .filter-label { font-size: 13px; color: var(--muted); font-weight: 600; line-height: 44px; flex: none; min-width: 34px; } .filter-row .chips { flex: 1; min-width: 200px; } .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; } .book-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 14px; min-height: 150px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: center; } .book-card:hover { border-color: var(--primary); box-shadow: var(--shadow); } .book-card .bc-icon { width: 46px; height: 46px; color: var(--primary); } .book-card .bc-icon svg { width: 100%; height: 100%; } .book-card .bc-subject { font-weight: 700; font-size: 14px; line-height: 1.35; } .book-card .bc-pub { font-size: 12px; color: var(--muted); } .book-card .bc-badge { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--muted); } .book-card .bc-badge.on { background: var(--ok-soft); color: var(--ok); } .crumb { margin-bottom: 10px; } .link-btn { background: none; border: none; padding: 4px 0; min-height: 36px; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer; } .link-btn:hover { text-decoration: underline; } .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; } .module-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; } .module-card.off { opacity: .55; } .module-card .mc-top { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; } .module-card .mc-icon { width: 30px; height: 30px; border-radius: 9px; flex: none; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 14px; font-weight: 700; } .module-card .mc-count { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; } .module-card .mc-desc { font-size: 13px; color: var(--muted); line-height: 1.45; flex: 1; } .module-card .mc-acts { display: flex; gap: 8px; flex-wrap: wrap; } /* 模块学习列表 */ .learn-list { display: grid; gap: 10px; margin-top: 14px; } .learn-item { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .learn-item .li-idx { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 13px; font-weight: 700; } .learn-item .li-body { flex: 1; min-width: 0; } .learn-item .li-field { font-size: 14px; line-height: 1.6; margin-bottom: 3px; } .learn-item .li-label { color: var(--muted); } .learn-item .li-value { word-break: break-word; } /* 文言文/古诗：先看篇目题目，点击后展开正文（避免原文挤在一行字太小） */ .gw-item { cursor: default; } .gw-title { width: 100%; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: none; border: none; padding: 0; text-align: left; color: var(--text); min-height: 36px; } .gw-t { font-size: 18px; font-weight: 700; color: var(--primary); } .gw-meta { font-size: 13px; color: var(--muted); } .gw-hint { font-size: 12px; color: var(--muted); font-weight: 400; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; transition: opacity .2s ease; } .gw-arrow { margin-left: auto; color: var(--muted); transition: transform .25s ease; } .gw-item.open .gw-arrow { transform: rotate(180deg); } .gw-item.open .gw-hint { opacity: 0; } .gw-body { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease; } .gw-item.open .gw-body { max-height: 2400px; opacity: 1; margin-top: 10px; } .gw-body .li-field { font-size: 15px; line-height: 1.8; margin-bottom: 6px; } .gw-body .li-value { font-size: 16px; } /* 点亮过渡动画 */ @keyframes pop-in { 0% { transform: scale(.94); opacity: .4; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes flash-ok { 0% { transform: scale(.96); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 40% { transform: scale(1.04); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); } } @keyframes shake-x { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } @keyframes glow-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); } } /* ---------- 响应式 ---------- */ /* 平板 / 电脑：题目在上、选项/输入区在下（保持单列），仅加宽版心与列数 */ @media (min-width: 720px) and (orientation: landscape), (min-width: 860px) { .stats-panel { grid-template-columns: 1fr 1fr; align-items: start; } .pie-box { grid-template-columns: 1.2fr 1fr; } .mode-grid { grid-template-columns: repeat(4, 1fr); } .module-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } /* PC */ @media (min-width: 1024px) { .app { padding-left: 24px; padding-right: 24px; } .stats-panel { grid-template-columns: 1fr 1fr; } .book-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } } /* 移动端窄屏：书卡/模块卡换行舒适 */ @media (max-width: 719px) { .book-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .module-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .filter-row { flex-direction: column; align-items: stretch; gap: 4px; } .filter-row .filter-label { line-height: 20px; } } /* ---------- 打印 ---------- */ @media print { .app-bar, .drawer, .drawer-mask, #menu-btn, .nav, .no-print, .btn, .modal-mask, .toast-wrap { display: none !important; } body { background: #fff; color: #000; } .card, .row-item, .tbl th, .tbl td { background: #fff !important; color: #000 !important; border-color: #bbb !important; box-shadow: none !important; } .app { padding: 0; max-width: none; } main.view { padding-top: 0; } .prompt-card { text-align: left; padding: 8px; } } /* ---------- 难度标签（应用型题目） ---------- */ .diff { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; vertical-align: middle; line-height: 1.6; } .diff-s { color: var(--ok); background: var(--ok-soft); } .diff-h { color: #b45309; background: rgba(180, 83, 9, .12); } .diff-e { color: var(--err); background: var(--err-soft); } html[data-theme="dark"] .diff-h { color: #f0b429; background: rgba(240, 180, 41, .14); } /* ---------- 逐字格默写（看译文填原文） ---------- */ .cells { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .cell { width: 34px; height: 42px; border: 1px solid var(--border); border-radius: 9px; text-align: center; font-size: 20px; line-height: 40px; box-sizing: border-box; color: var(--text); background: var(--surface); } .cell-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); } .cell-fixed { border: none; background: transparent; color: var(--muted); width: auto; min-width: 12px; padding: 0 1px; } .cell-err { border-color: var(--err); background: var(--err-soft); } @media (max-width: 420px) { .cell { width: 30px; height: 38px; font-size: 17px; line-height: 36px; } } /* ---------- 学习页：单元分组 + 随堂练习 ---------- */ .unit-group { margin-top: 6px; } .unit-title { font-size: 15px; font-weight: 700; color: var(--text); padding: 12px 4px 6px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .unit-title .hint { font-size: 12px; color: var(--muted); font-weight: 400; } .practice-card { margin-top: 16px; } .practice-card .section-title { margin-bottom: 4px; } .practice-item { border-top: 1px solid var(--border); padding: 12px 2px; } .practice-item:first-of-type { border-top: none; } .pi-q { font-size: 15px; line-height: 1.65; margin-bottom: 8px; } .pi-fb { min-height: 0; } /* ---------- 闯关设置：题量输入 / 随机开关 / 难度分类统计 ---------- */ .limit-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .limit-row .input { width: 120px; } .toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); cursor: pointer; } .toggle input { width: 16px; height: 16px; accent-color: var(--primary); } .diff-stats { margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--muted); line-height: 1.7; } .diff-stats b { color: var(--text); font-weight: 600; } /* ---------- 闯关设置：练习类型切换 ---------- */ .ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .ptab { flex: 1 1 auto; min-width: 96px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; cursor: pointer; } .ptab.on { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); font-weight: 600; }