/* ===== 知识库文章排版 ===== */
.article {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px;
    line-height: 1.8;
}
.article h1 {
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: #f0f4ff;
    margin-bottom: 8px;
}
.article .lead {
    font-size: 1.15rem;
    color: var(--muted);
    margin-bottom: 32px;
}
.article h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--wood);
    margin: 36px 0 12px;
}
.article p { margin-bottom: 16px; color: var(--text); }
.article ul, .article ol { margin: 0 0 16px 24px; color: var(--text); }
.article li { margin-bottom: 8px; }
.article table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.article th, .article td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; font-size: 0.9rem; }
.article th { background: var(--panel); color: var(--metal); font-family: var(--font-mono); }
.article code { font-family: var(--font-mono); background: var(--panel); padding: 2px 6px; border-radius: 3px; color: var(--earth); }
.article-cta { margin: 40px 0; text-align: center; }

/* 知识库首页 */
.learn-index { max-width: 900px; margin: 0 auto; padding: 48px 24px; }
.learn-index h1 { font-family: var(--font-display); font-size: 2.4rem; color: #f0f4ff; }
.learn-index .lead { color: var(--muted); margin: 8px 0 24px; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.learn-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 20px;
    text-decoration: none;
    transition: border-color 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s;
}
.learn-card:hover { border-color: var(--wood); transform: translateY(-2px); }
.learn-card h2 { font-family: var(--font-display); color: #f0f4ff; margin: 0 0 8px; font-size: 1.05rem; }
.learn-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
/* ===== 罗盘演示（luopan-secrets 文章内嵌）===== */
.demo-wrap {
    max-width: 380px;
    margin: 28px auto;
    text-align: center;
}
#luopan-demo {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    cursor: grab;
    touch-action: none;
}
#luopan-demo:active { cursor: grabbing; }
.demo-wrap .ward {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    min-height: 14px;
}
.demo-wrap .ward-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--muted);
    margin-right: 4px;
}
.demo-wrap .pip {
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border: 1px solid rgba(107,122,153,0.55);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.demo-wrap .pip.lit {
    background: var(--earth);
    border-color: var(--earth);
    box-shadow: 0 0 9px rgba(232,179,75,0.75);
}
.preview-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.preview-btn {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 8px 14px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.preview-btn:hover { color: var(--earth); border-color: var(--earth); }