/* =============================================================
 * 博栋教育 · 心理咨询师三四级考前题库 — 前台样式 v2
 * 专业教育品牌感 / 清爽护眼 / 移动端友好
 * 零依赖 · 纯 CSS · 全部为系统字体
 * ============================================================= */

:root {
    /* —— 品牌主色 —— */
    --color-primary: #1e6feb;
    --color-primary-dark: #1456c8;
    --color-primary-soft: #e8f1fe;
    --color-primary-soft-2: #d5e6fd;

    /* —— 品牌辅色（博栋红）—— */
    --color-accent: #e85d75;
    --color-accent-soft: #fff1f4;

    /* —— 语义色 —— */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-correct: #16a34a;
    --color-wrong: #dc2626;

    /* —— 中性色 —— */
    --color-bg: #f4f6fb;
    --color-card: #ffffff;
    --color-border: #e7eaf0;
    --color-border-strong: #d9dee8;
    --color-text: #0f1729;
    --color-text-2: #475061;
    --color-muted: #6b7280;

    /* —— 渐变 —— */
    --grad-brand: linear-gradient(135deg, #3d86f7 0%, #1a5ee0 100%);
    --grad-accent: linear-gradient(135deg, #f5748b 0%, #dc4a63 100%);
    --grad-success: linear-gradient(135deg, #34d399 0%, #059669 100%);
    --grad-violet: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    --grad-amber: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    --grad-cyan: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);

    /* —— 阴影层级 —— */
    --shadow-xs: 0 1px 2px rgba(15, 23, 41, .04);
    --shadow-soft: 0 1px 2px rgba(15, 23, 41, .04), 0 2px 8px rgba(15, 23, 41, .05);
    --shadow-md: 0 4px 14px rgba(15, 23, 41, .07), 0 2px 4px rgba(15, 23, 41, .04);
    --shadow-lg: 0 14px 34px rgba(15, 23, 41, .10), 0 4px 10px rgba(15, 23, 41, .05);

    /* —— 圆角 —— */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* —— 动效 —— */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ring: 0 0 0 3px rgba(30, 111, 235, .16);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 顶部一抹柔和品牌光晕，整体更有质感 */
body::before {
    content: '';
    position: fixed; inset: 0 0 auto 0; height: 420px;
    background:
        radial-gradient(900px 320px at 20% -60px, rgba(61, 134, 247, .10), transparent 70%),
        radial-gradient(700px 280px at 85% -80px, rgba(232, 93, 117, .07), transparent 70%);
    pointer-events: none; z-index: -1;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--color-primary-soft-2); color: var(--color-primary-dark); }

/* ============================================================
 * 顶部导航
 * ============================================================ */
.navbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(231, 234, 240, .9);
    box-shadow: 0 1px 0 rgba(15, 23, 41, .02), 0 6px 18px -12px rgba(15, 23, 41, .18);
}
.navbar-inner {
    max-width: 1180px; margin: 0 auto; padding: 11px 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
}
.brand {
    font-weight: 700; color: var(--color-text); font-size: 15.5px;
    display: flex; align-items: center; gap: 9px;
    letter-spacing: -.01em; white-space: nowrap;
}
.brand:hover { text-decoration: none; }

/* 品牌徽标：渐变圆角方块 + 白色心形（心理学意象） */
.brand .dot {
    position: relative; flex-shrink: 0;
    width: 27px; height: 27px; border-radius: 9px;
    background: var(--grad-brand);
    box-shadow: 0 4px 11px -2px rgba(30, 111, 235, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.brand .dot::after {
    content: '♥';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; line-height: 1;
    font-family: "Segoe UI Symbol", Arial, sans-serif;
    transform: translateY(-.5px);
}

.nav-links { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.nav-links a {
    position: relative;
    color: var(--color-text-2); font-size: 14px; font-weight: 500;
    padding: 7px 12px; border-radius: 9px;
    transition: color .18s var(--ease), background .18s var(--ease);
    white-space: nowrap;
}
.nav-links a:hover {
    color: var(--color-primary); background: var(--color-primary-soft); text-decoration: none;
}
.nav-links a.active {
    color: var(--color-primary); background: var(--color-primary-soft); font-weight: 600;
}
.nav-links a.active::after {
    content: ''; position: absolute; left: 50%; bottom: -11px;
    width: 18px; height: 2.5px; border-radius: 2px;
    background: var(--color-primary); transform: translateX(-50%);
}

.nav-user { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-2); white-space: nowrap; }
.nav-user > span {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px;
    background: var(--color-primary-soft); color: var(--color-primary-dark);
    font-size: 13px; font-weight: 600;
}

/* ============================================================
 * 容器与标题
 * ============================================================ */
.container {
    max-width: 1180px; margin: 0 auto;
    padding: 26px 20px 64px;
}
.page-title {
    font-size: 25px; font-weight: 750; letter-spacing: -.025em;
    margin: 0 0 7px; line-height: 1.3;
}
.page-subtitle { color: var(--color-muted); margin: 0 0 22px; font-size: 14px; line-height: 1.75; }
.page-subtitle strong { color: var(--color-text-2); font-weight: 600; }

/* ============================================================
 * 卡片
 * ============================================================ */
.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-soft);
}
.card + .card { margin-top: 16px; }
.card-title {
    font-size: 15.5px; font-weight: 650; margin: 0 0 15px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; letter-spacing: -.005em;
}
.card-title small { font-weight: 400; color: var(--color-muted); font-size: 13px; }

/* ============================================================
 * 按钮
 * ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--color-border-strong);
    background: #fff; color: var(--color-text);
    padding: 0 14px; height: 36px;
    border-radius: 10px; font-size: 14px; font-weight: 500;
    line-height: 1; white-space: nowrap;
    transition: all .18s var(--ease);
    text-decoration: none;
}
.btn:hover {
    border-color: var(--color-primary); color: var(--color-primary);
    background: #fafcff; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-primary {
    background: var(--grad-brand); color: #fff; border-color: transparent;
    box-shadow: 0 4px 12px -3px rgba(30, 111, 235, .5);
}
.btn-primary:hover {
    color: #fff; background: var(--grad-brand); filter: brightness(1.06);
    box-shadow: 0 7px 18px -4px rgba(30, 111, 235, .55);
}
.btn-accent {
    background: var(--grad-accent); color: #fff; border-color: transparent;
    box-shadow: 0 4px 12px -3px rgba(232, 93, 117, .5);
}
.btn-accent:hover { color: #fff; filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-danger { color: var(--color-danger); border-color: #fecaca; background: #fff; }
.btn-danger:hover { color: #fff; background: var(--color-danger); border-color: var(--color-danger); }
.btn-block { width: 100%; }
.btn-lg { height: 45px; padding: 0 22px; font-size: 15px; border-radius: 12px; font-weight: 600; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
 * 刷题模式卡片
 * ============================================================ */
.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 14px;
}
.mode-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 19px 20px 20px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
/* 顶部渐变条：hover / 选中时显现 */
.mode-card::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--grad-brand);
    opacity: 0; transition: opacity .22s var(--ease);
}
.mode-card:hover {
    border-color: rgba(30, 111, 235, .4);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.mode-card:hover::after { opacity: 1; }
.mode-card:hover .mc-icon { transform: scale(1.07) rotate(-4deg); }
.mode-card.selected {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, #f6faff 0%, #fff 60%);
    box-shadow: 0 0 0 3px rgba(30, 111, 235, .1), var(--shadow-md);
}
.mode-card.selected::after { opacity: 1; }

.mc-icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 700; color: #fff;
    background: var(--grad-brand);
    box-shadow: 0 6px 14px -5px rgba(30, 111, 235, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
    margin-bottom: 14px;
    transition: transform .22s var(--ease);
}
.mode-card h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.mode-card p { margin: 0; color: var(--color-muted); font-size: 13px; line-height: 1.65; }

/* 各模式专属配色 */
.mode-card.mc-3 .mc-icon { background: var(--grad-accent); box-shadow: 0 6px 14px -5px rgba(232, 93, 117, .65), inset 0 1px 0 rgba(255,255,255,.25); }
.mode-card.mc-4 .mc-icon { background: var(--grad-success); box-shadow: 0 6px 14px -5px rgba(16, 185, 129, .65), inset 0 1px 0 rgba(255,255,255,.25); }
.mode-card.mc-3::after { background: var(--grad-accent); }
.mode-card.mc-4::after { background: var(--grad-success); }

/* 按功能区分色（首页 8 个卡片） */
.mode-card[data-mode="enroll"] .mc-icon { background: var(--grad-accent); box-shadow: 0 6px 14px -5px rgba(232, 93, 117, .65), inset 0 1px 0 rgba(255,255,255,.25); }
.mode-card[data-mode="enroll"]::after { background: var(--grad-accent); }
.mode-card[data-mode="multi"] .mc-icon { background: var(--grad-cyan); box-shadow: 0 6px 14px -5px rgba(8, 145, 178, .6), inset 0 1px 0 rgba(255,255,255,.25); }
.mode-card[data-mode="multi"]::after { background: var(--grad-cyan); }
.mode-card[data-mode="mix"] .mc-icon { background: var(--grad-violet); box-shadow: 0 6px 14px -5px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255,255,255,.25); }
.mode-card[data-mode="mix"]::after { background: var(--grad-violet); }
.mode-card[data-mode="random"] .mc-icon { background: var(--grad-amber); box-shadow: 0 6px 14px -5px rgba(217, 119, 6, .55), inset 0 1px 0 rgba(255,255,255,.28); }
.mode-card[data-mode="random"]::after { background: var(--grad-amber); }
.mode-card[data-mode="mock"] .mc-icon { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); box-shadow: 0 6px 14px -5px rgba(225, 29, 72, .55), inset 0 1px 0 rgba(255,255,255,.25); }
.mode-card[data-mode="mock"]::after { background: linear-gradient(90deg, #fb7185, #e11d48); }
.mode-card[data-mode="point"] .mc-icon { background: var(--grad-success); box-shadow: 0 6px 14px -5px rgba(16, 185, 129, .6), inset 0 1px 0 rgba(255,255,255,.25); }
.mode-card[data-mode="point"]::after { background: var(--grad-success); }

/* ============================================================
 * 题目展示
 * ============================================================ */
.q-stem {
    font-size: 16.5px; line-height: 1.85; margin: 10px 0 20px;
    color: var(--color-text); white-space: pre-wrap;
    font-weight: 500; letter-spacing: -.005em;
}
.q-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px; font-size: 12px; font-weight: 500;
    background: var(--color-primary-soft); color: var(--color-primary);
    margin-right: 6px; line-height: 1.5;
}
.q-tag.t-single { background: var(--color-accent-soft); color: #cf3d57; }
.q-tag.t-multi  { background: #e0f7fa; color: #0e7490; }
.q-tag.l-3      { background: #fff4e6; color: #c2410c; }
.q-tag.l-4      { background: #e9fbf2; color: #15803d; }
.q-tag.cat      { background: #f1f4f9; color: var(--color-muted); }

.options { display: flex; flex-direction: column; gap: 10px; }
.option {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 13px 15px;
    background: #fff;
    display: flex; gap: 12px; align-items: flex-start;
    cursor: pointer;
    transition: all .18s var(--ease);
}
.option:hover {
    border-color: rgba(30, 111, 235, .5);
    background: #f8fbff;
    transform: translateX(2px);
    box-shadow: var(--shadow-xs);
}
.option.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 3px rgba(30, 111, 235, .08);
}
.option.correct  { border-color: var(--color-correct); background: #f0fdf4; box-shadow: none; }
.option.wrong    { border-color: var(--color-wrong);   background: #fef2f2; box-shadow: none; }
.option .opt-k {
    width: 26px; height: 26px; border-radius: 50%;
    background: #f1f4f9; color: var(--color-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
    transition: all .18s var(--ease);
}
.option.selected .opt-k { background: var(--color-primary); color: #fff; box-shadow: 0 3px 8px -2px rgba(30,111,235,.6); }
.option.correct .opt-k  { background: var(--color-correct); color: #fff; box-shadow: 0 3px 8px -2px rgba(22,163,74,.55); }
.option.wrong .opt-k    { background: var(--color-wrong); color: #fff; box-shadow: 0 3px 8px -2px rgba(220,38,38,.5); }
.option .opt-v { flex: 1; line-height: 1.65; padding-top: 1px; }

/* ============================================================
 * 答题器底部工具条
 * ============================================================ */
.qbar {
    position: sticky; bottom: 0; z-index: 20;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
    padding: 12px 4px; margin-top: 18px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.qbar .progress-text { color: var(--color-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.qbar .progress-text strong { color: var(--color-text); font-weight: 700; }
.qbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
 * 复盘
 * ============================================================ */
.review-card { margin-bottom: 14px; }
.review-result {
    font-size: 13.5px; font-weight: 600; padding: 7px 14px;
    border-radius: 999px; margin-bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
}
.review-result.ok  { color: #15803d; background: #ecfdf5; border: 1px solid #a7f3d0; }
.review-result.bad { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.review-block {
    background: #f8fafc; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 13px 15px; margin-top: 10px;
    font-size: 14px; line-height: 1.75;
}
.review-block b { color: var(--color-primary); }
.review-block.tips { background: #fffaf2; border-color: #fde4c8; }
.review-block.tips b { color: #c2410c; }

/* ============================================================
 * 统计卡
 * ============================================================ */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 13px;
}
.stat {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 15px 17px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.stat:hover, .stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.stat .v {
    font-size: 26px; font-weight: 750; color: var(--color-text);
    letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.stat .k { font-size: 12.5px; color: var(--color-muted); margin-top: 3px; }
.stat.acc .v   { color: var(--color-primary); }
.stat.s-acc .v { color: var(--color-accent); }
.stat.m-acc .v { color: #0891b2; }

/* ============================================================
 * 表单
 * ============================================================ */
.form-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.form-row label { font-size: 13px; color: var(--color-muted); font-weight: 500; }
.input, select.input, textarea.input {
    border: 1.5px solid var(--color-border-strong);
    background: #fff;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 14px;
    color: var(--color-text);
    width: 100%;
    font-family: inherit;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder { color: #a6aebb; }
.input:hover, select.input:hover { border-color: #c3cbd9; }
.input:focus, select.input:focus, textarea.input:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: var(--ring);
}
textarea.input { min-height: 100px; resize: vertical; }
select.input {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ============================================================
 * 进度条
 * ============================================================ */
.bar { background: #eef1f6; border-radius: 999px; overflow: hidden; height: 8px; }
.bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--grad-brand); transition: width .45s var(--ease);
}

/* ============================================================
 * 轻提示
 * ============================================================ */
.toast {
    position: fixed; top: 78px; left: 50%;
    transform: translate(-50%, -10px);
    background: rgba(17, 24, 39, .94);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; padding: 10px 18px; border-radius: 11px;
    font-size: 13.5px; font-weight: 500;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    z-index: 99; opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
 * 模考倒计时
 * ============================================================ */
.countdown {
    position: fixed; top: 70px; right: 24px;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 999px; padding: 7px 16px;
    font-size: 14px; font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 40; font-variant-numeric: tabular-nums;
}
.countdown b { color: var(--color-accent); }

/* ============================================================
 * 加载指示
 * ============================================================ */
.spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid #e5e7eb; border-top-color: var(--color-primary);
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
 * 滚动条
 * ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cfd6e2; border-radius: 99px;
    border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #adb8c9; background-clip: content-box; }

/* ============================================================
 * 入场动画
 * ============================================================ */
@keyframes xl-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.container > * { animation: xl-rise .42s var(--ease) both; }
.container > *:nth-child(1) { animation-delay: .01s; }
.container > *:nth-child(2) { animation-delay: .05s; }
.container > *:nth-child(3) { animation-delay: .09s; }
.container > *:nth-child(4) { animation-delay: .13s; }
.container > *:nth-child(5) { animation-delay: .17s; }
.container > *:nth-child(n+6) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
 * 响应式
 * ============================================================ */
@media (max-width: 768px) {
    .navbar-inner { padding: 10px 14px; }
    .container { padding: 18px 14px 54px; }
    .card { padding: 17px; }
    .page-title { font-size: 20px; }
    .mode-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
    .mode-card { padding: 15px; }
    .mc-icon { width: 40px; height: 40px; font-size: 17px; border-radius: 12px; margin-bottom: 11px; }
    .mode-card h3 { font-size: 14.5px; }
    .mode-card p { font-size: 12.5px; }
    .nav-links { display: none; }
    .nav-mobile-toggle { display: inline-block; }
    .countdown { top: auto; bottom: 76px; right: 14px; }
    .stat .v { font-size: 22px; }
}
@media (max-width: 480px) {
    .mode-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 18.5px; }
}

/* ---- 线性图标（按钮 / 卡片标题内联 SVG，零依赖，跟随 currentColor） ---- */
.btn > svg.ico, .card-title > svg.ico, h1 > svg.ico, h2 > svg.ico {
    width: 16px; height: 16px; flex-shrink: 0;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    opacity: .9;
}
.btn:hover > svg.ico { opacity: 1; }

/* ---- 行内小图标（文字流中的线性图标） ---- */
.mi { width:15px; height:15px; flex-shrink:0; fill:none; stroke:currentColor;
      stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
      vertical-align:-2.5px; opacity:.8; }
.page-subtitle .mi, .card p .mi { width:14px; height:14px; opacity:.7; }
.nav-user { display:inline-flex; align-items:center; gap:5px; }
.nav-user .mi { width:15px; height:15px; opacity:.9; vertical-align:0; }
.up-line .mi, .doc-chip .mi { width:14px; height:14px; }
.page-title > svg.ico { width: 22px; height: 22px; stroke-width: 1.9; opacity: .95; }
.btn-sm > svg.ico { width: 14px; height: 14px; }
.up-del { display: inline-flex; align-items: center; gap: 3px; }
.study-notice .mi, .up-thumb .mi { vertical-align: 0; }