/* =====================================================================
 * N14 / 19 · 四角号码查字 —— 独立皮肤「古籍索引卡」
 * 米黄档案纸 + 朱砂印章；米字格取码盘、竖排口诀卡与十类笔形索引卡。
 * 主题：只消费公共导航写入的 <html data-theme>，不自建开关。
 * ===================================================================== */

.fc-page {
    --nx-bg:        #f7f2e6;
    --nx-bg-2:      #f0e9d9;
    --nx-surface:   #fffcf4;
    --nx-surface-2: #f6f0e2;
    --nx-surface-3: #ece3cf;
    --nx-ink:       #2a2a24;
    --nx-ink-2:     #5f5a4c;
    --nx-ink-3:     #968c76;
    --nx-line:      #e0d5bd;
    --nx-line-2:    #ede5d4;
    --nx-a:         #a8342a;
    --nx-b:         #2f5566;
    --nx-tint:      #f8e8e2;
    --nx-deep:      #8b281f;
    --tsk-card: #fffcf4; --tsk-line: #e0d5bd; --tsk-faint: #968c76; --tsk-sub: #5f5a4c; --tsk-ink: #2a2a24;
    background-image: repeating-linear-gradient(90deg, rgba(168, 52, 42, .018) 0 1px, transparent 1px 7px);
}
:root[data-theme="dark"] .fc-page {
    --nx-bg:        #121418;
    --nx-bg-2:      #171b20;
    --nx-surface:   #1c2127;
    --nx-surface-2: #232a32;
    --nx-surface-3: #2c343e;
    --nx-ink:       #f1ece0;
    --nx-ink-2:     #b7ae9c;
    --nx-ink-3:     #8c8473;
    --nx-line:      #333c47;
    --nx-line-2:    #262e37;
    --nx-a:         #e08b7e;
    --nx-b:         #9fb6c9;
    --nx-tint:      rgba(224, 139, 126, .14);
    --nx-deep:      #eda99e;
    --tsk-card: #1c2127; --tsk-line: #333c47; --tsk-faint: #8c8473; --tsk-sub: #b7ae9c; --tsk-ink: #f1ece0;
    background-image: repeating-linear-gradient(90deg, rgba(224, 139, 126, .02) 0 1px, transparent 1px 7px);
}

.fc-page .n14-hero h1 em { color: var(--nx-a); }
.fc-hero { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }

/* 口诀卡 + 朱砂印章 */
.fc-motto {
    position: relative; margin-top: 22px; padding: 18px 24px;
    background: var(--nx-surface); border: 1px solid var(--nx-line);
    border-left: 4px solid var(--nx-a); border-radius: 12px;
    box-shadow: var(--nx-sh-sm); max-width: 460px;
}
.fc-motto__cap { font-family: var(--nx-mono); font-size: 11px; letter-spacing: .16em; color: var(--nx-ink-3); margin-bottom: 10px; }
.fc-motto p { font-family: var(--nx-display); font-size: 21px; line-height: 2; font-weight: 700; color: var(--nx-ink); margin: 0; letter-spacing: .06em; }
.fc-stamp {
    position: absolute; right: 16px; top: 16px; width: 48px; height: 48px;
    display: grid; place-items: center; border: 2px solid var(--nx-a); border-radius: 6px;
    color: var(--nx-a); font-size: 15px; font-weight: 800; letter-spacing: .1em;
    transform: rotate(-9deg); opacity: .72; writing-mode: vertical-rl;
}
.fc-caveat { margin-top: 14px; max-width: 56ch; }

/* 米字格取码盘 */
.fc-console { border-top: 3px solid var(--nx-a); }
.fc-grid-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; align-items: start; }
.fc-grid {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    padding: 8px; background: var(--nx-surface-2); border: 2px solid var(--nx-line); border-radius: 10px;
}
.fc-grid__cross { position: absolute; inset: 8px; pointer-events: none; }
.fc-grid__cross::before, .fc-grid__cross::after { content: ""; position: absolute; background: var(--nx-a); opacity: .34; }
.fc-grid__cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-.5px); }
.fc-grid__cross::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-.5px); }
.fc-corner {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 92px; background: var(--nx-surface); border: 1px dashed var(--nx-line);
    border-radius: 7px; cursor: pointer; color: var(--nx-ink); transition: background .14s, border-color .14s;
}
.fc-corner:hover { border-color: var(--nx-a); }
.fc-corner[aria-pressed="true"] { border: 2px solid var(--nx-a); background: var(--nx-tint); }
.fc-corner span { font-size: 11px; color: var(--nx-ink-3); letter-spacing: .1em; }
.fc-corner b { font-family: var(--nx-mono); font-size: 34px; line-height: 1.25; color: var(--nx-a); font-weight: 700; }
.fc-corner em { font-style: normal; font-size: 11.5px; color: var(--nx-ink-2); }
.fc-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.fc-picker button {
    font-family: var(--nx-mono); font-size: 16px; font-weight: 700; padding: 7px 0;
    background: var(--nx-surface-2); border: 1px solid var(--nx-line); border-radius: 7px;
    color: var(--nx-ink); cursor: pointer;
}
.fc-picker button:hover { border-color: var(--nx-a); }
.fc-picker button[aria-pressed="true"] { background: var(--nx-a); color: #fff; border-color: var(--nx-a); }
.fc-attach { margin-top: 14px; }
.fc-number {
    margin-top: 16px; padding: 15px 18px; background: var(--nx-surface-2);
    border: 1px solid var(--nx-line); border-radius: 10px; text-align: center;
}
.fc-number small { display: block; font-family: var(--nx-mono); font-size: 11px; letter-spacing: .16em; color: var(--nx-ink-3); text-transform: uppercase; }
.fc-number b { display: block; font-family: var(--nx-mono); font-size: clamp(36px, 5vw, 54px); line-height: 1.25; color: var(--nx-a); letter-spacing: .14em; }
.fc-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.fc-reasons div { background: var(--nx-surface-2); border: 1px solid var(--nx-line); border-radius: 8px; padding: 8px 9px; font-size: 12px; line-height: 1.6; }
.fc-reasons b { display: block; font-family: var(--nx-mono); color: var(--nx-ink); }

/* 十类笔形卡 */
.fc-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 11px; }
.fc-shape {
    display: grid; grid-template-columns: 46px 1fr; gap: 11px; align-items: center; text-align: left;
    background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 12px;
    padding: 12px 13px; cursor: pointer; transition: transform .13s, border-color .13s;
}
.fc-shape:hover { transform: translateY(-2px); border-color: var(--nx-a); }
.fc-shape__code { font-family: var(--nx-mono); font-size: 30px; font-weight: 700; color: var(--nx-a); text-align: center; }
.fc-shape__glyph { font-size: 21px; color: var(--nx-b); }
.fc-shape b { display: block; font-size: 14px; color: var(--nx-ink); }
.fc-shape span { font-size: 11.5px; color: var(--nx-ink-3); line-height: 1.55; }

.fc-split { align-items: start; }
.fc-batchmsg { margin-top: 14px; }
.fc-batchwrap { margin-top: 16px; max-height: 340px; overflow: auto; }
.fc-writes { display: grid; gap: 7px; }
.fc-writes div { display: flex; justify-content: space-between; gap: 10px; background: var(--nx-surface-2); border: 1px solid var(--nx-line); border-radius: 8px; padding: 8px 11px; font-size: 13px; }
.fc-writes b { font-family: var(--nx-mono); color: var(--nx-ink); }
.fc-writes span { color: var(--nx-ink-3); }
.fc-steps { align-items: start; }
.fc-stepno { display: inline-block; font-family: var(--nx-mono); font-size: 12px; color: var(--nx-a); letter-spacing: .14em; margin-bottom: 9px; }
.fc-steps h3 { font-size: 18px; margin-bottom: 8px; }
.fc-steps p { font-size: 13.5px; line-height: 1.85; }
.fc-note { margin-top: 16px; }

@media (max-width: 980px) {
    .fc-hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .fc-grid-wrap { grid-template-columns: 1fr; }
    .fc-picker { grid-template-columns: repeat(5, 1fr); }
    .fc-reasons { grid-template-columns: repeat(2, 1fr); }
    .fc-shapes { grid-template-columns: 1fr 1fr; }
    .fc-corner { min-height: 76px; }
}