:root {
--brand: #5B5BF5;
--brand-dark: #4343D6;
--brand-soft: #EEEEFE;
--bg: #F6F7FB;
--card: #FFFFFF;
/* 浮层、下拉、选择框这类「盖在别的东西上面」的面板用它。
之前知识点下拉直接写了 var(--surface)，但这个变量从来没定义过，
浏览器按无效值处理 = 背景透明，浮层展开后下面的表单全透出来，糊成一团 */
--surface: #FFFFFF;
--text: #1B1E28;
--text-sub: #6B7280;
--border: #E8EAF1;
--green: #12B76A;
--green-soft: #E7F8F0;
--amber: #F79009;
--amber-soft: #FEF4E6;
--red: #F04438;
--red-soft: #FEECEB;
--blue: #2E90FA;
--blue-soft: #EAF3FF;
--radius: 14px;
--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* ---------- 顶部导航 ---------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, .85);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1280px; margin: 0 auto; padding: 0 28px;
height: 68px; display: flex; align-items: center; gap: 30px;
}
.logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; letter-spacing: -.3px; }
.logo-mark {
width: 40px; height: 40px; flex: none;
display: block; object-fit: contain;
}
.logo small { font-weight: 500; color: var(--text-sub); font-size: 12px; margin-left: 2px; }
.nav-links { display: flex; gap: 6px; flex: 1; }
.nav-links a {
padding: 7px 14px; border-radius: 9px; font-size: 14px; font-weight: 500;
color: var(--text-sub); transition: .15s;
}
.nav-links a:hover { background: var(--brand-soft); color: var(--brand); }
.nav-links a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.btn {
border: none; border-radius: 10px; padding: 9px 18px;
font-size: 14px; font-weight: 600; transition: .15s;
display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 12px -4px rgba(91, 91, 245, .5); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn-primary:disabled { background: #C7C9D9; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--text-sub); border: 1px solid var(--border); }
.btn-ghost:hover { background: #fff; color: var(--text); border-color: #D5D8E3; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.avatar {
width: 34px; height: 34px; border-radius: 50%; flex: none;
background: linear-gradient(135deg, #7C6BFF, #5BC8FF);
color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px;
overflow: hidden;
}
/* 真照片：object-fit 兜住，任何比例都不会把圆撑歪 */
.avatar-img { object-fit: cover; background: var(--bg); display: block; }
/* 被禁用后的统一默认头像。灰底灰人，和「没传过」的彩色首字母一眼分得开 */
.avatar-default { background: #E4E7EE; color: #98A2B3; }
.avatar-default svg { width: 62%; height: 62%; }
/* 个人信息页的头像卡 */
.me-avatar-card { margin-bottom: 12px; }
.me-avatar-row { display: flex; align-items: center; gap: 20px; }
.me-avatar-row .avatar { box-shadow: 0 8px 20px -10px rgba(16, 24, 40, .4); }
.me-avatar-side { min-width: 0; }
.me-avatar-title { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.me-avatar-side .me-tip { margin-bottom: 10px; }
.me-avatar-warn { color: var(--amber); font-weight: 600; }
.me-avatar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* 名单里姓名前面挂头像 */
.org-name-av { display: flex; align-items: center; gap: 9px; min-width: 0; }
.org-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 学生端作业卡。一卡一行，左边信息右边按钮，
窄屏时按钮掉到下面一行——横着挤会把标题压成两三个字 */
.hw-row2 {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--border);
}
.hw-row2:last-child { border-bottom: none; }
.hw-row2-main { min-width: 0; }
.hw-row2-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hw-row2-t b { font-size: 15px; font-weight: 700; }
.hw-row2-sub { font-size: 12.5px; color: var(--text-sub); margin-top: 4px; }
.hw-row2-hint { font-size: 12px; color: var(--text-sub); margin-top: 5px; opacity: .9; }
.hw-row2-act { flex: none; }
@media (max-width: 620px) {
.hw-row2 { flex-direction: column; align-items: stretch; gap: 10px; }
.hw-row2-act { text-align: right; }
}
/* ---------- 布局 ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 28px 28px 80px; }
.hero {
background: linear-gradient(135deg, #5B5BF5 0%, #7C6BFF 55%, #9B8CFF 100%);
border-radius: 20px; padding: 32px 36px; color: #fff;
position: relative; overflow: hidden; margin-bottom: 26px;
box-shadow: 0 20px 40px -24px rgba(91, 91, 245, .7);
}
.hero::after {
content: ''; position: absolute; right: -60px; top: -60px;
width: 240px; height: 240px; border-radius: 50%;
background: rgba(255, 255, 255, .12);
}
.hero::before {
content: ''; position: absolute; right: 80px; bottom: -80px;
width: 160px; height: 160px; border-radius: 50%;
background: rgba(255, 255, 255, .08);
}
.hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 6px; }
.hero p { font-size: 14px; opacity: .88; }
.hero-stats { display: flex; gap: 36px; margin-top: 22px; position: relative; z-index: 1; }
.hero-stat b { display: block; font-size: 24px; font-weight: 800; line-height: 1.2; }
.hero-stat span { font-size: 12px; opacity: .8; }
/* ---------- 筛选栏 ---------- */
.toolbar {
display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.chip {
padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
background: #fff; border: 1px solid var(--border); color: var(--text-sub);
transition: .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.search {
margin-left: auto; padding: 8px 14px; border-radius: 10px;
border: 1px solid var(--border); background: #fff; font-size: 13px;
width: 220px; outline: none; transition: .15s;
}
.search:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
/* ---------- 题目列表 ---------- */
.problem-table {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow);
}
.p-row {
/* 知识点列 236px。这个数是量出来的：十行里最宽的一对标签是
「逻辑运算（&& || !）」+「条件边界与漏判」= 229px，加上 6px 间距正好塞得下。
152 / 200 都试过，各差那么十几二十像素，一折行这行就从 56px 顶到 84px，
十行高低错落扫视起来很难受。宽度全从标题列匀——实测最长的题目名才 121px，
1fr 那列一直空着一大半 */
display: grid; grid-template-columns: 76px 1fr 158px 236px 80px;
align-items: center; padding: 15px 22px; gap: 12px;
border-bottom: 1px solid var(--border); transition: .12s;
}
.p-row:last-child { border-bottom: none; }
.p-row:hover { background: var(--bg); }
.p-head {
background: var(--bg); font-size: 12px; font-weight: 700;
color: var(--text-sub); text-transform: uppercase; letter-spacing: .5px;
padding: 11px 22px;
}
.p-id { color: var(--text-sub); font-size: 13px; font-variant-numeric: tabular-nums; }
/* 我的提交比题目表多一列（语言），列宽单独定。
之前写在内联 style 里，媒体查询盖不过内联样式，移动端直接横向溢出 */
.p-row.sub-row { grid-template-columns: 70px 1fr 110px 120px 90px; }
/* 题目编号。等宽数字让一列编号对齐，扫一眼就能定位 */
.p-code {
font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700;
color: var(--text-sub); font-variant-numeric: tabular-nums;
letter-spacing: -.2px;
}
.p-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.p-title:hover { color: var(--brand); }
.p-title .solved-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none;
}
.p-tags { display: flex; gap: 6px; flex-wrap: wrap; }
/* 单个标签内部不许折行。列宽不够时让它整体换到下一行，而不是把一个词
劈成两半——「宽度、精度、补零输」/「出」这种断法比折行还难看 */
.p-tags .tag { white-space: nowrap; }
.tag {
font-size: 11px; padding: 2px 8px; border-radius: 6px;
background: #F3F4F8; color: var(--text-sub); font-weight: 500;
}
.badge {
font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 7px;
display: inline-block;
}
.badge-easy { background: var(--green-soft); color: var(--green); }
.badge-medium { background: var(--amber-soft); color: var(--amber); }
.badge-hard { background: var(--red-soft); color: var(--red); }
/* 难度六级：绿→蓝→琥珀→红→紫→深灰，越往下越难，一眼能排出梯度 */
.badge-basic { background: var(--green-soft); color: var(--green); }
.badge-entry { background: var(--blue-soft); color: var(--blue); }
.badge-improve { background: var(--amber-soft); color: var(--amber); }
.badge-city { background: var(--red-soft); color: var(--red); }
.badge-province { background: var(--brand-soft); color: var(--brand); }
.badge-national { background: #2B2F44; color: #fff; }
/* 难度并成三档后「竞赛」用深色底：它是最难的一档，跟入门蓝、提高琥珀拉开层级。
原来这条挂在 badge-national 上，改口径时漏了新 class，竞赛 badge 会裸奔 */
.badge-contest { background: #2B2F44; color: #fff; }
.badge-default { background: #F3F4F8; color: var(--text-sub); }
.badge-solved { background: var(--green-soft); color: var(--green); }
.badge-tried { background: var(--amber-soft); color: var(--amber); }
.badge-none { color: #8A8FA3; font-weight: 500; }
/* ---------- 题目详情 ---------- */
.detail-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px; align-items: start;
}
.card {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); box-shadow: var(--shadow);
}
.card-pad { padding: 26px 28px; }
.card-head {
padding: 16px 22px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--bg); border-radius: var(--radius) var(--radius) 0 0;
}
.card-head h3 { font-size: 14px; font-weight: 700; }
/* 题目编号。放在标题上方一行，等宽字体，方便学生和老师口头对题 */
.problem-code {
font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px; font-weight: 700; color: var(--text-sub);
letter-spacing: .6px; margin-bottom: 5px;
}
.problem-title { font-size: 21px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 14px; }
.section { margin-bottom: 22px; }
.section h4 {
font-size: 13px; font-weight: 700; color: var(--text-sub);
text-transform: uppercase; letter-spacing: .6px; margin-bottom: 9px;
}
.section-body { font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.section-body code, .sample pre code {
font-family: "SF Mono", Menlo, Consolas, monospace;
background: #F3F4F8; padding: 1px 6px; border-radius: 5px; font-size: .9em;
}
.sample {
background: #FAFAFD; border: 1px solid var(--border);
border-radius: 10px; padding: 12px 15px; margin-bottom: 10px;
}
.sample-label { font-size: 11px; font-weight: 700; color: var(--text-sub); margin-bottom: 5px; }
.sample pre {
font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}
.hint-box {
background: var(--blue-soft); border: 1px solid #D3E7FF;
border-radius: 10px; padding: 13px 16px; font-size: 13.5px; color: #175CD3;
}
/* ---------- 编辑器 ---------- */
.editor-card { position: sticky; top: 82px; }
/* 出结果后取消吸顶，否则会盖住下方结果卡片顶部 */
.editor-card.has-result { position: static; }
.editor-toolbar {
display: flex; align-items: center; gap: 10px; padding: 12px 18px;
border-bottom: 1px solid var(--border);
}
select.lang-select {
padding: 7px 12px; border-radius: 9px; border: 1px solid var(--border);
background: #fff; font-size: 13px; font-weight: 600; outline: none;
}
select.lang-select:focus { border-color: var(--brand); }
.editor-host { height: 420px; }
#fallbackEditor {
width: 100%; height: 420px; border: none; outline: none; resize: none;
padding: 16px 18px; font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 13.5px; line-height: 1.65; background: #FCFCFE; tab-size: 4;
}
.editor-foot {
padding: 14px 18px; border-top: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.editor-foot .tip { font-size: 12px; color: var(--text-sub); }
/* ---------- 结果 ---------- */
.result-panel { margin-top: 16px; }
.result-head {
display: flex; align-items: center; gap: 12px; padding: 16px 20px;
border-radius: var(--radius) var(--radius) 0 0; font-weight: 700; font-size: 15px;
}
.result-accepted { background: var(--green-soft); color: var(--green); }
.result-wrong_answer, .result-partial { background: var(--red-soft); color: var(--red); }
.result-time_limit_exceeded, .result-memory_limit_exceeded { background: var(--amber-soft); color: var(--amber); }
.result-runtime_error, .result-compile_error, .result-system_error { background: #F3F4F8; color: #475467; }
.result-pending, .result-judging { background: var(--blue-soft); color: var(--blue); }
.result-meta { font-size: 12px; font-weight: 600; opacity: .85; margin-left: auto; }
.case-list { padding: 6px 0; }
.case-item {
display: flex; align-items: center; gap: 12px; padding: 10px 20px;
font-size: 13px; border-bottom: 1px solid var(--border);
}
.case-item:last-child { border-bottom: none; }
.case-idx { font-weight: 700; width: 56px; color: var(--text-sub); }
.case-status { font-weight: 700; width: 80px; }
.case-status.ok { color: var(--green); }
.case-status.bad { color: var(--red); }
.case-stat { color: var(--text-sub); font-variant-numeric: tabular-nums; }
.case-detail {
margin: 4px 20px 12px; padding: 12px 14px; background: #FAFAFD;
border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px;
}
.case-detail .k { color: var(--text-sub); font-weight: 700; margin-bottom: 3px; font-size: 11px; }
.case-detail pre {
font-family: "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap;
word-break: break-all; max-height: 140px; overflow: auto; margin-bottom: 8px;
}
/* ---------- 登录 ---------- */
.auth-wrap {
min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 40px 20px;
}
.auth-card {
width: 100%; max-width: 400px; background: var(--card);
border-radius: 18px; padding: 38px 34px; box-shadow: 0 24px 60px -28px rgba(16, 24, 40, .3);
border: 1px solid var(--border);
}
.auth-logo { display: block; width: 88px; height: 88px; margin: 0 auto 14px; }
.auth-card h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.4px; }
.auth-card .sub { font-size: 13.5px; color: var(--text-sub); margin-bottom: 26px; text-wrap: balance; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input {
width: 100%; padding: 11px 14px; border-radius: 10px;
border: 1px solid var(--border); font-size: 14px; outline: none; transition: .15s;
background: #FCFCFE;
}
.field input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.field select {
width: 100%; padding: 11px 14px; border-radius: 10px; appearance: none;
border: 1px solid var(--border); font-size: 14px; outline: none; transition: .15s;
background: #FCFCFE url("data:image/svg+xml;utf8,") no-repeat right 14px center;
font-family: inherit; color: var(--text);
}
.field select:focus { border-color: var(--brand); background-color: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.field .hint { font-size: 12px; color: var(--text-sub); margin-top: 6px; }
.field select.need { border-color: var(--danger, #E5484D); box-shadow: 0 0 0 4px rgba(229, 72, 77, .12); }
.auth-tabs { display: flex; gap: 4px; background: #F3F4F8; padding: 4px; border-radius: 11px; margin-bottom: 24px; }
.auth-tabs button {
flex: 1; padding: 8px; border: none; background: transparent; border-radius: 8px;
font-size: 13.5px; font-weight: 600; color: var(--text-sub); transition: .15s;
}
.auth-tabs button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.auth-submit { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; margin-top: 8px; }
.msg { font-size: 13px; margin-top: 14px; padding: 10px 13px; border-radius: 9px; display: none; }
.msg.show { display: block; }
.msg.error { background: var(--red-soft); color: var(--red); }
.msg.ok { background: var(--green-soft); color: var(--green); }
.empty { text-align: center; padding: 60px 20px; color: var(--text-sub); font-size: 14px; }
.loading { text-align: center; padding: 50px; color: var(--text-sub); font-size: 14px; }
@media (max-width: 900px) {
.detail-grid { grid-template-columns: 1fr; }
.editor-card { position: static; }
/* 手机上题目表只留「编号 + 题目」两列。题型和标签看标题就知道，
通过与否标题前有个绿点，状态列属于重复信息，干脆不占宽度 */
.p-row { grid-template-columns: 62px 1fr; }
.p-row .p-type, .p-row .p-tags, .p-row .p-status { display: none; }
/* 表头单元格没有 class，上面的 .p-type/.p-tags 管不到它，
不单独隐藏的话表头会多出几格、跟数据行对不上 */
.p-head > div:nth-child(3),
.p-head > div:nth-child(4),
.p-head > div:nth-child(5) { display: none; }
/* 我的提交是另一套列：提交号 / 题目 / 状态，三列都要 */
.p-row.sub-row { grid-template-columns: 56px 1fr 80px; }
.p-row.sub-row .p-status { display: block; }
.p-row.sub-row > div:nth-child(4),
.p-row.sub-row > div:nth-child(5) { display: none; }
.hero-stats { gap: 24px; }
.nav-links { display: none; }
}
/* 窄屏手机（≤420px）：状态列和留白收一收，把宽度让给题目标题。
不收的话中间那列只剩 45px，题目名会被压成竖排 */
@media (max-width: 420px) {
.p-row { grid-template-columns: 60px 1fr; gap: 8px; padding: 14px 14px; }
.p-head { padding: 10px 14px; }
.p-row.sub-row { grid-template-columns: 48px 1fr 66px; }
.problem-table { border-radius: 12px; }
}
/* ---------- 题型徽章 ---------- */
.badge-type {
background: var(--blue-soft);
color: var(--blue);
font-weight: 700;
}
/* ---------- Markdown 内容 ---------- */
.md p { margin: 0 0 10px; }
.md p:last-child { margin-bottom: 0; }
.md strong { font-weight: 700; color: var(--text); }
.md em { font-style: italic; }
.md a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.md .md-img {
cursor: zoom-in;
display: block;
max-width: 100%;
height: auto;
margin: 12px 0;
border-radius: 10px;
border: 1px solid var(--border);
background: #fff;
}
.md .md-inline {
background: #F2F3F8;
color: #4343D6;
padding: 2px 6px;
border-radius: 5px;
font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: .9em;
}
.md .md-code {
background: #1B1E28;
color: #E8EAF1;
padding: 14px 16px;
border-radius: 10px;
overflow-x: auto;
font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 13px;
line-height: 1.6;
margin: 12px 0;
}
/* ---------- 客观题作答区 ---------- */
.choice-card {
padding: 0;
overflow: hidden;
}
.choice-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
background: #FCFCFE;
}
.choice-type {
font-size: 13px;
font-weight: 700;
color: var(--brand);
background: var(--brand-soft);
padding: 3px 10px;
border-radius: 999px;
}
.choice-hint { font-size: 12.5px; color: var(--text-sub); }
.opt-list {
padding: 16px 20px 4px;
display: flex;
flex-direction: column;
gap: 10px;
}
.opt {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 16px;
border: 1.5px solid var(--border);
border-radius: 12px;
cursor: pointer;
transition: border-color .15s, background .15s, transform .1s;
background: #fff;
}
.opt:not(.opt-correct):not(.opt-wrong):hover { border-color: var(--brand-soft); background: var(--bg); }
.opt:active { transform: scale(.995); }
.opt input { display: none; }
.opt-letter {
flex: none;
width: 26px; height: 26px;
border-radius: 8px;
background: #F2F3F8;
color: var(--text-sub);
display: grid; place-items: center;
font-size: 13px; font-weight: 700;
transition: background .15s, color .15s;
}
.opt-body { flex: 1; min-width: 0; }
.opt-text { display: block; font-size: 14px; }
.opt-text p { margin: 0; }
.opt-img {
display: block;
max-width: 100%;
max-height: 260px;
height: auto;
margin-top: 8px;
border-radius: 8px;
border: 1px solid var(--border);
background: #fff;
}
/* 选中态 */
.opt:has(input:checked) {
border-color: var(--brand);
background: var(--brand-soft);
}
.opt:has(input:checked) .opt-letter {
background: var(--brand);
color: #fff;
}
/* 判题后的标记。选中态 :has(input:checked) 的特异度比 .opt.opt-correct 高，
所以这里再补一个带 :has 的选择器，否则"选中且答错"的选项会一直是紫色。 */
.opt.opt-correct,
.opt.opt-correct:has(input:checked) {
border-color: var(--green);
background: var(--green-soft);
}
.opt.opt-correct .opt-letter { background: var(--green); color: #fff; }
.opt.opt-wrong,
.opt.opt-wrong:has(input:checked) {
border-color: var(--red);
background: var(--red-soft);
}
.opt.opt-wrong .opt-letter { background: var(--red); color: #fff; }
.choice-answer {
padding: 14px 20px;
font-size: 13.5px;
color: var(--text-sub);
border-top: 1px solid var(--border);
}
.choice-answer strong { color: var(--green); font-size: 15px; letter-spacing: .5px; }
/* ---------- 解析区 ---------- */
.exp-card {
margin-top: 16px;
padding: 0;
overflow: hidden;
}
.exp-head {
padding: 13px 20px;
border-bottom: 1px solid var(--border);
background: #FCFCFE;
}
.exp-title {
font-size: 13px;
font-weight: 700;
color: var(--amber);
background: var(--amber-soft);
padding: 3px 10px;
border-radius: 999px;
}
.exp-video {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
}
.exp-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.exp-text {
padding: 16px 20px;
font-size: 14px;
line-height: 1.75;
}
/* 解析上锁。一行提示，不抢戏——它只是告诉学生「这里有一块内容，要花点币」 */
.exp-lock {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
padding: 12px 16px;
border: 1px dashed var(--border);
border-radius: 12px;
background: #FCFCFE;
font-size: 13.5px;
}
.exp-lock-i { font-size: 15px; line-height: 1; }
.exp-lock-t { font-weight: 600; color: var(--text); }
.exp-lock-s { font-size: 12.5px; color: var(--text-sub); }
.exp-lock-btn {
margin-left: auto;
border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
background: var(--amber-soft);
color: var(--amber);
font: inherit;
font-size: 12.5px;
font-weight: 700;
padding: 5px 13px;
border-radius: 999px;
cursor: pointer;
transition: .15s;
}
.exp-lock-btn:hover { background: var(--amber); color: #fff; }
.exp-lock-btn:disabled { opacity: .6; cursor: default; }
.exp-lock-btn:disabled:hover { background: var(--amber-soft); color: var(--amber); }
.p-type { display: flex; gap: 6px; flex-wrap: wrap; }
/* 图片放大遮罩 */
.lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
background: rgba(16, 18, 32, .84);
cursor: zoom-out;
animation: lb-in .15s ease;
}
.lightbox img {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
background: #fff;
box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
.lightbox { padding: 16px; }
}
/* ---------- 我的成长中心 ---------- */
.hero-me .me-head { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.me-avatar {
width: 54px; height: 54px; border-radius: 16px; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 800;
background: rgba(255, 255, 255, .22); color: #fff;
border: 1px solid rgba(255, 255, 255, .3);
}
.me-h2 {
font-size: 18px; font-weight: 800; letter-spacing: -.3px;
margin: 34px 0 14px;
}
/* 分题型进度条。实心段是已通过，浅色段是试过没过，空着的是还没碰 */
.prog-row { padding: 14px 0; border-bottom: 1px dashed var(--border); }
.prog-row:last-child { border-bottom: none; padding-bottom: 4px; }
.prog-row:first-child { padding-top: 4px; }
.prog-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 8px;
}
.prog-label { font-size: 14px; font-weight: 700; }
.prog-num { font-size: 13px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.prog-num b { color: var(--text); font-size: 15px; }
.prog-bar {
position: relative; height: 8px; border-radius: 999px;
background: #EEF0F6; overflow: hidden;
}
.prog-fill {
position: absolute; left: 0; top: 0; height: 100%;
background: linear-gradient(90deg, var(--brand), #7C6BFF);
border-radius: 999px; transition: width .35s ease;
}
.prog-fill-tried {
position: absolute; top: 0; height: 100%;
background: var(--brand-soft); border-radius: 999px;
}
.prog-foot { margin-top: 6px; font-size: 12px; color: var(--text-sub); }
/* 提交记录分页 */
.sub-more { padding: 16px; text-align: center; border-top: 1px solid var(--border); }
.sub-end {
padding: 14px; text-align: center; font-size: 12.5px;
color: var(--text-sub); border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
.hero-me .me-head { gap: 12px; }
.me-avatar { width: 44px; height: 44px; border-radius: 13px; font-size: 18px; }
.hero h1 { font-size: 21px; }
.hero-stats { gap: 20px; flex-wrap: wrap; }
.me-h2 { margin-top: 26px; }
}
/* 教师管理端入口：跟学生中心区分开，一眼能看出这是后台 */
/* 教师入口：做成实心紫按钮，跟左侧「页签」形态拉开。
之前用浅紫底，跟 active 页签同一个色，乍看像两个同时选中 */
.nav-links a.nav-admin {
padding: 5px 12px; border-radius: 8px;
background: var(--brand); color: #fff;
font-weight: 700;
}
.nav-links a.nav-admin:hover { background: var(--brand-dark); }
.nav-links a.nav-admin.active { background: var(--brand-dark); color: #fff; }
/* ---------- 题库管理（教师端） ---------- */
.hero-admin { background: linear-gradient(135deg, #2B2F44 0%, #3A3F5C 55%, #4A4F70 100%); }
/* 五列：编号 / 题目 / 难度 / 知识点 / 状态。
「题型」撤了——它在上方筛选器里能筛，占一列不值；换成知识点，
老师挑题时真正在看的是「这题考什么」。
原来还有一列「答案」——这个页面是来管题的，不是来核对答案的 */
.admin-row { grid-template-columns: 86px minmax(0, 1fr) 92px 236px 92px; }
/* 知识点列：最多显示 3 个，多的用 +N。全列出来会把行撑到三四行高 */
.p-kp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kp-chip {
display: inline-block; padding: 2px 8px; border-radius: 7px;
background: #F1F3FA; color: var(--text-sub);
font-size: 12px; line-height: 1.6; white-space: nowrap;
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.kp-more { background: transparent; color: var(--text-sub); padding: 2px 2px; }
.p-kp-none { color: var(--text-sub); font-size: 12.5px; }
.admin-row { cursor: pointer; }
.admin-row.p-head { cursor: default; }
/* 来源性质徽标。自编必须显眼——「GESP 一级 第7讲」这种名字很像官方教材，
其实是老师自己编的讲义，不标出来会被当成真题 */
.badge-self { background: #EEF0F6; color: #5A6180; }
.badge-book { background: #F0EDFA; color: #6B5AA8; }
.ans-key { color: var(--green); font-size: 13px; letter-spacing: .5px; }
.ans-muted { color: var(--text-sub); font-size: 12.5px; }
.admin-detail {
background: var(--bg); border-bottom: 1px solid var(--border);
padding: 0 22px;
}
.admin-detail:not(:empty) { padding: 20px 22px 24px; }
.adm-block { margin-bottom: 18px; }
.adm-block:last-of-type { margin-bottom: 8px; }
.adm-block h5 {
font-size: 12px; font-weight: 700; color: var(--text-sub);
text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
}
.adm-opt {
display: flex; gap: 10px; align-items: flex-start;
padding: 9px 12px; border-radius: 10px; margin-bottom: 7px;
background: #fff; border: 1px solid var(--border); font-size: 14px;
}
.adm-opt-key { border-color: var(--green); background: var(--green-soft); }
.adm-opt .opt-letter {
width: 22px; height: 22px; border-radius: 7px; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800;
background: #EEF0F6; color: var(--text-sub);
}
.adm-opt-key .opt-letter { background: var(--green); color: #fff; }
.adm-pre {
background: #fff; border: 1px solid var(--border); border-radius: 10px;
padding: 12px 14px; font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px; line-height: 1.65; white-space: pre-wrap;
color: var(--text); margin: 0; max-height: 260px; overflow: auto;
}
.adm-meta { font-size: 12.5px; color: var(--text-sub); padding-top: 6px; border-top: 1px dashed var(--border); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.pager-info { font-size: 13px; color: var(--text-sub); }
.sel {
padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border);
background: var(--card); font-size: 13.5px; color: var(--text);
font-family: inherit; cursor: pointer;
}
.sel:focus { outline: none; border-color: var(--brand); }
@media (max-width: 900px) {
.admin-row { grid-template-columns: 76px 1fr 92px; }
.admin-row > div:nth-child(3),
.admin-row > div:nth-child(4) { display: none; }
}
/* ── 成长中心 / 题库管理：收尾补丁 ── */
/* 紫色 hero 上的链接。--brand 本身就是紫色，直接放上去等于隐形，
换成半透明白底胶囊，在任何一档渐变上都看得见 */
.link-on-brand {
display: inline-block; margin-left: 4px; padding: 3px 11px;
border-radius: 8px; background: rgba(255, 255, 255, .22);
border: 1px solid rgba(255, 255, 255, .38);
color: #fff; font-weight: 700; text-decoration: none;
}
.link-on-brand:hover { background: rgba(255, 255, 255, .34); }
/* 无权限时把后台外壳收起来：筛选器、表头、分页、统计数字都不该留着。
只留中间那行动作提示，否则六个空表头看着像加载失败 */
.no-perm .toolbar,
.no-perm .p-head,
.no-perm .pager,
.no-perm .hero-stats { display: none; }
.no-perm .problem-table {
background: none; border: none; box-shadow: none;
}
/* ══════════════════════════════════════════════════════
教学管理后台：独立的一套界面，左侧菜单 + 右侧内容
跟前台不是同一个布局——前台是「学生做题的地方」，
后台是「老师管东西的地方」，混在一起两边都别扭
══════════════════════════════════════════════════════ */
.adm-body { background: #F4F5F9; }
.adm-shell {
display: grid;
grid-template-columns: 226px 1fr;
min-height: 100vh;
}
/* ---------- 左侧菜单 ---------- */
.adm-side {
background: #FFFFFF;
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh;
}
.adm-brand {
display: flex; align-items: center; gap: 9px;
padding: 20px 20px 18px;
font-size: 15px; font-weight: 800; letter-spacing: -.2px;
color: var(--text);
}
.adm-brand .logo-mark {
width: 30px; height: 30px; flex: none;
display: block; object-fit: contain;
}
.adm-brand small {
display: block; font-size: 10.5px; font-weight: 600;
color: var(--text-sub); letter-spacing: .5px; margin-top: -3px;
}
.adm-menu { padding: 4px 12px; flex: 1; overflow-y: auto; }
.adm-item {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 9px 12px; margin-bottom: 2px;
border-radius: 9px; font-size: 13.5px; font-weight: 600;
color: var(--text-sub); transition: .15s;
}
a.adm-item:hover { background: #F6F7FB; color: var(--text); }
.adm-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.adm-item.is-todo { color: #B6BAC6; cursor: default; }
.adm-item.is-todo i {
font-style: normal; font-size: 10px; font-weight: 700;
padding: 1px 6px; border-radius: 5px;
background: #F2F3F7; color: #A8ADBB;
}
.adm-side-foot { padding: 12px; border-top: 1px solid var(--border); }
.adm-front {
display: block; padding: 9px 12px; border-radius: 9px;
font-size: 13px; font-weight: 600; color: var(--text-sub);
background: #F6F7FB;
}
.adm-front:hover { background: var(--brand-soft); color: var(--brand); }
/* ---------- 右侧主区 ---------- */
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-top {
height: 62px; padding: 0 26px;
display: flex; align-items: center; justify-content: space-between;
background: #FFFFFF; border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 20;
}
.adm-who { display: flex; align-items: center; gap: 10px; }
.adm-who .avatar {
width: 32px; height: 32px; border-radius: 10px;
background: var(--brand-soft); color: var(--brand);
display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.adm-who b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.adm-who span { font-size: 11.5px; color: var(--text-sub); }
.adm-top-right { display: flex; align-items: center; gap: 8px; }
.adm-content { padding: 24px 26px 48px; }
/* 没权限时的一道门。不渲染整个外壳，免得看着像加载失败 */
/* 用 flex 不用 grid：grid 会把「文字节点」和「」当成两个 item 各占一行，
结果文案被顶到上面、链接被压到下面，中间空一大片 */
.adm-gate {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 2px;
font-size: 14px; color: var(--text-sub); text-align: center; padding: 24px;
}
.adm-gate a { color: var(--brand); font-weight: 700; }
/* ---------- 页面标题 ---------- */
.adm-page-head { margin-bottom: 18px; }
.adm-page-head h1 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.adm-page-head p { font-size: 13px; color: var(--text-sub); margin-top: 3px; }
/* ---------- 四个数字卡 ---------- */
.adm-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
margin-bottom: 22px;
}
.adm-stat {
background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px; box-shadow: var(--shadow);
}
.adm-stat b {
display: block; font-size: 27px; font-weight: 800; line-height: 1.15;
letter-spacing: -.8px; font-variant-numeric: tabular-nums;
}
.adm-stat span { font-size: 12.5px; color: var(--text-sub); }
/* ---------- 板块 ---------- */
.adm-block-wrap {
background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.adm-h2 { font-size: 14px; font-weight: 800; margin-bottom: 16px; }
/* ---------- 快捷入口 ---------- */
.adm-quick {
display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
gap: 12px;
}
.adm-q {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; padding: 18px 10px;
border-radius: 12px; border: 1px solid var(--border);
background: #FCFCFE; font-size: 13px; font-weight: 700;
color: var(--text); transition: .15s; text-align: center;
}
a.adm-q:hover, button.adm-q:hover {
border-color: var(--brand); background: var(--brand-soft); color: var(--brand);
}
.adm-q.is-todo {
color: #B6BAC6; background: #FAFAFC; cursor: default;
}
.adm-q.is-todo i { font-style: normal; }
.adm-q.is-todo em {
font-style: normal; font-size: 10px; font-weight: 700;
padding: 1px 6px; border-radius: 5px; background: #F2F3F7; color: #A8ADBB;
}
/* ---------- 题库概况：分题型条 ---------- */
.adm-typebars { display: flex; flex-direction: column; gap: 11px; }
.adm-typebar { display: grid; grid-template-columns: 84px 1fr 40px; align-items: center; gap: 12px; }
.adm-tb-label { font-size: 12.5px; color: var(--text-sub); }
.adm-tb-track {
height: 9px; border-radius: 999px; background: #F0F1F6; overflow: hidden;
}
.adm-tb-track i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.adm-tb-num {
font-size: 13px; font-weight: 700; text-align: right;
font-variant-numeric: tabular-nums;
}
.adm-note { font-size: 12.5px; color: var(--text-sub); margin-top: 14px; }
/* ---------- 后台里的表格：去掉前台那圈外框，跟卡片对齐 ---------- */
.adm-content .problem-table { box-shadow: var(--shadow); }
.adm-content .toolbar { margin-bottom: 14px; }
/* ---------- 窄屏：菜单收成横排 ---------- */
@media (max-width: 900px) {
.adm-shell { grid-template-columns: 1fr; }
.adm-side {
position: static; height: auto; flex-direction: row;
align-items: center; overflow-x: auto;
border-right: none; border-bottom: 1px solid var(--border);
}
.adm-brand { padding: 12px 14px; }
.adm-brand small { display: none; }
/* 窄屏左侧栏变成顶部横条，能横滑但不显示滚动条——那根灰条太扎眼 */
.adm-side { scrollbar-width: none; }
.adm-side::-webkit-scrollbar { display: none; }
.adm-menu { display: flex; gap: 4px; padding: 8px; flex: 0 0 auto; }
.adm-item { white-space: nowrap; margin-bottom: 0; }
.adm-side-foot { border-top: none; padding: 8px; }
.adm-front { white-space: nowrap; }
.adm-top { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
.adm-content { padding: 16px 14px 40px; }
.adm-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.adm-stat { padding: 14px 16px; }
.adm-stat b { font-size: 22px; }
.adm-block-wrap { padding: 16px; }
}
/* ---------- 学生个人中心 ----------
跟教师后台同一套视觉语言，但骨架不一样：
教师后台是「顶栏 + 左侧菜单」，学生个人中心上面留着前台导航，
菜单从导航底下开始排——学生随时能点「训练中心」回去做题 */
.me-shell {
display: grid; grid-template-columns: 196px 1fr;
min-height: calc(100vh - 62px); align-items: start;
}
.me-side {
position: sticky; top: 62px; height: calc(100vh - 62px);
overflow-y: auto; background: #FFFFFF;
border-right: 1px solid var(--border);
padding: 14px 10px;
display: flex; flex-direction: column;
}
.me-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.me-item {
display: block; width: 100%; text-align: left;
padding: 10px 13px; border-radius: 9px; border: none;
background: transparent; font-family: inherit;
font-size: 13.5px; font-weight: 600; color: var(--text-sub);
transition: .15s;
}
a.me-item:hover, button.me-item:hover { background: #F6F7FB; color: var(--text); }
.me-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.me-side-foot { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border); }
.me-exit { color: #98A0AE; }
.me-exit:hover { background: var(--red-soft); color: var(--red); }
.me-main { min-width: 0; padding: 22px 26px 56px; }
/* 成长中心的正文宽度。原来卡 980，是照「一列文字好读」定的，可这一块
几乎全是表格和卡片：1920 的屏上右边空出七百多像素，学生第一反应是
「这页没加载完吧」。放宽到 1440——再宽表格的题目列就空得没边了 */
.me-content { max-width: 1440px; }
.me-page-head { margin-bottom: 16px; }
.me-page-head h1 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.me-page-head p { font-size: 13px; color: var(--text-sub); margin-top: 3px; }
/* 成长中心各页签的页头。比一级页面的 188px 矮一档：
这里是「我的数据」，页头是导航不是门面，压太高首屏就看不到内容了。
选择器前面带 .banner，是因为 ui2.css 里 .banner 的规则后加载，
只写 .me-hero 拼不过它 */
.banner.me-hero { min-height: 132px; align-items: stretch; }
/* 文字在左、动作按钮在右，两栏。按钮原来压在文字下面，有按钮的页签
比没按钮的高出一截，同一套页头反而三种高度 */
.banner.me-hero .banner-body { display: flex; align-items: center; gap: 20px; padding: 22px 26px; }
.me-hero-text { flex: 1; min-width: 0; }
.banner.me-hero .banner-body h1 { font-size: clamp(20px, 2.4vw, 25px); }
.banner.me-hero .banner-body p { font-size: 13px; }
.me-hero-act { flex: none; display: flex; gap: 8px; flex-wrap: wrap; }
/* 页头是深色底，幽灵按钮（白底深字）放上去会糊，换成白玻璃 */
.banner.me-hero .btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); color: #fff; }
.banner.me-hero .btn:hover { background: rgba(255,255,255,.26); }
.banner.me-hero .btn-primary { background: #fff; border-color: #fff; color: var(--brand); }
.banner.me-hero .btn-primary:hover { background: rgba(255,255,255,.88); color: var(--brand); }
@media (max-width: 640px) {
.banner.me-hero { min-height: 118px; }
.banner.me-hero .banner-body { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 18px; }
}
.me-h2 { font-size: 14px; font-weight: 800; margin: 22px 0 12px; }
.me-card {
background: #FFFFFF; border: 1px solid var(--border);
border-radius: 12px; box-shadow: var(--shadow);
}
.me-card-pad { padding: 18px 20px; }
.me-empty {
padding: 44px 20px; text-align: center;
display: flex; flex-direction: column; gap: 5px;
}
.me-empty b { font-size: 14px; font-weight: 700; color: var(--text-sub); }
.me-empty span { font-size: 12.5px; color: #A8ADBB; }
/* .me-empty 是 flex column，默认 align-items:stretch，里面的按钮会被拉成
一整条通栏色带。空态里的按钮是「下一步」，该是个按钮的样子 */
.me-empty > .btn, .org-empty > .btn { align-self: center; margin-top: 8px; }
/* 我的收藏：照截图，上面两个方框并排，下面一张表 */
.me-fav-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.me-fav-box {
display: flex; align-items: center; gap: 12px;
background: #FFFFFF; border: 1px solid var(--border);
border-radius: 12px; padding: 18px 20px;
font-size: 13.5px; font-weight: 600; font-family: inherit; color: var(--text);
box-shadow: var(--shadow);
}
.me-fav-btn { justify-content: center; }
.me-fav-btn:disabled { cursor: default; opacity: .75; }
.me-fav-ico {
width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center; font-size: 15px; color: #fff;
flex: 0 0 auto;
}
.me-fav-ico.green { background: var(--green); }
.me-fav-ico.amber { background: var(--amber); }
.me-fav-box b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 错题本按知识点归堆。用 chip 不用下拉：一眼能看见「哪块错得多」，
下拉要点开才知道有哪些选项，等于藏起来 */
.me-kbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.me-kbar:empty { display: none; }
.me-klab { font-size: 12.5px; color: var(--text-faint); margin-right: 2px; }
.me-kchip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 20px; cursor: pointer;
border: 1px solid var(--line); background: var(--bg-soft); color: var(--text-sub);
font-size: 12.5px; font-family: inherit; transition: all .15s;
}
.me-kchip:hover { border-color: var(--brand); color: var(--text); }
.me-kchip em {
font-style: normal; font-size: 11px; font-weight: 700;
background: var(--bg); color: var(--text-faint); padding: 1px 6px; border-radius: 10px;
}
.me-kchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.me-kchip.on em { background: rgba(255,255,255,.24); color: #fff; }
.me-kchip.clear { background: transparent; border-style: dashed; color: var(--text-faint); }
/* 题目行下面挂的知识点小签。放这里是因为错题本按知识点筛过之后，
还得能看出这道题到底挂的是哪一条 */
.me-ktags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.me-ktag {
font-size: 11px; padding: 1px 7px; border-radius: 4px;
background: var(--bg-soft); color: var(--text-faint); white-space: nowrap;
}
.me-table-wrap { overflow-x: auto; }
.me-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.me-table th {
text-align: left; font-size: 12.5px; font-weight: 700; color: var(--text-sub);
background: #FAFBFD; padding: 11px 14px; border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.me-table td { padding: 14px; border-bottom: 1px solid var(--border); }
.me-table tr:last-child td { border-bottom: none; }
.me-table .me-td-empty { text-align: center; color: #A8ADBB; padding: 36px 14px; }
.me-practice-actions { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.me-kv { background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.me-kv-row {
display: grid; grid-template-columns: 120px 1fr;
padding: 13px 18px; font-size: 13.5px;
border-bottom: 1px solid var(--border);
}
.me-kv-row:last-child { border-bottom: none; }
.me-kv-row span { color: var(--text-sub); }
.me-kv-row b { font-weight: 600; }
@media (max-width: 760px) {
.me-shell { grid-template-columns: 1fr; min-height: 0; }
.me-side {
position: static; height: auto; flex-direction: row; align-items: center;
overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border);
padding: 8px;
}
.me-menu { flex-direction: row; gap: 4px; flex: 0 0 auto; }
.me-item { white-space: nowrap; padding: 8px 12px; width: auto; }
/* 手机上顶栏已经有「退出」，菜单里的就不再占一行 */
.me-side-foot { display: none; }
.me-main { padding: 16px 14px 48px; }
.me-fav-top { grid-template-columns: 1fr; gap: 10px; }
.me-kv-row { grid-template-columns: 92px 1fr; padding: 12px 14px; }
}
/* 我的练习：顶部三个数 + 题型页签 */
.me-page-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.me-stat {
background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px;
padding: 16px 18px; box-shadow: var(--shadow);
}
.me-stat b {
display: block; font-size: 24px; font-weight: 800; line-height: 1.15;
letter-spacing: -.6px; font-variant-numeric: tabular-nums;
}
.me-stat span { font-size: 12.5px; color: var(--text-sub); }
.me-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.me-tab {
border: 1px solid var(--border); background: #FFFFFF;
padding: 7px 14px; border-radius: 999px;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-sub);
transition: .15s;
}
.me-tab:hover { border-color: #D6D9E6; color: var(--text); }
.me-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.me-more { text-align: center; margin-top: 14px; }
.me-link {
border: none; background: none; padding: 0;
font-family: inherit; font-size: 13px; font-weight: 700;
color: var(--brand); cursor: pointer;
}
.me-link:hover { text-decoration: underline; }
.me-link:disabled { color: #A8ADBB; cursor: default; text-decoration: none; }
.me-table a { font-weight: 600; }
.me-table a:hover { color: var(--brand); }
.me-table .c-idx { color: #A8ADBB; font-variant-numeric: tabular-nums; }
.me-table .c-time, .me-table .c-attempts { color: var(--text-sub); font-size: 12.5px; white-space: nowrap; }
/* 收藏为 0 时批量练习没东西可练 */
.me-fav-btn.is-off { opacity: .45; pointer-events: none; }
/* 题目页的收藏按钮 */
.fav-btn {
border: 1px solid var(--border); background: #FFFFFF;
padding: 6px 14px; border-radius: 9px;
font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-sub);
transition: .15s;
}
.fav-btn:hover { border-color: var(--brand); color: var(--brand); }
.fav-btn.is-on { background: var(--amber-soft); border-color: #F7C88A; color: #B54708; }
@media (max-width: 760px) {
.me-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.me-stat { padding: 12px; }
.me-stat b { font-size: 19px; }
/* 手机上表格只留 序号 / 编号 / 题目 / 状态，其余藏起来 */
.me-table .c-type, .me-table .c-attempts, .me-table .c-time { display: none; }
.me-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.me-tab { white-space: nowrap; }
}
/* 上次没过：红色。跟训练中心的「尝试过」（琥珀，中性提示）分开 */
.badge.badge-fail { background: var(--red-soft); color: var(--red); }
/* ══════════════════ 教师端：题目管理（2026-10-30） ══════════════════ */
/* 题库管理的二级页签：列表 / 出题 / 导入 / 上架 / 字典。
五个动作都在「题库管理」这一件事里，塞进左侧主菜单会把菜单撑长 */
.adm-subnav {
display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
border-bottom: 1px solid var(--border); padding-bottom: 12px;
}
.adm-subitem {
padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
color: var(--text-sub); transition: .15s;
}
.adm-subitem:hover { background: #fff; color: var(--text); }
.adm-subitem.active { background: var(--brand); color: #fff; }
/* 页头：标题在左，动作按钮在右。按钮多的时候会换行，别挤成一坨 */
.adm-head-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.adm-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* 题目行下面那行小字：单题/试卷 + 来源 · 年份 */
.p-sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.p-sub .badge { font-size: 11px; padding: 1px 8px; }
.origin-tag { font-size: 11.5px; color: var(--text-sub); }
.adm-edit-link {
float: right; font-size: 12.5px; font-weight: 700; color: var(--brand);
}
.adm-edit-link:hover { text-decoration: underline; }
/* ---------- 出题表单 ---------- */
.frm { max-width: 980px; }
.frm-sec {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.frm-sec > h3 {
font-size: 15px; font-weight: 800; margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.frm-sec > h3 em {
font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text-sub);
background: #F3F4F8; padding: 2px 8px; border-radius: 6px;
}
.frm-h3-gap { margin-top: 26px; }
.frm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.frm-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.frm-wide { grid-column: 1 / -1; }
.frm-field { display: block; margin-bottom: 12px; }
.frm-field > span {
display: flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 700; color: var(--text-sub); margin-bottom: 6px;
}
.frm-field > span i { color: var(--red); font-style: normal; }
.frm-field > span em {
font-style: normal; font-weight: 500; font-size: 11.5px; color: #9AA0AE;
}
.frm-field input, .frm-field select, .frm-field textarea {
width: 100%; padding: 9px 12px; border-radius: 10px;
border: 1px solid var(--border); background: #fff; font-size: 13.5px;
font-family: inherit; color: var(--text); outline: none; transition: .15s;
}
.frm-field textarea { resize: vertical; line-height: 1.65; }
.frm-field input:focus, .frm-field select:focus, .frm-field textarea:focus {
border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.frm-tip { font-size: 12.5px; color: var(--text-sub); margin: -6px 0 12px; }
.frm-check {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text); margin-top: 4px; cursor: pointer;
}
/* 允许换行：原来只有「Python / C++」两项，一行正好；加了科目之后
是六个，不换行会挤出容器。两个地方共用这一条 */
.frm-langs { display: flex; gap: 14px; padding-top: 8px; flex-wrap: wrap; }
.frm-langs label { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.frm-actions {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 4px 0 40px;
}
.frm-msg { font-size: 12.5px; color: var(--text-sub); }
/* 题型选择卡 */
.type-pick {
/* 180px 是让五个题型卡（编程/图形化/单选/多选/判断）在 980px 里排成一行，
第 5 张不会掉到第二行孤零零一个 */
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px; max-width: 980px;
}
.type-card {
text-align: left; background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 18px 18px 16px; transition: .15s;
box-shadow: var(--shadow); position: relative; cursor: pointer;
}
.type-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.type-card .type-ico { font-size: 22px; display: block; margin-bottom: 8px; }
.type-card b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.type-card em { font-style: normal; font-size: 12.5px; color: var(--text-sub); line-height: 1.5; }
.type-card.is-todo { opacity: .55; cursor: not-allowed; box-shadow: none; }
.type-card.is-todo:hover { border-color: var(--border); transform: none; }
.type-card i {
position: absolute; right: 12px; top: 12px; font-style: normal;
font-size: 10.5px; font-weight: 700; color: var(--text-sub);
background: #F3F4F8; padding: 2px 7px; border-radius: 5px;
}
/* 选项编辑器 */
.opt-edit {
display: grid; grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1fr) 34px;
gap: 8px; align-items: center; margin-bottom: 8px;
}
.opt-edit .opt-mark {
display: flex; align-items: center; justify-content: center;
height: 36px; background: #fff; border: 1px solid var(--border); border-radius: 9px;
}
.opt-edit input[type="text"], .opt-edit .optText, .opt-edit .optImg {
padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border);
font-size: 13.5px; font-family: inherit; outline: none;
}
.opt-edit .optText:focus, .opt-edit .optImg:focus {
border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.opt-del {
width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
background: #fff; color: var(--text-sub); font-size: 17px; line-height: 1;
}
.opt-del:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }
/* 样例 / 测试点 */
.case-edit {
border: 1px solid var(--border); border-radius: 12px;
background: var(--bg); margin-bottom: 10px; overflow: hidden;
}
.case-head {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; border-bottom: 1px solid var(--border); background: #fff;
}
.case-head b { font-size: 12.5px; color: var(--text-sub); font-weight: 700; }
.case-head .opt-del { width: 28px; height: 28px; font-size: 15px; }
.case-body {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px;
}
.case-body .frm-field { margin-bottom: 0; }
.case-body textarea {
font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
}
/* ---------- 批量导入 ---------- */
.imp-steps { max-width: 980px; }
.imp-step {
display: grid; grid-template-columns: 34px 1fr; gap: 14px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.imp-num {
width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft);
color: var(--brand); font-weight: 800; font-size: 13px;
display: flex; align-items: center; justify-content: center;
}
.imp-body h3 { font-size: 14.5px; font-weight: 800; margin-bottom: 5px; }
.imp-body > p { font-size: 12.5px; color: var(--text-sub); margin-bottom: 12px; line-height: 1.7; }
.imp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.imp-file { font-size: 12.5px; color: var(--text-sub); }
.imp-text {
width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6;
resize: vertical; outline: none;
}
.imp-text:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.imp-sum {
font-size: 13px; color: var(--text); background: var(--bg);
border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 8px 0 12px;
}
.imp-sum b { font-weight: 800; }
.imp-sum .ok { color: var(--green); }
.imp-sum .bad { color: var(--red); }
.imp-card {
border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px;
margin-bottom: 8px; background: #fff;
}
.imp-card-bad { border-color: #FBD5D1; background: #FFFAFA; }
.imp-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-card-head b { font-size: 13.5px; font-weight: 700; }
.imp-card-meta {
display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
font-size: 11.5px; color: var(--text-sub);
}
.imp-warn {
margin-top: 8px; padding-left: 18px; font-size: 12px; color: var(--amber);
}
.imp-warn li { line-height: 1.7; }
/* 解析期的提醒（题型没认出来、用样例顶测试点…）：同一张卡片里跟报错并列，
但颜色压淡一级，让「真正过不去的原因」仍然最扎眼 */
.imp-warn li.imp-warn-soft { color: var(--text-sub); }
/* 「这题题库里已有」：预览阶段就得看见，否则同名题怎么处理全靠猜 */
.imp-dup {
margin-top: 8px; padding: 6px 10px; border-radius: 8px;
background: var(--amber-soft); color: #8A5B00; font-size: 11.5px; line-height: 1.6;
}
/* ---------- 上架管理 ---------- */
.pub-row { grid-template-columns: 34px 86px 1fr 108px 96px 96px 88px; }
.pub-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.pub-bar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
padding: 10px 16px; margin-bottom: 14px;
}
.pub-all { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.pub-count { font-size: 12.5px; color: var(--text-sub); margin-right: auto; }
/* ---------- 标签字典 ---------- */
.dict-sec {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow); max-width: 980px;
}
.dict-head h3 { font-size: 14.5px; font-weight: 800; }
.dict-head p { font-size: 12.5px; color: var(--text-sub); margin: 4px 0 14px; }
.dict-list { margin-bottom: 12px; }
.dict-row {
display: grid; grid-template-columns: 1fr 76px 1fr 64px auto auto;
gap: 10px; align-items: center; padding: 7px 0;
border-bottom: 1px dashed var(--border);
}
.dict-row:last-child { border-bottom: none; }
.dict-label, .dict-sort {
padding: 7px 11px; border-radius: 9px; border: 1px solid var(--border);
font-size: 13px; font-family: inherit; outline: none;
}
.dict-label:focus, .dict-sort:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.dict-code {
font-size: 11.5px; color: #9AA0AE;
font-family: "SF Mono", Menlo, Consolas, monospace;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dict-state { font-size: 11.5px; color: var(--green); font-weight: 700; }
.dict-state.is-off { color: var(--text-sub); }
.dict-empty { font-size: 12.5px; color: var(--text-sub); padding: 6px 0; }
.dict-add { display: flex; gap: 10px; align-items: center; }
.dict-new {
flex: 1; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border);
font-size: 13px; font-family: inherit; outline: none;
}
.dict-new:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
@media (max-width: 760px) {
.frm-grid, .frm-grid-3, .case-body { grid-template-columns: 1fr; }
.opt-edit { grid-template-columns: 30px 1fr 30px; }
.opt-edit .optImg { display: none; }
.pub-row { grid-template-columns: 30px 70px 1fr 84px; }
.pub-row > div:nth-child(4), .pub-row > div:nth-child(5),
.pub-row > div:nth-child(7) { display: none; }
.dict-row { grid-template-columns: 1fr 60px; }
.dict-row > .dict-code, .dict-row > .dict-state { display: none; }
}
/* ---------- 训练中心筛选栏（2026-10-30 重做） ---------- */
/* 原来五个裸下拉排一行，能用但难看：没有标签，学生得先点开才知道
哪一格是年份。现在做成一张独立的筛选卡——顶部标题栏写「已筛出几道」，
中间每个下拉都带自己的字段名，底下把已生效的条件摆成可点掉的小标签，
想撤哪一个点 × 就行，不用一路摸回对应的下拉。 */
.filter-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px 16px 15px;
margin: -6px 0 16px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.fc-head {
display: flex; align-items: center; gap: 9px;
margin-bottom: 12px; min-height: 22px;
}
.fc-title {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .2px;
}
.fc-title svg { width: 14px; height: 14px; stroke: var(--brand); }
.fc-count {
font-size: 12px; font-weight: 600; color: var(--text-sub);
background: #F3F4F8; border-radius: 999px; padding: 2px 10px;
font-variant-numeric: tabular-nums;
}
.fc-count.hot { background: var(--brand-soft); color: var(--brand); }
.fc-clear {
margin-left: auto; font-size: 12.5px; font-weight: 600;
color: var(--text-sub); background: none; border: none; padding: 3px 6px;
border-radius: 7px; transition: .15s;
}
.fc-clear:hover { color: var(--red); background: var(--red-soft); }
.fc-clear:disabled { opacity: .35; cursor: default; }
.fc-clear:disabled:hover { color: var(--text-sub); background: none; }
.fc-grid {
display: grid; gap: 10px;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.fc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fc-field > span {
font-size: 11.5px; font-weight: 600; color: #8A8FA3;
letter-spacing: .3px; padding-left: 2px;
}
.fc-field select {
width: 100%; height: 34px; padding: 0 26px 0 10px;
border-radius: 9px; border: 1px solid var(--border);
background: var(--bg); color: var(--text); font-size: 13px;
font-family: inherit; cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center;
transition: .15s; text-overflow: ellipsis;
}
.fc-field select:hover { border-color: #C9CDDA; background-color: #fff; }
.fc-field select:focus {
outline: none; border-color: var(--brand); background-color: #fff;
box-shadow: 0 0 0 4px var(--brand-soft);
}
/* 选过值的格子标蓝：一眼能扫出「哪几格是筛过的」 */
.fc-field.on > span { color: var(--brand); }
.fc-field.on select {
border-color: rgba(91, 91, 245, .45); background-color: var(--brand-soft);
color: var(--brand-dark); font-weight: 600;
}
.fc-chips {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border);
}
.fc-chips:empty { display: none; }
/* 已选条件：整颗可点，点一下就撤掉这一项。
「难度 入门 ×」——字段名淡一点，值重一点，读起来像一句话 */
.fc-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px 4px 11px; border-radius: 999px;
background: var(--brand-soft); color: var(--brand-dark);
font-size: 12px; font-weight: 700; font-family: inherit;
border: 1px solid rgba(91, 91, 245, .16); transition: .15s;
}
.fc-chip:hover { background: #E3E3FD; border-color: rgba(91, 91, 245, .34); }
.fc-chip em {
font-style: normal; font-weight: 500; opacity: .6;
margin-right: 1px;
}
.fc-chip i {
font-style: normal; opacity: .45; font-size: 13px; line-height: 1;
margin-left: 1px; transition: .15s;
}
.fc-chip:hover i { opacity: 1; }
/* ---------- 错题本连对进度 ---------- */
.streak-box { display: inline-flex; align-items: center; gap: 5px; }
.streak-dot {
width: 8px; height: 8px; border-radius: 50%; background: #E3E5EE;
display: inline-block;
}
.streak-dot.on { background: var(--green); }
.streak-text { font-size: 11.5px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
/* ---------- 提交结果：只显示第一个未通过样例 ---------- */
.case-item-first { padding: 0 0 8px; border-bottom: none; }
.case-rest {
margin-top: 8px; font-size: 12px; color: var(--text-sub);
background: #F7F8FC; border-radius: 8px; padding: 7px 10px;
}
/* 报错翻译卡片：比「说明」那行更显眼一点，学生第一眼就能看到人话 */
.hint-box {
margin-top: 12px; padding: 11px 13px; border-radius: 10px;
background: var(--brand-soft); border: 1px solid rgba(255, 122, 26, .22);
}
.hint-head { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #B45309; }
.hint-ico { font-size: 14px; }
.hint-body { margin-top: 5px; font-size: 12.5px; line-height: 1.65; color: #7C2D12; }
.hint-raw {
margin-top: 6px; font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 11px; color: #9A7B5F; word-break: break-all;
}
@media (max-width: 900px) {
.fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.filter-card { padding: 12px 13px 13px; border-radius: 14px; }
.fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-field:last-child { grid-column: 1 / -1; }
.fc-count { font-size: 11.5px; }
}
/* ══════════════════ 知识点 / 试卷 / 题库归属（2026-10-30） ══════════════════ */
/* 出题页的知识点候选：字典里已有的知识点铺成小圆片，点一下进输入框。
不用 datalist——多值输入时 datalist 会把整串替换成你点的那一个，
老师刚填的两个知识点直接没了 */
.kp-suggest {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 7px; min-height: 0;
}
.kp-suggest:empty { display: none; }
.kp-chip {
font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
background: #F3F4F8; color: var(--text-sub);
border: 1px solid transparent; cursor: pointer; transition: .15s;
}
.kp-chip:hover { background: var(--brand-soft); color: var(--brand); border-color: rgba(91, 91, 245, .2); }
.kp-chip.on {
background: var(--brand); color: #fff; border-color: var(--brand);
box-shadow: 0 3px 10px -4px rgba(91, 91, 245, .7);
}
/* 知识点选择器：科目 → 父标签 → 子标签。
不铺成 200 多个圆片——老师找「二分」得在一堆圆片里扫三屏。
折叠起来按父标签分组，展开才看子标签，搜索框兜住「我知道叫什么」的情况 */
.kp-box {
position: relative;
border: 1px solid var(--border); border-radius: var(--r2);
background: var(--surface); padding: 7px 10px; min-height: 42px;
cursor: text; transition: border-color .15s, box-shadow .15s;
}
.kp-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.kp-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-picked:empty { display: none; }
.kp-picked .kp-chip { display: inline-flex; align-items: center; gap: 5px; }
.kp-picked .kp-chip i { font-style: normal; opacity: .5; cursor: pointer; font-size: 15px; line-height: 1; }
.kp-picked .kp-chip i:hover { opacity: 1; }
.kp-input {
border: 0; outline: 0; background: transparent; width: 100%;
font-size: 13.5px; padding: 6px 2px; color: var(--text); font-family: inherit;
}
/* 科目切换。C++ 和 Scratch 是两套知识点体系，混在一个列表里
出代码题的人得先翻过一堆 Scratch 父标签才看到算法 */
.kp-tabs {
display: flex; gap: 4px; padding: 2px 2px 8px;
border-bottom: 1px solid var(--border); margin-bottom: 4px;
position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.kp-tab {
font-size: 12.5px; padding: 5px 11px; border-radius: 7px;
border: 1px solid transparent; background: transparent;
color: var(--text-sub); cursor: pointer; font-family: inherit;
}
.kp-tab:hover { background: var(--bg-soft); }
.kp-tab.on { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.kp-tab i {
font-style: normal; font-size: 10.5px; margin-left: 5px;
background: var(--brand); color: #fff; border-radius: 8px; padding: 0 5px;
}
.kp-panel {
position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
/* 高度同时受视口约束：屏幕矮的时候固定 380px 会把面板顶出窗口下沿 */
max-height: min(380px, 62vh); overflow: auto; overscroll-behavior: contain;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2);
box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .28); padding: 6px;
}
.kp-grp {
font-size: 11.5px; font-weight: 700; color: var(--text-sub);
padding: 9px 8px 4px; letter-spacing: .04em;
}
.kp-par > summary {
list-style: none; cursor: pointer; padding: 6px 8px; border-radius: 6px;
font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.kp-par > summary::-webkit-details-marker { display: none; }
.kp-par > summary:hover { background: var(--bg-soft); }
.kp-par > summary .lv {
font-size: 10.5px; font-weight: 600; color: var(--text-sub);
background: #F0F1F6; padding: 1px 6px; border-radius: 4px;
}
.kp-par > summary .cnt { font-size: 11px; color: var(--brand); font-weight: 700; margin-left: auto; }
.kp-kids { display: flex; flex-wrap: wrap; gap: 5px; padding: 3px 8px 9px 22px; }
.kp-kid {
font-size: 12px; padding: 4px 9px; border-radius: 6px;
border: 1px solid var(--border); background: var(--surface);
color: var(--text-sub); cursor: pointer; transition: .12s;
}
.kp-kid:hover { border-color: var(--brand); color: var(--brand); }
.kp-kid.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
/* 「整个大类」是没贴切子标签时的退路，虚线框跟具体子标签区分开，
免得老师以为它也是某个子标签 */
.kp-kid-par { border-style: dashed; color: #8E6B7A; font-size: 11.5px; }
.kp-empty { padding: 16px; text-align: center; color: var(--text-sub); font-size: 13px; }
.kp-note { font-size: 12px; color: var(--text-sub); margin-top: 6px; }
.kp-note.warn { color: #9A6B12; }
/* 试卷名。比知识点重一档——它是「这一整套卷」的身份，
列表里用纸色的框框住，扫一眼就知道这几道题是同一套 */
.tag-paper {
background: #FBF7EC; color: #9A6B12;
border: 1px solid #F0E3C4;
}
.paper-tag {
display: inline-block; max-width: 260px;
padding: 1px 7px; border-radius: 6px;
background: #FBF7EC; color: #9A6B12; border: 1px solid #F0E3C4;
font-size: 11px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
vertical-align: middle;
}
/* 出题老师。灰色小签，不抢眼但一直都在 */
.owner-tag {
display: inline-block; padding: 1px 7px; border-radius: 6px;
background: #F3F4F8; color: var(--text-sub);
font-size: 11px; font-weight: 600; vertical-align: middle;
}
.owner-tag::before { content: "✎ "; opacity: .6; }
/* 归属徽章：机构题库是「能给学生做」的，用品牌色；私人题库是「还没放出去」的，
用灰的。两个颜色差得够远，扫列表时不会看错 */
.badge-scope { font-size: 11px; padding: 1px 8px; border-radius: 6px; }
.badge-scope-org { background: var(--brand-soft); color: var(--brand-dark); }
.badge-scope-private { background: #F3F4F8; color: #7A7F92; }
/* originTag 里徽章、来源、年份、试卷名挤在一行，用 flex 给它们自动留缝，
不然连成一串糊成一团（JS 里是 join('') 拼的） */
.origin-tag {
display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
vertical-align: middle;
}
/* 详情底部那行操作：编辑链接原来是 float:right，现在换成 flex 排 */
.adm-actions {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.adm-actions .adm-edit-link { float: none; margin-right: auto; }
.adm-flag {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 600; color: var(--green);
background: var(--green-soft); border-radius: 8px; padding: 5px 11px;
}
.adm-flag::before { content: "✓"; }
.adm-flag-wait { color: var(--amber); background: var(--amber-soft); }
.adm-flag-wait::before { content: "◷"; }
/* ══════════════════ 题库共享审核页 ══════════════════ */
.share-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px 16px; margin-bottom: 11px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
transition: .15s;
}
.share-card:hover { border-color: #D8DCE8; box-shadow: var(--shadow); }
.share-head {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.share-head .p-title { font-size: 14.5px; font-weight: 700; }
.share-type { font-size: 11.5px; color: var(--text-sub); }
.share-body {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 9px;
}
.share-who { font-size: 12.5px; font-weight: 600; color: var(--text); }
.share-time { font-size: 11.5px; color: #8A8FA3; font-variant-numeric: tabular-nums; }
.share-note {
width: 100%; font-size: 12.5px; color: var(--text-sub);
background: #F7F8FC; border-radius: 9px; padding: 8px 11px;
border-left: 3px solid #DDE0EA;
}
.share-review { border-left-color: var(--amber); background: var(--amber-soft); color: #8A5A08; }
.share-actions {
display: flex; gap: 9px; margin-top: 11px;
padding-top: 11px; border-top: 1px dashed var(--border);
}
@media (max-width: 640px) {
.share-card { padding: 12px 13px; }
.share-head { gap: 6px; }
.share-actions { flex-direction: column; }
.share-actions .btn { width: 100%; }
.paper-tag { max-width: 170px; }
}
/* 字典里 code 和名称一样的类别（时间/来源/试卷/知识点）：右边那格
再抄一遍名字是废话，改成一句淡字说明它存的就是名字本身 */
.dict-same { font-style: normal; color: #B6BAC7; font-size: 11.5px; }
/* ══════════════════ 私人题库中心（2026-10-30 晚） ══════════════════ */
/* 批量操作条。贴在列表上方而不是浮在底部：老师勾完抬头就能看见
「已选 3 道 / 提交」，不用滚到页面尽头找按钮 */
.pick-bar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 11px 16px; margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.pick-all {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 600; color: var(--text);
cursor: pointer; white-space: nowrap;
}
.pick-all input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.pick-count {
font-size: 12.5px; font-weight: 600; color: var(--text-sub);
background: #F3F4F8; border-radius: 999px; padding: 3px 11px;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pick-note {
flex: 1 1 220px; min-width: 160px; height: 34px; padding: 0 12px;
border: 1px solid var(--border); border-radius: 9px;
background: var(--bg); font-family: inherit; font-size: 13px; color: var(--text);
}
.pick-note:focus {
outline: none; border-color: var(--brand); background: #fff;
box-shadow: 0 0 0 4px var(--brand-soft);
}
/* 带勾选列的行：前面多一格 40px，其余列跟着挪 */
.p-row.pick-row { grid-template-columns: 34px 86px 1fr 108px 96px 150px; }
.pick-cell { display: flex; align-items: center; justify-content: center; }
.pick-cell input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.pick-cell input:disabled { cursor: not-allowed; opacity: .35; }
/* 状态徽章：私人 / 等审核 / 已进机构 / 已删除 */
.badge-private { background: #F3F4F8; color: #7A7F92; }
.badge-wait { background: var(--amber-soft); color: var(--amber); }
.badge-del { background: #FDECEC; color: var(--red); }
/* 删除按钮：红字白底，比主按钮轻，比 ghost 明确——它是个不能随手点的动作 */
.btn-danger-ghost {
background: #fff; border: 1px solid #F3C9C9; color: var(--red);
}
.btn-danger-ghost:hover { background: #FDECEC; border-color: #E9A9A9; }
.adm-preview-link {
font-size: 12.5px; font-weight: 600; color: var(--text-sub);
text-decoration: none; padding: 5px 9px; border-radius: 8px; transition: .15s;
}
.adm-preview-link:hover { color: var(--brand); background: var(--brand-soft); }
@media (max-width: 760px) {
.p-row.pick-row { grid-template-columns: 30px 70px 1fr 120px; }
.p-row.pick-row > div:nth-child(4),
.p-row.pick-row > div:nth-child(5) { display: none; }
.pick-bar { gap: 9px; padding: 10px 13px; }
.pick-note { flex-basis: 100%; order: 3; }
}
/* ---------- 组织架构：校区 / 学生 / 教师 / 班级 ---------- */
/* 四个页面共用一套表格行。字段少、列固定，用 grid 比 table 好控列宽，
也和题库列表长得像，老师不用重新学一遍怎么读 */
.org-toolbar {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
margin-bottom: 14px;
}
.org-toolbar .grow { flex: 1; min-width: 180px; }
.org-toolbar input[type="text"], .org-toolbar .inp {
height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px;
font-size: 13.5px; background: #fff; color: var(--text); font-family: inherit;
}
.org-toolbar input[type="text"]:focus, .org-toolbar .inp:focus {
outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.org-table {
background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
overflow: hidden; box-shadow: var(--shadow);
}
.org-row {
display: grid; align-items: center; gap: 12px; padding: 13px 20px;
border-bottom: 1px solid var(--border); transition: .12s; font-size: 14px;
}
.org-row:last-child { border-bottom: none; }
.org-row:hover { background: var(--bg); }
.org-head {
background: var(--bg); font-size: 12px; font-weight: 700; color: var(--text-sub);
letter-spacing: .5px; padding: 10px 20px;
}
/* 列宽：人 / 校区 / 班级 / 状态 / 操作 */
.org-row.people { grid-template-columns: 1.4fr 120px 1.6fr 88px 250px; }
/* 班级：班级 / 老师 / 科目 / 校区 / 人数 / 状态 / 操作 */
.org-row.classes { grid-template-columns: 1.5fr 110px 90px 110px 66px 80px 210px; }
/* 校区：校区 / 人数 / 班级数 / 操作 */
.org-row.campus { grid-template-columns: 1fr 90px 90px 190px; }
.org-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.org-name small { font-weight: 500; color: var(--text-sub); font-size: 12px; }
.org-dim { color: var(--text-sub); font-size: 13px; }
/* 操作列：一排文字按钮，不换行。原来是带框的 btn，四个就顶到第二行，
第二行还右对齐，看着像表格错位。文字按钮一眼扫过去也更快 */
.org-ops {
display: flex; gap: 2px; justify-content: flex-end;
flex-wrap: nowrap; align-items: center;
}
.org-ops .btn {
background: transparent; border: none; box-shadow: none;
padding: 5px 9px; border-radius: 7px;
font-size: 13px; font-weight: 500; color: var(--text-sub); white-space: nowrap;
}
.org-ops .btn:hover { background: var(--brand-soft); color: var(--brand); }
.org-ops .btn.btn-danger-ghost { background: transparent; border: none; color: var(--red); }
.org-ops .btn.btn-danger-ghost:hover { background: var(--red-soft); }
.org-tag {
display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px;
border-radius: 999px; background: var(--brand-soft); color: var(--brand);
}
.org-tag.gray { background: #F2F3F7; color: var(--text-sub); }
.org-tag.green { background: var(--green-soft); color: var(--green); }
.org-tag.amber { background: var(--amber-soft); color: var(--amber); }
.org-tag.red { background: var(--red-soft); color: var(--red); }
.org-empty { padding: 44px 20px; text-align: center; color: var(--text-sub); font-size: 13.5px; }
/* 双栏加人：左边全班，右边备选。照机构用的那套交互，
一眼能看出「已经在班里」和「还能加谁」 */
.org-two {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px;
}
.org-panel {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden;
}
.org-panel-head {
padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.org-panel-head h3 { font-size: 14px; font-weight: 800; }
.org-panel-head span { font-size: 12px; color: var(--text-sub); }
.org-panel-body { max-height: 420px; overflow-y: auto; }
.org-pick {
display: flex; align-items: center; gap: 10px; padding: 10px 16px;
border-bottom: 1px solid var(--border); font-size: 13.5px; cursor: pointer;
}
.org-pick:last-child { border-bottom: none; }
.org-pick:hover { background: var(--bg); }
.org-pick input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.org-pick .org-dim { margin-left: auto; font-size: 12px; }
/* 详情页头：班级名 + 几个关键信息平铺 */
.org-detail-head {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 22px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.org-detail-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.org-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.org-meta div { font-size: 12.5px; color: var(--text-sub); }
.org-meta b { display: block; font-size: 14px; color: var(--text); font-weight: 700; margin-top: 2px; }
/* 弹窗。班级详情里的「改信息」也用这个，不再单独写一套 */
.org-mask {
position: fixed; inset: 0; background: rgba(17, 20, 32, .42); z-index: 200;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.org-modal {
background: #fff; border-radius: 16px; width: 100%; max-width: 440px;
box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .4); overflow: hidden;
}
.org-modal h3 { font-size: 16px; font-weight: 800; padding: 18px 22px 0; }
.org-modal-body { padding: 14px 22px 4px; }
.org-modal-body label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-sub); margin: 12px 0 5px; }
.org-modal-body input, .org-modal-body select {
width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border);
border-radius: 9px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}
.org-modal-body input:focus, .org-modal-body select:focus {
outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.org-modal-tip { font-size: 12px; color: var(--text-sub); margin-top: 8px; line-height: 1.5; }
.org-modal-foot {
display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 18px;
}
.org-err { color: var(--red); font-size: 12.5px; margin-top: 10px; }
@media (max-width: 900px) {
.org-row.people { grid-template-columns: 1fr; gap: 6px; }
.org-row.classes { grid-template-columns: 1fr; gap: 6px; }
.org-row.campus { grid-template-columns: 1fr; gap: 6px; }
.org-head { display: none; }
.org-two { grid-template-columns: 1fr; }
.org-ops { justify-content: flex-start; }
}
/* 个人信息页的改昵称 / 改密码。两行输入加一个按钮，不用做成弹窗——
改密码本来就要输三次，弹窗里太挤 */
.me-tip { font-size: 12.5px; color: var(--text-sub); margin-bottom: 12px; line-height: 1.6; }
.me-form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.me-form-row:last-child { margin-bottom: 0; }
.me-input {
flex: 1; min-width: 180px; height: 38px; padding: 0 12px;
border: 1px solid var(--border); border-radius: 9px;
font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}
.me-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
/* ---------------------------------------------------------------- 站内确认框
原生 confirm 是个灰底小方框，左边 Cancel 右边 OK，跟整站风格两张皮。
危险动作（删班级、删账号）尤其不该长这样——越危险越要看着像个正经提示 */
.ui-mask {
position: fixed; inset: 0; background: rgba(17, 20, 32, .42); z-index: 900;
display: flex; align-items: center; justify-content: center; padding: 20px;
opacity: 0; transition: opacity .16s;
}
.ui-mask.show { opacity: 1; }
.ui-dialog {
background: #fff; border-radius: 16px; width: 100%; max-width: 380px;
box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .4);
padding: 22px 24px 18px;
transform: translateY(8px) scale(.98); transition: transform .18s;
}
.ui-mask.show .ui-dialog { transform: none; }
.ui-dialog-title { font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.ui-dialog-msg {
font-size: 13.5px; color: var(--text-sub); line-height: 1.65;
margin-top: 9px; white-space: pre-wrap; word-break: break-word;
}
.ui-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.ui-btn {
height: 36px; padding: 0 18px; border-radius: 9px;
font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
border: 1px solid var(--border); background: #fff; color: var(--text-sub);
transition: .14s;
}
.ui-btn:hover { background: var(--bg); color: var(--text); }
.ui-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.ui-btn.primary:hover { filter: brightness(.94); background: var(--brand); color: #fff; }
.ui-btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.ui-btn.danger:hover { filter: brightness(.94); background: var(--red); color: #fff; }
/* ---------------------------------------------------------------- 作业
表格列：作业 / 班级 / 题数 / 完成 / 截止 / 状态 / 操作 */
.org-row.homework { grid-template-columns: 1.6fr 150px 70px 110px 110px 90px 190px; }
/* 题单：题单 / 题数 / 发布人 / 状态 / 操作 */
.org-row.sets { grid-template-columns: 1fr 80px 130px 90px 200px; }
.org-modal.wide { max-width: 720px; }
/* 完成度：一条细进度条 + 下面一行「3/4 人」。
纯文字看不出差距，一条条横杠扫过去才知道哪个班拖了后腿 */
.hw-bar { height: 6px; background: #EEF0F6; border-radius: 999px; overflow: hidden; }
.hw-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.hw-pick-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.hw-pick-head input {
/* flex:1 会被三个下拉挤成一个点，必须给下限 */
flex: 1 1 150px; min-width: 130px; height: 34px; padding: 0 12px;
border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; font-family: inherit;
}
/* 弹窗里 .org-modal-body select 是 width:100%，会把下拉撑满一整行 */
.org-modal-body .hw-pick-head .sel {
flex: none; width: auto; min-width: 96px; height: 34px; padding: 0 8px;
font-size: 13px; border-radius: 9px;
}
.hw-pick-head input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.hw-pick-head span { font-size: 12.5px; color: var(--text-sub); white-space: nowrap; font-weight: 600; }
.hw-pick-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.hw-pick-item {
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
border-bottom: 1px solid var(--border); font-size: 13px;
}
.hw-pick-item:last-child { border-bottom: none; }
.hw-pick-item:hover { background: var(--bg); }
.hw-pick-item.is-on { background: var(--brand-soft); }
.hw-pick-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; flex: none; }
/* 只有文字部分可点选，分值框独立在外——不然点数字会取消勾选 */
.hw-pick-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
/* 题号就 5 个字符（P0002 / B0008），等宽字体下约 40px。原来钉死 62px，
白占 22px——而旁边题名只剩 22px。宽度保留固定（换行要对齐），但收到 52 */
.hw-pick-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-sub); width: 52px; flex: none; }
.hw-pick-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 逐题分值。没勾选的题分值框灰掉，一眼看出「这个数字现在不算数」 */
.hw-pick-score-wrap { display: flex; align-items: center; gap: 3px; flex: none; }
.hw-pick-score {
width: 54px; height: 28px; padding: 0 6px; text-align: center;
border: 1px solid var(--border); border-radius: 7px;
font-size: 12.5px; font-family: inherit; background: var(--card); color: var(--text);
}
.hw-pick-score:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.hw-pick-score:disabled { background: var(--bg); color: #B6BAC7; border-color: transparent; }
.hw-pick-score-wrap i { font-size: 11.5px; font-style: normal; color: var(--text-sub); }
.hw-pick-tip { font-size: 12px; color: var(--text-sub); margin-bottom: 8px; }
.hw-pick-tip b { color: var(--text); }
.hw-pick-head span b { color: var(--brand); font-size: 13.5px; }
/* 作业进度：每个学生一行 */
.hw-stu {
display: grid; grid-template-columns: 1.3fr 1fr 60px 70px;
align-items: center; gap: 12px; padding: 9px 0;
border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.hw-stu:last-child { border-bottom: none; }
.hw-stu-name { font-weight: 600; }
.hw-stu-name small { font-weight: 400; color: var(--text-sub); margin-left: 6px; font-size: 12px; }
.hw-stu-bar { height: 6px; background: #EEF0F6; border-radius: 999px; overflow: hidden; }
.hw-stu-bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.hw-stu-num { font-size: 12.5px; color: var(--text-sub); }
.hw-stu-head {
display: grid; grid-template-columns: 1.3fr 1fr 60px 70px;
gap: 12px; padding: 0 0 7px; font-size: 11.5px; font-weight: 600;
color: var(--text-sub); border-bottom: 1px solid var(--border);
}
/* ---------------- 成绩表 ---------------- */
.org-tag.blue { background: var(--brand-soft); color: var(--brand); }
.sc-row {
display: grid; grid-template-columns: 1.3fr 90px 96px 74px 132px 76px;
align-items: center; gap: 10px; padding: 10px 12px;
border-bottom: 1px solid var(--border); font-size: 13px;
}
.sc-row:last-child { border-bottom: none; }
.sc-head {
background: var(--bg); font-size: 12px; font-weight: 600;
color: var(--text-sub); border-radius: 8px 8px 0 0;
border-bottom: 1px solid var(--border);
}
.sc-list { border: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.sc-row.is-idle .sc-name { color: var(--text-sub); font-weight: 500; }
.sc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-name small { font-weight: 400; color: var(--text-sub); margin-left: 6px; font-size: 11.5px; }
.sc-score b { font-size: 16px; color: var(--brand); }
.sc-score { font-size: 12.5px; }
/* ---------------- 卷子详情 / 批改 ---------------- */
.gq { padding: 13px 0; border-bottom: 1px solid var(--border); }
.gq:last-child { border-bottom: none; }
.gq-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.gq-no {
width: 22px; height: 22px; border-radius: 7px; flex: none;
background: var(--brand-soft); color: var(--brand);
font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.gq-title { font-size: 14px; }
.gq-code {
margin: 0; padding: 10px 12px; background: #0F172A; color: #D8E0EE;
border-radius: 9px; font-size: 12.5px; line-height: 1.6;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}
.gq-graphic {
background: var(--bg); color: var(--text-sub); font-family: inherit;
font-size: 12.5px; line-height: 1.6; white-space: normal;
}
.gq-msg {
margin-top: 8px; padding: 8px 11px; border-radius: 8px;
background: var(--red-soft); color: #9F2A2A;
font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}
.gq-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.gq-score { font-size: 12.5px; color: var(--text-sub); }
.gq-score b { font-size: 15px; color: var(--text); }
.gq-form { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; width: 100%; margin-top: 8px; }
.gq-in {
width: 66px; height: 30px; padding: 0 8px; text-align: center;
border: 1px solid var(--border); border-radius: 8px;
font-size: 13px; font-family: inherit; color: var(--text);
}
.gq-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.gq-cmt {
flex: 1; min-width: 160px; height: 30px; padding: 0 10px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 12.5px; font-family: inherit; color: var(--text);
}
.gq-cmt:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* ---------------- 练习记录 ---------------- */
.rec-chk {
display: flex; align-items: center; gap: 6px; flex: none;
font-size: 13px; color: var(--text-sub); cursor: pointer; white-space: nowrap;
}
.rec-chk input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.rec-sum { font-size: 12.5px; color: var(--text-sub); margin: 0 0 10px; }
.rec-sum b { color: var(--text); }
.rec {
border: 1px solid var(--border); border-radius: 11px;
margin-bottom: 8px; background: var(--card); overflow: hidden;
}
.rec-top {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 11px 14px; font-size: 13px;
}
.rec-time { font-size: 12px; color: var(--text-sub); flex: none; font-variant-numeric: tabular-nums; }
.rec-who {
font-size: 12px; font-weight: 600; color: var(--text-sub);
background: var(--bg); padding: 2px 8px; border-radius: 999px; flex: none;
}
.rec-title { font-size: 13.5px; font-weight: 600; }
.rec-code-tag {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px; color: var(--text-sub); flex: none;
}
.rec-score { font-size: 12px; color: var(--text-sub); margin-left: auto; }
.rec-toggle { margin-left: auto; }
.rec-score + .rec-toggle { margin-left: 0; }
.rec-body { padding: 0 14px 13px; }
.rec-code {
margin: 0; padding: 10px 12px; background: #0F172A; color: #D8E0EE;
border-radius: 9px; font-size: 12.5px; line-height: 1.6;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}
.rec-msg {
margin-top: 8px; padding: 8px 11px; border-radius: 8px;
background: var(--red-soft); color: #9F2A2A;
font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}
/* 第一个没过的测试点。老师要的是「错在第几个、该输出什么、他输出了什么」，
光一句「通过 4/6 个测试点」说不清 */
.rec-fail {
margin-top: 8px; padding: 9px 12px; border-radius: 8px;
background: #FFF8F4; border: 1px solid #FFD9C7;
font-size: 12.5px; line-height: 1.9; word-break: break-all;
}
.rec-fail b { color: #B4472A; }
.rec-fail code {
padding: 1px 6px; border-radius: 4px; background: #fff;
border: 1px solid var(--border);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
.rec-fail code.ok { color: var(--green); }
.rec-fail code.bad { color: var(--red); }
.rec-meta-line { margin-top: 8px; font-size: 12px; color: var(--text-sub); }
.rec-ans { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; }
.rec-ans b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rec-ans b.ok { color: var(--green); }
.rec-ans b.bad { color: var(--red); }
.rec-none { font-size: 12.5px; color: var(--text-sub); }
@media (max-width: 720px) {
.rec-score { margin-left: 0; }
.rec-toggle { margin-left: auto; }
}
@media (max-width: 720px) {
.sc-row { grid-template-columns: 1.2fr 80px 84px; }
.sc-row > div:nth-child(4), .sc-row > div:nth-child(5) { display: none; }
.sc-head > div:nth-child(4), .sc-head > div:nth-child(5) { display: none; }
}
/* ---------------------------------------------------------------- 训练中心的题单条
题单是「摆在那儿自己拿」的东西，不像作业有人催。
所以放在训练中心顶上一条，扫一眼看到有什么可练的，不占主列表的位置 */
/* 看进度弹窗里的分节标题 */
.hw-sec {
font-size: 12.5px; font-weight: 800; color: var(--text-sub);
letter-spacing: .3px; margin: 18px 0 8px;
}
.hw-sec:first-of-type { margin-top: 0; }
/* ================= 讲解模式 =================
老师的讲评课视角：题目全摊开、答案直接给、每个学生的答案贴在选项上。
跟学生答题页（exam.css）刻意不共用样式——那边是「答题」，这边是「讲题」，
混着写迟早两边都别扭。 */
.rv-top {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.rv-top h1 { font-size: 21px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.2px; }
.rv-top p { margin: 0; font-size: 12.5px; color: var(--text-sub); }
.rv-metas { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; }
.rv-metas > div { display: flex; flex-direction: column; gap: 2px; }
.rv-metas span { font-size: 11.5px; color: var(--text-sub); }
.rv-metas b { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.rv-metas b.brand { color: var(--brand); }
/* 单个学生的作业报告卡。切到某个学生时先出这张，
老师跟家长沟通、跟学生谈话，开场要念的就是这几个数 */
.rv-report {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
}
.rv-report-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rv-report-name { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.rv-report-nums { display: flex; gap: 34px; flex-wrap: wrap; }
.rv-report-nums > div { display: flex; flex-direction: column; gap: 3px; }
.rv-report-nums span { font-size: 11.5px; color: var(--text-sub); }
.rv-report-nums b { font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.4px; }
.rv-report-nums b.brand { color: var(--brand); }
.rv-report-nums b i {
font-size: 12.5px; font-weight: 500; font-style: normal;
color: var(--text-sub); margin-left: 1px;
}
.rv-toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--card); border: 1px solid var(--border);
border-radius: 12px; padding: 10px 12px; margin-bottom: 14px;
}
.rv-toolbar .org-dim { font-size: 12.5px; }
.rv-who { min-width: 168px; }
.rv-layout { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .rv-layout { grid-template-columns: 1fr; } }
.rv-nav {
display: flex; flex-direction: column; gap: 6px;
position: sticky; top: 14px;
background: var(--card); border: 1px solid var(--border);
border-radius: 12px; padding: 10px;
}
.rv-nav-t { font-size: 11.5px; font-weight: 700; color: var(--text-sub); padding: 0 4px 4px; }
.rv-nav-item {
display: flex; align-items: center; gap: 7px; width: 100%;
border: 1px solid transparent; background: var(--bg);
border-radius: 9px; padding: 7px 9px; cursor: pointer;
font-size: 12.5px; font-family: inherit; color: var(--text); text-align: left;
}
.rv-nav-item:hover { background: var(--brand-soft); }
.rv-nav-item.is-cur { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 700; }
.rv-nav-no { font-weight: 800; width: 16px; flex: none; }
.rv-nav-rate { margin-left: auto; font-size: 11px; color: var(--text-sub); }
.rv-nav-item.is-low .rv-nav-rate { color: #DC2626; font-weight: 700; }
/* 0%：全班没一个人做对。比「少数人做对」严重，单独给个实心红 */
.rv-nav-item.is-zero .rv-nav-rate {
background: #DC2626; color: #fff; font-weight: 700;
padding: 0 5px; border-radius: 5px;
}
.rv-nav-item.is-zero.is-cur { border-color: #DC2626; }
.rv-nav-item.is-mid .rv-nav-rate { color: #B45309; }
.rv-nav-item.is-high .rv-nav-rate { color: #15803D; }
.rv-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 20px 22px;
}
.rv-qhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.rv-qno {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px;
background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; flex: none;
}
.rv-qtitle { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.rv-qcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-sub); }
.rv-rate {
margin-left: auto; display: flex; align-items: center; gap: 8px;
font-size: 12.5px; color: var(--text-sub);
}
.rv-rate b { font-size: 16px; font-weight: 800; }
.rv-rate.is-low b { color: #DC2626; }
.rv-rate.is-mid b { color: #B45309; }
.rv-rate.is-high b { color: #15803D; }
.rv-sec { font-size: 12.5px; font-weight: 800; color: var(--text-sub); letter-spacing: .3px; margin: 18px 0 8px; }
.rv-desc { font-size: 13.5px; line-height: 1.75; }
.rv-desc img { max-width: 100%; border-radius: 8px; }
/* 选项。讲解模式的核心：正确答案整行绿底，选错的人用红胶囊挂在选项上，
选对的人绿胶囊。一眼扫过去就知道「这题 B 上坐了半个班，而且 B 是错的」 */
.rv-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.rv-opt {
display: flex; align-items: flex-start; gap: 11px;
padding: 12px 14px; border: 1px solid var(--border);
border-radius: 11px; background: var(--card); position: relative;
}
.rv-opt-l {
flex: none; width: 26px; height: 26px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: var(--bg); font-size: 12.5px; font-weight: 800; color: var(--text-sub);
}
.rv-opt-b { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.6; }
.rv-opt-b img { max-width: 100%; border-radius: 8px; display: block; margin-top: 6px; }
.rv-opt.is-right { background: #F0FDF4; border-color: #86EFAC; }
.rv-opt.is-right .rv-opt-l { background: #16A34A; color: #fff; }
.rv-opt.is-right::after {
content: '正确答案'; position: absolute; right: 12px; top: -8px;
background: #16A34A; color: #fff; font-size: 10.5px; font-weight: 700;
padding: 1px 8px; border-radius: 999px; letter-spacing: .5px;
}
.rv-opt.is-bad { background: #FEF2F2; border-color: #FCA5A5; }
.rv-opt.is-bad .rv-opt-l { background: #DC2626; color: #fff; }
.rv-opt.is-dim { opacity: .62; }
.rv-opt-pick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.rv-chip {
font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
font-weight: 600; white-space: nowrap;
}
.rv-chip.ok { background: #DCFCE7; color: #166534; }
.rv-chip.bad { background: #FEE2E2; color: #B91C1C; }
.rv-chip.none { background: var(--bg); color: var(--text-sub); font-weight: 500; }
.rv-chip.mine { box-shadow: 0 0 0 2px var(--brand); }
.rv-answer {
display: flex; align-items: center; gap: 12px;
background: #F0FDF4; border: 1px solid #86EFAC;
border-radius: 11px; padding: 12px 16px; margin-top: 14px;
}
.rv-answer span { font-size: 12.5px; color: #166534; font-weight: 700; }
.rv-answer b { font-size: 22px; font-weight: 800; color: #15803D; letter-spacing: .5px; }
.rv-exp {
background: var(--bg); border-radius: 11px; padding: 14px 16px;
font-size: 13.5px; line-height: 1.75;
}
.rv-exp img { max-width: 100%; border-radius: 8px; }
.rv-exp-none { font-size: 12.5px; color: var(--text-sub); }
/* 全班作答表 */
.rv-stu { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.rv-stu-row {
display: grid; grid-template-columns: 1.2fr 1fr 92px 74px minmax(0, 1.4fr);
align-items: center; gap: 10px; padding: 9px 13px;
border-bottom: 1px solid var(--border); font-size: 13px;
}
.rv-stu-row:last-child { border-bottom: none; }
.rv-stu-head {
background: var(--bg); font-size: 11.5px; font-weight: 700;
color: var(--text-sub); padding: 7px 13px;
}
.rv-stu-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-stu-msg { font-size: 11.5px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-stu-row.is-wrong { background: #FFFBFB; }
.rv-stu-row.is-miss { opacity: .55; }
.rv-stu-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
@media (max-width: 760px) {
.rv-stu-row { grid-template-columns: 1fr 84px; }
.rv-stu-row > div:nth-child(2), .rv-stu-row > div:nth-child(4),
.rv-stu-row > div:nth-child(5) { display: none; }
}
/* 学生代码 / 报错 */
.rv-code {
background: #0F172A; color: #E2E8F0; border-radius: 10px;
padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px; line-height: 1.65; overflow-x: auto; white-space: pre;
margin-top: 8px;
}
.rv-msg {
background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
border-radius: 9px; padding: 9px 12px; font-size: 12.5px;
margin-top: 8px; white-space: pre-wrap;
}
/* 作业分析（AI 位） */
.rv-ai {
margin-top: 18px; background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 18px 20px;
}
.rv-ai-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-ai-head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.rv-ai-head .org-tag { margin-left: 0; }
.rv-ai-act { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.rv-ai-body { margin-top: 12px; }
.rv-ai-empty {
background: var(--bg); border-radius: 11px; padding: 16px;
font-size: 13px; color: var(--text-sub); line-height: 1.7;
}
.rv-ai-empty b { color: var(--text); }
.rv-ai-payload {
margin-top: 10px; background: #0F172A; color: #CBD5E1; border-radius: 10px;
padding: 13px 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px; line-height: 1.7; white-space: pre-wrap;
max-height: 320px; overflow: auto;
}
/* ---------- 出题页查重提示 ---------- */
/* 黄色不红色：重复不一定是错——从不同来源拿到同一道题很正常，
也可能是故意要个变体。红色会让人以为必须改，其实点保存照样能存 */
.dup-bar {
margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
background: var(--amber-soft); border: 1px solid #F5D9AC;
}
.dup-bar[hidden] { display: none; }
.dup-hd {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
font-size: 13px; color: #8A5B0B;
}
.dup-hd b { font-weight: 600; }
.dup-hd span { font-size: 12px; color: #A9803A; }
.dup-x {
margin-left: auto; padding: 3px 10px; border-radius: 6px; cursor: pointer;
border: 1px solid #E8C88A; background: #fff; color: #8A5B0B;
font-size: 12px; font-family: inherit;
}
.dup-x:hover { background: #FFF9EE; }
.dup-list { margin: 8px 0 0; padding: 0; list-style: none; }
.dup-list li {
display: flex; align-items: center; gap: 8px;
font-size: 12.5px; padding: 3px 0; min-width: 0;
}
.dup-tag {
flex: none; font-size: 11px; padding: 1px 7px; border-radius: 4px;
background: #fff; color: #8A5B0B; border: 1px solid #E8C88A;
}
.dup-list a {
color: var(--text); text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dup-list a:hover { color: var(--brand); text-decoration: underline; }
.dup-del {
flex: none; font-style: normal; font-size: 11px; color: var(--text-faint);
}
/* 讲解模式的现场演示框。
老师在上面改代码、跑一遍投屏给全班看——讲评课光指着学生那份代码说
「这儿错了」讲不明白，得当场改成对的、让输出自己说话。
手感跟学生作答页那个代码框一致（Tab 缩进、括号配对），
但底色留浅的：讲评页整体是浅色，突然嵌一块黑底编辑器太跳 */
.rv-demo {
border: 1px solid var(--border); border-radius: 12px;
background: var(--card); overflow: hidden;
}
.rv-demo-bar {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-bottom: 1px solid var(--border);
background: var(--bg-soft, #F8FAFC);
}
.rv-demo-lang {
border: 1px solid var(--border); border-radius: 8px;
padding: 4px 8px; font-size: 12.5px; color: var(--text);
background: var(--card); cursor: pointer;
}
.rv-demo-tip { font-size: 11.5px; color: var(--text-sub); margin-left: auto; }
.rv-demo-code {
display: block; width: 100%; min-height: 150px; padding: 12px 14px;
border: 0; outline: none; resize: vertical;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px; line-height: 1.7; tab-size: 4;
background: var(--card); color: var(--text);
}
.rv-demo-code:focus { background: #FCFCFE; }
.rv-demo-io {
display: grid; grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--border);
}
.rv-demo-in-w, .rv-demo-out-w { display: block; padding: 10px 12px; min-width: 0; }
.rv-demo-in-w { border-right: 1px solid var(--border); }
.rv-demo-in-w > span, .rv-demo-out-w > span {
font-size: 11.5px; font-weight: 700; color: var(--text-sub);
}
.rv-demo-in {
display: block; width: 100%; min-height: 62px; margin-top: 6px;
border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px; line-height: 1.6; resize: vertical; color: var(--text);
}
.rv-demo-out {
margin: 6px 0 0; min-height: 62px; max-height: 220px; overflow: auto;
background: #0F172A; color: #E2E8F0; border-radius: 8px; padding: 9px 11px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px; line-height: 1.6; white-space: pre-wrap;
}
.rv-demo-out.is-err { background: #FEF2F2; color: #B91C1C; }
.rv-demo-act {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 12px; border-top: 1px solid var(--border);
}
.rv-demo-msg { font-size: 12px; color: var(--text-sub); }
.rv-demo-msg.is-err { color: #B91C1C; }
@media (max-width: 720px) {
.rv-demo-io { grid-template-columns: 1fr; }
.rv-demo-in-w { border-right: 0; border-bottom: 1px solid var(--border); }
}
/* ---- 题目出处小字（训练中心列表 / 收藏夹 / 错题本共用） ----
来源 · 级别 · 年月。灰色 12px，挂在题名下面当副标题。
为什么不并进知识点那一列：知识点回答「考什么」，出处回答「从哪来」，
挤在一列里一行撑到 75px，翻十道题要滚三屏 */
.p-src {
font-size: 12px; color: #6B7280; margin-top: 3px;
font-variant-numeric: tabular-nums; letter-spacing: -.1px;
}
/* ---- 列表翻页条 ----
居中的一行：上一页 / 第 N / M 页 · 共 X 道 / 下一页。
只有一页时整条不画（renderPager 直接清空 innerHTML） */
.pager {
display: flex; align-items: center; justify-content: center;
gap: 14px; padding: 14px 8px 4px;
}
.pager:empty { display: none; }
.pager-info {
font-size: 13px; color: var(--text-sub); font-variant-numeric: tabular-nums;
}
.pager .btn:disabled { opacity: .45; cursor: not-allowed; }
/* ---- 作品上架表单（社区页的弹窗里） ---- */
.cm-fld { display: block; margin-bottom: 10px; }
.cm-fld > span { display: block; font-size: 12.5px; color: var(--text-sub); margin-bottom: 5px; }
.cm-fld input {
width: 100%; box-sizing: border-box; padding: 9px 11px;
border: 1px solid var(--border); border-radius: 9px;
background: var(--bg); color: var(--text); font-size: 13.5px;
}
.cm-fld input:focus { outline: none; border-color: var(--brand); }
.cm-fld2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .cm-fld2 { grid-template-columns: 1fr; } }
.cm-rv { font-size: 12px; font-weight: 700; flex: none; }
/* 作品详情里的简介 / 玩法 */
.cm-intro { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 10px; }
.cm-howto {
font-size: 13px; line-height: 1.7; color: var(--text-sub);
background: var(--bg-soft, #F7F8FB); border-radius: 9px;
padding: 10px 12px; margin: 0 0 12px;
}
.cm-howto b { display: block; color: var(--text); font-size: 12.5px; margin-bottom: 3px; }
/* ------------------------------------------------------------
题目纠错弹窗。接口和后端处理台早就在了（/admin/moderation
「题目纠错」页签），学生端一直没入口。三个地方共用这一套：
单题页、作业答题页、试卷练习页。
------------------------------------------------------------ */
.rep-btn.is-done { color: var(--green); border-color: var(--green-soft); background: var(--green-soft); }
.rep-mine {
border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px; margin-bottom: 12px; background: #FAFBFD;
}
.rep-mine-h { font-size: 12.5px; color: var(--text-sub); margin-bottom: 6px; }
.rep-mine p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text); }
.rep-mine .rep-reply {
margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
color: var(--text-sub); font-size: 12.5px;
}
.rep-mine .rep-reply b { color: var(--text); margin-right: 6px; }
.rep-tag {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px;
font-size: 11px; font-weight: 600;
}
.rep-tag.is-pending { background: var(--amber-soft); color: #8A5B00; }
.rep-tag.is-accepted { background: var(--green-soft); color: #067647; }
.rep-tag.is-rejected { background: var(--red-soft); color: #B42318; }
.rep-form { display: block; }
.rep-label {
font-size: 12.5px; font-weight: 700; color: var(--text);
margin: 14px 0 7px;
}
.rep-label:first-child { margin-top: 0; }
.rep-kinds { display: grid; gap: 6px; }
/* 这三条都带 .org-modal-body 前缀：弹窗里的通用规则是
`.org-modal-body label { display:block }` 和 `.org-modal-body input { width:100% }`，
特异性比单个类名高，不加上前缀压不住——单选圈会被撑成一条通栏、
文字被挤到下一行去 */
.org-modal-body .rep-kind {
display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px;
margin: 0; font-weight: 400; color: var(--text);
transition: border-color .15s, background .15s;
}
.org-modal-body .rep-kind:hover { border-color: var(--brand); background: var(--brand-soft); }
.org-modal-body .rep-kind input {
width: 15px; height: 15px; margin: 3px 0 0; padding: 0;
accent-color: var(--brand); flex: 0 0 auto;
}
.org-modal-body .rep-kind span { display: block; flex: 1; line-height: 1.5; }
.rep-kind b { font-size: 13px; font-weight: 600; color: var(--text); }
.rep-kind em {
display: block; font-style: normal; font-size: 11.5px;
color: var(--text-sub); margin-top: 1px;
}
.org-modal-body .rep-text {
width: 100%; height: auto; box-sizing: border-box; resize: vertical;
border: 1px solid var(--border); border-radius: 10px;
padding: 9px 11px; font-size: 13px; line-height: 1.65;
font-family: inherit; color: var(--text); background: #fff;
}
.org-modal-body .rep-text:focus {
outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.rep-tip { font-size: 11.5px; color: var(--text-sub); margin-top: 6px; line-height: 1.6; }
/* 题干右上角那个「插入图片」。
两个坑：`.frm-field > span` 是 display:flex，flex 子项上的 float 会被
直接忽略——写 float:right 按钮还是老老实实跟在「支持 Markdown」后面。
推右只能靠 margin-left:auto。
另外按钮默认尺寸（btn-sm）比这一行还高，会把「题目描述」这行顶起来，
所以这里把 padding 和字号压小，让它老老实实待在标签行里 */
.frm-field > span .frm-img-btn {
margin-left: auto;
flex: 0 0 auto;
padding: 3px 10px;
font-size: 12px;
line-height: 1.5;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}