/* learn-inside 统一风格：纸色底、深青主色、少量粉；标题用宋体。考试界面（body.exam-mode）另用中性的考试配色。 */ :root { --bg: #F6F4EE; --surface: #FFFFFF; --surface-2: #FBFAF6; --text: #18302A; --muted: #5E726C; --border: #E4E0D6; --brand: #FFFFFF; --brand-text: #18302A; --accent: #1D5C4D; --accent-soft: #E3ECE7; --ok: #1D5C4D; --ok-soft: #E3ECE7; --bad: #B04A6F; --bad-soft: #F6E7EC; --flag: #A85A2A; --flag-soft: #F6E9DD; --lock: #B04A6F; --radius: 12px; --display: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif; --serif: "Times New Roman", "Songti SC", "STSong", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --lg-tile:#1D5C4D; --lg-dot:#E07C9F; --lg-ink:#18302A; --lg-jade:#2E8B74; --lg-plum:#B04A6F; --lg-sub:#4E6A62; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121C19; --surface: #1A2723; --surface-2: #1E2C28; --text: #E8EFEA; --muted: #9DB0A9; --border: #2B3B36; --brand: #1A2723; --brand-text: #E8EFEA; --accent: #6CC2A6; --accent-soft: #1E352F; --ok: #6CC2A6; --ok-soft: #1E352F; --bad: #F29BBB; --bad-soft: #3E2630; --flag: #E3A274; --flag-soft: #3A2B1F; --lock: #F29BBB; --lg-tile:#2C7A66; --lg-dot:#F29BBB; --lg-ink:#E8EFEA; --lg-jade:#7FD1B6; --lg-plum:#F29BBB; --lg-sub:#A9C9BE; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #121C19; --surface: #1A2723; --surface-2: #1E2C28; --text: #E8EFEA; --muted: #9DB0A9; --border: #2B3B36; --brand: #1A2723; --brand-text: #E8EFEA; --accent: #6CC2A6; --accent-soft: #1E352F; --ok: #6CC2A6; --ok-soft: #1E352F; --bad: #F29BBB; --bad-soft: #3E2630; --flag: #E3A274; --flag-soft: #3A2B1F; --lock: #F29BBB; --lg-tile:#2C7A66; --lg-dot:#F29BBB; --lg-ink:#E8EFEA; --lg-jade:#7FD1B6; --lg-plum:#F29BBB; --lg-sub:#A9C9BE; color-scheme: dark; } /* 考试界面：还原真实考场，用中性的白底亮蓝，不跟随 learn-inside 配色 */ body.exam-mode { --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f8f9fb; --text: #1c2430; --muted: #5d6877; --border: #d9dee5; --accent: #2563c9; --accent-soft: #e6eefb; --ok: #1d7a46; --ok-soft: #e3f4ea; --bad: #b42318; --bad-soft: #fde9e7; --flag: #c27a00; --flag-soft: #fff3db; --radius: 8px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.exam-mode { --bg: #11151b; --surface: #1a2029; --surface-2: #202733; --text: #e6eaf0; --muted: #9aa5b4; --border: #2f3846; --accent: #6ea0f0; --accent-soft: #1d2c45; --ok: #4cc283; --ok-soft: #173326; --bad: #f2786c; --bad-soft: #3a1d1b; --flag: #f0b44c; --flag-soft: #3a2d14; } } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); } button { font: inherit; cursor: pointer; } a { color: var(--accent); } .loading { padding: 40px; text-align: center; color: var(--muted); } .hidden { display: none !important; } /* ───────── 通用页面 ───────── */ .page { max-width: 1120px; margin: 0 auto; padding: 24px 24px 64px; } .topnav { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .topnav .spacer { flex: 1; } .topnav .navlink { color: var(--accent); text-decoration: none; padding: 4px 8px; border-radius: 999px; font-size: 14px; } .topnav .navlink:hover { background: var(--accent-soft); } .brandbar { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .brandbar svg { display: block; flex: none; } .brandbar .bdiv { width: 1.5px; height: 14px; background: var(--lg-sub); opacity: .45; flex: none; } .brandbar .bname { font-family: var(--display); font-weight: 600; color: var(--text); font-size: 16px; letter-spacing: .04em; } .lg-tile{fill:var(--lg-tile)} .lg-dot{fill:var(--lg-dot)} .lg-ink{fill:var(--lg-ink)} .lg-jade{fill:var(--lg-jade)} .lg-plum{fill:var(--lg-plum)} .lg-jades{stroke:var(--lg-jade)} .lg-sub{fill:var(--lg-sub)} .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; } h1 { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: .02em; margin: 4px 0 16px; } h2 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0 0 10px; } body.exam-mode h1, body.exam-mode h2 { font-family: var(--sans); } .muted { color: var(--muted); } .small { font-size: 13px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .btn { border: 1.5px solid var(--accent); background: transparent; color: var(--accent); border-radius: 999px; padding: 7px 16px; text-decoration: none; display: inline-block; } body.exam-mode .btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; } .btn:hover { border-color: var(--accent); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); } .btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; } .btn:disabled { opacity: .5; cursor: default; } input[type=text], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=email], select { font: inherit; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); width: 100%; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } select { width: auto; padding: 6px 10px; } label.field { display: block; margin-bottom: 12px; } label.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } .error-msg { color: var(--bad); font-size: 13px; margin-top: 6px; } .tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } .tag.ext { color: var(--accent); border-color: var(--accent); } .exam-list .exam { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } .exam-list .exam:first-child { border-top: 0; } .exam .title { font-weight: 600; } /* ───────── 考试界面（按 AMC 8 中国区线上考试截图还原） ───────── */ :root { --ez-blue: #2f7cf6; --ez-blue-soft: #eaf2ff; --ez-bg: #f2f3f5; } :root[data-theme="dark"] { --ez-blue: #5b9bff; --ez-blue-soft: #1d2c45; --ez-bg: #11151b; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ez-blue: #5b9bff; --ez-blue-soft: #1d2c45; --ez-bg: #11151b; } } .ez { min-height: 100vh; display: flex; flex-direction: column; background: var(--ez-bg); } .ez-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 13px; } .ez-user { color: var(--muted); white-space: nowrap; } .ez-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ez-mode { margin-left: 8px; font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 3px; background: var(--flag-soft); color: var(--flag); } .ez-sp { flex: 1; } .ez-tool { background: none; border: 0; color: var(--text); padding: 4px 6px; border-radius: 4px; white-space: nowrap; } .ez-tool:hover, .ez-tool.on { color: var(--ez-blue); } .ez-tool small { font-size: 9px; margin-right: 3px; } .ez-timer { white-space: nowrap; color: var(--text); } .ez-timer b { font-size: 16px; font-variant-numeric: tabular-nums; margin-left: 4px; } .ez-timer.warn b { color: var(--bad); } .ez-submit { background: var(--ez-blue); color: #fff; border: 0; border-radius: 4px; padding: 6px 18px; } .ez-cardbtn { display: none; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 4px 8px; font-size: 12px; } .ez-body { flex: 1; display: flex; gap: 12px; padding: 12px; width: 100%; max-width: 1280px; margin: 0 auto; } .ez-card { width: 220px; flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; align-self: stretch; min-height: calc(100vh - 80px); position: sticky; top: 60px; max-height: calc(100vh - 72px); } .ez-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 14px; } .ez-progress { margin: 12px 0; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; color: var(--muted); } .ez-prow { display: flex; justify-content: space-between; margin-bottom: 6px; } .ez-pbar { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; } .ez-pbar div { height: 100%; background: var(--ez-blue); } .ez-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: start; overflow: auto; } .ez-cell { position: relative; height: 28px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text); font-size: 12px; padding: 0; } .ez-cell.done { background: var(--ez-blue); border-color: var(--ez-blue); color: #fff; } .ez-cell.cur { outline: 2px solid var(--ez-blue); outline-offset: 1px; } .ez-cell.done.cur { outline-color: var(--text); } .ez-cell.flag::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--flag); border: 1.5px solid var(--surface); } .ez-legend { margin-top: auto; padding-top: 12px; display: flex; gap: 12px; font-size: 12px; color: var(--muted); } .ez-legend .lg { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--border); border-radius: 2px; margin-right: 4px; vertical-align: -1px; } .ez-legend .lg.done { background: var(--ez-blue); border-color: var(--ez-blue); } .ez-legend .lg.flag { background: var(--flag); border-color: var(--flag); border-radius: 50%; } .ez-main { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 18px 26px 40px; } .ez-q { max-width: 900px; } .ez-qhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--muted); font-size: 13px; } .ez-pin { background: none; border: 1px solid transparent; border-radius: 4px; color: var(--muted); padding: 3px 8px; font-size: 13px; } .ez-pin:hover { border-color: var(--border); } .ez-pin.on { color: var(--flag); border-color: var(--flag); background: var(--flag-soft); } .ez-stem { font-family: var(--serif); font-size: 17px; line-height: 1.75; } .figure { display: flex; justify-content: center; margin: 14px 0 4px; color: var(--text); } .figure svg { width: min(300px, 100%); height: auto; } .zh { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-family: var(--sans); font-size: .92em; color: var(--muted); } .zh-inline { margin-left: 10px; font-family: var(--sans); font-size: .85em; color: var(--muted); } .figure img.scan, .fig-choice img { background: #fff; border-radius: 4px; padding: 4px; display: block; margin: 0 auto; } .figure > * + * { margin-top: 8px; } .figure { flex-direction: column; align-items: center; } .ez-opts.figs, .choices.figs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .ez-opts.figs .ez-opt, .choices.figs .choice { align-items: flex-start; } .fig-choice svg { width: 100%; max-width: 180px; height: auto; display: block; } .ez-opts { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 4px; } .ez-opt { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 4px; cursor: pointer; font-family: var(--serif); font-size: 16px; border: 1px solid transparent; } .ez-opt:hover { background: var(--surface-2); } .ez-letter { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font: 12px var(--sans); color: var(--muted); flex: none; } .ez-opt.sel { background: var(--ez-blue-soft); border-color: var(--ez-blue); } .ez-opt.sel .ez-letter { background: var(--ez-blue); border-color: var(--ez-blue); color: #fff; } .ez-nav { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .ez-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 4px; padding: 5px 18px; font-size: 13px; } .ez-btn.next { border-color: var(--ez-blue); color: var(--ez-blue); } .ez-btn.hint { margin-left: auto; border-style: dashed; border-color: var(--accent); color: var(--accent); } .ez-btn:disabled { opacity: .45; cursor: default; } .hint-box { margin-top: 14px; border: 1px dashed var(--accent); border-radius: 4px; padding: 10px 14px; background: var(--accent-soft); } .hint-box .hint { margin: 4px 0; } .hint-box .hint b { color: var(--accent); margin-right: 6px; } .ez.big .ez-stem { font-size: 21px; } .ez.big .ez-opt { font-size: 20px; } .ez-mask { display: none; } @media (max-width: 760px) { .ez-top { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; } .ez-cardbtn { display: inline-block; } .ez-user, .ez-tool small { display: none; } .ez-title { flex: 1; } .ez-sp { display: none; } .ez-body { padding: 8px; } .ez-card { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 260px; max-height: none; min-height: 0; border-radius: 0; transform: translateX(-100%); transition: transform .2s; } .ez-card.open { transform: none; } .ez-mask { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 30; } .ez-main { padding: 14px; } .ez-stem { font-size: 16px; } } /* 须知页 */ .instructions ol { padding-left: 20px; } .instructions li { margin: 6px 0; } /* ───────── 复盘 ───────── */ .scorebox { display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; } .scorebox .big { font-size: 40px; font-weight: 700; } .ritem { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; overflow: hidden; } .ritem > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; } .ritem > summary::-webkit-details-marker { display: none; } .ritem .mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex: none; } .ritem.right .mark { background: var(--ok); } .ritem.wrong .mark { background: var(--bad); } .ritem.blank .mark { background: var(--muted); } .ritem .meta { color: var(--muted); font-size: 13px; margin-left: auto; text-align: right; } .ritem .body { padding: 0 14px 14px; border-top: 1px solid var(--border); } .ritem .stem { border: 0; padding: 12px 0; background: none; font-size: 17px; } .choice.correct { border-color: var(--ok); background: var(--ok-soft); } .choice.correct .letter { background: var(--ok); border-color: var(--ok); color: #fff; } .choice.picked-wrong { border-color: var(--bad); background: var(--bad-soft); } .choice.picked-wrong .letter { background: var(--bad); border-color: var(--bad); color: #fff; } .ritem .choice { cursor: default; font-size: 16px; padding: 6px 12px; } .section-label { font-size: 13px; color: var(--muted); margin: 14px 0 6px; font-weight: 600; } .solution { background: var(--surface-2); border-radius: 6px; padding: 10px 14px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; background: var(--surface); font-size: 13px; color: var(--text); text-decoration: none; } .chip.primary { border-color: var(--accent); color: var(--accent); } .chip .lock { color: var(--lock); margin-left: 4px; } .reason-chips button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 3px 12px; font-size: 13px; } .reason-chips button.on { background: var(--text); color: var(--surface); border-color: var(--text); } /* 互动解析播放器 */ .modal-backdrop { position: fixed; inset: 0; background: rgba(10,15,25,.55); display: grid; place-items: center; z-index: 50; padding: 16px; } .modal { background: var(--surface); color: var(--text); border-radius: 12px; max-width: 560px; width: 100%; padding: 22px; max-height: 90vh; overflow: auto; } .modal h2 { margin-bottom: 14px; } .modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .steps .step { border-left: 3px solid var(--accent); padding: 6px 0 6px 14px; margin-bottom: 12px; animation: fadein .3s ease; } .steps .step b { display: block; margin-bottom: 2px; } .progress { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; margin-bottom: 16px; } .progress div { height: 100%; background: var(--accent); transition: width .3s; } @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* 知识点页 */ .md h2 { font-size: 18px; margin: 18px 0 8px; } .md table { border-collapse: collapse; margin: 10px 0; font-size: 14px; display: block; overflow-x: auto; } .md td, .md th { border: 1px solid var(--border); padding: 4px 8px; text-align: center; } .locked-panel { text-align: center; padding: 26px; border: 1px dashed var(--lock); border-radius: var(--radius); color: var(--muted); } .locked-panel .icon { font-size: 26px; color: var(--lock); } /* 画像 */ .kprow { display: grid; grid-template-columns: 1fr 120px 80px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); } .kprow:first-child { border-top: 0; } .bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); } .bar div { height: 100%; } .lv-weak .bar div { background: var(--bad); } .lv-ok .bar div { background: var(--flag); } .lv-strong .bar div { background: var(--ok); } .lv-insufficient .bar div { background: var(--muted); opacity: .5; } .lv-label { font-size: 12px; text-align: right; } .lv-weak .lv-label { color: var(--bad); font-weight: 600; } @media (max-width: 640px) { .stem { font-size: 17px; padding: 14px; } .kprow { grid-template-columns: 1fr 80px 64px; } } /* ───────── 互动课播放器（沿用 learn-inside 学习页：纸色、深青、少量粉，小助手气泡） ───────── */ .lp { --lp-bg:#F6F4EE; --lp-card:#FFFFFF; --lp-ink:#18302A; --lp-soft:#5E726C; --lp-line:#E4E0D6; --lp-jade:#1D5C4D; --lp-jade-soft:#E3ECE7; --lp-plum:#B04A6F; --lp-plum-soft:#F6E7EC; --lp-warn:#A85A2A; --lp-serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif; color:var(--lp-ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp { --lp-bg:#121C19; --lp-card:#1A2723; --lp-ink:#E8EFEA; --lp-soft:#9DB0A9; --lp-line:#2B3B36; --lp-jade:#6CC2A6; --lp-jade-soft:#1E352F; --lp-plum:#F29BBB; --lp-plum-soft:#3E2630; --lp-warn:#E3A274; } } :root[data-theme="dark"] .lp { --lp-bg:#121C19; --lp-card:#1A2723; --lp-ink:#E8EFEA; --lp-soft:#9DB0A9; --lp-line:#2B3B36; --lp-jade:#6CC2A6; --lp-jade-soft:#1E352F; --lp-plum:#F29BBB; --lp-plum-soft:#3E2630; --lp-warn:#E3A274; } .lp-title { display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--lp-serif); font-weight:600; font-size:1.15rem; margin:0 0 10px; } .lp-x { border:0; background:none; color:var(--lp-soft); font-size:1.2rem; padding:4px 8px; } .lp-player { background:var(--lp-card); border:1.5px solid var(--lp-jade); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,.05); } .lp-top { display:flex; align-items:center; gap:10px; padding:12px 14px 0; } .lp-segs { flex:1; display:flex; gap:4px; min-width:0; } .lp-segs i { flex:1; height:6px; border-radius:99px; background:var(--lp-line); } .lp-segs i.d { background:var(--lp-jade); } .lp-segs i.c { background:var(--lp-plum); } .lp-no { font-size:.8rem; color:var(--lp-soft); white-space:nowrap; } .lp-vb { font-size:.8rem; padding:2px 10px; border-radius:999px; border:1.5px solid var(--lp-line); color:var(--lp-soft); background:none; white-space:nowrap; min-height:28px; } .lp-vb[aria-pressed="true"] { border-color:var(--lp-jade); color:var(--lp-jade); background:var(--lp-jade-soft); } .lp-scr { position:relative; min-height:330px; padding:40px 16px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; } .lp-turn { position:absolute; top:10px; right:12px; font-family:var(--lp-serif); font-size:.85rem; background:var(--lp-plum); color:var(--lp-card); border-radius:999px; padding:3px 14px; animation:lp-pulse 1.2s infinite; } .lp-main { width:100%; font-size:1.12rem; line-height:1.8; } .lp-main.lp-in { animation:lp-in .35s ease; } .lp-main .lp-h { font-family:var(--lp-serif); font-weight:600; font-size:1.25rem; margin-bottom:6px; } .lp-html .big { font-family:var(--lp-serif); font-size:1.35rem; } .lp-html .em { color:var(--lp-plum); font-weight:700; } .lp-html .jd { color:var(--lp-jade); font-weight:700; } .lp-html .card { background:var(--lp-bg); border-radius:14px; padding:10px 14px; margin:8px auto; max-width:30em; text-align:left; font-size:1rem; } .lp-html table { margin:6px auto; border-collapse:collapse; font-size:.95rem; } .lp-html td, .lp-html th { border:1px solid var(--lp-line); padding:4px 10px; } .lp-say { position:relative; align-self:stretch; max-width:32em; margin:10px 0 0 52px; font-size:.98rem; line-height:1.65; text-align:left; background:var(--lp-jade-soft); border-radius:20px 20px 20px 4px; padding:10px 16px; } .lp-say:empty { display:none; } .lp-say::before { content:""; position:absolute; left:-54px; bottom:-4px; width:44px; height:44px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2242%22%20height%3D%2240%22%20rx%3D%2214%22%20fill%3D%22%231D5C4D%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2222%22%20r%3D%223.6%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2222%22%20r%3D%223.6%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%2217.8%22%20cy%3D%2222.6%22%20r%3D%221.6%22%20fill%3D%22%2318302A%22/%3E%3Ccircle%20cx%3D%2231.8%22%20cy%3D%2222.6%22%20r%3D%221.6%22%20fill%3D%22%2318302A%22/%3E%3Cellipse%20cx%3D%2211%22%20cy%3D%2230%22%20rx%3D%223.4%22%20ry%3D%222.2%22%20fill%3D%22%23F29BBB%22/%3E%3Cellipse%20cx%3D%2237%22%20cy%3D%2230%22%20rx%3D%223.4%22%20ry%3D%222.2%22%20fill%3D%22%23F29BBB%22/%3E%3Cpath%20d%3D%22M20%2031c2.5%202.6%205.5%202.6%208%200%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%226%22%20r%3D%224.5%22%20fill%3D%22%23E07C9F%22/%3E%3C/svg%3E") center/contain no-repeat; animation:lp-bob 2.4s ease-in-out infinite; } .lp-ctl { display:flex; justify-content:center; align-items:center; gap:16px; padding:14px 12px 16px; } .lp-rb { width:46px; height:46px; border-radius:50%; border:2px solid var(--lp-jade); color:var(--lp-jade); display:grid; place-items:center; background:var(--lp-card); padding:0; } .lp-rb svg { width:22px; height:22px; fill:currentColor; } .lp-rb.lp-play { width:62px; height:62px; background:var(--lp-plum); border-color:var(--lp-plum); color:var(--lp-card); } .lp-rb.lp-play svg { width:30px; height:30px; } .lp-rb:disabled { opacity:.35; cursor:default; } .lp-nx { height:46px; padding:0 22px; border-radius:999px; background:var(--lp-jade); color:var(--lp-card); border:0; font-family:var(--lp-serif); font-size:1.05rem; white-space:nowrap; } .lp-rb:active, .lp-nx:active, .lp-tp:active, .lp-opt:active { transform:translateY(2px); } .lp-tip { font-size:.82rem; color:var(--lp-soft); text-align:center; margin:10px 0 0; } .lp-tabs, .lp-opts { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px; } .lp-tp { font-size:.95rem; padding:6px 16px; border-radius:999px; border:2px solid var(--lp-plum); color:var(--lp-plum); background:var(--lp-card); min-height:40px; } .lp-tp.on { background:var(--lp-plum); color:var(--lp-card); } .lp-tab { margin-top:10px; } .lp-q { font-size:1.05rem; margin-bottom:4px; } .lp-opt { border:2px solid var(--lp-line); background:var(--lp-card); color:var(--lp-ink); border-radius:999px; padding:6px 18px; min-height:42px; font-size:1.02rem; } .lp-opt:hover:not(:disabled) { border-color:var(--lp-jade); } .lp-opt.is-right { background:var(--lp-jade); border-color:var(--lp-jade); color:var(--lp-card); opacity:1; } .lp-opt.is-wrong { background:var(--lp-plum-soft); border-color:var(--lp-plum); color:var(--lp-plum); opacity:1; } .lp-quiz.two .lp-opts { flex-direction:column; align-items:stretch; } .lp-quiz.two .lp-opt { border-radius:14px; text-align:left; } .lp-recall .lp-ans { margin-top:10px; background:var(--lp-bg); border-radius:14px; padding:10px 14px; text-align:left; } .lp-ghost { margin-top:8px; padding:6px 16px; border-radius:999px; background:transparent; color:var(--lp-jade); border:2px solid var(--lp-jade); font-size:.95rem; min-height:38px; } .lp-here { display:grid; gap:8px; text-align:left; max-width:30em; margin:0 auto; } .lp-here div { display:flex; flex-direction:column; border:1.5px solid var(--lp-line); border-radius:14px; padding:8px 14px; background:var(--lp-card); } .lp-here div.on { border-color:var(--lp-plum); background:var(--lp-plum-soft); } .lp-here b { font-family:var(--lp-serif); } .lp-here span { font-size:.9rem; color:var(--lp-soft); } .lp-grid { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:6px; } .lp-gsvg { width:min(100%, 420px); height:auto; touch-action:manipulation; } .lp-gsvg .gl line { stroke:var(--lp-line); stroke-width:2; } .lp-gsvg .route { stroke-width:5; stroke-linecap:round; } .lp-gsvg .pt circle { fill:var(--lp-card); stroke:var(--lp-ink); stroke-width:1.5; } .lp-gsvg .pt text { font-family:"Times New Roman",serif; font-style:italic; font-size:15px; text-anchor:middle; fill:var(--lp-ink); } .lp-gsvg .hit { fill:transparent; cursor:pointer; } .lp-gsvg .hit:hover { fill:var(--lp-jade-soft); fill-opacity:.6; } .lp-gsvg .head { fill:var(--lp-plum); } .lp-gsvg .pt, .lp-gsvg .drawn { pointer-events:none; } .lp-grid.ok .lp-gsvg .route { stroke:var(--lp-jade)!important; } .lp-gbar { display:flex; gap:12px; align-items:center; justify-content:center; font-size:.95rem; color:var(--lp-soft); } .lp-gbar .lp-ghost { margin-top:0; } @keyframes lp-pulse { 50% { opacity:.6; } } @keyframes lp-bob { 50% { transform:translateY(-3px); } } @keyframes lp-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { .lp-turn, .lp-say::before, .lp-main.lp-in { animation:none!important; } } /* 全屏打开（互动解析、知识点课） */ .lp-overlay { position:fixed; inset:0; z-index:60; background:var(--bg); overflow:auto; padding:16px; } .lp-overlay > .lp { max-width:760px; margin:0 auto; } /* ───────── 考点卡 / 知识点页 / 单题页 ───────── */ .kpcards { display:grid; gap:10px; } .kpcard { border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--surface); } .kphead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; } .kphead a { color:var(--text); text-decoration:none; font-size:1.02rem; } .sig-title { font-size:12px; color:var(--muted); margin:4px 0; } .signals { list-style:none; padding:0; margin:0; display:grid; gap:6px; } .signals li { display:flex; flex-direction:column; gap:2px; padding:7px 10px; border-left:3px solid var(--accent); background:var(--surface-2); border-radius:0 6px 6px 0; font-size:14px; } .signals .see { color:var(--text); } .signals .think { color:var(--accent); font-weight:600; } .kpbtns { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .kpbtns .btn { font-size:13px; padding:5px 12px; text-decoration:none; } .kpalso { margin-top:8px; } .card.feature { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .card.feature h2 { margin-bottom:4px; } .card.feature p { margin:0; } .plist { display:grid; gap:6px; } .prow { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:6px; color:var(--text); text-decoration:none; background:var(--surface); } .prow:hover { border-color:var(--accent); } .prow .go { margin-left:auto; color:var(--muted); font-size:18px; } .pst { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; border:1px solid var(--border); color:var(--muted); } .st-right .pst { background:var(--ok); border-color:var(--ok); color:#fff; } .st-wrong .pst { background:var(--bad); border-color:var(--bad); color:#fff; } .ez-src { margin-left:8px; font-size:12px; color:var(--muted); } /* 复盘页 / 单题页的题干与选项（考试界面另有 ez- 样式） */ .stem { font-family:var(--serif); font-size:18px; line-height:1.75; } .choices { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:6px; } .choice { display:flex; align-items:center; gap:12px; padding:6px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--serif); font-size:16px; } .choice .letter { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--muted); display:grid; place-items:center; font:600 13px var(--sans); flex:none; } .choices.figs { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); } /* ───────── 播放器版式：有图时大屏左图右讲，手机上下排 ───────── */ .lp-vis { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; } .lp-vis:empty { display:none; } .lp-vis.lp-in, .lp-side .lp-main.lp-in { animation:lp-in .35s ease; } .lp-side { display:flex; flex-direction:column; gap:6px; width:100%; } .lp-scr.solo .lp-vis { font-size:1.12rem; line-height:1.8; } .lp-scr:not(.solo) .lp-main:empty { display:none; } @media (min-width: 900px) { .lp-overlay { padding:24px 32px 40px; } .lp-overlay > .lp { max-width:1180px; } .lp-title { font-size:1.45rem; } .lp-scr { min-height:540px; padding:48px 32px 26px; } .lp-scr:not(.solo) { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(320px, 1fr); gap:32px; align-items:center; } .lp-scr:not(.solo) .lp-main { text-align:left; } .lp-scr:not(.solo) .lp-tabs, .lp-scr:not(.solo) .lp-opts { justify-content:flex-start; } .lp-scr:not(.solo) .lp-html .card { margin-left:0; } .lp-gsvg { width:min(100%, 680px); } .lp-gsvg .pt text { font-size:17px; } .lp-scr.solo .lp-vis, .lp-scr.solo .lp-main { font-size:1.3rem; } .lp-main .lp-h, .lp-vis .lp-h { font-size:1.6rem; } .lp-html .big { font-size:1.6rem; } .lp-html .card { font-size:1.08rem; } .lp-say { font-size:1.1rem; max-width:none; } .lp-scr.solo .lp-say { max-width:40em; align-self:center; width:calc(100% - 52px); } .lp-opt { font-size:1.12rem; padding:8px 22px; min-height:46px; } .lp-tp { font-size:1.05rem; padding:7px 20px; } .lp-here { max-width:40em; } .lp-gbar { font-size:1.05rem; } } .lp-grid, .lp-tab { width:100%; } .lp-tab { display:flex; flex-direction:column; align-items:center; } @media (min-width: 900px) { .lp-scr.solo .lp-q { font-family:var(--lp-serif); font-size:1.6rem; font-weight:600; margin-bottom:14px; } .lp-scr:not(.solo) .lp-q { font-family:var(--lp-serif); font-size:1.3rem; font-weight:600; } .lp-scr.solo .lp-opt { font-size:1.35rem; min-width:84px; min-height:56px; padding:8px 26px; } .lp-scr.solo .lp-quiz.two .lp-opt { font-size:1.15rem; } .lp-scr.solo .lp-quiz.two { max-width:36em; margin:0 auto; } .lp-recall .lp-q { font-size:1.3rem; } } @media (min-width: 900px) { .lp-scr.solo .lp-html .card { font-size:1.3rem; max-width:36em; padding:14px 20px; } .lp-scr.solo .lp-quiz.two .lp-opt { font-size:1.25rem; padding:12px 22px; } } /* ───────── 互动组件 ───────── */ .lp-simbox, .lp-fig { width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; } .lp-fig svg, .lp-fig img { max-width:min(100%, 560px); height:auto; } .lp-fig .fg-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:flex-end; } .lp-fig .fg-row > div { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.95rem; } .lp-sim { width:min(100%, 520px); height:auto; touch-action:manipulation; } .lp-sim .gl line { stroke:var(--lp-line); stroke-width:1.5; } .lp-sim .st { fill:var(--lp-ink); font-family:"Times New Roman","Songti SC",serif; } .lp-sim .st.plum, .plum { fill:var(--lp-plum); color:var(--lp-plum); } .lp-sim .st.bad, .bad { fill:var(--lp-plum); color:var(--lp-plum); } .lp-sim .st.num { fill:#fff; font-weight:700; pointer-events:none; font-family:sans-serif; } .lp-sim .st.lbl { pointer-events:none; } .tapsvg .tp-s { fill:var(--lp-jade-soft); stroke:var(--lp-jade); stroke-width:1.2; cursor:pointer; transition:fill .15s; } .tapsvg .tp-s:hover { fill:var(--lp-line); } .tapsvg .tp-s.on { fill:var(--lp-plum); } .tapsvg .extra { fill:none; stroke:var(--lp-ink); stroke-width:.03; pointer-events:none; } .lp-gbar b { color:var(--lp-ink); } .lp-gbar input[type=range] { width:min(320px, 60vw); accent-color:var(--lp-plum); } .muted { color:var(--lp-soft); } /* 求和 */ .sm-items { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } .sm-it { width:58px; height:70px; border:2px solid var(--lp-line); background:var(--lp-card); border-radius:12px; display:grid; place-items:center; color:var(--lp-ink); padding:4px; } .sm-it svg { width:40px; height:52px; } .sm-it.on { border-color:var(--lp-plum); background:var(--lp-plum-soft); } .sm-expr { font-size:1.15rem; min-height:1.8em; } /* 数列 */ .sq-row { display:flex; flex-wrap:wrap; gap:4px 2px; align-items:center; justify-content:center; max-width:640px; } .sq-t { display:flex; flex-direction:column; align-items:center; border:1.5px solid var(--lp-line); border-radius:10px; padding:4px 8px; background:var(--lp-card); min-width:48px; } .sq-t b { font-size:1.15rem; } .sq-t small { font-size:.72rem; color:var(--lp-soft); } .sq-t.hit { border-color:var(--lp-plum); background:var(--lp-plum-soft); } .sq-gap { font-size:.8rem; color:var(--lp-plum); padding:0 2px; } /* 平均分 */ .dl-rows { display:grid; gap:6px; width:min(100%, 560px); } .dl-row { display:grid; grid-template-columns:64px 1fr 32px; gap:8px; align-items:center; font-size:.9rem; } .dl-cards { display:flex; flex-wrap:wrap; gap:2px; } .dl-cards i { width:9px; height:14px; border-radius:2px; background:var(--lp-jade); } .dl-row b { color:var(--lp-plum); } /* 擦数 */ .er-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .er-n { width:68px; height:72px; border:2px solid var(--lp-line); background:var(--lp-card); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--lp-ink); } .er-n b { font-size:1.4rem; } .er-n small { color:var(--lp-jade); min-height:1em; } .er-n.off { border-color:var(--lp-plum); text-decoration:line-through; opacity:.7; } .er-n.good { border-color:var(--lp-jade); background:var(--lp-jade-soft); text-decoration:line-through; } .er-info { font-size:1.05rem; text-align:center; } /* 时钟 */ .ck-face { fill:none; stroke:var(--lp-ink); stroke-width:2; } .ck-n circle { fill:var(--lp-card); stroke:var(--lp-line); stroke-width:1.5; cursor:pointer; } .ck-n.on circle { fill:var(--lp-plum-soft); stroke:var(--lp-plum); } .ck-lines line { stroke:var(--lp-plum); stroke-width:2.5; stroke-dasharray:6 4; } .ck-list { display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; font-size:.98rem; } .ck-sum { width:100%; text-align:center; margin-top:4px; } /* 旋转 */ .rt-a { fill:var(--lp-line); fill-opacity:.6; stroke:var(--lp-ink); stroke-width:1.5; } .rt-b rect { fill:var(--lp-jade-soft); fill-opacity:.6; stroke:var(--lp-jade); stroke-width:2; } .rt-ov { fill:var(--lp-plum); fill-opacity:.45; stroke:var(--lp-plum); stroke-width:2; transition:opacity .3s; } .rt-m { fill:var(--lp-plum); } /* 最大圆 */ .c12-cells rect { fill:var(--lp-jade-soft); stroke:var(--lp-jade); stroke-width:1; } .c12-c { fill:var(--lp-plum); fill-opacity:.18; stroke:var(--lp-plum); stroke-width:2; } .c12-c.bad { fill-opacity:.35; stroke-dasharray:5 4; } .c12-r { stroke:var(--lp-plum); stroke-width:1.5; } .c12-n circle { fill:var(--lp-ink); } .c12-n circle.hit { fill:var(--lp-plum); } /* 余数直方图 */ .hs-chips { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; max-width:640px; } .hs-c { display:flex; flex-direction:column; align-items:center; min-width:38px; padding:2px 4px; border:1px solid var(--lp-line); border-radius:8px; font-size:.9rem; background:var(--lp-card); } .hs-c small { color:var(--lp-plum); font-weight:700; min-height:1.1em; } .hs-c.on { border-color:var(--lp-jade); } .hs-c.cyc { box-shadow:-3px 0 0 var(--lp-plum); } .hs-bars { display:flex; gap:10px; align-items:flex-end; height:150px; margin-top:6px; } .hs-b { width:40px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; } .hs-b i { width:100%; background:var(--lp-jade); border-radius:4px 4px 0 0; transition:height .25s; min-height:2px; } .hs-b.hi i { background:var(--lp-plum); } .hs-b em { font-style:normal; font-size:.8rem; color:var(--lp-soft); } .hs-v { font-weight:700; } /* 插入 N */ .in-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; } .in-c { min-width:46px; padding:8px 10px; border:1.5px solid var(--lp-line); border-radius:10px; text-align:center; font-size:1.15rem; background:var(--lp-card); } .in-c.n { border-color:var(--lp-plum); color:var(--lp-plum); font-weight:700; } .in-c.mid { background:var(--lp-jade-soft); } .in-stat { font-size:1.05rem; text-align:center; } /* 对折 */ .fd-c { fill:#E9C46A; stroke:var(--lp-card); stroke-width:2; cursor:pointer; } .fd-c.s { fill:#B8C2C8; } .fd-pairs .gg { fill:var(--lp-plum); pointer-events:none; } .fd-fold { stroke:var(--lp-ink); stroke-width:2; stroke-dasharray:6 5; } /* 配对选数 */ .pr-grid { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; } .pr-col { display:flex; flex-direction:column; align-items:center; gap:2px; } .pr-b { width:44px; height:40px; border:2px solid var(--lp-line); border-radius:10px; background:var(--lp-card); color:var(--lp-ink); font-size:1.05rem; } .pr-b.on { background:var(--lp-jade); border-color:var(--lp-jade); color:var(--lp-card); } .pr-line { width:2px; height:10px; background:var(--lp-line); } /* 相遇 */ .cr-seg { stroke:var(--lp-ink); stroke-width:1; } .cr-seg.s0 { fill:var(--lp-jade-soft); } .cr-seg.s1 { fill:var(--lp-plum-soft); } .cr-seg.s2 { fill:var(--lp-line); } .cr-a { fill:var(--lp-jade); } .cr-b { fill:var(--lp-plum); } .cr-meet { stroke:var(--lp-plum); stroke-width:2; stroke-dasharray:4 3; } .cr-info { font-size:1.02rem; text-align:center; } /* 奶酪 */ .ch-bar { display:flex; width:min(100%, 600px); height:46px; border:1.5px solid var(--lp-ink); border-radius:8px; overflow:hidden; } .ch-bar span { height:100%; border-right:1px solid var(--lp-card); } .ch-bar .w0, .ch-tot .w0 i { background:var(--lp-plum); } .ch-bar .w1, .ch-tot .w1 i { background:var(--lp-jade); } .ch-bar .w2, .ch-tot .w2 i { background:var(--lp-warn); } .ch-bar .rest { background:#F3D78B; border:0; } .ch-tot { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; font-size:1rem; } .ch-tot i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; vertical-align:-1px; } /* 填年级 */ .as-e path { fill:none; stroke:var(--lp-line); stroke-width:4; } .as-e path.okk { stroke:var(--lp-jade); } .as-e path.bad { stroke:var(--lp-plum); stroke-width:5; } .as-node rect { fill:var(--lp-card); stroke:var(--lp-ink); stroke-width:1.5; cursor:pointer; } .as-node.mark rect { fill:var(--lp-jade-soft); } .as-node.cur rect { stroke:var(--lp-plum); stroke-width:3; } .as-pal { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; } .as-g { width:44px; height:44px; border-radius:50%; border:2px solid var(--lp-plum); color:var(--lp-plum); background:var(--lp-card); font-size:1.1rem; font-weight:700; } .as-g.used { background:var(--lp-plum-soft); opacity:.6; } /* 衣钩 */ .hk-row { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; max-width:600px; } .hk-row i { width:12px; height:22px; border-top:3px solid var(--lp-ink); border-radius:0 0 6px 6px; border-left:2px solid var(--lp-line); border-right:2px solid var(--lp-line); border-bottom:2px solid var(--lp-line); } .hk-row i.coat { background:var(--lp-plum); border-color:var(--lp-plum); border-top-color:var(--lp-ink); } .hk-info { font-size:1rem; text-align:center; } .hk-found { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; align-items:center; font-size:.95rem; } .hk-found span:not(.muted) { padding:2px 10px; border-radius:999px; background:var(--lp-jade-soft); color:var(--lp-jade); font-weight:700; } /* 平方差 */ .n2-list { display:grid; gap:6px; width:min(100%, 560px); } .n2-r { display:flex; gap:12px; align-items:center; text-align:left; border:1.5px solid var(--lp-line); border-radius:10px; padding:6px 12px; background:var(--lp-card); color:var(--lp-ink); font-size:1rem; } .n2-r b { min-width:74px; } .n2-r small { color:var(--lp-soft); } .n2-r.on { border-color:var(--lp-soft); } .n2-r.good { border-color:var(--lp-plum); background:var(--lp-plum-soft); } /* 梯形 */ .tz-g polygon { fill:var(--lp-line); stroke:var(--lp-ink); stroke-width:1.5; } .tz-g polygon.good { fill:var(--lp-jade-soft); stroke:var(--lp-jade); } /* 镜像路径 */ .mr-two { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; } .mr-two > div { display:flex; flex-direction:column; align-items:center; min-width:200px; } .mr-two .lp-sim { width:min(100%, 260px); } .mr-sh polygon { fill:var(--lp-jade-soft); } .mr-p { fill:none; stroke:var(--lp-plum); stroke-width:4; stroke-linejoin:round; } .mr-info { font-size:1.1rem; } /* 填空 */ .lp-fill { display:flex; flex-direction:column; align-items:center; gap:8px; } .lp-frow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; font-size:1.1rem; } .lp-input { width:110px; font-size:1.25rem; padding:6px 10px; border:2px solid var(--lp-line); border-radius:10px; text-align:center; background:var(--lp-card); color:var(--lp-ink); } .lp-input:focus { outline:none; border-color:var(--lp-jade); } .lp-input.ok { border-color:var(--lp-jade); background:var(--lp-jade-soft); } .lp-input.no { border-color:var(--lp-plum); animation:lp-shake .3s; } .lp-chk { height:42px; padding:0 20px; border-radius:999px; background:var(--lp-jade); color:var(--lp-card); border:0; font-family:var(--lp-serif); font-size:1.02rem; } @keyframes lp-shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } } @media (min-width: 900px) { .lp-sim { width:min(100%, 600px); } .lp-scr:not(.solo) .lp-fill { align-items:flex-start; } } .c18-sh { fill:var(--lp-plum); fill-opacity:.35; } .c18-hole { fill:var(--lp-card); } .c18-o { fill:none; stroke:var(--lp-ink); stroke-width:1.5; } .c18-sq { fill:none; stroke:var(--lp-ink); stroke-width:1.5; } .c18-info { font-size:1.02rem; text-align:center; } .lp-sim.tapsvg { width:min(100%, 460px); } .sim-clock .lp-sim, .sim-fold .lp-sim { width:min(100%, 340px); } .sim-circle12 .lp-sim { width:min(100%, 380px); } .sim-rotate .lp-sim, .sim-assign .lp-sim { width:min(100%, 440px); } .tapsvg .lbl.on { fill:#fff; font-weight:700; } .tapsvg .lbl { font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; } @media (max-width: 520px) { .pr-grid { flex-wrap:nowrap; gap:2px; } .pr-b { width:30px; height:36px; font-size:.9rem; padding:0; border-radius:8px; } } /* ── 2024 组件 ── */ .slsvg .gl line, .slsvg .gl { stroke:var(--lp-line); } .slsvg .ln { stroke:var(--lp-ink); stroke-width:1.6; fill:none; } .slsvg .sh { fill:var(--lp-plum); fill-opacity:.35; stroke:var(--lp-plum); stroke-width:1.5; } .slsvg .sh2 { fill:var(--lp-jade); fill-opacity:.3; stroke:var(--lp-jade); stroke-width:1.5; } .slsvg .gy { fill:var(--lp-line); stroke:var(--lp-ink); stroke-width:1.4; } .slsvg .wt { fill:var(--lp-card); stroke:var(--lp-ink); stroke-width:1.4; } .slsvg .dot { fill:var(--lp-ink); } .slsvg .pdot { fill:var(--lp-plum); } .slsvg .dash { stroke:var(--lp-soft); stroke-width:1.2; stroke-dasharray:4 3; fill:none; } .slsvg .muted, .lp-sim .st.muted { fill:var(--lp-soft); } .sl-info { font-size:1.02rem; text-align:center; min-height:1.5em; } .cn-rows { display:grid; gap:4px; font-size:1.1rem; } .cn-r { display:grid; grid-template-columns:120px 150px 1fr; gap:10px; align-items:center; } .cn-op { text-align:right; } .cn-r .muted { font-size:.9rem; } .sk-gray { fill:var(--lp-line); stroke:var(--lp-ink); stroke-width:1.4; } .sk-white { fill:var(--lp-card); stroke:var(--lp-ink); stroke-width:1.4; } .sk-info { font-size:1.05rem; text-align:center; } .dc-grid { display:grid; grid-template-columns:repeat(7, 44px); gap:3px; } .dc-c { height:36px; display:grid; place-items:center; border:1.5px solid var(--lp-line); border-radius:6px; background:var(--lp-card); font-size:.95rem; } .dc-c.dc-h { border:0; background:none; color:var(--lp-soft); font-weight:700; } .dc-c.m6 { background:var(--lp-jade-soft); border-color:var(--lp-jade); color:var(--lp-jade); font-weight:700; } .dc-c.sum { outline:3px solid var(--lp-plum); outline-offset:-2px; } .dc-info { font-size:1rem; text-align:center; min-height:1.5em; } .tl-cell { fill:var(--lp-card); stroke:var(--lp-line); stroke-width:1.5; cursor:pointer; } .tl-cell:hover { fill:var(--lp-jade-soft); } .tl-p { stroke:var(--lp-ink); stroke-width:1.5; cursor:pointer; } .tl-p.k0 { fill:var(--lp-jade); fill-opacity:.55; } .tl-p.k1 { fill:#E9C46A; } .tl-p.k2 { fill:var(--lp-plum); fill-opacity:.7; } .tl-p.k3 { fill:#E9C46A; } .tl-info, .tr-info, .hp-info, .rt-info, .kg-info, .cb-info, .lc-info, .se-info { font-size:1rem; text-align:center; min-height:1.5em; } .tr-l { stroke:var(--lp-line); stroke-width:2; } .tr-n { fill:var(--lp-card); stroke:var(--lp-jade); stroke-width:2; } .tr-n.dup { fill:var(--lp-plum-soft); stroke:var(--lp-plum); } .hp-lv { stroke:var(--lp-line); stroke-width:1.5; stroke-dasharray:4 4; } .hp-p { fill:none; stroke:var(--lp-plum); stroke-width:3; stroke-linejoin:round; } .hp-me { fill:var(--lp-plum); } .rt-ed { fill:none; stroke:var(--lp-soft); stroke-width:1.6; } .rt-ed.on { stroke:var(--lp-plum); stroke-width:3.5; } .rt-ar { fill:var(--lp-soft); } .rt-node circle { fill:var(--lp-card); stroke:var(--lp-ink); stroke-width:1.6; cursor:pointer; } .rt-node.on circle { fill:var(--lp-plum-soft); stroke:var(--lp-plum); } .rt-node.cur circle { stroke-width:3; } .kg-c { fill:var(--lp-card); stroke:var(--lp-ink); stroke-width:1.5; cursor:pointer; } .kg-c.atk { fill:var(--lp-line); } .kg-c.ok { fill:var(--lp-jade-soft); } .kg-c.me { fill:var(--lp-plum-soft); } .cb-e { stroke:var(--lp-ink); stroke-width:1.5; } .cb-tri { fill:var(--lp-line); fill-opacity:.6; stroke:var(--lp-soft); stroke-width:2; } .cb-tri.eq { fill:var(--lp-plum); fill-opacity:.3; stroke:var(--lp-plum); } .cb-v circle { fill:var(--lp-card); stroke:var(--lp-ink); stroke-width:1.5; cursor:pointer; } .cb-v.p circle { fill:var(--lp-jade-soft); stroke:var(--lp-jade); } .cb-v.on circle { fill:var(--lp-plum-soft); stroke:var(--lp-plum); stroke-width:2.5; } .lc-gl { stroke:var(--lp-line); stroke-width:1; } .lc-on { fill:var(--lp-jade-soft); stroke:var(--lp-jade); stroke-width:1; } .lc-seg { stroke:var(--lp-plum); stroke-width:2.5; } .lc-pt { fill:var(--lp-plum); } .se-plane { display:grid; gap:8px; padding:10px 20px; border:2px solid var(--lp-line); border-radius:40px 40px 14px 14px; } .se-row { display:flex; gap:4px; } .se-row i { width:42px; height:40px; border:2px solid var(--lp-ink); border-radius:10px; background:var(--lp-card); } .se-row i.o { background:var(--lp-soft); } .se-row i.cp { background:var(--lp-plum); border-color:var(--lp-plum); } @media (max-width: 520px) { .dc-grid { grid-template-columns:repeat(7, 38px); } .cn-r { grid-template-columns:90px 120px 1fr; font-size:.95rem; } } .kgsvg text { pointer-events:none; } .lp-simbox .lp-gbar { flex-wrap:wrap; row-gap:6px; } @media (max-width: 520px) { .cn-r { grid-template-columns:auto auto auto; gap:6px; font-size:.9rem; } .dc-s { padding:4px 10px; min-height:34px; } } /* ── 2023 组件 ── */ .sp-c { fill:var(--lp-card); stroke:var(--lp-line); stroke-width:1.2; } .sp-c.sh { fill:var(--lp-line); } .sp-info, .fr-info { min-height:1.6em; } .db-expr { display:flex; gap:18px; align-items:center; font-size:2rem; font-family:"Times New Roman",serif; } .db-b b, .db-b .db-empty { display:inline-grid; place-items:center; min-width:44px; height:52px; border:2px dashed var(--lp-soft); border-radius:6px; font-style:normal; } .db-b sup b, .db-b sup .db-empty { min-width:26px; height:30px; font-size:1.1rem; } .db-b .db-empty { display:inline-block; vertical-align:middle; } .db-pal { display:flex; gap:8px; } .cs-tb { border-collapse:collapse; font-family:ui-monospace,Menlo,monospace; font-size:1rem; } .cs-tb th, .cs-tb td { border:1px solid var(--lp-line); padding:4px 8px; text-align:center; } .cs-tb th { font-family:inherit; font-weight:600; font-size:.85rem; color:var(--lp-soft); } .cs-tb td.ed { cursor:pointer; background:var(--lp-plum-soft); color:var(--lp-plum); font-weight:700; } .cs-tb tr.sum td.good { color:var(--lp-jade); font-weight:700; } .cs-tb tr.sum td.bad { color:var(--lp-plum); } .gp-cards { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; } .gp-c { width:44px; height:52px; border:2px solid var(--lp-line); border-radius:8px; background:var(--lp-card); color:var(--lp-ink); font-size:1.2rem; font-weight:700; } .gp-c.g1, .gp-b.g1 b { border-color:var(--lp-jade); color:var(--lp-jade); } .gp-c.g2, .gp-b.g2 b { border-color:var(--lp-plum); color:var(--lp-plum); } .gp-c.g3, .gp-b.g3 b { border-color:var(--lp-warn); color:var(--lp-warn); } .gp-c.g1 { background:var(--lp-jade-soft); } .gp-c.g2 { background:var(--lp-plum-soft); } .gp-c.g3 { background:#F7EBDD; } .gp-bins { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } .gp-b { display:flex; flex-direction:column; align-items:center; min-width:96px; border:1.5px solid var(--lp-line); border-radius:10px; padding:4px 8px; font-size:.95rem; } .gp-b em { font-style:normal; color:var(--lp-soft); font-size:.85rem; } .gp-b.good { border-color:var(--lp-jade); background:var(--lp-jade-soft); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gp-c.g3 { background:#3A2E22; } } /* 错题本 */ .ms-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 12px; } .ms-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .ms-tabs button { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px; padding:3px 12px; font-size:13px; cursor:pointer; } .ms-tabs button.on { border-color:var(--accent); color:var(--accent); font-weight:600; } .ms-main { display:flex; flex-direction:column; gap:2px; min-width:0; } .ms-tags { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; margin-left:auto; } .ms-dot { flex:none; width:10px; height:10px; border-radius:50%; background:var(--muted); } .ms-pending .ms-dot { background:var(--bad); } .ms-pending .ms-st { color:var(--bad); border-color:var(--bad); } .ms-due .ms-dot { background:var(--flag); } .ms-due .ms-st { color:var(--flag); border-color:var(--flag); } .ms-fixed .ms-dot { background:transparent; border:2px solid var(--accent); width:6px; height:6px; } .ms-mastered .ms-dot { background:var(--ok); } .ms-mastered .ms-st { color:var(--ok); border-color:var(--ok); } .prow.ms-row { display:grid; grid-template-columns:10px 1fr auto auto; gap:4px 10px; } .ms-row .go { margin-left:0; } @media (max-width: 560px) { .prow.ms-row { grid-template-columns:10px 1fr auto; } .ms-row .ms-tags { grid-row:2; grid-column:2; justify-content:flex-start; margin-left:0; } .ms-row .go { grid-row:1 / span 2; grid-column:3; align-self:center; } } .kp-ms { margin-left:6px; border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:999px; padding:1px 10px; font-size:12px; cursor:pointer; white-space:nowrap; } .kp-ms.hot { border-color:var(--bad); color:var(--bad); } .kp-ms .caret { display:inline-block; transition:transform .15s; } .kpblock.open .kp-ms .caret { transform:rotate(180deg); } .kpblock { border-top:1px solid var(--border); } .kpblock:first-of-type { border-top:0; } .kpblock .kprow { border-top:0; } .kp-ms-list { padding:4px 0 12px 12px; border-left:3px solid var(--bad-soft); margin:0 0 6px 4px; } .kp-ms-list .ms-actions { margin:8px 0 0; } @media (max-width: 560px) { .kp-ms { display:table; margin:4px 0 0; } .kp-ms-list { padding-left:8px; margin-left:0; } } /* 考情 */ .tag.hot { margin-left:6px; color:var(--bad); border-color:var(--bad); background:var(--bad-soft); } .kp-stat { font-size:12px; color:var(--muted); margin-top:2px; } .kp-stat b { color:var(--text); } .st-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:10px 0 4px; } .st-tiles > div { border:1px solid var(--border); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; } .st-tiles .big { font-size:26px; font-weight:700; color:var(--accent); line-height:1.2; } .st-strip { display:grid; grid-template-columns:repeat(25, 1fr); gap:2px; } .st-strip i { height:26px; border-radius:3px; background:var(--surface-2); border:1px solid var(--border); position:relative; } .st-strip i::after { content:''; position:absolute; inset:0; border-radius:3px; background:var(--accent); opacity:var(--a); } .st-axis { display:grid; grid-template-columns:repeat(25, 1fr); font-size:11px; color:var(--muted); margin-top:2px; } .st-axis span:nth-child(1) { grid-column:1; } .st-axis span:nth-child(2) { grid-column:5; } .st-axis span:nth-child(3) { grid-column:10; } .st-axis span:nth-child(4) { grid-column:15; } .st-axis span:nth-child(5) { grid-column:20; } .st-axis span:nth-child(6) { grid-column:25; } .st-axis span { text-align:center; } .st-bands { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; color:var(--muted); } .st-bands b { color:var(--text); margin-left:4px; } .st-years { display:flex; flex-wrap:wrap; gap:4px; } .st-years span { width:34px; border:1px solid var(--border); border-radius:6px; display:flex; flex-direction:column; align-items:center; padding:2px 0; color:var(--muted); } .st-years span.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); } .st-years b { font-size:14px; min-height:18px; } .st-years small { font-size:10px; } @media (max-width: 560px) { .st-tiles { grid-template-columns:1fr; } .st-tiles > div { flex-direction:row; align-items:center; gap:12px; } .st-tiles .big { min-width:70px; } } /* 题型与前置 */ .type-chips { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:8px; } .type-chips .tag { margin-left:0; } .type-chips .tag.main { color:var(--accent); border-color:var(--accent); } .kp-root { font-size:12px; color:var(--bad); margin-top:2px; } .kp-root a { color:var(--bad); font-weight:600; } .prow .tmeta { margin-left:auto; font-size:12px; color:var(--muted); } /* 个人知识图谱 */ :root { --kg-weak: #C3C8C5; --kg-weak-ink: #2F3A36; --kg-ok: #CFE6DA; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kg-weak: #4A524F; --kg-weak-ink: #E8EFEA; --kg-ok: #24463B; } } :root[data-theme="dark"] { --kg-weak: #4A524F; --kg-weak-ink: #E8EFEA; --kg-ok: #24463B; } .page.wide { max-width: 1240px; } .kg { display: grid; gap: 10px; } .kg-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; } .kg-tools { display: flex; gap: 6px; flex-wrap: wrap; } .kg-tools .btn { padding: 4px 12px; } .kg-exams { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .kg-exams button { font: inherit; font-size: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 3px 12px; cursor: pointer; } .kg-exams button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; } .kg-exams button:disabled { color: var(--muted); cursor: not-allowed; } .kg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); align-items: center; } .kg-legend span { display: inline-flex; gap: 6px; align-items: center; } .kg-sw { width: 22px; height: 14px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; } .kg-sw.lv-strong { background: var(--accent); border-color: var(--accent); } .kg-sw.lv-ok { background: var(--kg-ok); border-color: var(--accent); } .kg-sw.lv-weak { background: var(--kg-weak); border-color: var(--kg-weak); } .kg-sw.lv-insufficient { background: var(--surface); border: 1.5px dashed var(--muted); } .kg-sw.lv-none { background: var(--surface); } .kg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bad); display: inline-block; } .kg-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; } .kg-view { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: min(72vh, 640px); } .kg-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; } .kg-svg:active { cursor: grabbing; } .kg-e { fill: none; stroke: var(--muted); stroke-opacity: .45; stroke-width: 1.4; } .kg-e.on { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2; } .kg-e.on.direct { stroke-width: 3; } .kg-svg.focused .kg-e.far { stroke-opacity: .12; } .kg-ah { fill: var(--muted); opacity: .6; } .kg-ah.on { fill: var(--accent); opacity: 1; } .kg-n { cursor: pointer; } .kg-n rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; } .kg-n .t1 { font: 600 14px var(--sans); fill: var(--text); } .kg-n .t2 { font: 11.5px var(--sans); fill: var(--muted); } .kg-n.lv-strong rect { fill: var(--accent); stroke: var(--accent); } .kg-n.lv-strong .t1, .kg-n.lv-strong .t2 { fill: var(--surface); } .kg-n.lv-ok rect { fill: var(--kg-ok); stroke: var(--accent); } .kg-n.lv-weak rect { fill: var(--kg-weak); stroke: var(--kg-weak); } .kg-n.lv-weak .t1, .kg-n.lv-weak .t2 { fill: var(--kg-weak-ink); } .kg-n.lv-insufficient rect { stroke: var(--muted); stroke-dasharray: 5 4; } .kg-n.lv-none .t1 { fill: var(--muted); font-weight: 500; } .kg-n.sel rect { stroke: var(--bad); stroke-width: 3.5; stroke-dasharray: none; } .kg-svg.focused .kg-n.far { opacity: .25; } .kg-svg.focused .kg-n.chain { opacity: .75; } .kg-n:focus-visible rect { stroke: var(--bad); stroke-width: 3; } .kg-badge { fill: var(--bad); stroke: var(--surface); stroke-width: 2; } .kg-badge-t { font: 700 11px var(--sans); fill: #fff; text-anchor: middle; } .kg-panel { position: sticky; top: 16px; display: grid; gap: 10px; align-content: start; } .kg-panel h2 { margin: 0; } .kg-stat { display: flex; align-items: center; gap: 8px; } .kg-warn { font-size: 13px; color: var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 8px 10px; margin: 0; } .kg-chips { display: flex; flex-wrap: wrap; gap: 6px; } .kg-chip { font: inherit; font-size: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 4px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; } .kg-chip small { font-size: 11px; color: var(--muted); } .kg-chip.lv-weak { background: var(--kg-weak); border-color: var(--kg-weak); color: var(--kg-weak-ink); } .kg-chip.lv-weak small { color: var(--kg-weak-ink); } .kg-chip.lv-strong { border-color: var(--accent); } .kg-chip.lv-ok { background: var(--kg-ok); } .kg-actions { display: flex; gap: 8px; flex-wrap: wrap; } .kp-root, .kp-graph { display: inline-block; font-size: 12px; margin-top: 2px; text-decoration: none; } .kp-root { color: var(--bad); font-weight: 600; } .kp-graph { color: var(--muted); margin-left: 6px; } @media (max-width: 900px) { .kg-main { grid-template-columns: 1fr; } .kg-panel { position: static; } .kg-view { height: 62vh; } } .kg-lane rect { fill: var(--surface); stroke: var(--border); } .kg-lane.alt rect { fill: var(--accent-soft); fill-opacity: .35; } .kg-lane text { font: 700 15px var(--display); fill: var(--muted); } .kg-fam { display: grid; gap: 6px; } .kg-panel .plist .prow { padding: 6px 10px; } .kg-panel { max-height: calc(100vh - 32px); overflow: auto; } /* ───────── 结构：考试 / 知识图谱 / 错题本 ───────── */ .topnav .navlink.on { background: var(--accent-soft); font-weight: 600; } .topnav .navwho { font-size: 13px; color: var(--muted); padding: 4px 6px; } .fam-list { display: grid; gap: 12px; margin-bottom: 12px; } .card.fam { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: inherit; flex-wrap: wrap; } .card.fam:hover { border-color: var(--accent); } .card.fam h2 { margin: 0 0 4px; } .card.fam p { margin: 0; } .fam-meta { display: flex; gap: 14px; align-items: center; font-size: 14px; flex-wrap: wrap; } .fam-meta .go { color: var(--accent); } .ctabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 14px 0 12px; overflow-x: auto; } .ctabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; } .ctabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .mods { display: grid; gap: 6px; } .mrow { display: grid; grid-template-columns: 7em 1fr 4.5em; gap: 10px; align-items: center; font-size: 14px; } .mbar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .mbar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .num { font-variant-numeric: tabular-nums; text-align: right; } .utable { width: 100%; border-collapse: collapse; font-size: 14px; } .utable th { text-align: right; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px 4px; border-bottom: 1px solid var(--border); } .utable th:first-child { text-align: left; } .utable td { padding: 7px 4px; border-bottom: 1px solid var(--border); } .ms-filters { gap: 16px; flex-wrap: wrap; font-size: 14px; } .ms-filters select { margin-left: 6px; } .kl-row { display: flex; align-items: center; gap: 10px; } .kl-row .kg-sw { flex: none; } .kl-warn { color: var(--bad, #b42318); } @media (max-width: 520px) { .utable th:nth-child(4), .utable td:nth-child(4) { display: none; } .mrow { grid-template-columns: 5.5em 1fr 4em; } } .kl-row .tag, .ms-tags .tag { white-space: nowrap; } @media (max-width: 520px) { .topnav { gap: 4px; padding: 8px 12px; flex-wrap: nowrap; } .topnav .navlink { padding: 4px 6px; font-size: 13px; white-space: nowrap; } .topnav .navwho { max-width: 4.5em; overflow: hidden; text-overflow: ellipsis; } .topnav .brandbar svg + svg, .topnav .brandbar .bdiv { display: none; } } .kp-plist.clip > :nth-child(n+13) { display: none; } /* ───────── 账号与会员 ───────── */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; } .plan { border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: grid; gap: 6px; } .plan .pname { font-weight: 600; } .plan .price { font-size: 22px; font-weight: 700; color: var(--accent); } .card.bind-tip { display: block; text-decoration: none; color: inherit; border-color: var(--flag, #f0b44c); font-size: 14px; } .card.bind-tip b { color: var(--accent); } details summary { cursor: pointer; color: var(--accent); } /* ───────── 登录 / 注册 ───────── */ .auth-wrap { max-width: 960px; margin: 48px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; } .auth-intro h1 { font-size: 32px; margin: 0 0 12px; } .auth-intro > p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 24px; } .auth-intro ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .auth-intro li { display: grid; gap: 2px; padding-left: 18px; position: relative; color: var(--muted); font-size: 14px; } .auth-intro li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .auth-intro li b { color: var(--text); font-size: 15px; } .auth-card { padding: 28px; margin: 0; } .auth-card h2 { margin: 0 0 4px; font-size: 22px; } .auth-card > p { margin: 0 0 20px; } .auth-card form { display: grid; gap: 2px; } .auth-foot { margin-top: 16px; text-align: center; line-height: 1.6; } .input-group { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow: hidden; } .input-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input-group input { border: 0; border-radius: 0; box-shadow: none !important; flex: 1; min-width: 0; } .input-group .prefix { display: flex; align-items: center; padding: 0 12px; color: var(--muted); border-right: 1px solid var(--border); background: var(--surface-2); } .input-group .eye { border: 0; background: none; color: var(--accent); padding: 0 12px; font: inherit; font-size: 13px; cursor: pointer; } .btn.block { display: block; width: 100%; padding: 11px 16px; font-size: 16px; margin-top: 6px; } .btn:disabled { opacity: .6; cursor: default; } .card.bind-tip { display: flex; justify-content: space-between; gap: 12px; align-items: center; } @media (min-width: 900px) { .fam-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 820px) { .auth-wrap { grid-template-columns: 1fr; margin: 20px auto; gap: 20px; padding: 0 16px; } .auth-intro h1 { font-size: 24px; margin-bottom: 6px; } .auth-intro > p { margin-bottom: 0; font-size: 14px; } .auth-intro ul { display: none; } .auth-card { order: 2; padding: 22px 18px; } } @media (max-width: 520px) { .page { padding: 16px 12px 48px; } } @media (min-width: 900px) { .exam-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .exam-list .exam:nth-child(2) { border-top: 0; } } #bind, #pw, #redeem { max-width: 480px; } .mtag { display: inline-block; font-weight: 600; color: var(--accent); } /* ───────── 不同屏幕 ───────── */ .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; } .stem, .choice, .solution { overflow-wrap: anywhere; } @media (min-width: 1600px) { .page { max-width: 1320px; } .page.wide { max-width: 1600px; } .auth-wrap { max-width: 1120px; grid-template-columns: 1fr 440px; } .auth-intro h1 { font-size: 38px; } } @media (max-width: 520px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 6px; } .plan { padding: 10px 8px; } .plan .price { font-size: 17px; } .plan .btn { padding: 6px 4px; font-size: 13px; } .katex-display { font-size: .88em; } } /* ═════════ 应用框架：电脑左侧黑板绿侧栏，手机底部标签栏 ═════════ */ :root { --board: #173F35; --board-2: #1F4D41; --chalk: #E7F0EB; --chalk-dim: #A9C3B8; --paper: #F2F4F1; } body:not(.exam-mode) { background: var(--paper); } #app:has(> .side) { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; } .side { position: sticky; top: 0; height: 100vh; background: var(--board); color: var(--chalk); display: flex; flex-direction: column; padding: 18px 12px 14px; gap: 18px; } .side-brand { padding: 2px 10px 10px; border-bottom: 1px solid rgba(255,255,255,.08); } .side-brand .lg-ink { fill: #fff; } .side-brand .lg-tile { fill: #2E8B74; } .side-brand .bname { color: #fff; } .side-brand .bdiv { background: rgba(255,255,255,.4); } .side-nav { display: grid; gap: 2px; } .side-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--chalk-dim); text-decoration: none; font-size: 15px; } @media (hover: hover) { .side-nav a:hover { color: #fff; background: rgba(255,255,255,.05); } } .side-nav a.on { color: #fff; background: var(--board-2); box-shadow: inset 3px 0 0 #7FD1B6; } .side-who { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; text-decoration: none; } .side-who .avatar { width: 34px; height: 34px; border-radius: 50%; background: #7FD1B6; color: var(--board); display: grid; place-items: center; font-weight: 700; flex: none; } .side-who b { display: block; font-size: 14px; } .side-who small { display: block; font-size: 12px; color: var(--chalk-dim); } .mtop { display: none; } #app:has(> .side) > .page { max-width: none; width: 100%; margin: 0; padding: 28px clamp(20px, 3vw, 48px) 64px; } #app:has(> .side) > .page > * { max-width: 1440px; } /* 页面标题行 */ .ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin: 6px 0 20px; } .ph h1 { font-size: 30px; margin: 0 0 4px; } .ph p { margin: 0; font-size: 14px; } .ph-stats { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; } .ph-stats div { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 18px; min-width: 104px; } .ph-stats dt { font-size: 12px; color: var(--muted); } .ph-stats dd { margin: 2px 0 0; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); } .ph-stats dd small { font-size: 13px; font-weight: 400; color: var(--muted); } .card-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .card-h h2 { margin: 0; } .card-h a { font-size: 13px; text-decoration: none; } .card { padding: 20px 22px; } /* 两栏 */ .cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } .cols.half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cols.rev { grid-template-columns: 300px minmax(0, 1fr); } .col-side { position: sticky; top: 20px; } .col-main > .card:last-child, .col-side > .card:last-child { margin-bottom: 0; } /* 首页 */ .dash-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; } .dash-grid > .card { margin: 0; } .mm-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin-bottom: 14px; } .mm-sum span { display: inline-flex; align-items: center; gap: 6px; } .mm-sum b { color: var(--text); } .mm-rows { display: grid; gap: 8px; } .mm-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; align-items: start; } .mm-mod { font-size: 13px; color: var(--muted); padding-top: 7px; } .mm-tiles { display: flex; flex-wrap: wrap; gap: 6px; } .mm-tile { position: relative; font-size: 13px; padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--surface); } .mm-tile.lv-strong { background: var(--accent); border-color: var(--accent); color: #fff; } .mm-tile.lv-ok { background: var(--kg-ok, #D7EBE2); border-color: #9CCBB8; } .mm-tile.lv-weak { background: var(--kg-weak, #CDD1CD); border-color: #B5BAB5; color: var(--kg-weak-ink, #3B4743); } .mm-tile.lv-insufficient { border-style: dashed; color: var(--muted); } .mm-tile.lv-none { color: var(--muted); } .mm-tile i { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; font: 600 11px/18px var(--sans); text-align: center; padding: 0 4px; font-style: normal; } @media (hover: hover) { .mm-tile:hover { outline: 2px solid var(--accent); outline-offset: 1px; } } .tasks { display: grid; gap: 8px; } .task { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); text-decoration: none; color: var(--text); } @media (hover: hover) { .task:hover { border-color: var(--accent); } } .task > b { font-size: 26px; color: var(--bad); min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; } .task small { display: block; color: var(--muted); font-size: 12px; } .task .kg-sw { flex: none; width: 26px; height: 18px; margin: 0 4px; } .task .ico { color: var(--accent); display: grid; place-items: center; min-width: 1.6em; font-style: normal; } .scores { display: grid; } .score-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 30%) 4em; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); } .score-row:first-child { border-top: 0; } .sr-t small { display: block; color: var(--muted); font-size: 12px; } .sr-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); } .sr-bar i { display: block; height: 100%; background: var(--accent); } .score-row b { text-align: right; font-size: 18px; font-variant-numeric: tabular-nums; } .score-row b small { font-size: 12px; color: var(--muted); font-weight: 400; } .fam-mini { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); } .fam-mini:first-of-type { border-top: 0; } /* 试卷格子 */ .exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .exam-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: grid; gap: 4px; } .exam-tile.done { border-color: #B9D6CA; } .et-top { display: flex; justify-content: space-between; align-items: baseline; } .et-year { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.1; } .et-score { font-size: 20px; font-weight: 700; color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; } .et-score small { font-size: 12px; color: var(--muted); font-weight: 400; } .et-new { font-size: 12px; color: var(--muted); border: 1px dashed var(--border); border-radius: 999px; padding: 1px 8px; } .et-title { font-size: 14px; color: var(--muted); } .et-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .et-btns .btn { padding: 6px 0; text-align: center; } .stats-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; } .stats-grid > .card { margin: 0; } /* 复盘 */ .rev-score { display: flex; align-items: baseline; gap: 6px; } .rev-score b { font-size: 56px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .rev-score span { color: var(--muted); font-size: 18px; } .rev-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; } .rev-meta dt { font-size: 12px; color: var(--muted); } .rev-meta dd { margin: 0; font-weight: 600; } .qgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; } .qgrid a { text-align: center; padding: 6px 0; border-radius: 6px; font-size: 13px; text-decoration: none; font-variant-numeric: tabular-nums; } .qgrid .right { background: var(--ok-soft); color: var(--ok); } .qgrid .wrong { background: var(--bad-soft); color: var(--bad); font-weight: 700; } .qgrid .blank { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); } .rev-btns { display: grid; gap: 8px; } .rev-btns .btn { text-align: center; } .ritem { scroll-margin-top: 16px; } /* 中等屏幕：侧栏变窄，两栏变一栏 */ @media (max-width: 1180px) { .cols, .cols.rev, .dash-grid, .stats-grid { grid-template-columns: minmax(0, 1fr); } .col-side { position: static; } .cols.rev .rev-side .qgrid { grid-template-columns: repeat(10, 1fr); } } @media (max-width: 1000px) { .cols.half { grid-template-columns: minmax(0, 1fr); } } /* 手机 / 平板竖屏：顶部品牌条 + 底部标签栏 */ @media (max-width: 860px) { #app:has(> .side) { display: block; padding-bottom: 72px; } .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 50; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); flex-direction: row; gap: 0; } .side-brand, .side-who { display: none; } .side-nav { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; } .side-nav a { flex-direction: column; gap: 2px; padding: 6px 0; font-size: 11px; justify-content: center; border-radius: 8px; } .side-nav a.on { box-shadow: none; } .mtop { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; } .mtop-who { font-size: 13px; text-decoration: none; color: var(--muted); } #app:has(> .side) > .page { padding: 16px 14px 32px; } .ph h1 { font-size: 24px; } .ph-stats { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .ph-stats div { min-width: 0; padding: 8px 10px; } .ph-stats dd { font-size: 18px; } .mm-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .mm-mod { padding: 0; } .exam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .exam-tile { padding: 12px; } .et-year { font-size: 24px; } .cols.rev .rev-side .qgrid { grid-template-columns: repeat(5, 1fr); } } .side-help { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--chalk-dim); text-decoration: none; font-size: 14px; margin-top: auto; } @media (hover: hover) { .side-help:hover { color: #fff; background: rgba(255,255,255,.05); } } .side-help + .side-who { margin-top: 0; } .support { text-align: center; } .support-qr { width: 220px; max-width: 70vw; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: #fff; margin: 6px auto 4px; display: block; } .buy-tip { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; } @media (max-width: 860px) { .side-help { display: none; } } .mtop-who + .mtop-who { margin-left: 14px; } .side-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .side-brand .bdiv { display: none; } .side-brand .bname { font-size: 22px; letter-spacing: .12em; } .col-side .st-tiles { grid-template-columns: 1fr; } .col-side .st-tiles > div { display: grid; grid-template-columns: 5.2em 1fr; align-items: center; gap: 10px; } .mtop .bdiv { margin: 0 2px; } .auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 16px 0 10px; } .auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); } @media (max-width: 860px) { .side .side-brand, .side .side-who, .side .side-help { display: none; } } /* 深色模式：背景跟着变暗（之前固定浅色底，深色模式下标题看不清） */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #111A17; --board: #0D2520; --board-2: #17362E; --chalk: #DDEBE4; --chalk-dim: #8FAEA2; } :root:not([data-theme="light"]) .mm-tile.lv-strong { color: #0D2520; } :root:not([data-theme="light"]) .side-who .avatar { color: #0D2520; } } :root[data-theme="dark"] { --paper: #111A17; --board: #0D2520; --board-2: #17362E; --chalk: #DDEBE4; --chalk-dim: #8FAEA2; } @media (max-width: 860px) { .side-nav a { white-space: nowrap; } .side { border-top: 1px solid rgba(255,255,255,.08); } } .card.bind-tip b { white-space: nowrap; flex: none; } /* 注册礼：券的样子，颜色全用主题变量，浅色 / 深色模式都清楚 */ .gift { --gift-line: color-mix(in srgb, var(--accent) 45%, transparent); display: flex; align-items: stretch; margin: 4px 0 14px; border-radius: 12px; background: var(--accent-soft); border: 1px dashed var(--gift-line); text-align: left; overflow: hidden; } .gift-n { flex: none; display: flex; align-items: baseline; justify-content: center; gap: 2px; min-width: 76px; padding: 12px 12px; color: var(--accent); border-right: 1px dashed var(--gift-line); font: 800 30px/1 var(--sans); font-variant-numeric: tabular-nums; align-self: stretch; align-items: center; } .gift-n small { font-size: 13px; font-weight: 700; margin-left: 2px; align-self: flex-end; padding-bottom: 4px; } .gift > span:last-child { padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; } .gift b { display: block; font-size: 15px; color: var(--text); } .gift small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; } .gift-tip { padding: 0; overflow: hidden; } .gift-tip .gift { margin: 0; border: 0; border-radius: 0; flex: 1; } .gift-tip > b { padding: 0 16px; align-self: center; } .gift-link { display: block; text-decoration: none; } .gift-link .gift { margin: 10px 0 12px; } .gift-big { font-size: 44px; line-height: 1; margin-bottom: 6px; } .auth-intro em.hl { font-style: normal; color: var(--accent); font-weight: 700; } .card.bind-tip.gift-tip { background: var(--accent-soft); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); } .gift-tip > b { color: var(--accent); } /* 注册礼：数字和“次”同一行居中；文字区可收缩（之前手机上被截断） */ .gift-n { display: grid; place-items: center; } .gift-n > span { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; } .gift-n small { align-self: auto; padding: 0; } .gift > span:last-child { min-width: 0; flex: 1; } @media (max-width: 600px) { .gift-n { min-width: 64px; padding: 10px 8px; font-size: 24px; } .gift b { font-size: 14px; } .card.bind-tip.gift-tip { flex-direction: column; align-items: stretch; gap: 0; } .gift-tip > b { padding: 10px 14px; border-top: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); text-align: center; } } /* 套餐卡：按钮文字不折行；手机上用短文案 */ .plan .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan .price.tbd { font-size: 15px; white-space: nowrap; } .plan .lg { display: inline; } .plan .sm { display: none; } @media (max-width: 520px) { .plan .btn { font-size: 12px; padding: 7px 2px; } .plan .lg { display: none; } .plan .sm { display: inline; } .plan .price.tbd { font-size: 13px; } } .tag { white-space: nowrap; } .plan .btn { text-align: center; } .gift-tip > b { display: block; align-self: stretch; } /* 活动价 */ .promo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 0 4px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bad, #c0392b) 10%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--bad, #c0392b) 55%, transparent); } .promo-bar b { color: var(--bad, #c0392b); } .promo-bar span { font-size: 13px; color: var(--muted); } .plan .price .orig { display: block; font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--muted); } /* 游客：注册后才能用的功能 */ .reg-feats { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 10px; } .reg-feats li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, var(--bg)); border: 1px solid var(--border); } .reg-feats b { color: var(--accent); } .reg-feats span { font-size: 13px; color: var(--muted); } .reg-wall .btn.primary { justify-self: start; } .guest-note { text-align: center; margin: 8px 0 0; }