/* ==========================================================================
 * 归一归总问题练习 /tool/normalize-problem-drill
 * 视觉主题：数学作业本 · 湖蓝铅笔
 *   底色 = 作业本米白 + 淡蓝横线，主色 = 湖蓝（铅笔），批改红只用于判分
 *   荧光黄只用于「单一量 / 总量 / 分量」三步的关键词高亮
 *   题目区做成横线作业本，设置区做成老师的「出题单」
 * ========================================================================== */

:root {
    --np-paper: #fbfaf5;
    --np-paper-2: #f3f6fa;
    --np-surface: #ffffff;
    --np-ink: #22303c;
    --np-ink-2: #4a5a68;
    --np-ink-3: #7b8b99;
    --np-line: #dbe6f0;
    --np-line-2: #c3d5e4;
    --np-blue: #1e6fb8;
    --np-blue-2: #154f86;
    --np-blue-3: #0f3c66;
    --np-blue-soft: #e8f1fa;
    --np-red: #cf4128;
    --np-red-soft: #fdece8;
    --np-green: #1f8a5b;
    --np-green-soft: #e6f5ee;
    --np-yellow: #ffe9a0;
    --np-yellow-2: #fff6cf;
    --np-r: 14px;
    --np-r-sm: 9px;
    --np-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
    --np-shadow: 0 2px 10px rgba(28, 60, 92, .07);
    --np-shadow-lg: 0 18px 44px -26px rgba(20, 50, 80, .42);
}

:root[data-theme="dark"] {
    --np-paper: #0f161e;
    --np-paper-2: #131c26;
    --np-surface: #17222d;
    --np-ink: #e4ecf4;
    --np-ink-2: #b3c2cf;
    --np-ink-3: #8494a2;
    --np-line: #253444;
    --np-line-2: #33465a;
    --np-blue: #63aee8;
    --np-blue-2: #8cc6f2;
    --np-blue-3: #b3dbf9;
    --np-blue-soft: rgba(99, 174, 232, .12);
    --np-red: #f08a76;
    --np-red-soft: rgba(240, 138, 118, .13);
    --np-green: #63c79c;
    --np-green-soft: rgba(99, 199, 156, .13);
    --np-yellow: rgba(255, 209, 92, .24);
    --np-yellow-2: rgba(255, 209, 92, .1);
    --np-shadow: 0 2px 10px rgba(0, 0, 0, .38);
    --np-shadow-lg: 0 18px 44px -26px rgba(0, 0, 0, .88);
}

/* 深色下深底按钮不用浅蓝反白 */
:root[data-theme="dark"] .np-btn.is-primary,
:root[data-theme="dark"] .np-type-btn.active,
:root[data-theme="dark"] .np-seg-btn.active {
    background: #1c5f96;
    border-color: #1c5f96;
    color: #f2f7fc;
}

/* ============================ 基础 ============================ */
.np-page {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    color: var(--np-ink);
    font-size: 15px;
    line-height: 1.78;
    padding-bottom: 44px;
    -webkit-font-smoothing: antialiased;
}
.np-page * { box-sizing: border-box; }
.np-page b, .np-page strong { font-weight: 700; }
.np-page p { margin: 0 0 10px; }
.np-mark {
    background: linear-gradient(transparent 58%, var(--np-yellow) 58%);
    padding: 0 2px;
    font-weight: 700;
    color: var(--np-ink);
}

/* ============================ 首屏 ============================ */
.np-hero {
    position: relative;
    background: var(--np-paper);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r);
    padding: 30px 32px 26px;
    box-shadow: var(--np-shadow);
    overflow: hidden;
    margin-bottom: 18px;
}
/* 作业本左侧红边 + 淡蓝横线 */
.np-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--np-blue), var(--np-red));
    opacity: .8;
}
.np-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(180deg, transparent 0, transparent 33px, var(--np-line) 33px, var(--np-line) 34px);
    opacity: .4;
    pointer-events: none;
}
/* 深色下把作业本横线压得更淡，避免在深底上形成条纹干扰阅读 */
:root[data-theme="dark"] .np-hero::after {
    opacity: .2;
    background-image: repeating-linear-gradient(180deg, transparent 0, transparent 33px, #22303c 33px, #22303c 34px);
}
.np-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    align-items: start;
}
.np-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--np-blue-2);
    background: var(--np-yellow-2);
    border: 1px dashed var(--np-line-2);
    border-radius: 999px;
    padding: 3px 12px;
    margin-bottom: 12px;
}
.np-hero h1 {
    font-size: 31px;
    line-height: 1.28;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: var(--np-ink);
}
.np-lead {
    font-size: 15.5px;
    color: var(--np-ink-2);
    line-height: 1.85;
    margin-bottom: 16px;
    max-width: 62ch;
}
.np-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 4px; }
.np-chips li {
    font-size: 12.5px;
    color: var(--np-blue-2);
    background: var(--np-blue-soft);
    border: 1px solid var(--np-line);
    border-radius: 999px;
    padding: 3px 11px;
}

/* 右侧练习状态板 */
.np-board {
    background: var(--np-surface);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r);
    padding: 18px 18px 16px;
    box-shadow: var(--np-shadow);
}
.np-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--np-line-2);
    margin-bottom: 12px;
}
.np-board-head span { font-size: 12px; color: var(--np-ink-3); letter-spacing: .08em; }
.np-board-head strong { font-size: 13px; color: var(--np-ink-2); }
.np-board-main {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}
.np-board-main .num {
    font-family: var(--np-mono);
    font-size: 46px;
    line-height: 1;
    font-weight: 700;
    color: var(--np-blue);
    letter-spacing: -.02em;
}
.np-board-main .unit { font-size: 13px; color: var(--np-ink-3); padding-bottom: 6px; }
.np-board-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.np-metric {
    background: var(--np-paper-2);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r-sm);
    padding: 8px 10px;
}
.np-metric span { display: block; font-size: 11.5px; color: var(--np-ink-3); margin-bottom: 2px; }
.np-metric b {
    font-family: var(--np-mono);
    font-size: 17px;
    color: var(--np-ink);
    font-weight: 700;
}
.np-board-cta { width: 100%; margin-top: 12px; padding: 11px 14px; font-size: 14.5px; }
.np-board-note {
    font-size: 11.5px;
    color: var(--np-ink-3);
    line-height: 1.65;
    margin: 8px 0 0;
}

/* 预设 */
.np-presets {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--np-line-2);
}
.np-presets-label { font-size: 12.5px; color: var(--np-ink-3); margin-right: 2px; }
.np-presets button {
    font: inherit;
    font-size: 13px;
    color: var(--np-blue-2);
    background: var(--np-surface);
    border: 1px solid var(--np-line-2);
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: .16s;
}
.np-presets button:hover { border-color: var(--np-blue); color: var(--np-blue); transform: translateY(-1px); }

/* ============================ 错误条 ============================ */
.np-errbar {
    background: var(--np-red-soft);
    border: 1px solid var(--np-red);
    border-left-width: 4px;
    color: var(--np-red);
    border-radius: var(--np-r-sm);
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

/* ============================ 布局 ============================ */
.np-layout {
    display: grid;
    grid-template-columns: 336px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.np-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.np-card {
    background: var(--np-surface);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r);
    padding: 18px 18px 16px;
    box-shadow: var(--np-shadow);
}
.np-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--np-line);
}
.np-card-head .no {
    font-family: var(--np-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--np-blue);
    background: var(--np-blue-soft);
    border-radius: 5px;
    padding: 1px 6px;
}
.np-card-head h2 { font-size: 15.5px; font-weight: 800; margin: 0; color: var(--np-ink); letter-spacing: .01em; }

/* 题型卡 */
.np-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.np-type-btn {
    font: inherit;
    text-align: left;
    background: var(--np-paper-2);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r-sm);
    padding: 9px 10px;
    cursor: pointer;
    transition: .16s;
    color: var(--np-ink);
}
.np-type-btn b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.np-type-btn i { display: block; font-style: normal; font-size: 11.5px; color: var(--np-ink-3); line-height: 1.5; }
.np-type-btn:hover { border-color: var(--np-blue); }
.np-type-btn.active { background: var(--np-blue); border-color: var(--np-blue); color: #fff; box-shadow: 0 6px 16px -8px var(--np-blue); }
.np-type-btn.active i { color: rgba(255, 255, 255, .82); }

/* 字段 */
.np-field { display: block; margin-bottom: 13px; }
.np-field > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 12.5px;
    color: var(--np-ink-2);
    margin-bottom: 5px;
    font-weight: 600;
}
.np-field > span em { font-style: normal; font-weight: 400; color: var(--np-ink-3); font-size: 11.5px; }
.np-input, .np-select {
    width: 100%;
    font: inherit;
    font-size: 14px;
    color: var(--np-ink);
    background: var(--np-paper-2);
    border: 1px solid var(--np-line-2);
    border-radius: var(--np-r-sm);
    padding: 8px 11px;
    transition: .16s;
}
.np-input:focus, .np-select:focus {
    outline: none;
    border-color: var(--np-blue);
    background: var(--np-surface);
    box-shadow: 0 0 0 3px var(--np-blue-soft);
}
.np-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.np-seg-btn {
    font: inherit;
    font-size: 13px;
    flex: 1 1 auto;
    min-width: 62px;
    background: var(--np-paper-2);
    border: 1px solid var(--np-line-2);
    border-radius: var(--np-r-sm);
    color: var(--np-ink-2);
    padding: 6px 8px;
    cursor: pointer;
    transition: .16s;
}
.np-seg-btn:hover { border-color: var(--np-blue); color: var(--np-blue); }
.np-seg-btn.active { background: var(--np-blue); border-color: var(--np-blue); color: #fff; font-weight: 600; }

/* 开关 */
.np-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px dashed var(--np-line);
}
.np-switch-row:first-of-type { border-top: none; }
.np-switch-row p { margin: 0; font-size: 13px; color: var(--np-ink-2); font-weight: 600; }
.np-switch-row p i { display: block; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--np-ink-3); }
.np-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.np-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.np-switch span {
    position: absolute;
    inset: 0;
    background: var(--np-line-2);
    border-radius: 999px;
    transition: .2s;
    pointer-events: none;
}
.np-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: .2s;
}
.np-switch input:checked + span { background: var(--np-blue); }
.np-switch input:checked + span::after { transform: translateX(18px); }
.np-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--np-blue-soft); }

/* 按钮 */
.np-actions { display: flex; flex-direction: column; gap: 8px; }
.np-btn {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--np-r-sm);
    border: 1px solid var(--np-line-2);
    background: var(--np-surface);
    color: var(--np-ink);
    cursor: pointer;
    transition: .16s;
}
.np-btn:hover { border-color: var(--np-blue); color: var(--np-blue); }
.np-btn.is-primary {
    background: var(--np-blue);
    border-color: var(--np-blue);
    color: #fff;
    box-shadow: 0 10px 22px -14px var(--np-blue);
}
.np-btn.is-primary:hover { background: var(--np-blue-2); border-color: var(--np-blue-2); color: #fff; transform: translateY(-1px); }
.np-btn.is-ghost { background: transparent; color: var(--np-ink-3); }
.np-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================ 练习区 ============================ */
.np-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.np-stage {
    background: var(--np-surface);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r);
    box-shadow: var(--np-shadow-lg);
    overflow: hidden;
}
.np-stage-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 20px;
    background: var(--np-paper-2);
    border-bottom: 1px solid var(--np-line);
}
.np-stage-head .grow { flex: 1 1 auto; }
.np-stat { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--np-ink-3); }
.np-stat b { font-family: var(--np-mono); font-size: 16px; color: var(--np-ink); }
.np-stat.is-timer b { color: var(--np-blue); }
.np-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--np-blue-soft);
    color: var(--np-blue-2);
    border: 1px solid var(--np-line);
}
.np-badge.is-done { background: var(--np-green-soft); color: var(--np-green); border-color: transparent; }

/* 进度格 */
.np-progress { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 20px 0; }
.np-dot {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid var(--np-line-2);
    background: var(--np-paper-2);
    font-family: var(--np-mono);
    font-size: 10.5px;
    color: var(--np-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .15s;
}
.np-dot:hover { border-color: var(--np-blue); color: var(--np-blue); }
.np-dot.is-right { background: var(--np-green-soft); border-color: var(--np-green); color: var(--np-green); font-weight: 700; }
.np-dot.is-wrong { background: var(--np-red-soft); border-color: var(--np-red); color: var(--np-red); font-weight: 700; }
.np-dot.is-current { box-shadow: 0 0 0 2px var(--np-blue); border-color: var(--np-blue); color: var(--np-blue); font-weight: 700; }

/* 题卡：横线作业本 */
.np-quiz { padding: 22px 24px 24px; }
.np-qmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.np-qno {
    font-family: var(--np-mono);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--np-blue);
    border-radius: 5px;
    padding: 2px 8px;
}
.np-qtype { font-size: 12.5px; color: var(--np-ink-3); }
.np-qtext {
    font-size: 19px;
    line-height: 1.95;
    font-weight: 600;
    color: var(--np-ink);
    letter-spacing: .01em;
    padding: 4px 0 16px;
    border-bottom: 1px dashed var(--np-line-2);
    margin-bottom: 18px;
    background-image: linear-gradient(90deg, transparent 0, transparent 100%);
}
.np-qtext .blank {
    display: inline-block;
    min-width: 62px;
    border-bottom: 2px solid var(--np-blue);
    margin: 0 3px;
    vertical-align: -2px;
}
.np-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.np-ans-label { font-size: 13.5px; color: var(--np-ink-2); font-weight: 600; }
.np-ans-input {
    font: inherit;
    font-family: var(--np-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--np-blue-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--np-blue);
    border-radius: 0;
    padding: 2px 6px;
    width: 132px;
    text-align: center;
}
.np-ans-input:focus { outline: none; border-bottom-color: var(--np-red); }
.np-ans-input:disabled { color: var(--np-ink-2); border-bottom-style: dashed; }
.np-ans-unit { font-size: 13.5px; color: var(--np-ink-3); }
.np-ans-sep { font-size: 13.5px; color: var(--np-ink-3); }

.np-qfoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.np-qfoot .grow { flex: 1 1 auto; }
.np-hint { font-size: 12.5px; color: var(--np-ink-3); }

/* 判分反馈 */
.np-feedback { margin-top: 16px; border-radius: var(--np-r-sm); padding: 12px 14px; font-size: 14px; display: none; }
.np-feedback.show { display: block; }
.np-feedback.ok { background: var(--np-green-soft); border-left: 4px solid var(--np-green); }
.np-feedback.no { background: var(--np-red-soft); border-left: 4px solid var(--np-red); }
.np-feedback .fb-line { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.np-feedback.ok .fb-line { color: var(--np-green); }
.np-feedback.no .fb-line { color: var(--np-red); }
.np-feedback .fb-mark { font-family: var(--np-mono); font-size: 17px; }
.np-feedback .fb-txt { color: var(--np-ink-2); font-size: 13.5px; }
.np-feedback .fb-txt b { color: var(--np-ink); font-family: var(--np-mono); }

/* 三步解析 */
.np-steps { margin-top: 14px; border: 1px dashed var(--np-line-2); border-radius: var(--np-r-sm); background: var(--np-paper-2); }
.np-steps summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--np-blue-2);
    padding: 9px 14px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.np-steps summary::-webkit-details-marker { display: none; }
.np-steps summary::before { content: "▸"; font-size: 12px; transition: .2s; }
.np-steps[open] summary::before { transform: rotate(90deg); }
.np-step-list { list-style: none; margin: 0; padding: 0 14px 12px; counter-reset: npstep; }
.np-step-list li {
    position: relative;
    padding: 7px 0 7px 34px;
    font-size: 13.5px;
    color: var(--np-ink-2);
    border-top: 1px dotted var(--np-line-2);
    line-height: 1.7;
}
.np-step-list li:first-child { border-top: none; }
.np-step-list li::before {
    counter-increment: npstep;
    content: counter(npstep);
    position: absolute;
    left: 0;
    top: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--np-blue-soft);
    color: var(--np-blue-2);
    border: 1px solid var(--np-line-2);
    font-family: var(--np-mono);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.np-step-list li b { font-family: var(--np-mono); color: var(--np-blue-3); }
.np-step-list li em { font-style: normal; background: linear-gradient(transparent 60%, var(--np-yellow) 60%); padding: 0 2px; }

/* 空态 / 完成态 */
.np-empty { padding: 48px 24px; text-align: center; color: var(--np-ink-3); }
.np-empty .big { font-size: 40px; margin-bottom: 10px; opacity: .55; }
.np-empty h3 { font-size: 16px; color: var(--np-ink); margin: 0 0 6px; }
.np-empty p { font-size: 13.5px; margin-bottom: 16px; }

/* ============================ 成绩面板 ============================ */
.np-result { display: none; flex-direction: column; gap: 16px; }
.np-result.show { display: flex; }
.np-score {
    background: var(--np-surface);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r);
    box-shadow: var(--np-shadow);
    padding: 22px 24px;
}
.np-score-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.np-score-head h2 { font-size: 19px; font-weight: 800; margin: 0; }
.np-score-head p { margin: 0; font-size: 13px; color: var(--np-ink-3); }
.np-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.np-kpi { background: var(--np-paper-2); border: 1px solid var(--np-line); border-radius: var(--np-r-sm); padding: 12px 14px; }
.np-kpi span { display: block; font-size: 11.5px; color: var(--np-ink-3); margin-bottom: 3px; }
.np-kpi b { font-family: var(--np-mono); font-size: 24px; font-weight: 700; color: var(--np-ink); line-height: 1.2; }
.np-kpi b i { font-style: normal; font-size: 13px; color: var(--np-ink-3); margin-left: 2px; }
.np-kpi.is-good b { color: var(--np-green); }
.np-kpi.is-bad b { color: var(--np-red); }

.np-panel {
    background: var(--np-surface);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r);
    box-shadow: var(--np-shadow);
    padding: 20px 22px;
}
.np-panel-head { margin-bottom: 14px; }
.np-panel-head .k { font-size: 11.5px; letter-spacing: .1em; color: var(--np-blue); font-weight: 700; }
.np-panel-head h2 { font-size: 17.5px; font-weight: 800; margin: 3px 0 4px; }
.np-panel-head p { margin: 0; font-size: 13px; color: var(--np-ink-3); }

.np-table-wrap { overflow-x: auto; }
.np-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.np-table th, .np-table td { border-bottom: 1px solid var(--np-line); padding: 9px 10px; text-align: left; vertical-align: top; }
.np-table th { background: var(--np-paper-2); font-size: 12.5px; color: var(--np-ink-3); font-weight: 600; white-space: nowrap; }
.np-table td.num { font-family: var(--np-mono); white-space: nowrap; }
.np-table tr:last-child td { border-bottom: none; }
.np-table .is-right { color: var(--np-green); font-weight: 700; }
.np-table .is-wrong { color: var(--np-red); font-weight: 700; }
.np-table .q-cell { min-width: 220px; }

.np-wrong-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.np-wrong-item { border: 1px solid var(--np-line); border-left: 3px solid var(--np-red); border-radius: var(--np-r-sm); padding: 10px 13px; background: var(--np-paper-2); }
.np-wrong-item .q { font-size: 13.5px; color: var(--np-ink); line-height: 1.75; margin-bottom: 4px; }
.np-wrong-item .a { font-size: 12.5px; color: var(--np-ink-3); }
.np-wrong-item .a b { font-family: var(--np-mono); color: var(--np-red); }

.np-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================ 方法说明 / FAQ ============================ */
.np-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.np-method {
    background: var(--np-paper-2);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r-sm);
    padding: 13px 15px;
}
.np-method h3 { font-size: 14px; font-weight: 800; margin: 0 0 6px; color: var(--np-blue-2); }
.np-method p { font-size: 13px; color: var(--np-ink-2); margin: 0; line-height: 1.75; }
.np-method code {
    font-family: var(--np-mono);
    font-size: 12.5px;
    background: var(--np-blue-soft);
    color: var(--np-blue-3);
    border-radius: 4px;
    padding: 1px 5px;
}

.np-faq-list { display: flex; flex-direction: column; gap: 9px; }
.np-faq-item { border: 1px solid var(--np-line); border-radius: var(--np-r-sm); background: var(--np-paper-2); }
.np-faq-item summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--np-ink);
    padding: 11px 15px;
    list-style: none;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.np-faq-item summary::-webkit-details-marker { display: none; }
.np-faq-item summary::before { content: "Q"; font-family: var(--np-mono); color: var(--np-blue); font-size: 12px; margin-top: 2px; }
.np-faq-item[open] summary { border-bottom: 1px dashed var(--np-line-2); }
.np-faq-a { padding: 11px 15px 13px 30px; font-size: 13.5px; color: var(--np-ink-2); line-height: 1.85; }

.np-note { font-size: 12px; color: var(--np-ink-3); line-height: 1.8; padding: 10px 14px; background: var(--np-paper-2); border-radius: var(--np-r-sm); border-left: 3px solid var(--np-line-2); }

/* ============================ toast ============================ */
.np-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) translateY(14px);
    background: var(--np-ink);
    color: var(--np-surface);
    font-size: 13.5px;
    padding: 10px 20px;
    border-radius: 999px;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: .25s;
    z-index: 60;
    max-width: calc(100vw - 40px);
    text-align: center;
}
.np-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================ A4 打印 ============================ */
.np-sheet { display: none; }
.np-sheet-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #c3d5e4; padding-bottom: 8px; margin-bottom: 14px; }
.np-sheet-head h2 { font-size: 19px; margin: 0; color: #22303c; }
.np-sheet-head span { font-size: 12px; color: #5b6b79; }
.np-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.np-sheet-q { font-size: 12.5px; color: #22303c; line-height: 1.9; padding-bottom: 6px; border-bottom: 1px dotted #c3d5e4; }
.np-sheet-q .n { font-weight: 700; margin-right: 4px; }
.np-sheet-ans { margin-top: 14px; font-size: 12px; color: #22303c; line-height: 2; border-top: 1px dashed #c3d5e4; padding-top: 10px; }
.np-sheet-ans b { font-weight: 700; }
.np-sheet-note { font-size: 11px; color: #6b7b89; margin-top: 12px; line-height: 1.7; }

@media print {
    @page { size: A4; margin: 14mm 12mm; }
    body { background: #fff !important; }
    .np-hero, .np-presets, .np-errbar, .np-layout, .np-toast, .np-result,
    .detail-breadcrumb, .nav-header, .site-header, .footer, .site-footer,
    .back-to-top, #clicaptcha-container, #evadeFab, #navMask, .np-comments {
        display: none !important;
    }
    .np-sheet { display: block !important; }
    .np-page { padding: 0 !important; }
}

/* ============================ 响应式 ============================ */
@media (max-width: 1080px) {
    .np-layout { grid-template-columns: minmax(0, 1fr); }
    .np-rail { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
    .np-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .np-actions .np-btn { flex: 1 1 140px; }
    .np-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .np-board { max-width: 520px; }
}
@media (max-width: 720px) {
    .np-hero { padding: 22px 18px 20px; }
    .np-hero::after { display: none; }
    .np-hero h1 { font-size: 25px; }
    .np-lead { font-size: 14.5px; }
    .np-quiz { padding: 18px 16px 20px; }
    .np-qtext { font-size: 17px; line-height: 1.9; }
    .np-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .np-board-main .num { font-size: 40px; }
    .np-stage-head { padding: 11px 14px; gap: 10px; }
    .np-progress { padding: 10px 14px 0; }
    .np-dot { width: 20px; height: 20px; }
    .np-card, .np-panel, .np-score { padding: 16px; }
    .np-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .np-sheet-grid { grid-template-columns: minmax(0, 1fr); }
    .np-ans-input { width: 104px; font-size: 18px; }
    .np-qfoot .np-btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
    .np-hero h1 { font-size: 22px; }
    .np-chips li { font-size: 12px; }
}