/* ==========================================================================
 * 抽屉原理与最不利原则练习 /tool/pigeonhole-drill
 * 视觉主题：抽屉柜 · 靛蓝木纹
 *   靛蓝横幅 + 原木色抽屉格 + 朱橙「最坏情况」标记
 *   与站内其它工具区别：作业本（湖蓝）、卷宗（黛青）、票据（朱砂）都不同
 *   抽屉格是本页的核心教具：颜色球逐个放进抽屉，直观看到「最不利 + 1」
 * ========================================================================== */

:root {
    --pg-paper: #f8f6f2;
    --pg-surface: #ffffff;
    --pg-surface-2: #f3f0ea;
    --pg-ink: #232838;
    --pg-ink-2: #4c5366;
    --pg-ink-3: #7d8496;
    --pg-line: #e4dfd6;
    --pg-line-2: #cfc8bb;
    --pg-indigo: #3b4a8c;
    --pg-indigo-2: #2a3466;
    --pg-indigo-3: #1d2549;
    --pg-indigo-soft: #e9ecf8;
    --pg-wood: #b98b57;
    --pg-wood-2: #9a6f40;
    --pg-wood-soft: #f4eadd;
    --pg-orange: #d9743a;
    --pg-orange-soft: #fbeee5;
    --pg-green: #2c7a5b;
    --pg-green-soft: #e6f4ee;
    --pg-red: #c4453a;
    --pg-red-soft: #fcebe9;
    --pg-r: 16px;
    --pg-r-sm: 10px;
    --pg-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    --pg-shadow: 0 2px 12px rgba(35, 40, 56, .07);
    --pg-shadow-lg: 0 20px 46px -28px rgba(29, 37, 73, .45);
    /* 横幅专用深色：不跟随主题变亮，保证白字对比度始终达标 */
    --pg-hero-1: #2a3466;
    --pg-hero-2: #3b4a8c;
    --pg-hero-3: #4c5aa0;
}

:root[data-theme="dark"] {
    --pg-paper: #101218;
    --pg-surface: #181b24;
    --pg-surface-2: #1f2330;
    --pg-ink: #e7e9f2;
    --pg-ink-2: #b7bccd;
    --pg-ink-3: #868da0;
    --pg-line: #2a2f3d;
    --pg-line-2: #3a4152;
    --pg-indigo: #8b9ce8;
    --pg-indigo-2: #a9b7f1;
    --pg-indigo-3: #c8d2f7;
    --pg-indigo-soft: rgba(139, 156, 232, .14);
    --pg-wood: #c99a63;
    --pg-wood-2: #e0b184;
    --pg-wood-soft: rgba(201, 154, 99, .13);
    --pg-orange: #e8935f;
    --pg-orange-soft: rgba(232, 147, 95, .14);
    --pg-green: #63c39d;
    --pg-green-soft: rgba(99, 195, 157, .14);
    --pg-red: #ef8a80;
    --pg-red-soft: rgba(239, 138, 128, .14);
    --pg-shadow: 0 2px 12px rgba(0, 0, 0, .4);
    --pg-shadow-lg: 0 20px 46px -28px rgba(0, 0, 0, .9);
    --pg-hero-1: #151a31;
    --pg-hero-2: #202850;
    --pg-hero-3: #2c3768;
}

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

/* ============================ 首屏横幅 ============================ */
.pg-hero {
    position: relative;
    background:
        radial-gradient(120% 140% at 88% 8%, rgba(185, 139, 87, .32) 0%, rgba(185, 139, 87, 0) 55%),
        linear-gradient(135deg, var(--pg-hero-1) 0%, var(--pg-hero-2) 62%, var(--pg-hero-3) 100%);
    border-radius: 20px;
    padding: 30px 32px 28px;
    color: #f4f5fb;
    box-shadow: var(--pg-shadow-lg);
    overflow: hidden;
    margin-bottom: 18px;
}
/* 抽屉柜的横线纹理 */
.pg-hero::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 26px);
    pointer-events: none;
}
.pg-hero::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 26px solid rgba(255, 255, 255, .05);
    pointer-events: none;
}
.pg-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    align-items: center;
}
.pg-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #ffe6cf;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 4px 13px;
    margin-bottom: 13px;
}
.pg-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ffb877; }
.pg-hero h1 {
    font-size: 31px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 12px;
    color: #fff;
}
.pg-lead {
    font-size: 15.5px;
    line-height: 1.85;
    color: rgba(244, 245, 251, .92);
    margin-bottom: 16px;
    max-width: 60ch;
}
.pg-lead b { color: #fff; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.pg-chips li {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .94);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 3px 11px;
}

/* 横幅右侧：起手按钮与今日状态 */
.pg-launch {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--pg-r);
    padding: 16px 16px 14px;
    backdrop-filter: blur(2px);
}
.pg-launch-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pg-launch-row span { font-size: 12px; color: rgba(255, 255, 255, .72); letter-spacing: .06em; }
.pg-launch-row strong { font-size: 13px; color: #fff; }
.pg-launch-num {
    font-family: var(--pg-mono);
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    color: #ffd9b8;
    letter-spacing: -.02em;
}
.pg-launch-num i {
    display: inline-block;
    font-style: normal;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
    margin-left: 10px;
    letter-spacing: .04em;
    vertical-align: 6px;
}
.pg-launch-metrics { display: flex; gap: 14px; margin: 10px 0 14px; }
.pg-launch-metrics div { font-size: 11.5px; color: rgba(255, 255, 255, .7); }
.pg-launch-metrics b {
    display: block;
    font-family: var(--pg-mono);
    font-size: 16px;
    color: #fff;
    font-weight: 700;
}
.pg-launch-btn {
    width: 100%;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 11px 14px;
    border-radius: var(--pg-r-sm);
    border: 1px solid #ffd9b8;
    background: #ffd9b8;
    color: #2a3466;
    cursor: pointer;
    transition: .16s;
}
.pg-launch-btn:hover { background: #fff; border-color: #fff; transform: translateY(-1px); }

/* ============================ 控制台 ============================ */
.pg-console {
    background: var(--pg-surface);
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r);
    box-shadow: var(--pg-shadow);
    padding: 16px 18px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 22px;
    align-items: center;
}
.pg-console-main { min-width: 0; }
.pg-console-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--pg-ink-3);
    margin-bottom: 7px;
}
.pg-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.pg-tab {
    font: inherit;
    font-size: 13px;
    color: var(--pg-ink-2);
    background: var(--pg-surface-2);
    border: 1px solid var(--pg-line);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    transition: .16s;
    white-space: nowrap;
}
.pg-tab:hover { border-color: var(--pg-indigo); color: var(--pg-indigo); }
.pg-tab.active { background: var(--pg-indigo); border-color: var(--pg-indigo); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .pg-tab.active { background: #4a5aa8; border-color: #4a5aa8; color: #fff; }

.pg-console-side { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pg-field { display: block; min-width: 108px; }
.pg-field > span {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pg-ink-3);
    margin-bottom: 5px;
}
.pg-input, .pg-select {
    font: inherit;
    font-size: 13.5px;
    color: var(--pg-ink);
    background: var(--pg-surface-2);
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-r-sm);
    padding: 7px 10px;
    width: 100%;
}
.pg-input { max-width: 92px; }
.pg-input:focus, .pg-select:focus {
    outline: none;
    border-color: var(--pg-indigo);
    background: var(--pg-surface);
    box-shadow: 0 0 0 3px var(--pg-indigo-soft);
}
.pg-console-actions { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; padding-top: 12px; border-top: 1px dashed var(--pg-line); }
.pg-switch-pair { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.pg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pg-ink-2); cursor: pointer; }
.pg-check input { width: 15px; height: 15px; accent-color: var(--pg-indigo); cursor: pointer; }

/* ============================ 按钮 ============================ */
.pg-btn {
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--pg-r-sm);
    border: 1px solid var(--pg-line-2);
    background: var(--pg-surface);
    color: var(--pg-ink);
    cursor: pointer;
    transition: .16s;
}
.pg-btn:hover { border-color: var(--pg-indigo); color: var(--pg-indigo); }
.pg-btn.is-primary {
    background: var(--pg-indigo);
    border-color: var(--pg-indigo);
    color: #fff;
    box-shadow: 0 10px 22px -14px var(--pg-indigo);
}
.pg-btn.is-primary:hover { background: var(--pg-indigo-2); border-color: var(--pg-indigo-2); color: #fff; transform: translateY(-1px); }
.pg-btn.is-ghost { background: transparent; color: var(--pg-ink-3); }
.pg-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
:root[data-theme="dark"] .pg-btn.is-primary { background: #4a5aa8; border-color: #4a5aa8; color: #fff; }

.pg-errbar {
    background: var(--pg-red-soft);
    border: 1px solid var(--pg-red);
    border-left-width: 4px;
    color: var(--pg-red);
    border-radius: var(--pg-r-sm);
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 14px;
}

/* ============================ 工作区（题卡 | 抽屉） ============================ */
.pg-work {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}
.pg-card {
    background: var(--pg-surface);
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r);
    box-shadow: var(--pg-shadow);
    overflow: hidden;
}
.pg-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: var(--pg-surface-2);
    border-bottom: 1px solid var(--pg-line);
}
.pg-card-head h2 { font-size: 14px; font-weight: 800; margin: 0; color: var(--pg-ink); }
.pg-card-head .grow { flex: 1 1 auto; }
.pg-pill {
    font-family: var(--pg-mono);
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--pg-indigo-soft);
    color: var(--pg-indigo-2);
}
.pg-pill.is-done { background: var(--pg-green-soft); color: var(--pg-green); }
.pg-count { font-size: 12px; color: var(--pg-ink-3); }
.pg-count b { font-family: var(--pg-mono); font-size: 14px; color: var(--pg-ink); }

/* 题面 */
.pg-quiz { padding: 20px 22px 22px; }
.pg-qmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pg-qno {
    font-family: var(--pg-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: var(--pg-indigo);
    border-radius: 6px;
    padding: 2px 8px;
}
.pg-qtype { font-size: 12.5px; color: var(--pg-ink-3); }
.pg-qtext {
    font-size: 18px;
    line-height: 1.9;
    font-weight: 600;
    color: var(--pg-ink);
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--pg-line-2);
    margin-bottom: 16px;
}
.pg-qtext code {
    font-family: var(--pg-mono);
    font-size: .95em;
    background: var(--pg-wood-soft);
    color: var(--pg-wood-2);
    border-radius: 4px;
    padding: 1px 5px;
    margin: 0 2px;
}

/* 选项 */
.pg-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.pg-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font: inherit;
    font-size: 14.5px;
    color: var(--pg-ink);
    background: var(--pg-surface-2);
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-r-sm);
    padding: 10px 13px;
    cursor: pointer;
    transition: .15s;
}
.pg-opt:hover:not(:disabled) { border-color: var(--pg-indigo); background: var(--pg-surface); transform: translateY(-1px); }
.pg-opt .k {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--pg-surface);
    border: 1px solid var(--pg-line-2);
    font-family: var(--pg-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--pg-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pg-opt .v { font-family: var(--pg-mono); font-weight: 700; }
.pg-opt.is-picked { border-color: var(--pg-indigo); background: var(--pg-indigo-soft); }
.pg-opt.is-picked .k { background: var(--pg-indigo); border-color: var(--pg-indigo); color: #fff; }
.pg-opt.is-right { border-color: var(--pg-green); background: var(--pg-green-soft); }
.pg-opt.is-right .k { background: var(--pg-green); border-color: var(--pg-green); color: #fff; }
.pg-opt.is-wrong { border-color: var(--pg-red); background: var(--pg-red-soft); }
.pg-opt.is-wrong .k { background: var(--pg-red); border-color: var(--pg-red); color: #fff; }
.pg-opt:disabled { cursor: default; }

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

/* 反馈 */
.pg-feedback { display: none; margin-top: 14px; border-radius: var(--pg-r-sm); padding: 11px 14px; font-size: 13.5px; }
.pg-feedback.show { display: block; }
.pg-feedback.ok { background: var(--pg-green-soft); border-left: 4px solid var(--pg-green); }
.pg-feedback.no { background: var(--pg-red-soft); border-left: 4px solid var(--pg-red); }
.pg-feedback .line { font-weight: 700; margin-bottom: 3px; display: flex; align-items: center; gap: 7px; }
.pg-feedback.ok .line { color: var(--pg-green); }
.pg-feedback.no .line { color: var(--pg-red); }

/* 解析 */
.pg-solution { margin-top: 14px; border: 1px solid var(--pg-line); border-radius: var(--pg-r-sm); background: var(--pg-surface-2); }
.pg-solution summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pg-indigo-2);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
}
.pg-solution summary::-webkit-details-marker { display: none; }
.pg-solution summary::before { content: "+"; font-family: var(--pg-mono); font-size: 14px; }
.pg-solution[open] summary::before { content: "−"; }
.pg-solution[open] summary { border-bottom: 1px dashed var(--pg-line-2); }
.pg-sol-body { padding: 12px 14px 13px; font-size: 13.5px; color: var(--pg-ink-2); line-height: 1.85; }
.pg-sol-body b { font-family: var(--pg-mono); color: var(--pg-indigo-2); }
.pg-sol-body .key { background: var(--pg-orange-soft); color: var(--pg-orange); font-weight: 700; padding: 0 3px; border-radius: 3px; }

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

/* ============================ 抽屉演示 ============================ */
.pg-drawer-card { position: sticky; top: 14px; }
.pg-drawer-body { padding: 18px 20px 20px; }
.pg-drawer-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pg-drawer-title h3 { font-size: 13.5px; font-weight: 800; margin: 0; color: var(--pg-ink); }
.pg-drawer-title span { font-size: 11.5px; color: var(--pg-ink-3); }

.pg-cabinet {
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .025) 0, rgba(0, 0, 0, .025) 1px, transparent 1px, transparent 12px),
        var(--pg-wood-soft);
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-r-sm);
    padding: 12px;
    min-height: 132px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 9px;
    align-content: start;
    margin-bottom: 12px;
}
.pg-empty-drawer { grid-column: 1 / -1; text-align: center; color: var(--pg-ink-3); font-size: 12.5px; padding: 26px 8px; line-height: 1.7; }

.pg-drawer {
    background: var(--pg-surface);
    border: 1px solid var(--pg-wood);
    border-top-width: 5px;
    border-radius: 8px;
    padding: 7px 6px 8px;
    transition: .2s;
    position: relative;
}
.pg-drawer::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--pg-wood-2);
}
.pg-drawer:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -12px var(--pg-wood-2); }
.pg-drawer.is-full { border-color: var(--pg-orange); border-top-color: var(--pg-orange); }
.pg-drawer-name {
    font-size: 10.5px;
    color: var(--pg-ink-3);
    text-align: center;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-balls { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 16px; }
.pg-ball {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--pg-indigo);
    opacity: .85;
    animation: pgPop .22s ease-out;
}
.pg-ball.is-key { background: var(--pg-orange); box-shadow: 0 0 0 2px var(--pg-orange-soft); }
.pg-drawer-num {
    position: absolute;
    top: 2px;
    right: 4px;
    font-family: var(--pg-mono);
    font-size: 9.5px;
    color: var(--pg-ink-3);
}
@keyframes pgPop {
    from { transform: scale(.2); opacity: 0; }
    to { transform: scale(1); opacity: .85; }
}

.pg-demo-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pg-demo-steps li {
    font-size: 12.5px;
    color: var(--pg-ink-2);
    line-height: 1.7;
    padding-left: 20px;
    position: relative;
}
.pg-demo-steps li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pg-line-2);
}
.pg-demo-steps li.is-on { color: var(--pg-ink); font-weight: 600; }
.pg-demo-steps li.is-on::before { background: var(--pg-orange); }
.pg-demo-steps li.is-done::before { background: var(--pg-green); }
.pg-demo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-demo-actions .pg-btn { flex: 1 1 auto; }
.pg-demo-note { font-size: 11.5px; color: var(--pg-ink-3); margin: 10px 0 0; line-height: 1.7; }

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

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

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

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

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

.pg-faq-list { display: flex; flex-direction: column; gap: 9px; }
.pg-faq-item { border: 1px solid var(--pg-line); border-radius: var(--pg-r-sm); background: var(--pg-surface-2); }
.pg-faq-item summary {
    cursor: pointer;
    padding: 11px 14px;
    font-size: 13.8px;
    font-weight: 700;
    color: var(--pg-ink);
    list-style: none;
    display: flex;
    gap: 8px;
}
.pg-faq-item summary::-webkit-details-marker { display: none; }
.pg-faq-item summary::before { content: "?"; font-family: var(--pg-mono); color: var(--pg-indigo); font-size: 12px; }
.pg-faq-item[open] summary { border-bottom: 1px dashed var(--pg-line-2); }
.pg-faq-a { padding: 11px 14px 12px 29px; font-size: 13.4px; color: var(--pg-ink-2); line-height: 1.85; }

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

/* ============================ toast ============================ */
.pg-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) translateY(14px);
    background: var(--pg-ink);
    color: var(--pg-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;
}
.pg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================ 打印 ============================ */
.pg-sheet { display: none; }
.pg-sheet-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #cfc8bb; padding-bottom: 8px; margin-bottom: 12px; }
.pg-sheet-head h2 { font-size: 19px; margin: 0; color: #232838; }
.pg-sheet-head span { font-size: 12px; color: #5c6273; }
.pg-sheet-item { font-size: 12.5px; color: #232838; line-height: 1.95; padding-bottom: 7px; border-bottom: 1px dotted #cfc8bb; margin-bottom: 7px; }
.pg-sheet-item .n { font-weight: 700; margin-right: 4px; }
.pg-sheet-ans { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #cfc8bb; font-size: 12px; line-height: 2; color: #232838; }
.pg-sheet-note { font-size: 11px; color: #6b7284; margin-top: 11px; line-height: 1.7; }

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

/* ============================ 响应式 ============================ */
@media (max-width: 1080px) {
    .pg-work { grid-template-columns: minmax(0, 1fr); }
    .pg-drawer-card { position: static; }
    .pg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .pg-launch { max-width: 420px; }
}
@media (max-width: 860px) {
    .pg-console { grid-template-columns: minmax(0, 1fr); }
    .pg-console-side { justify-content: flex-start; }
    .pg-switch-pair { margin-left: 0; }
    .pg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pg-hero { padding: 22px 18px 20px; }
    .pg-hero h1 { font-size: 25px; }
    .pg-lead { font-size: 14.5px; }
    .pg-quiz { padding: 16px 15px 18px; }
    .pg-qtext { font-size: 16.5px; line-height: 1.85; }
    .pg-options { grid-template-columns: minmax(0, 1fr); }
    .pg-panel, .pg-score { padding: 16px; }
    .pg-drawer-body { padding: 14px; }
    .pg-cabinet { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); padding: 10px; }
    .pg-dots { padding: 10px 15px 0; }
    .pg-dot { width: 19px; height: 19px; }
    .pg-launch-num { font-size: 34px; }
    .pg-input { max-width: 100%; }
    .pg-field { min-width: 96px; flex: 1 1 96px; }
    .pg-console-actions .pg-btn { flex: 1 1 auto; }
}