/* =====================================================================
   STKWeb 刷题系统 - 全局样式表
   版本 stkweb1.0.1    作者：哒哒 / 轻Q魔客
   设计目标：护眼浅色为主 / 移动端优先 / 不依赖任何外部 CDN
   ===================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
    --c-primary:      #2563eb;
    --c-primary-dark: #1d4ed8;
    --c-primary-soft: #eff6ff;
    --c-success:      #10b981;
    --c-success-soft: #ecfdf5;
    --c-danger:       #ef4444;
    --c-danger-soft:  #fef2f2;
    --c-warn:         #f59e0b;
    --c-warn-soft:    #fffbeb;
    --c-purple:       #8b5cf6;

    --bg:             #f5f8fc;
    --bg-card:        #ffffff;
    --bg-soft:        #f8fafc;
    --border:         #e6ecf5;
    --border-strong:  #cbd5e1;

    --text:           #1e293b;
    --text-mid:       #475569;
    --text-soft:      #94a3b8;

    --radius:         14px;
    --radius-sm:      10px;
    --shadow:         0 2px 10px rgba(30, 41, 59, .06);
    --shadow-lg:      0 8px 28px rgba(30, 41, 59, .10);

    --nav-h:          58px;
}

/* 夜间模式：跟随系统或手动切换 html[data-theme="dark"] */
[data-theme="dark"] {
    --bg:             #0f172a;
    --bg-card:        #1e293b;
    --bg-soft:        #172033;
    --border:         #334155;
    --border-strong:  #475569;
    --text:           #e2e8f0;
    --text-mid:       #cbd5e1;
    --text-soft:      #94a3b8;
    --c-primary-soft: #1e3a8a;
    --c-success-soft: #064e3b;
    --c-danger-soft:  #7f1d1d;
    --c-warn-soft:    #78350f;
    --shadow:         0 2px 10px rgba(0, 0, 0, .3);
    --shadow-lg:      0 8px 28px rgba(0, 0, 0, .45);
}

/* ---------- 2. 基础重置 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    min-height: 100vh;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 600; line-height: 1.35; }
p { margin: 0 0 .8em; }
hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
code {
    background: var(--bg-soft); padding: 2px 6px; border-radius: 5px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .88em;
}
::selection { background: var(--c-primary); color: #fff; }

/* ---------- 2.5 页面切换动画已移除（v1.3.8） ----------
   根因：@view-transition{navigation:auto} + stk-page-in 入场动画，会在
   每次跨页面导航时触发浏览器视图过渡；微信 XWeb(Chrome150) 对此实现有
   bug，导航时偶发卡在过渡态→整页白屏（切后台再切回触发重绘才恢复）。
   彻底移除后页面零导航动画，与原版一致，白屏消失。 */

/* ---------- 3. 布局容器 ---------- */
.stk-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.stk-wrap-narrow { max-width: 760px; }
.stk-main { padding: 18px 0 60px; min-height: 60vh; }
.stk-section-title {
    font-size: 15px; font-weight: 700; color: var(--text-mid);
    margin: 22px 0 12px; padding-left: 10px;
    border-left: 4px solid var(--c-primary); border-radius: 2px;
    display: flex; align-items: center; justify-content: space-between;
}
.stk-muted { color: var(--text-soft); font-size: 13px; }
.stk-center { text-align: center; }
.stk-mt { margin-top: 16px; } .stk-mt-lg { margin-top: 26px; }
.stk-mb { margin-bottom: 16px; }
.stk-flex { display: flex; gap: 10px; align-items: center; }
.stk-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stk-spacer { flex: 1; }

/* ---------- 4. 顶栏 ---------- */
.stk-nav {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 60;
    box-shadow: var(--shadow);
}
.stk-nav-inner {
    max-width: 1080px; margin: 0 auto; padding: 0 16px;
    height: var(--nav-h); display: flex; align-items: center; gap: 12px;
}
.stk-logo {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 16px; color: var(--text); white-space: nowrap;
}
.stk-logo .mark {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: linear-gradient(135deg, var(--c-primary), #60a5fa);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
}
.stk-nav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.stk-nav-links::-webkit-scrollbar { display: none; }
.stk-nav-links a {
    padding: 7px 12px; border-radius: 9px; font-size: 14px;
    color: var(--text-mid); white-space: nowrap; transition: .18s;
}
.stk-nav-links a:hover { background: var(--bg-soft); color: var(--text); }
.stk-nav-links a.active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.stk-nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- 5. 移动端底部导航 ---------- */
.stk-tabbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--bg-card); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
.stk-tabbar-inner { display: flex; }
.stk-tabbar a {
    flex: 1; padding: 8px 0 7px; text-align: center; font-size: 11px;
    color: var(--text-soft); display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.stk-tabbar a .ico { font-size: 19px; line-height: 1; }
.stk-tabbar a.active { color: var(--c-primary); font-weight: 600; }

/* 【v1.0.9】二级页面左上角返回浮钮（手机端显示，桌面有顶部导航不显示） */
.stk-back-float {
    display: none; position: fixed; top: 14px; left: 12px; z-index: 80;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(30, 41, 59, .12);
    align-items: center; justify-content: center;
    font-size: 24px; color: var(--text-mid); text-decoration: none;
    line-height: 0; padding-bottom: 4px;
    -webkit-tap-highlight-color: transparent;
}
.stk-back-float:active { transform: scale(.94); }
[data-theme="dark"] .stk-back-float { background: rgba(30, 41, 59, .92); }


/* ---------- 6. 卡片 ---------- */
.stk-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px; margin-bottom: 14px;
}
.stk-card.pad-lg { padding: 26px; }
.stk-card.flat { box-shadow: none; }
.stk-card-title {
    font-size: 15px; font-weight: 700; margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.stk-grid { display: grid; gap: 14px; }
.stk-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stk-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 7. 按钮 ---------- */
.stk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
    background: var(--c-primary); color: #fff; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: .18s; font-family: inherit; line-height: 1.4;
    min-height: 38px; white-space: nowrap;
}
.stk-btn:hover { background: var(--c-primary-dark); transform: translateY(-1px); }
.stk-btn:active { transform: none; }
.stk-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.stk-btn.block { display: flex; width: 100%; }
.stk-btn.lg { padding: 12px 20px; font-size: 15px; min-height: 46px; }
.stk-btn.sm { padding: 5px 11px; font-size: 13px; min-height: 30px; }
.stk-btn.ghost { background: transparent; color: var(--text-mid); border-color: var(--border-strong); }
.stk-btn.ghost:hover { background: var(--bg-soft); color: var(--text); }
.stk-btn.soft { background: var(--c-primary-soft); color: var(--c-primary); }
.stk-btn.soft:hover { background: #dbeafe; }
.stk-btn.ok { background: var(--c-success); } .stk-btn.ok:hover { background: #059669; }
.stk-btn.bad { background: var(--c-danger); } .stk-btn.bad:hover { background: #dc2626; }
.stk-btn.warn { background: var(--c-warn); } .stk-btn.warn:hover { background: #d97706; }

/* ---------- 8. 表单 ---------- */
.stk-field { margin-bottom: 14px; }
.stk-label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text-mid); margin-bottom: 6px;
}
.stk-label .req { color: var(--c-danger); margin-left: 2px; }
.stk-input, .stk-select, .stk-textarea {
    width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text); transition: .18s;
}
.stk-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.stk-input:focus, .stk-select:focus, .stk-textarea:focus {
    outline: none; border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.stk-input:disabled, .stk-select:disabled { background: var(--bg-soft); color: var(--text-soft); }
.stk-row { display: flex; gap: 10px; flex-wrap: wrap; }
.stk-row > * { flex: 1; min-width: 130px; }
.stk-hint { font-size: 12px; color: var(--text-soft); margin-top: 5px; }
.stk-check { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.stk-check input { width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer; }

/* ---------- 8.1 图形验证码（v1.0.1） ---------- */
.stk-captcha-row { display: flex; gap: 10px; align-items: center; }
.stk-captcha-row .stk-input { flex: 1; min-width: 0; letter-spacing: 4px; font-size: 17px; }
/* 【v1.0.3】验证码输入框外面套了图标容器，让它吃掉剩余宽度 */
.stk-captcha-row .stk-input-group { flex: 1 1 auto; min-width: 0; }
.stk-captcha-img {
    width: 118px; height: 44px; flex: 0 0 auto; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f4f8ff;
    -webkit-tap-highlight-color: transparent;
}
.stk-captcha-img:active { transform: scale(.96); }

/* ---------- 8.2 我的反馈卡片（v1.0.1） ---------- */
.fb-card { padding: 14px 16px; margin-bottom: 12px; }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-head .fb-time { margin-left: auto; font-size: 12px; color: var(--text-soft); }
.fb-quote {
    margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--bg-soft); font-size: 13px; line-height: 1.6; color: var(--text-mid);
    border-left: 3px solid var(--border);
}
.fb-note { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.fb-reply {
    margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--c-success-soft); font-size: 13px; line-height: 1.6;
}

/* ---------- 8.3 成绩趋势图横向滑动容器（v1.0.1，手机端多柱时可左右滑） ---------- */
.stk-bars-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

/* ---------- 8.5 带图标的输入框（v1.0.3） ----------
   用于登录 / 注册 / 安装向导：输入框左侧嵌一枚内联 SVG 小图标，
   图标通过 stk_icon() 输出（stroke 用 currentColor，深浅主题自动适配）。 */
.stk-input-group { position: relative; display: flex; align-items: center; }
.stk-input-group .ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--text-soft);
    pointer-events: none; display: flex; align-items: center; justify-content: center;
    transition: color .18s;
}
.stk-input-group .ico svg { width: 18px; height: 18px; display: block; }
.stk-input-group .stk-input { padding-left: 40px; }
/* 聚焦时图标跟着变成主题色，输入状态更清楚 */
.stk-input-group:focus-within .ico { color: var(--c-primary); }

/* ---------- 8.6 刷题专注模式 + 大厅科目卡（v1.0.4，考驾照式刷题） ----------
   刷题页（body.stk-focus）：
     - 不渲染顶部导航与底部菜单栏，页面只有「顶部状态条 + 题卡 + 底部操作栏」；
     - 上一题 / 首页 / 错题本 / 下一题 固定在屏幕底部，单手可点。
   学习大厅：
     - .subject-card 是「当前正在学习的科目」大卡片（题库切换在这里完成）。 */
body.stk-focus { padding-bottom: 0 !important; }
body.stk-focus .stk-tabbar { display: none !important; }

.pq-top {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
/* 【v1.3.7】pq-back / pq-bbtn 兼容 <button> 形式（对齐原版 onclick 导航，微信实测可靠） */
button.pq-back, button.pq-bbtn {
    border: none; background: none; font-family: inherit; cursor: pointer;
    -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.pq-back { font-size: 14px; color: var(--text-mid); white-space: nowrap; text-decoration: none; }
.pq-top-mid { flex: 1; min-width: 0; text-align: center; }
.pq-top-title { font-size: 15px; font-weight: 700; line-height: 1.25; }
.pq-top-sub {
    font-size: 11px; color: var(--text-soft); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pq-count { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pq-count b { font-weight: 700; }
.pq-count i { font-style: normal; color: var(--text-soft); margin: 0 2px; }
.pq-count .is-bad { color: var(--c-danger); }
.pq-count .is-ok { color: var(--c-primary); }

.pq-scroll {
    max-width: 760px; margin: 0 auto;
    padding: 12px 12px calc(70px + env(safe-area-inset-bottom));
}

.pq-bottom {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
.pq-bbtn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 9px 0 8px; min-height: 54px;
    font-size: 11px; color: var(--text-soft); font-family: inherit;
    background: none; border: none; cursor: pointer; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.pq-bbtn .ico { font-size: 18px; line-height: 1; }
.pq-bbtn:active { background: var(--bg-soft); }
.pq-bbtn.is-main { color: var(--c-primary); font-weight: 700; }

/* 桌面端：底部栏横排（鼠标点击更自然，也不占太多高度） */
@media (min-width: 641px) {
    .pq-bbtn { flex-direction: row; gap: 6px; font-size: 14px; min-height: 46px; }
    .pq-bbtn .ico { font-size: 16px; }
    .pq-scroll { padding-bottom: 76px; }
}

/* 大厅：当前正在学习的科目（大蓝卡） */
.subject-card {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: var(--radius); padding: 20px 18px 16px;
    margin-bottom: 18px; color: #fff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, .22);
}
.subject-card .ttl { text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.subject-card .stk-select {
    height: 46px; font-size: 15px; font-weight: 600; border: none;
    border-radius: 10px; background: rgba(255, 255, 255, .96); color: #1e293b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.subject-card .hint { text-align: center; font-size: 12px; opacity: .9; margin-top: 10px; }

/* 大厅入口卡：彩色方块图标（专项专练用字母，综合提升用 emoji） */
.stk-entry .mark {
    width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .5px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}
.stk-entry .mark.red   { background: linear-gradient(135deg, #ef4444, #f87171); }
.stk-entry .mark.blue  { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.stk-entry .mark.green { background: linear-gradient(135deg, #10b981, #34d399); }
/* 综合提升里的考场卡用暖色底，与其他入口区分开 */
.stk-entry.amber { background: #fffbeb; border-color: #fde68a; }

/* ---------- 8.7 刷题页 iOS 质感（v1.0.5，延用原版色调） ----------
   仅作用于专注模式（body.stk-focus）页面内：iOS 系统色
   （蓝 #007AFF / 绿 #34C759 / 红 #FF3B30 / 底 #F2F2F7），
   顶部条与底部操作栏用毛玻璃，选项、答案区按原版观感重排。 */
body.stk-focus {
    --c-primary:      #007aff;
    --c-primary-dark: #0066d6;
    --c-primary-soft: #eaf3ff;
    --c-success:      #34c759;
    --c-danger:       #ff3b30;
    --border:         #e5e5ea;
    --border-strong:  #d1d1d6;
    --bg:             #f2f2f7;
}
body.stk-focus .stk-qbox {
    border-radius: 16px; border-color: #e5e5ea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
body.stk-focus .stk-q-title { font-size: 17px; line-height: 1.65; margin-bottom: 16px; }

/* 顶部条 / 底部操作栏：半透明纯色背景
   （v1.3.4 去掉 backdrop-filter 毛玻璃——移动 WebView 的高频白屏元凶，
    改 rgba 半透明，视觉近似且稳定） */
.pq-top, .pq-bottom {
    background: rgba(255, 255, 255, .96);
}
[data-theme="dark"] body.stk-focus .pq-top,
[data-theme="dark"] body.stk-focus .pq-bottom { background: rgba(30, 41, 59, .82); }

/* 选项：白底圆角、浅描边，字母变圆形浅色块 */
body.stk-focus .stk-opt {
    border-radius: 12px; padding: 13px 14px; min-height: 50px;
    border-color: #d9d9de; background: #fff;
    transition: border-color .16s, background .16s, transform .12s;
}
body.stk-focus .stk-opt .k {
    border-radius: 50%; border: none; background: #eef2f7; color: #3a3a3c;
    width: 26px; height: 26px; font-size: 13.5px;
}
body.stk-focus .stk-opt.picked { border-color: var(--c-primary); background: var(--c-primary-soft); }
body.stk-focus .stk-opt.picked .k { background: var(--c-primary); color: #fff; }
body.stk-focus .stk-opt.right { border-color: var(--c-success); background: #eafaf0; }
body.stk-focus .stk-opt.right .k { background: var(--c-success); color: #fff; }
body.stk-focus .stk-opt.wrong { border-color: var(--c-danger); background: #feeceb; }
body.stk-focus .stk-opt.wrong .k { background: var(--c-danger); color: #fff; }

/* 提交按钮 / 答案区 */
body.stk-focus .stk-btn.lg { border-radius: 13px; }
body.stk-focus .stk-answer {
    background: #f2f6fc; border-left-color: var(--c-primary);
    border-radius: 12px; padding: 14px 16px;
}
body.stk-focus .stk-answer.no { border-left-color: var(--c-danger); }
body.stk-focus .stk-answer.ok { border-left-color: var(--c-success); }
body.stk-focus .stk-tag.blue { background: var(--c-primary-soft); color: var(--c-primary); }

/* 底部按钮按压反馈 */
.pq-bbtn { transition: color .15s; }
.pq-bbtn .ico { transition: transform .12s; }
.pq-bbtn:active .ico { transform: scale(1.3); }

/* ---------- 8.8 大厅入口固定网格（v1.0.5） ----------
   专项专练 3 列一行、综合提升 2×2 四方格；
   手机端也保持列数，不再被全局响应式打散成 2 列 / 1 列。 */
.hall-grid { display: grid; gap: 12px; }
.hall-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.hall-grid.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
    .hall-grid { gap: 10px; }
    .hall-grid.c3 .stk-entry .d { display: none; }  /* 手机上专项卡只留图标+标题，更清爽 */
}

/* ---------- 8.9 v1.0.6 杂项：错题本收缩筛选 / 排行榜 / 登录注册打磨 ---------- */

/* 错题本：可收缩筛选面板（details） */
.pq-filter-box {
    max-width: 760px; margin: 10px auto 0; padding: 0 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; font-size: 14px;
}
.pq-filter-box summary {
    padding: 10px 2px; cursor: pointer; color: var(--text-mid);
    list-style: none; user-select: none;
}
.pq-filter-box summary::-webkit-details-marker { display: none; }
.pq-filter-box summary::before { content: '▸ '; color: var(--text-soft); }
.pq-filter-box[open] summary::before { content: '▾ '; color: var(--text-soft); }
.pq-filter-box .pq-filter-inner { display: flex; gap: 10px; padding: 4px 0 8px; flex-wrap: wrap; }
.pq-filter-box .pq-filter-inner > div { flex: 1; min-width: 130px; }

/* 【v1.4.0】错题攻坚（对齐原版 m.hdmo.cn/mistakes.php） */
/* 顶栏右侧「N 道错题」徽标 */
.pq-mistake-badge {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    background: #fee2e2; color: var(--c-danger);
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pq-mistake-badge b { font-weight: 700; }
[data-theme="dark"] .pq-mistake-badge { background: rgba(239, 68, 68, .18); }

/* 攻坚规则提示条 */
.pq-rule {
    max-width: 760px; margin: 10px auto 0; padding: 10px 34px 10px 12px;
    position: relative; font-size: 13px; line-height: 1.6;
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: 12px; color: var(--text-mid); word-break: break-word;
}
.pq-rule b { color: var(--text); }
.pq-rule-x {
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px; line-height: 1; padding: 0;
    border: none; background: none; cursor: pointer;
    color: var(--text-soft); font-size: 13px;
    -webkit-appearance: none; appearance: none;
}
.pq-rule-x:active { color: var(--text); }

/* 答对后出现的「斩杀此题」区 */
.pq-force { margin-top: 12px; }
.pq-force.stk-hide { display: none; }

/* 多选题：卡内「提交答案」按钮与选项之间的间距（v1.2.8 起沿用，此处确保可点区域足够） */
.stk-answer .pq-force .stk-btn.warn { min-height: 42px; }

/* 验证码：提示移到标签行右侧；placeholder 变小、去字距 */
.stk-captcha-tip { float: right; font-size: 11px; font-weight: 400; color: var(--text-soft); }
.stk-captcha-row .stk-input { font-size: 15px; }
.stk-captcha-row .stk-input::placeholder { letter-spacing: 0; font-size: 13px; color: var(--text-soft); }

/* 登录/注册错误提示：居中小条 + 警示图标（替换原来的大色块） */
.stk-auth .stk-flash.is-err {
    text-align: center; font-size: 13px; padding: 9px 12px;
    border-left: none; border-radius: 10px;
    background: #feeceb; color: #d93025;
}
.stk-auth .stk-flash.is-err::before { content: '⚠ '; }
[data-theme="dark"] .stk-auth .stk-flash.is-err {
    background: rgba(255, 59, 48, .16); color: #ff8a80;
}

/* 用户协议 / 隐私政策 */
.stk-doc { max-width: 640px; margin: 0 auto; padding: 24px 14px 40px; }
.stk-doc-head { text-align: center; margin-bottom: 18px; }
.stk-doc-head .mark { font-size: 40px; line-height: 1; }
.stk-doc-head h1 { font-size: 20px; margin: 8px 0 4px; }
.stk-doc-head p { color: var(--text-soft); font-size: 12.5px; margin: 0; }
.stk-doc-h2 { font-size: 15px; margin: 16px 0 6px; color: var(--text); }
.stk-doc-p { font-size: 13.5px; line-height: 1.8; color: var(--text-mid); margin: 0 0 4px; word-break: break-word; }

/* 协议勾选行 */
.stk-agree { font-size: 12.5px; }
.stk-agree .stk-check { align-items: flex-start; gap: 7px; }
.stk-agree .stk-check input { margin-top: 2px; flex: none; }

/* 学习排行榜 */
.rank-mine-stats { display: flex; gap: 10px; text-align: center; margin-bottom: 12px; }
.rank-mine-stats > div { flex: 1; background: var(--bg-soft); border-radius: 10px; padding: 10px 6px; }
.rank-mine-stats b { display: block; font-size: 17px; line-height: 1.3; }
.rank-mine-stats span { font-size: 11px; color: var(--text-soft); }
.rank-opt { border-top: 1px dashed var(--border); padding-top: 10px; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 4px;
    border-bottom: 1px solid var(--border);
}
.rank-item:last-child { border-bottom: none; }
.rank-item .no { width: 34px; text-align: center; font-weight: 700; color: var(--text-mid); font-size: 14px; }
.rank-item .name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-item .val { text-align: right; font-weight: 700; color: var(--c-primary); font-size: 14px; line-height: 1.35; }
.rank-item .val small { display: block; font-size: 11px; color: var(--text-soft); font-weight: 400; }
.rank-item.is-me { background: var(--c-primary-soft); border-radius: 10px; padding-left: 8px; padding-right: 8px; border-bottom-color: transparent; }

/* 专项卡：方块内 SVG 图标 */
.stk-entry .mark .mark-svg { display: flex; align-items: center; justify-content: center; }
.stk-entry .mark .mark-svg svg { width: 24px; height: 24px; stroke-width: 2; }

/* 登录/注册：手机端一屏放得下（压缩头部与间距，去掉多余滚动） */
@media (max-width: 640px) {
    .stk-auth { padding: 16px 12px 20px; align-items: flex-start; }
    .stk-auth-head { margin-bottom: 12px; }
    .stk-auth-head .mark {
        width: 46px; height: 46px; font-size: 22px; border-radius: 13px;
        margin-bottom: 9px; box-shadow: 0 5px 14px rgba(37, 99, 235, .22);
    }
    .stk-auth-head h1 { font-size: 18px; }
    .stk-auth-head p { font-size: 12px; }
    .stk-auth .stk-card.pad-lg { padding: 15px 14px; }
    .stk-auth .stk-field { margin-bottom: 11px; }
    .stk-auth .stk-btn.lg { min-height: 44px; font-size: 15px; }
    .stk-auth-alt { margin-top: 9px; font-size: 12px; }
}

/* ---------- 8.10 v1.0.7：「我的」小程序式布局 + 菜单列表 ---------- */

/* 个人信息卡 */
.me-hero { display: flex; align-items: center; gap: 14px; }
.me-avatar {
    width: 54px; height: 54px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--c-primary), #60a5fa); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 23px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
}
.me-info { flex: 1; min-width: 0; }
.me-nick { font-size: 17px; font-weight: 700; line-height: 1.35; }
.me-sub { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.me-edit {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft); color: var(--text-mid); font-size: 18px;
    text-decoration: none;
}
.me-edit:active { transform: scale(.94); }

/* 菜单列表（小程序 cell 风格） */
.stk-menu {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; margin-bottom: 14px;
}
.stk-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 15px; border-bottom: 1px solid var(--border);
    color: var(--text); text-decoration: none; font-size: 14.5px;
    transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.stk-menu-item:last-child { border-bottom: none; }
.stk-menu-item:active { background: var(--bg-soft); }
.stk-menu-item .mi-ico { font-size: 19px; line-height: 1; width: 26px; text-align: center; }
.stk-menu-item .mi-t { flex: 1; }
.stk-menu-item .mi-badge {
    min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
    background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.stk-menu-item .mi-arrow { color: var(--text-soft); font-size: 18px; line-height: 1; }
.stk-menu-item.is-danger { color: var(--c-danger); }
.stk-menu-item.is-danger .mi-t { color: var(--c-danger); }

/* ---------- 8.11 v1.0.8：手机端大厅/我的隐藏顶部条 + 版本记录 ---------- */

/* 大厅 / 我的：手机端隐藏顶部导航条（底部 tabbar 足够导航）；
   电脑端不受影响（导航仍显示）。 */
@media (max-width: 640px) {
    body.stk-no-nav .stk-nav { display: none !important; }
    body.stk-no-nav .stk-main { padding-top: 14px; }
}

/* 版本更新记录（弹窗内） */
.chg-item { padding: 10px 0 12px; border-bottom: 1px dashed var(--border); }
.chg-item:last-child { border-bottom: none; padding-bottom: 2px; }
.chg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chg-date { font-size: 12px; color: var(--text-soft); }
.chg-list { margin: 0; padding-left: 18px; }
.chg-list li { font-size: 13px; line-height: 1.7; color: var(--text-mid); margin-bottom: 2px; }

/* ---------- 8.12 题型分段选择器（v1.1.0，大厅科目卡内） ----------
   试卷题库（第一级）下的题型范围（第二级）：
   「全部题目」= 该题库全部题型；判断题/单选题/多选题等 = 只练该题型。 */
.type-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.type-seg-btn {
    flex: 1; min-width: 70px; padding: 7px 6px 6px; border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: .16s;
    display: flex; flex-direction: column; align-items: center; gap: 0;
    -webkit-tap-highlight-color: transparent;
}
.type-seg-btn small { font-size: 10px; font-weight: 400; opacity: .85; }
.type-seg-btn:hover { background: rgba(255, 255, 255, .26); }
.type-seg-btn.active {
    background: #fff; color: var(--c-primary); border-color: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
}
.type-seg-btn.active small { color: var(--text-soft); }


/* ---------- 8.13 v1.1.6：后台统计卡 / 小黑屋划线 ---------- */
.ai-stat-card { text-align: center; padding: 14px 10px; border-top: 3px solid var(--c-primary); }
.ai-stat-card.green { border-top-color: var(--c-success); }
.ai-stat-card.red { border-top-color: var(--c-danger); }
.ai-stat-ico { font-size: 20px; }
.ai-stat-num { font-size: 22px; font-weight: 800; line-height: 1.3; }
.ai-stat-lbl { font-size: 12px; color: var(--text-soft); }

/* 小黑屋：封禁行整体划线弱化（首列与按钮列不划线） */
tr.banned-row td { text-decoration: line-through; color: var(--text-soft); }
tr.banned-row td .stk-btn,
tr.banned-row td .no-strike { text-decoration: none !important; }

/* ---------- 8.14 v1.1.8：关于页功能卡网格（桌面 3 列、手机竖排 1 列） ---------- */
.about-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
    .about-grid { grid-template-columns: 1fr; }
}

/* ---------- 8.15 v1.2.2：关于页间隙收紧 + 表格自动换行 ---------- */
/* 作用域限 about 页：收紧「核心功能」标题与卡片的间距，三卡到新手必看更紧凑 */
.about-page .stk-section-title { margin: 16px 0 10px; }
.about-page .stk-entry { padding: 15px 10px; }
.about-page .stk-card.pad-lg { padding: 20px; }

/* 【v1.2.3】三卡容器与「新手必看」之间的分隔间距（替代手加的孤立 </p>） */
.about-page .about-grid { margin-bottom: 16px; }

/* 新手必看表格：固定布局 + min-width 归零（覆盖 .stk-table 的 620px 最小宽），
   长文字自动换行——手机端不出现横向滚动条、文字不再超出屏幕。
   特异性用 .about-page 前缀提升，确保盖过 .stk-table th 的 nowrap（893 行）。 */
.about-table { table-layout: fixed; width: 100%; min-width: 0; }
.about-table td, .about-table th { word-break: break-word; white-space: normal; }
.about-table th:first-child { width: 96px; }
@media (max-width: 640px) {
    .about-table th:first-child { width: 84px; }
}

/* ---------- 8.16 v1.2.4：刷题客专属 404 页 ---------- */
.stk-404 { text-align: center; padding: 48px 20px 44px; }
.stk-404 .ico { font-size: 52px; line-height: 1; margin-bottom: 6px; }
.stk-404 .num {
    font-size: 118px; font-weight: 900; line-height: 1; letter-spacing: 2px;
    background: linear-gradient(135deg, var(--c-primary), #60a5fa);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.stk-404 h2 { margin: 12px 0 0; color: var(--text); }
@media (max-width: 640px) {
    .stk-404 { padding: 36px 16px 34px; }
    .stk-404 .ico { font-size: 42px; }
    .stk-404 .num { font-size: 86px; }
    .stk-404 h2 { font-size: 17px; }
}

/* ---------- 8.17 v1.2.7：手机端「我的」单屏紧凑 ---------- */
@media (max-width: 640px) {
    .profile-page .stk-card { padding: 13px 12px; margin-bottom: 10px; }
    .profile-page .me-hero { gap: 10px; }
    .profile-page .me-avatar { width: 46px; height: 46px; font-size: 20px; }
    .profile-page .me-nick { font-size: 16px; }
    .profile-page .stk-stat { padding: 11px 6px; }
    .profile-page .stk-stat .num { font-size: 20px; }
    .profile-page .stk-stat .lbl { font-size: 11.5px; }
    .profile-page .stk-grid { gap: 10px; }
    .profile-page .stk-menu { margin-bottom: 10px; }
    .profile-page .stk-menu-item { padding: 10px 12px; font-size: 14px; }
    .profile-page .stk-menu-item .mi-ico { font-size: 17px; width: 24px; }
    .profile-page .me-foot { display: none; }   /* 尾注隐藏，保证单屏 */
    .profile-page .stk-main { padding-top: 10px; }
}

/* ---------- 8.18 v1.2.8：考场设置 2×2 输入网格（手机端也是两列，单屏紧凑） ---------- */
.exam-grid2 { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }

/* ---------- 9. 标签 / 徽章 ---------- */
.stk-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: var(--bg-soft); color: var(--text-mid); border: 1px solid var(--border);
}
.stk-tag.blue { background: var(--c-primary-soft); color: var(--c-primary); border-color: transparent; }
.stk-tag.green { background: var(--c-success-soft); color: var(--c-success); border-color: transparent; }
.stk-tag.red { background: var(--c-danger-soft); color: var(--c-danger); border-color: transparent; }
.stk-tag.amber { background: var(--c-warn-soft); color: #b45309; border-color: transparent; }
.stk-tag.purple { background: #f5f3ff; color: var(--c-purple); border-color: transparent; }

/* ---------- 10. 提示条 ---------- */
.stk-flash-wrap { max-width: 1080px; margin: 14px auto 0; padding: 0 16px; }
.stk-flash {
    padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 10px;
    font-size: 14px; border-left: 4px solid transparent;
}
.stk-flash.is-ok { background: var(--c-success-soft); color: #047857; border-left-color: var(--c-success); }
.stk-flash.is-err { background: var(--c-danger-soft); color: #b91c1c; border-left-color: var(--c-danger); }
.stk-flash.is-warn { background: var(--c-warn-soft); color: #b45309; border-left-color: var(--c-warn); }

.stk-toast {
    position: fixed; left: 50%; top: 74px; transform: translateX(-50%) translateY(-12px);
    background: rgba(15, 23, 42, .92); color: #fff; padding: 10px 18px; border-radius: 20px;
    font-size: 14px; z-index: 9999; opacity: 0; pointer-events: none; transition: .22s;
    max-width: 80vw; text-align: center;
}
.stk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.stk-toast.ok { background: rgba(5, 150, 105, .94); }
.stk-toast.bad { background: rgba(220, 38, 38, .94); }

/* ---------- 11. 数据展示：统计卡 / 环形图 / 柱状图 ---------- */
.stk-stat {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow);
}
.stk-stat .num { font-size: 26px; font-weight: 700; line-height: 1.2; }
.stk-stat .lbl { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.stk-stat.blue .num { color: var(--c-primary); }
.stk-stat.green .num { color: var(--c-success); }
.stk-stat.red .num { color: var(--c-danger); }
.stk-stat.amber .num { color: var(--c-warn); }

.stk-ring { display: flex; align-items: center; gap: 18px; }
.stk-ring svg { flex: none; }
.stk-ring .ring-info { font-size: 13px; color: var(--text-mid); }
.stk-ring .ring-info b { font-size: 22px; color: var(--text); display: block; line-height: 1.2; }

.stk-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.stk-bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.stk-bars .bar {
    width: 100%; background: linear-gradient(180deg, #60a5fa, var(--c-primary));
    border-radius: 5px 5px 0 0; min-height: 3px; transition: height .4s ease;
    margin-top: auto;
}
.stk-bars .bar-lbl { font-size: 11px; color: var(--text-soft); }
.stk-bars .bar-val { font-size: 11px; color: var(--text-mid); font-weight: 600; }

.stk-progress {
    height: 8px; background: var(--bg-soft); border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border);
}
.stk-progress > i {
    display: block; height: 100%; background: linear-gradient(90deg, var(--c-primary), #60a5fa);
    border-radius: 6px; transition: width .4s ease;
}

/* ---------- 11.1 分数曲线图（v1.0.5，纯 SVG） ---------- */
.stk-line-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stk-line-svg { display: block; min-width: 100%; height: auto; }
.stk-line-svg .grid { stroke: var(--border); stroke-width: 1; }
.stk-line-svg .fill { fill: url(#stkLineGrad); }
.stk-line-svg .line {
    fill: none; stroke: var(--c-primary); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
}
.stk-line-svg .dot { fill: #fff; stroke: var(--c-primary); stroke-width: 2; }
.stk-line-svg .lbl { font-size: 10px; fill: var(--text-soft); }
.stk-line-svg .val { font-size: 10.5px; fill: var(--c-primary); font-weight: 600; }
[data-theme="dark"] .stk-line-svg .dot { fill: var(--bg-card); }

/* ---------- 12. 功能入口卡 ---------- */
.stk-entry {
    display: block; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 14px; text-align: center;
    box-shadow: var(--shadow); transition: .2s; color: var(--text);
}
.stk-entry:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #bfdbfe; }
.stk-entry .ico { font-size: 30px; line-height: 1; margin-bottom: 8px; display: block; }
.stk-entry .t { font-weight: 700; font-size: 15px; }
.stk-entry .d { font-size: 12px; color: var(--text-soft); margin-top: 3px; }

/* ---------- 13. 刷题区 ---------- */
.stk-qbox {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.stk-q-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.stk-q-title { font-size: 17px; line-height: 1.7; font-weight: 500; margin: 0 0 18px; word-break: break-word; }
.stk-q-title .idx { color: var(--c-primary); font-weight: 700; margin-right: 4px; }

.stk-opt {
    display: flex; gap: 10px; width: 100%; text-align: left; align-items: flex-start;
    padding: 12px 14px; margin-bottom: 9px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text);
    font-size: 15px; line-height: 1.55; cursor: pointer; transition: .16s; font-family: inherit;
}
.stk-opt:hover:not(:disabled) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.stk-opt .k {
    flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
    color: var(--text-mid); margin-top: 1px;
}
.stk-opt .v { flex: 1; word-break: break-word; }
.stk-opt:disabled { cursor: default; }
.stk-opt.picked { border-color: var(--c-primary); background: var(--c-primary-soft); }
.stk-opt.picked .k { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.stk-opt.right { border-color: var(--c-success); background: var(--c-success-soft); }
.stk-opt.right .k { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.stk-opt.wrong { border-color: var(--c-danger); background: var(--c-danger-soft); }
.stk-opt.wrong .k { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }

.stk-answer {
    margin-top: 18px; padding: 16px; border-radius: var(--radius-sm);
    background: var(--bg-soft); border-left: 4px solid var(--c-primary); position: relative;
}
.stk-answer.ok { border-left-color: var(--c-success); }
.stk-answer.no { border-left-color: var(--c-danger); }
.stk-answer .verdict { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.stk-answer .verdict.ok { color: var(--c-success); }
.stk-answer .verdict.no { color: var(--c-danger); }
.stk-answer .line { font-size: 14px; margin-bottom: 6px; word-break: break-word; }
.stk-answer .line b { color: var(--text-mid); font-weight: 600; }
.stk-answer .exp { margin-top: 10px; font-size: 14px; line-height: 1.75; color: var(--text-mid); word-break: break-word; }

.stk-qbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.stk-kbd-tip { font-size: 12px; color: var(--text-soft); }

/* ---------- 14. 考试 ---------- */
.stk-exam-top {
    position: sticky; top: var(--nav-h); z-index: 50;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
    box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.stk-timer { font-size: 20px; font-weight: 700; color: var(--c-danger); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.stk-timer.low { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.stk-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 7px; }
.stk-cardgrid button {
    aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border-strong);
    background: var(--bg-card); color: var(--text-mid); font-size: 13px; cursor: pointer;
    font-family: inherit; transition: .15s;
}
.stk-cardgrid button.done { background: var(--c-primary-soft); border-color: #93c5fd; color: var(--c-primary); font-weight: 600; }
.stk-cardgrid button.cur { border-color: var(--c-primary); border-width: 2px; color: var(--c-primary); font-weight: 700; }
.stk-cardgrid button.flag { background: var(--c-warn-soft); border-color: var(--c-warn); color: #b45309; }

.stk-score {
    background: linear-gradient(135deg, var(--c-primary), #1e40af); color: #fff;
    border-radius: var(--radius); padding: 30px 20px; text-align: center; box-shadow: var(--shadow-lg);
}
.stk-score .big { font-size: 52px; font-weight: 800; line-height: 1; }
.stk-score .sub { opacity: .85; font-size: 14px; margin-top: 8px; }

/* ---------- 14.0 考试范围标签（v1.1.1） ---------- */
.stk-exam-scope {
    margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--c-primary-soft); color: var(--c-primary);
    font-size: 14px; font-weight: 700; line-height: 1.5;
}

/* ---------- 14.1 考场三模式 + 单题导航（v1.0.7） ---------- */

/* 答题模式选择（试卷 / 盲考 / 记忆） */
.exam-mode-group { display: flex; gap: 8px; }
.exam-mode-btn {
    flex: 1; padding: 11px 8px; border-radius: 10px;
    border: 1.5px solid var(--border-strong); background: var(--bg-card);
    color: var(--text-mid); font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: .16s;
}
.exam-mode-btn:hover { border-color: var(--c-primary); }
.exam-mode-btn.active {
    border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary);
}
.exam-mode-desc {
    margin-top: 10px; padding: 9px 12px; border-radius: 10px;
    background: var(--c-primary-soft); color: var(--text-mid);
    font-size: 12.5px; line-height: 1.65;
}

/* 盲考 / 记忆模式的单题导航条 */
.exam-single-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.exam-counter { font-weight: 700; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.pq-bbtn-inline {
    padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
    background: var(--c-primary); color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: .15s;
}
.pq-bbtn-inline:hover { background: var(--c-primary-dark); }
.pq-bbtn-inline.ghost { background: transparent; color: var(--text-mid); border-color: var(--border-strong); }
.pq-bbtn-inline.ghost:hover { background: var(--bg-soft); color: var(--text); }
.pq-bbtn-inline:disabled { opacity: .45; cursor: default; }
.pq-bbtn-inline:disabled:hover { background: transparent; }

/* 考试整卷/单题卡片：无入场动画（v1.3.8 同原因） */
.exam-paper { }

/* ---------- 14.2 协议弹窗正文（v1.0.7） ---------- */
.stk-doc-body {
    font-size: 13.5px; line-height: 1.8; color: var(--text-mid);
    max-height: 62vh; overflow: auto; padding: 4px 2px;
}
.stk-doc-body .stk-doc-h2 { margin: 14px 0 6px; }
.stk-doc-body .stk-doc-h2:first-child { margin-top: 0; }
.stk-doc-body .stk-doc-p { margin: 0 0 6px; }

/* ---------- 15. 表格 ---------- */
.stk-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.stk-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.stk-table th, .stk-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.stk-table th { background: var(--bg-soft); font-weight: 600; color: var(--text-mid); font-size: 13px; white-space: nowrap; }
.stk-table tbody tr:hover { background: var(--bg-soft); }
.stk-table tbody tr:last-child td { border-bottom: none; }
.stk-table .nowrap { white-space: nowrap; }
.stk-table .ellip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 【v1.0.2】免最小宽度表格：用于环境检测等简单两列表，
   不再触发横向滚动条（旧版 min-width:620px 会把最后一项挤出可视区） */
.stk-table.stk-table-auto { min-width: 0; }
.stk-table.stk-table-auto th { white-space: normal; }

/* ---------- 16. 分页 ---------- */
.stk-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.stk-pager .pg {
    padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
    color: var(--text-mid); font-size: 13px; background: var(--bg-card);
}
.stk-pager .pg:hover { border-color: var(--c-primary); color: var(--c-primary); }
.stk-pager .pg.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 600; }
.stk-pager .pg.disabled { opacity: .45; cursor: default; }
.stk-pager .pg.dots { border: none; }
.stk-pager .pg-info { font-size: 13px; color: var(--text-soft); margin-left: auto; }

/* ---------- 17. 弹窗 ---------- */
.stk-modal {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, .5);
}
.stk-modal.open { display: flex; }
.stk-modal-box {
    background: var(--bg-card); border-radius: var(--radius); width: 100%; max-width: 560px;
    max-height: 86vh; overflow: auto; box-shadow: var(--shadow-lg);
}
.stk-modal-head {
    padding: 15px 18px; border-bottom: 1px solid var(--border);
    font-weight: 700; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: var(--bg-card); z-index: 2; border-radius: var(--radius) var(--radius) 0 0;
}
.stk-modal-body { padding: 18px; }
.stk-modal-foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.stk-x { border: none; background: none; font-size: 22px; line-height: 1; color: var(--text-soft); cursor: pointer; padding: 0 4px; }
.stk-x:hover { color: var(--text); }

/* ---------- 18. 空状态 / 加载 ---------- */
.stk-empty { text-align: center; padding: 46px 20px; color: var(--text-soft); }
.stk-empty .ico { font-size: 44px; display: block; margin-bottom: 12px; opacity: .6; }
.stk-loading { text-align: center; padding: 40px; color: var(--text-soft); }
.stk-dots::after {
    content: ''; animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; } }
.stk-skeleton {
    background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 37%, var(--bg-soft) 63%);
    background-size: 400% 100%; animation: sk 1.2s ease infinite; border-radius: 8px; height: 14px; margin-bottom: 8px;
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 19. 登录 / 注册 / 错误页 ---------- */
.stk-auth {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; background: linear-gradient(160deg, #eef4ff 0%, var(--bg) 55%);
}
[data-theme="dark"] .stk-auth { background: var(--bg); }
.stk-auth-box { width: 100%; max-width: 400px; }
.stk-auth-head { text-align: center; margin-bottom: 22px; }
.stk-auth-head .mark {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--c-primary), #60a5fa); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .25);
}
.stk-auth-head h1 { font-size: 21px; margin-bottom: 4px; }
.stk-auth-head p { color: var(--text-soft); font-size: 13px; margin: 0; }
.stk-auth-alt { text-align: center; font-size: 13px; color: var(--text-soft); margin-top: 14px; }
.stk-err-page { text-align: center; padding: 60px 20px; }
.stk-err-page .code { font-size: 72px; font-weight: 800; color: var(--c-primary); line-height: 1; }

/* ---------- 20. 公告条 ---------- */
.stk-notice {
    background: var(--c-success-soft); border: 1px solid #bbf7d0; color: #166534;
    border-radius: var(--radius-sm); padding: 12px 40px 12px 14px; font-size: 14px;
    position: relative; margin-bottom: 14px;
}
[data-theme="dark"] .stk-notice { color: #86efac; border-color: #14532d; }
.stk-notice b { display: block; margin-bottom: 3px; }
.stk-notice .close {
    position: absolute; right: 10px; top: 10px; border: none; background: none;
    color: inherit; cursor: pointer; font-size: 16px; opacity: .6;
}
.stk-notice .close:hover { opacity: 1; }

/* ---------- 21. 后台侧栏（桌面） ---------- */
.stk-admin-layout { display: flex; gap: 16px; align-items: flex-start; }
.stk-side {
    width: 190px; flex: none; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow);
    position: sticky; top: calc(var(--nav-h) + 14px);
}
.stk-side a {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px;
    color: var(--text-mid); font-size: 14px; margin-bottom: 2px;
}
.stk-side a:hover { background: var(--bg-soft); color: var(--text); }
.stk-side a.active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.stk-admin-main { flex: 1; min-width: 0; }

/* ---------- 22. 工具类 ---------- */
.stk-hide { display: none !important; }
.stk-nowrap { white-space: nowrap; }
.stk-scroll { overflow-x: auto; }
.stk-mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; }
.text-ok { color: var(--c-success); } .text-bad { color: var(--c-danger); }
.text-warn { color: var(--c-warn); } .text-mid { color: var(--text-mid); }
.text-soft { color: var(--text-soft); }
.fw-bold { font-weight: 700; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; }
.fs-18 { font-size: 18px; } .fs-22 { font-size: 22px; }

/* ---------- 23. 响应式 ----------
   【v1.0.1 约定】
   - 用户端（大厅/刷题/考试/错题/成绩/反馈）：手机优先，≤640px 全面增强触控；
   - 管理后台：保持电脑端布局（侧栏始终在左，不随窄屏折叠），
     手机上打开后台按桌面版式横向滚动查看。 */
@media (max-width: 900px) {
    .stk-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    body { font-size: 15px; padding-bottom: 66px; }
    .stk-main { padding: 12px 0 44px; }
    .stk-wrap { padding: 0 12px; }
    .stk-grid-3, .stk-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .stk-grid-2 { grid-template-columns: 1fr; }
    .stk-card { padding: 14px; border-radius: 12px; }
    .stk-card.pad-lg { padding: 16px; }

    /* 顶栏与底部标签栏（用户端主导航）
       【v1.0.9】手机端全站隐藏顶部导航条（管理后台豁免——后台侧栏需要
       「返回前台」入口，且按桌面布局横滚查看）；一级页面保留底部标签栏。 */
    .stk-nav { display: none !important; }
    body.stk-admin-page .stk-nav { display: block !important; }
    .stk-tabbar { display: block; }
    .stk-tabbar a { padding: 9px 0 8px; font-size: 11px; }
    .stk-tabbar a .ico { font-size: 21px; }

    /* 【v1.0.9】二级页面（成绩/排行榜/设置/反馈/协议等）：
       隐藏底部菜单栏，左上角固定返回按钮；底部不再预留菜单栏高度 */
    body.stk-sub .stk-tabbar { display: none !important; }
    body.stk-sub { padding-bottom: 20px; }
    body.stk-sub .stk-main { padding-bottom: 20px; }
    body.stk-sub .stk-back-float { display: flex; }

    /* 刷题体验：更大的题干与选项触控区 */
    .stk-qbox { padding: 14px; border-radius: 12px; }
    .stk-q-title { font-size: 16.5px; margin-bottom: 14px; }
    .stk-opt { padding: 12px 13px; font-size: 15px; margin-bottom: 9px; min-height: 48px; }
    .stk-opt .k { width: 26px; height: 26px; font-size: 14px; }
    .stk-answer { padding: 13px; }
    .stk-answer .exp { font-size: 14px; }

    /* 触控目标：按钮 / 输入 / 分页 */
    .stk-btn { min-height: 42px; }
    .stk-btn.lg { min-height: 48px; }
    .stk-btn.sm { min-height: 36px; }
    .stk-input, .stk-select, .stk-textarea { font-size: 16px; } /* ≥16px 防 iOS 聚焦自动放大 */
    .stk-pager .pg { padding: 9px 14px; font-size: 14px; }
    .stk-pager .pg-info { width: 100%; margin-left: 0; text-align: center; }

    /* 考试 */
    .stk-exam-top { top: 0; border-radius: 0; padding: 10px 12px; gap: 10px; }
    .stk-timer { font-size: 18px; }
    .stk-cardgrid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; }

    /* 统计与图表 */
    .stk-stat .num { font-size: 22px; }
    .stk-bars { height: 110px; }

    /* 弹窗：改为近全屏底部面板，更好按、更好滑 */
    .stk-modal { padding: 0; align-items: flex-end; }
    .stk-modal-box { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }

    /* 数据表格：保持横向滑动 */
    .stk-table { min-width: 560px; font-size: 13px; }
    .stk-table th, .stk-table td { padding: 10px; }

    /* 【v1.0.4】刷题专注模式：手机端把屏幕尽量留给题目 */
    .pq-top { padding: 8px 12px; }
    .pq-top-title { font-size: 14.5px; }
    .pq-scroll { padding: 10px 10px calc(66px + env(safe-area-inset-bottom)); }
    .pq-bbtn { min-height: 52px; }

    /* 大厅：科目卡与入口卡在手机上更紧凑 */
    .subject-card { padding: 16px 14px 14px; margin-bottom: 14px; }
    .subject-card .ttl { font-size: 15px; margin-bottom: 11px; }
    .subject-card .stk-select { height: 44px; font-size: 15px; }
    .stk-entry { padding: 14px 8px; }
    .stk-entry .mark { width: 40px; height: 40px; font-size: 15px; border-radius: 11px; margin-bottom: 8px; }
    .stk-entry .t { font-size: 13.5px; }
    .stk-entry .d { font-size: 11.5px; }
    .stk-entry .ico { font-size: 26px; margin-bottom: 6px; }
}