/* =====================================================================
 * N14 / 18 · 注音符号表 —— 独立皮肤「粉笔绿板挂图」
 * 一整面带木框的黑板：左侧 37+5 个粉笔按键，右侧贴一张纸卡显示拼读结果。
 * 主题：只消费公共导航写入的 <html data-theme>，黑板在深浅两态下均保持粉笔字。
 * ===================================================================== */

.bp-page {
    --nx-bg:        #f2f7f3;
    --nx-bg-2:      #e8f1ea;
    --nx-surface:   #ffffff;
    --nx-surface-2: #f2f7f3;
    --nx-surface-3: #e3eee6;
    --nx-ink:       #12261d;
    --nx-ink-2:     #436050;
    --nx-ink-3:     #7d9887;
    --nx-line:      #d8e7dc;
    --nx-line-2:    #eaf2ec;
    --nx-a:         #1d6b52;
    --nx-b:         #c07a2d;
    --nx-tint:      #e2f1e8;
    --nx-deep:      #14503d;
    --bp-board:     #1d4b3c;
    --bp-board-2:   #245a48;
    --bp-chalk:     #f2f7ee;
    --bp-frame:     #a3703c;
    --tsk-card: #ffffff; --tsk-line: #d8e7dc; --tsk-faint: #7d9887; --tsk-sub: #436050; --tsk-ink: #12261d;
}
:root[data-theme="dark"] .bp-page {
    --nx-bg:        #0b1512;
    --nx-bg-2:      #101d18;
    --nx-surface:   #15241d;
    --nx-surface-2: #1b3027;
    --nx-surface-3: #244035;
    --nx-ink:       #eef6ef;
    --nx-ink-2:     #acc4b3;
    --nx-ink-3:     #7f9b8c;
    --nx-line:      #2a4035;
    --nx-line-2:    #20352b;
    --nx-a:         #6cc49b;
    --nx-b:         #e5a85c;
    --nx-tint:      rgba(108, 196, 155, .16);
    --nx-deep:      #a1dfc0;
    --bp-board:     #0f2a22;
    --bp-board-2:   #174034;
    --bp-chalk:     #f2f7ee;
    --bp-frame:     #7a5330;
    --tsk-card: #15241d; --tsk-line: #2a4035; --tsk-faint: #7f9b8c; --tsk-sub: #acc4b3; --tsk-ink: #eef6ef;
}

.bp-page .n14-hero h1 em { color: var(--nx-a); }
.bp-page .n14-chips { margin-bottom: 26px; }

/* 木框黑板：本页主视觉 */
.bp-board {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .72fr);
    gap: 16px; padding: 18px;
    background: var(--bp-board);
    border: 9px solid var(--bp-frame); border-radius: 18px;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .18), var(--nx-sh-lift);
    color: var(--bp-chalk);
}
.bp-board__cap { font-family: var(--nx-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 247, 238, .62); margin-bottom: 16px; }
.bp-keyboard { min-width: 0; }
.bp-group { margin-bottom: 15px; }
.bp-group--inline { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: 16px; }
.bp-group__label { font-size: 12.5px; font-weight: 750; color: rgba(242, 247, 238, .9); margin-bottom: 8px; letter-spacing: .08em; }
.bp-group__label span { font-family: var(--nx-mono); color: var(--nx-b); }
.bp-group__label small { font-weight: 400; opacity: .7; margin-left: 8px; font-size: 11px; }
.bp-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.bp-keys--sm { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.bp-keys--tone { grid-template-columns: repeat(5, minmax(44px, 1fr)); }
.bp-key {
    min-height: 43px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px; color: var(--bp-chalk); cursor: pointer;
    font-family: var(--nx-sans); font-size: 22px; line-height: 1.15;
    transition: background .13s, transform .13s, border-color .13s;
}
.bp-key small { font-family: var(--nx-mono); font-size: 9.5px; opacity: .7; letter-spacing: 0; }
.bp-key:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.bp-key[aria-pressed="true"] { background: var(--nx-b); border-color: var(--nx-b); color: #1b241c; }
.bp-key[aria-pressed="true"] small { opacity: .85; }
.bp-board__foot { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .22); }
.bp-board__foot .n14-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: var(--bp-chalk); }
.bp-board__foot .n14-btn:hover { background: rgba(255, 255, 255, .22); color: var(--bp-chalk); border-color: var(--nx-b); }
.bp-board__foot .n14-btn--primary { background: var(--nx-b); border-color: var(--nx-b); color: #1b241c; }

/* 右侧纸卡 */
.bp-output {
    background: var(--nx-surface); color: var(--nx-ink-2);
    border-radius: 12px; padding: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    display: flex; flex-direction: column; min-width: 0;
}
.bp-output__cap { font-family: var(--nx-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--nx-ink-3); }
.bp-output__z { font-size: clamp(34px, 4.2vw, 52px); font-weight: 750; color: var(--nx-ink); line-height: 1.35; margin: 14px 0 4px; word-break: break-all; letter-spacing: .04em; }
.bp-output__py { font-family: var(--nx-mono); font-size: 26px; font-weight: 700; color: var(--nx-a); margin-bottom: 12px; word-break: break-word; }
.bp-output__meta { font-size: 13px; line-height: 1.8; color: var(--nx-ink-2); border-top: 1px solid var(--nx-line-2); padding-top: 12px; }
.bp-output__meta b { color: var(--nx-ink); }
.bp-output__parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bp-output__parts span { font-size: 12px; background: var(--nx-surface-2); border: 1px solid var(--nx-line); border-radius: 7px; padding: 3px 8px; }
.bp-output .n14-btn-row { margin-top: auto; padding-top: 14px; }
.bp-note { margin-top: 16px; max-width: 80ch; }

.bp-search { max-width: 320px; }
.bp-tablewrap { max-height: 420px; overflow: auto; margin-top: 16px; }
.bp-split { align-items: start; }
.bp-textarea { font-size: 20px; line-height: 1.9; letter-spacing: .06em; }
.bp-batchout { max-height: 230px; overflow: auto; display: grid; gap: 7px; }
.bp-batchrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: var(--nx-surface-2); border: 1px solid var(--nx-line); border-radius: 9px; padding: 8px 12px; font-size: 14px; }
.bp-batchrow b { color: var(--nx-a); font-family: var(--nx-mono); }
.bp-batchrow--miss b { color: var(--nx-err); }
.bp-page .n14-table tbody tr { cursor: pointer; }
.bp-page #bpRows .bp-z { font-size: 19px; font-weight: 700; color: var(--nx-ink); letter-spacing: .06em; }

@media (max-width: 980px) {
    .bp-board { grid-template-columns: 1fr; }
    .bp-output__z { font-size: 38px; }
}
@media (max-width: 640px) {
    .bp-board { padding: 12px; border-width: 6px; }
    .bp-keys { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
    .bp-key { min-height: 38px; font-size: 19px; }
    .bp-group--inline { grid-template-columns: 1fr; }
    .bp-search { max-width: 100%; }
}