/* 玛雅天赋解读 - 暗色样式表 v5 - 品牌调性 */
:root { --primary: #00D4AA; --secondary: #F5A623; --gold: #8B7A4A; --bg: #0B0E1A; }

/* ===== Fonts ===== */


* { margin:0; padding:0; box-sizing:border-box; }

/* ===== BASE ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    background: var(--bg) !important;
    color: #F0F4FF;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    padding-top: 44px;
    font-size: 1rem;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(0,212,170,0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(245,166,35,0.04) 0%, transparent 50%);
}
a { text-decoration: none; color: #00D4AA; }
img { max-width: 100%; }

/* ===== PAGE LAYOUT ===== */
.page { max-width:1000px; margin:0 auto; padding:2rem 1rem; }
.page h1 {
    text-align:center; font-size:1.6rem; font-weight:700; margin-bottom:0.2rem;
    font-family: 'Songti SC', 'Noto Serif SC', 'STSong', 'SimSun', serif;
    background:linear-gradient(135deg,#00D4AA,#F5A623); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.page .sub { text-align:center; color:rgba(240,244,255,0.45); font-size:1rem; margin-bottom:1.5rem; }

/* ===== ARTICLE BODY ===== */
.kin-article, .kin-content, .article-body { background: var(--bg) !important; }
.kin-article { max-width:800px; margin:0 auto; padding:1.5rem 1rem; }
.article-body { max-width:800px; margin:0 auto; padding:0.5rem 1rem 2rem; color:#F0F4FF; }
.article-body p, .article-body li, .kin-content p, .kin-content li { color:#F0F4FF; font-size:1rem; line-height:1.8; }
.article-body strong, .kin-content strong { color:#fff; }
.article-body h2, .kin-content h2 {
    font-size:1.2rem; color:#00D4AA; margin-top:2rem; padding-bottom:0.5rem;
    border-bottom:2px solid rgba(0,212,170,0.12);
    font-family: 'Songti SC', 'Noto Serif SC', 'STSong', 'SimSun', serif;
}
.article-body h3, .kin-content h3 { font-size:1.1rem; color:#F0F4FF; margin-top:1.5rem; font-family: 'Songti SC', 'Noto Serif SC', 'STSong', 'SimSun', serif; }
.article-body h4, .kin-content h4 { color:#F0F4FF; }

/* highlight & tip */
.article-body .highlight, .kin-content .highlight {
    background:linear-gradient(135deg,rgba(0,212,170,0.06),rgba(245,166,35,0.04));
    border-left:4px solid #00D4AA; padding:1rem 1.5rem; border-radius:0 8px 8px 0; margin:1.5rem 0;
}
.article-body .tip, .kin-content .tip {
    background:rgba(245,166,35,0.06); border-left:4px solid #F5A623;
    padding:1rem 1.5rem; border-radius:0 8px 8px 0; margin:1.5rem 0;
}

/* Tables */
.article-body table, .kin-content table { width:100%; border-collapse:collapse; margin:1rem 0; background:transparent; }
.article-body td, .article-body th, .kin-content td, .kin-content th { padding:10px 14px; border:1px solid rgba(139,122,74,0.2); }
.article-body th, .kin-content th { background:rgba(0,212,170,0.08) !important; color:#F0F4FF !important; font-weight:600; }
.article-body td, .kin-content td { background:rgba(240,244,255,0.02) !important; border-color:rgba(139,122,74,0.15) !important; color:#F0F4FF !important; }
.article-body tr:nth-child(even) td, .kin-content tr:nth-child(even) td { background:rgba(240,244,255,0.04) !important; }
.article-body blockquote { border-left:3px solid #00D4AA; background:rgba(0,212,170,0.04); padding:0.8rem 1rem; margin:1rem 0; border-radius:0 8px 8px 0; color:rgba(240,244,255,0.5); }
.article-body hr, .kin-content hr { border:none; border-top:1px solid rgba(139,122,74,0.15); margin:1.5rem 0; }
.article-body code { background:rgba(0,212,170,0.08); padding:2px 6px; border-radius:4px; font-size:0.9em; color:#00D4AA; }
.article-body a { color:#00D4AA; }

/* ===== FIVE POWERS CARDS ===== */
.five-powers-section { background: transparent; }
.power-card { background: rgba(240,244,255,0.02); border:1px solid rgba(139,122,74,0.15); border-radius:10px; padding:1rem 1.2rem; margin-bottom:0.8rem; }
.power-card .power-title { font-size:0.95rem; color:#F0F4FF; font-weight:600; }
.power-card .power-desc { font-size:0.88rem; color:rgba(240,244,255,0.55); line-height:1.6; margin:0.3rem 0; }
.power-card .power-trait { display:inline-block; padding:2px 10px; border-radius:20px; background:rgba(0,212,170,0.08); color:#00D4AA; font-size:0.88rem; margin-right:4px; }
.power-card .power-question { font-size:0.82rem; color:rgba(240,244,255,0.4); margin-top:0.4rem; padding-top:0.4rem; border-top:1px solid rgba(139,122,74,0.1); }
.five-powers-section .subtitle { color:rgba(240,244,255,0.5); font-size:0.88rem; }

/* ===== OVERVIEW ===== */
.overview { text-align:center; margin-bottom:2rem; }
.overview .intro { font-size:1rem; color:rgba(240,244,255,0.55); line-height:1.7; max-width:700px; margin:0 auto 1rem; }
.ov-highlight { font-size:1rem; color:#00D4AA; font-weight:600; }
.ov-cards { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:1.2rem; }
.ov-card { background:rgba(240,244,255,0.02); border:1px solid rgba(139,122,74,0.15); border-radius:12px; padding:1rem 1.4rem; min-width:140px; flex:1; max-width:220px; }
.ov-num { font-size:1.6rem; font-weight:800; background:linear-gradient(135deg,#00D4AA,#F5A623); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ov-label { font-size:1rem; color:rgba(240,244,255,0.45); margin-bottom:4px; }
.ov-desc { font-size:1rem; color:rgba(240,244,255,0.6); line-height:1.5; }
.ov-bottom { font-size:1rem; color:rgba(240,244,255,0.5); max-width:600px; margin:0 auto; }

/* ===== FOOTER ===== */
footer { text-align:center; padding:2rem; color:rgba(240,244,255,0.5); font-size:0.88rem; border-top:1px solid rgba(139,122,74,0.12); margin-top:2rem; }
footer a { color:#00D4AA; }

/* ===== NAVIGATION ===== */
.kin-navigation { display:flex; justify-content:space-between; margin-top:2rem; gap:1rem; }
.kin-navigation a { padding:8px 16px; border-radius:8px; background:rgba(240,244,255,0.03); color:rgba(240,244,255,0.5); font-size:0.88rem; }
.kin-navigation a:hover { background:rgba(240,244,255,0.06); color:rgba(240,244,255,0.8); }

/* ===== MOBILE ===== */
@media (max-width: 480px) {
    .kin-header h1 { font-size:1.3rem; }
    .kin-navigation { flex-direction:column; }
}