/* =====================================================================
 * N14 / 20 · 仓颉输入法对照 —— 独立皮肤「琥珀终端」
 * 全宽终端控制台：窗口栏 + 输入行 + QWERTY 字根键盘 + 拆码结果 + 状态行。
 * 主题：只消费公共导航写入的 <html data-theme>，终端在两态下保持琥珀字。
 * ===================================================================== */

.cj-page {
    --nx-bg:        #f5f7f9;
    --nx-bg-2:      #ebeff4;
    --nx-surface:   #ffffff;
    --nx-surface-2: #f2f5f8;
    --nx-surface-3: #e6ebf1;
    --nx-ink:       #16202b;
    --nx-ink-2:     #4a5a69;
    --nx-ink-3:     #8795a3;
    --nx-line:      #dce3ea;
    --nx-line-2:    #eaf0f5;
    --nx-a:         #a86a12;
    --nx-b:         #147d74;
    --nx-tint:      #faf0dd;
    --nx-deep:      #85510b;
    --cj-term:      #0e1319;
    --cj-term-2:    #151d26;
    --cj-amber:     #e0a95a;
    --tsk-card: #ffffff; --tsk-line: #dce3ea; --tsk-faint: #8795a3; --tsk-sub: #4a5a69; --tsk-ink: #16202b;
}
:root[data-theme="dark"] .cj-page {
    --nx-bg:        #0a0e13;
    --nx-bg-2:      #0f151c;
    --nx-surface:   #151d26;
    --nx-surface-2: #1b2530;
    --nx-surface-3: #25313e;
    --nx-ink:       #eef3f8;
    --nx-ink-2:     #aebdca;
    --nx-ink-3:     #7d8b99;
    --nx-line:      #2b3947;
    --nx-line-2:    #212d39;
    --nx-a:         #e0a95a;
    --nx-b:         #5cc6b8;
    --nx-tint:      rgba(224, 169, 90, .14);
    --nx-deep:      #f0c584;
    --cj-term:      #080c11;
    --cj-term-2:    #101821;
    --cj-amber:     #e0a95a;
    --tsk-card: #151d26; --tsk-line: #2b3947; --tsk-faint: #7d8b99; --tsk-sub: #aebdca; --tsk-ink: #eef3f8;
}

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

/* 终端机 */
.cj-terminal {
    background: var(--cj-term); color: #c8d3de;
    border: 1px solid #263341; border-radius: 14px; overflow: hidden;
    box-shadow: 0 22px 60px rgba(8, 12, 17, .3);
    background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(224, 169, 90, .014) 3px 4px);
}
.cj-terminal__bar {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: #111a23; border-bottom: 1px solid #263341;
    font-family: var(--nx-mono); font-size: 11.5px; color: #7f92a4; letter-spacing: .05em;
}
.cj-dots { display: inline-flex; gap: 5px; }
.cj-dots i { width: 9px; height: 9px; border-radius: 50%; background: #4a5b6c; }
.cj-dots i:first-child { background: #c9665a; }
.cj-dots i:nth-child(2) { background: #c9a45a; }
.cj-dots i:last-child { background: #5aa57c; }
.cj-terminal__bar span:last-child { margin-left: auto; color: var(--cj-amber); }
.cj-terminal__input { padding: 18px 20px 14px; border-bottom: 1px solid #263341; }
.cj-terminal__input > label { display: block; font-size: 12px; color: #7f92a4; margin-bottom: 8px; }
.cj-inputline { display: flex; align-items: center; gap: 10px; }
.cj-prompt { font-family: var(--nx-mono); font-size: 22px; color: var(--cj-amber); }
.cj-inputline .n14-input {
    flex: 1 1 200px; background: #0a1118; border-color: #2b3b4b; color: #f0e3cb;
    font-family: var(--nx-mono); font-size: 17px; letter-spacing: .1em;
}
.cj-inputline .n14-input:focus { border-color: var(--cj-amber); box-shadow: 0 0 0 3px rgba(224, 169, 90, .16); }
.cj-inputline .n14-btn--primary { background: var(--cj-amber); border-color: var(--cj-amber); color: #1a1206; }
.cj-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.cj-examples > span { font-size: 11.5px; color: #7f92a4; margin-right: 3px; }
.cj-examples .n14-btn { background: #18232f; border-color: #2b3b4b; color: #c8d3de; }
.cj-examples .n14-btn:hover { color: var(--cj-amber); }
.cj-terminal__body { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 0; }
.cj-keyboard { padding: 20px; border-right: 1px solid #263341; }
.cj-krow { display: flex; justify-content: center; gap: 5px; margin-bottom: 6px; }
.cj-krow--2 { padding: 0 18px; }
.cj-krow--3 { padding: 0 4px; }
.cj-key {
    flex: 1 1 0; min-width: 0; max-width: 62px; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: #18232f; border: 1px solid #2b3b4b; border-bottom-width: 3px; border-radius: 7px;
    color: #d6e0ea; cursor: pointer; font-family: var(--nx-mono);
    transition: transform .12s, background .12s, border-color .12s;
}
.cj-key:hover { transform: translateY(-2px); border-color: var(--cj-amber); }
.cj-key b { font-size: 15px; color: var(--cj-amber); }
.cj-key span { font-size: 16px; }
.cj-key small { font-size: 9px; color: #7f92a4; }
.cj-key[data-active="1"] { background: var(--cj-amber); border-color: var(--cj-amber); color: #1a1206; }
.cj-key[data-active="1"] b, .cj-key[data-active="1"] small { color: #1a1206; }
.cj-key[data-special="1"] { opacity: .72; }
.cj-out { padding: 20px; min-height: 220px; }
.cj-out__cap { font-family: var(--nx-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7f92a4; margin-bottom: 14px; }
.cj-out__big { font-family: var(--nx-mono); font-size: clamp(34px, 4.6vw, 52px); color: var(--cj-amber); line-height: 1.2; letter-spacing: .12em; word-break: break-all; margin-bottom: 6px; }
.cj-out__sub { font-size: 13px; color: #9fb0c0; margin-bottom: 14px; }
.cj-out__parts { display: flex; flex-wrap: wrap; gap: 6px; }
.cj-out__parts span { display: inline-flex; align-items: center; gap: 6px; background: #18232f; border: 1px solid #2b3b4b; border-radius: 7px; padding: 5px 10px; font-size: 12px; }
.cj-out__parts b { color: var(--cj-amber); font-family: var(--nx-mono); font-size: 14px; }
.cj-out__msg { font-size: 13px; line-height: 1.85; color: #9fb0c0; margin-top: 12px; }
.cj-out__msg b { color: var(--cj-amber); }
.cj-out .n14-empty { color: #7f92a4; }
.cj-terminal__foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
    padding: 10px 16px; background: #111a23; border-top: 1px solid #263341;
    font-family: var(--nx-mono); font-size: 11px; color: #7f92a4;
}
.cj-terminal__foot span:first-child { color: #5aa57c; }

.cj-search { max-width: 300px; }
.cj-tablewrap { margin-top: 16px; max-height: 380px; overflow: auto; }
.cj-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 9px; }
.cj-demo {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 10px;
    padding: 10px 12px; cursor: pointer; transition: transform .13s, border-color .13s;
}
.cj-demo:hover { transform: translateY(-2px); border-color: var(--nx-a); }
.cj-demo b { font-size: 22px; color: var(--nx-ink); }
.cj-demo span { font-family: var(--nx-mono); font-size: 13px; font-weight: 700; color: var(--nx-deep); }
.cj-note { margin-top: 14px; }
.cj-split { align-items: start; }
.cj-mono, .cj-textarea { font-family: var(--nx-mono); letter-spacing: .06em; }
.cj-batchwrap { margin-top: 16px; max-height: 340px; overflow: auto; }
.cj-page .cj-root { font-size: 20px; color: var(--nx-ink); font-weight: 700; }

@media (max-width: 980px) {
    .cj-terminal__body { grid-template-columns: 1fr; }
    .cj-keyboard { border-right: 0; border-bottom: 1px solid #263341; }
}
@media (max-width: 640px) {
    .cj-keyboard { padding: 12px; }
    .cj-key { min-height: 42px; }
    .cj-key span { font-size: 13px; }
    .cj-key small { display: none; }
    .cj-search { max-width: 100%; }
    .cj-demo-grid { grid-template-columns: repeat(2, 1fr); }
}