* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
    background:linear-gradient(170deg, #0d0221 0%, #150a30 30%, #1a1040 60%, #0f1a2e 100%);
    color:#e0d5c1;
    min-height:100vh;
    line-height:1.7;
}
a { color:#ffd700; text-decoration:none; }
a:hover { color:#ffed80; }

.container { max-width:1100px; margin:0 auto; padding:20px; }

/* 粒子背景 */
.particles {
    position:fixed; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:0; overflow:hidden;
}
.particle {
    position:absolute; background:rgba(255,215,0,0.06);
    border-radius:50%; animation:floatUp linear infinite;
}
@keyframes floatUp {
    0% { transform:translateY(100vh) scale(0); opacity:0; }
    10% { opacity:1; }
    90% { opacity:0.3; }
    100% { transform:translateY(-10vh) scale(1); opacity:0; }
}

/* 主内容区 */
.content { position:relative; z-index:1; }

/* 顶部导航 */
header {
    text-align:center;
    padding:40px 20px 25px;
    background:rgba(0,0,0,0.25);
    border-bottom:1px solid rgba(255,215,0,0.12);
    position:relative;
    z-index:1;
}
header .logo { font-size:2.8em; font-weight:bold; letter-spacing:4px; }
header .logo span {
    background:linear-gradient(135deg, #ffd700, #ffb347, #ffd700);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
header .subtitle {
    color:#8a7a6a; letter-spacing:6px; font-size:0.95em; margin-top:6px;
}

/* 导航菜单 */
nav { text-align:center; padding:15px 20px; position:relative; z-index:1; }
nav a {
    display:inline-block; color:#c0b090; padding:8px 16px; margin:3px 5px;
    border-radius:20px; font-size:0.9em; transition:all 0.25s;
    border:1px solid transparent;
}
nav a:hover, nav a.active {
    color:#ffd700; border-color:rgba(255,215,0,0.3);
    background:rgba(255,215,0,0.05);
}

/* 按钮 */
.btn {
    display:inline-block;
    background:linear-gradient(135deg, #b8860b, #daa520);
    color:#1a0a2e !important;
    padding:12px 32px; border-radius:25px; font-size:1em;
    font-weight:bold; border:none; cursor:pointer;
    transition:all 0.3s; letter-spacing:1px; text-decoration:none;
}
.btn:hover {
    background:linear-gradient(135deg, #daa520, #f0c040);
    transform:translateY(-2px); box-shadow:0 6px 25px rgba(218,165,32,0.3);
}
.btn-outline {
    background:transparent; color:#daa520 !important;
    border:2px solid #daa520;
}
.btn-outline:hover {
    background:rgba(218,165,32,0.1);
}

/* 卡片 */
.card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,215,0,0.1);
    border-radius:16px; padding:28px; margin:20px 0;
    backdrop-filter:blur(10px); transition:all 0.3s;
}
.card:hover { border-color:rgba(255,215,0,0.25); }
.card h3 { color:#ffd700; margin-bottom:12px; font-size:1.15em; }

/* 特性网格 */
.feature-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px; padding:20px 0;
}
.feature-card {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,215,0,0.08);
    border-radius:14px; padding:24px 20px; text-align:center;
    transition:all 0.3s; cursor:pointer; position:relative; overflow:hidden;
}
.feature-card::before {
    content:""; position:absolute;
    top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent);
    opacity:0; transition:opacity 0.3s;
}
.feature-card:hover {
    border-color:rgba(255,215,0,0.25);
    transform:translateY(-4px);
    background:rgba(255,255,255,0.06);
}
.feature-card:hover::before { opacity:1; }
.feature-card .icon { font-size:2.5em; margin-bottom:12px; display:block; }
.feature-card h3 { color:#ffd700; margin-bottom:6px; font-size:1.05em; }
.feature-card p { color:#908070; font-size:0.85em; line-height:1.5; }
.feature-card .tag {
    display:inline-block;
    background:rgba(255,215,0,0.1);
    color:#daa520; padding:3px 12px; border-radius:12px;
    font-size:0.75em; margin-top:8px;
}

/* 表单 */
.form-group { margin-bottom:18px; }
.form-group label {
    display:block; color:#c0b090; margin-bottom:6px;
    font-size:0.9em; letter-spacing:1px;
}
.form-row { display:flex; gap:12px; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:100px; }
input, select, textarea {
    width:100%; padding:10px 14px;
    background:rgba(0,0,0,0.3); color:#e0d5c1;
    border:1px solid rgba(255,215,0,0.15); border-radius:8px;
    font-size:1em; outline:none; transition:border-color 0.3s;
    font-family:inherit;
}
input:focus, select:focus, textarea:focus {
    border-color:rgba(255,215,0,0.4);
}

/* 结果区 */
.result-box {
    background:rgba(0,0,0,0.2); border-radius:14px;
    padding:24px; margin-top:20px;
    border-left:3px solid #daa520;
    display:none;
}
.result-box.show { display:block; animation:fadeIn 0.4s ease; }

@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.result-box h3 { color:#ffd700; margin-bottom:12px; font-size:1.1em; }
.result-box .bazi-pillars {
    display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;
}
.result-box .pillar {
    flex:1; min-width:90px;
    background:rgba(255,215,0,0.06); border:1px solid rgba(255,215,0,0.12);
    border-radius:10px; padding:14px 10px; text-align:center;
}
.pillar .ganzhi { font-size:1.6em; color:#ffd700; font-weight:bold; }
.pillar .nayin { font-size:0.8em; color:#908070; margin-top:4px; }
.pillar .label { font-size:0.75em; color:#706050; margin-bottom:4px; letter-spacing:2px; }

/* 徽章 */
.badge {
    display:inline-block; padding:4px 12px; border-radius:12px;
    font-size:0.8em; font-weight:bold; letter-spacing:1px;
}
.badge-ai {
    background:linear-gradient(135deg, #667eea, #764ba2);
    color:white;
}
.badge-gold {
    background:rgba(255,215,0,0.15);
    color:#ffd700;
}
.badge-green {
    background:rgba(80,200,120,0.15);
    color:#50c878;
}

/* 加载动画 */
.loading {
    text-align:center; padding:30px; color:#908070; display:none;
}
.loading.show { display:block; }
.spinner {
    width:40px; height:40px; margin:0 auto 15px;
    border:3px solid rgba(255,215,0,0.15);
    border-top-color:#daa520;
    border-radius:50%; animation:spin 0.8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* 页脚 */
footer {
    text-align:center; padding:25px; margin-top:30px;
    border-top:1px solid rgba(255,215,0,0.08);
    color:#504030; font-size:0.85em;
    position:relative; z-index:1;
}

/* 提示框 */
.tip {
    background:rgba(255,215,0,0.04); border:1px solid rgba(255,215,0,0.12);
    border-radius:10px; padding:14px 18px; margin:16px 0;
    color:#b0a080; font-size:0.9em;
}
.tip::before { content:"💡 "; }

/* Tabs */
.tabs { display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; }
.tab-btn {
    padding:8px 18px; background:rgba(0,0,0,0.2);
    border:1px solid rgba(255,215,0,0.1); color:#908070;
    border-radius:20px; cursor:pointer; font-size:0.9em;
    transition:all 0.25s;
}
.tab-btn:hover, .tab-btn.active {
    background:rgba(255,215,0,0.1); color:#ffd700;
    border-color:rgba(255,215,0,0.3);
}

/* 响应式 */
@media(max-width:768px) {
    .container { padding:12px; }
    header .logo { font-size:2em; }
    .feature-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
    .feature-card { padding:16px 12px; }
    .form-row { flex-direction:column; }
    nav a { padding:6px 10px; font-size:0.8em; margin:2px; }
}

/* 网格表格 */
.grid-table {
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:8px; margin:12px 0;
}
.grid-item {
    background:rgba(0,0,0,0.2); border:1px solid rgba(255,215,0,0.08);
    border-radius:8px; padding:10px; text-align:center; font-size:0.85em;
}
.grid-item .main { color:#ffd700; font-weight:bold; }
.grid-item .sub { color:#908070; font-size:0.8em; }

/* 太极图装饰 */
.yinyang-bg {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:300px; opacity:0.015; pointer-events:none; z-index:0;
    color:#ffd700;
}