/* 星盘图表样式 */

.chart-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.chart-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

/* 星盘结果布局 */
.natal-result-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.chart-section {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.chart-visual {
    flex: 1;
    min-width: 300px;
}

.chart-summary {
    flex: 1;
    min-width: 300px;
}

/* 行星位置表格 */
.planets-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.planets-table th,
.planets-table td {
    padding: 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.planets-table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.planets-table td {
    font-size: 0.95rem;
}

.planets-table .planet-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.planets-table .planet-symbol {
    font-size: 1.2rem;
    width: 24px;
}

.planets-table .sign-cell {
    color: var(--accent-purple);
}

.planets-table .degree-cell {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.planets-table .house-cell {
    color: var(--accent-blue);
}

/* 相位表格 */
.aspects-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--spacing-md);
}

.aspect-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

/* 第一行：符号 + 类型徽章 + 容许度 */
.aspect-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 第二行：完整解读文字，自然换行不截断 */
.aspect-interp {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.65;
    word-break: break-all;
}

.aspect-planets {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 60px;
    font-size: 1rem;
}

.aspect-type {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.aspect-type.conjunction {
    background: rgba(251, 191, 36, 0.2);
    color: var(--accent-gold);
}

.aspect-type.trine {
    background: rgba(52, 211, 153, 0.2);
    color: var(--accent-green);
}

.aspect-type.sextile {
    background: rgba(96, 165, 250, 0.2);
    color: var(--accent-blue);
}

.aspect-type.square {
    background: rgba(248, 113, 113, 0.2);
    color: var(--accent-red);
}

.aspect-type.opposition {
    background: rgba(244, 114, 182, 0.2);
    color: var(--accent-pink);
}

.aspect-orb {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: auto;
    white-space: nowrap;
}

/* 宫位列表 */
.houses-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.house-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-width: 0;
}

.house-number {
    font-weight: 600;
    color: var(--accent-blue);
    white-space: nowrap;
    flex-shrink: 0;
}

.house-sign {
    color: var(--accent-purple);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.house-degree {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 解读区域 */
.interpretation-section {
    margin-top: var(--spacing-lg);
}

.interpretation-section h4 {
    font-size: 1.1rem;
    color: var(--accent-purple);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.interpretation-block {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.interpretation-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.interpretation-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.interpretation-text.advanced {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px dashed var(--border-subtle);
}

/* 运势指数 */
.fortune-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.fortune-meter {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.fortune-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.fortune-label span:first-child {
    font-size: 0.9rem;
}

.fortune-label span:last-child {
    font-weight: 600;
    color: var(--accent-purple);
}

.fortune-bar {
    height: 8px;
    background: rgba(167, 139, 250, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.fortune-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease;
}

.fortune-fill.love {
    background: linear-gradient(90deg, #f472b6, #f87171);
}

.fortune-fill.career {
    background: linear-gradient(90deg, #60a5fa, #34d399);
}

.fortune-fill.wealth {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.fortune-fill.health {
    background: linear-gradient(90deg, #34d399, #10b981);
}

/* 合盘匹配度 */
.compatibility-score {
    text-align: center;
    padding: var(--spacing-lg);
}

.score-circle {
    width: 150px;
    height: 150px;
    margin: 0 auto var(--spacing-md);
    position: relative;
}

.score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-circle circle {
    fill: none;
    stroke-width: 8;
}

.score-circle .bg {
    stroke: rgba(167, 139, 250, 0.2);
}

.score-circle .fill {
    stroke: url(#scoreGradient);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}

.score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.score-label {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* 合盘相位对比 */
.synastry-aspects {
    margin-top: var(--spacing-lg);
}

.synastry-aspect-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-input);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.synastry-aspect-item .person1 {
    color: var(--accent-pink);
    min-width: 80px;
    text-align: right;
}

.synastry-aspect-item .aspect-symbol {
    font-size: 1.2rem;
}

.synastry-aspect-item .person2 {
    color: var(--accent-blue);
    min-width: 80px;
}

.synastry-aspect-item .aspect-desc {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* 行运时间线 */
.transit-timeline {
    margin-top: var(--spacing-md);
}

.transit-event {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-left: 2px solid var(--border-subtle);
    margin-left: var(--spacing-sm);
    position: relative;
}

.transit-event::before {
    content: '';
    position: absolute;
    left: -6px;
    top: var(--spacing-md);
    width: 10px;
    height: 10px;
    background: var(--primary-gradient);
    border-radius: 50%;
}

.transit-event.important::before {
    box-shadow: 0 0 10px var(--accent-purple);
}

.transit-date {
    min-width: 80px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.transit-info {
    flex: 1;
}

.transit-title {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.transit-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   星盘增强样式：头部、三巨头badge、四大维度卡片
   ══════════════════════════════════════════════════════════════ */

/* 星盘标题行 */
.astro-header-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;
}
.astro-header-name {
    font-size: 1.25rem; font-weight: 700;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.astro-header-engine {
    font-size: 0.75rem; color: rgba(167,139,250,.7);
    padding: 3px 12px; border-radius: 12px;
    border: 1px solid rgba(167,139,250,.2);
    background: rgba(167,139,250,.05);
}

/* 三巨头 badges（叠加在星盘图下方） */
.big-three-badges {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 12px; flex-wrap: wrap;
}
.b3-badge {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 16px; border-radius: 12px;
    font-size: 0.8rem; line-height: 1.4;
    border: 1px solid rgba(167,139,250,.25);
    background: rgba(167,139,250,.08);
    transition: all .2s ease; cursor: default;
}
.b3-badge:hover { border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.14); }
.b3-symbol { font-size: 1.1rem; margin-bottom: 3px; }
.b3-sign { font-weight: 600; color: #e8e8f0; }
.b3-house { font-size: 0.7rem; color: rgba(167,139,250,.7); }
.sun-badge .b3-symbol { color: #fbbf24; }
.moon-badge .b3-symbol { color: #93c5fd; }
.asc-badge .b3-symbol { color: #34d399; }

/* ── 四大维度区块 ──────────────────────────────────────────── */
.astro-dims-section { margin: 2rem 0; }
.astro-dims-title {
    font-size: 1rem; font-weight: 600; color: #e8e8f0;
    margin-bottom: 1.2rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(124,58,237,.3);
}
.astro-dims-title::before { content: ''; }

.astro-dims-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.astro-dim-card {
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(22,26,45,.6);
    transition: transform .25s ease, box-shadow .25s ease;
}
.astro-dim-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,.45);
}

.adc-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
}
.dim-personality .adc-header { background: linear-gradient(135deg, rgba(124,58,237,.45), rgba(79,70,229,.45)); }
.dim-career     .adc-header { background: linear-gradient(135deg, rgba(8,145,178,.45), rgba(14,116,144,.45)); }
.dim-love       .adc-header { background: linear-gradient(135deg, rgba(219,39,119,.45), rgba(190,24,93,.45)); }
.dim-wealth     .adc-header { background: linear-gradient(135deg, rgba(5,150,105,.45), rgba(4,120,87,.45)); }

.adc-icon { font-size: 1.4rem; opacity: .9; }
.adc-title { font-size: 0.95rem; font-weight: 700; color: #fff; }
.adc-sub { font-size: 0.7rem; color: rgba(255,255,255,.55); margin-top: 2px; }

.adc-body {
    padding: 16px 18px;
    font-size: 0.85rem;
    color: #d1d5db;
    line-height: 1.65;
}

/* 人格三角布局 */
.adc-trio { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.adc-trio-item { display: flex; gap: 12px; align-items: flex-start; }
.adc-trio-symbol {
    font-size: 1.2rem; width: 28px; text-align: center;
    flex-shrink: 0; padding-top: 1px;
}
.adc-trio-label { font-size: 0.7rem; color: #8b5cf6; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.adc-trio-val { font-size: 0.85rem; font-weight: 600; color: #e8e8f0; margin: 2px 0 4px; }
.adc-text { font-size: 0.82rem; color: #c4c9d4; line-height: 1.6; margin: 0; }

.adc-harmony-note {
    padding: 10px 14px; border-radius: 8px;
    font-size: 0.82rem; line-height: 1.6;
    display: flex; gap: 8px; align-items: flex-start;
}
.adc-harmony-note.harmony-good {
    background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25);
    color: #6ee7b7;
}
.adc-harmony-note.harmony-tension {
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25);
    color: #fcd34d;
}
.harmony-icon { flex-shrink: 0; font-size: 1rem; }

/* 维度内块 */
.adc-dim-block { margin-bottom: 14px; }
.adc-dim-block:last-child { margin-bottom: 0; }
.adc-label {
    font-size: 0.7rem; font-weight: 600; color: #8b5cf6;
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px;
}
.adc-kv {
    font-size: 0.9rem; font-weight: 600; color: #e8e8f0;
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════
   综合命盘 Tab — 东西方交叉解读
   ══════════════════════════════════════════════════════════════ */

.cross-container {
    padding: 20px 24px 32px;
}

/* 综合命盘头部 */
.cross-header {
    text-align: center; margin-bottom: 32px;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(28,31,50,.8), rgba(15,20,45,.8));
    border-radius: 16px;
    border: 1px solid rgba(124,58,237,.2);
    position: relative; overflow: hidden;
}
.cross-header::before {
    content: '🔯';
    position: absolute; top: -20px; right: -20px;
    font-size: 120px; opacity: .04; pointer-events: none;
}
.cross-header-title {
    font-size: 1.4rem; font-weight: 700; margin-bottom: 8px;
    background: linear-gradient(135deg, #a78bfa, #f59e0b, #60a5fa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.cross-header-sub {
    font-size: 0.85rem; color: #9ca3af; line-height: 1.6;
    max-width: 520px; margin: 0 auto 16px;
}
.cross-header-badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cross-badge {
    padding: 6px 18px; border-radius: 20px;
    font-size: 0.82rem; font-weight: 600;
}
.cross-badge.astro {
    background: rgba(124,58,237,.15); color: #a78bfa;
    border: 1px solid rgba(124,58,237,.35);
}
.cross-badge.bazi {
    background: rgba(245,158,11,.12); color: #fbbf24;
    border: 1px solid rgba(245,158,11,.3);
}

/* 三大交叉维度 */
.cross-dims { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }

.cross-card {
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(22,26,45,.55);
    transition: box-shadow .25s ease;
}
.cross-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.4); }

.cross-card-header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
}
.cross-card-header.cc-char    { background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(79,70,229,.4)); }
.cross-card-header.cc-career  { background: linear-gradient(135deg, rgba(8,145,178,.4), rgba(14,116,144,.4)); }
.cross-card-header.cc-fortune { background: linear-gradient(135deg, rgba(5,150,105,.4), rgba(4,120,87,.4)); }

.cc-icon { font-size: 1.5rem; opacity: .9; }
.cc-title { font-size: 0.95rem; font-weight: 700; color: #fff; }
.cc-sub { font-size: 0.72rem; color: rgba(255,255,255,.55); margin-top: 2px; }

.cross-card-body { padding: 20px; }

/* 交叉条目 */
.cross-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cross-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-radius: 8px;
    font-size: 0.85rem; color: #d1d5db;
}
.cross-item.astro-item { background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2); }
.cross-item.bazi-item  { background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.2); }

.ci-badge {
    font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
    border-radius: 10px; flex-shrink: 0; white-space: nowrap;
    margin-top: 1px;
}
.astro-item .ci-badge { background: rgba(124,58,237,.25); color: #a78bfa; }
.bazi-item  .ci-badge { background: rgba(245,158,11,.2);  color: #fbbf24; }

.cross-insights-label { font-size: 0.75rem; color: #6b7280; margin-bottom: 8px; font-weight: 600; }
.cross-insight {
    padding: 10px 14px; margin-bottom: 8px;
    background: rgba(255,255,255,.04); border-radius: 8px;
    border-left: 3px solid rgba(167,139,250,.4);
    font-size: 0.85rem; color: #c4c9d4; line-height: 1.65;
}
.cross-insight.gray { border-left-color: rgba(107,114,128,.4); }

/* 运势提升卡片 */
.fortune-tip-card {
    padding: 14px 16px; margin-bottom: 12px;
    background: rgba(255,255,255,.04); border-radius: 10px;
    border: 1px solid rgba(255,255,255,.07);
}
.fortune-tip-card:last-child { margin-bottom: 0; }
.ftc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ftc-icon { font-size: 1.1rem; }
.ftc-label { font-size: 0.8rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: .4px; }
.ftc-content {
    font-size: 0.85rem; color: #c4c9d4; line-height: 1.7;
}
.ftc-content b { color: #e8e8f0; }

/* AI综合解读区 */
.cross-ai-section {
    text-align: center; padding: 32px 24px;
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(79,70,229,.05));
    border-radius: 16px;
    border: 1px dashed rgba(124,58,237,.3);
}
.cross-ai-title {
    font-size: 1.15rem; font-weight: 700; color: #e8e8f0;
    margin-bottom: 8px;
}
.cross-ai-desc {
    font-size: 0.85rem; color: #9ca3af; line-height: 1.7;
    max-width: 480px; margin: 0 auto 20px;
}
.cross-ai-btn {
    position: relative; overflow: hidden;
    padding: 16px 48px; font-size: 1rem; font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff; border: none; border-radius: 40px;
    cursor: pointer; transition: all .3s ease;
    box-shadow: 0 6px 24px rgba(124,58,237,.45);
    letter-spacing: .5px;
}
.cross-ai-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(124,58,237,.65); }
.cross-ai-btn:disabled { opacity: .7; cursor: not-allowed; }
.cross-ai-btn-glow {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    animation: shimmer 2s infinite;
}

.cross-ai-loading {
    text-align: center; padding: 32px 20px;
    color: #9ca3af; font-size: 0.9rem;
}
.cross-ai-loading p { margin-top: 14px; }

.cross-ai-result {
    margin-top: 24px; text-align: left;
}
.cross-ai-error {
    padding: 16px; background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25); border-radius: 10px;
    color: #f87171; font-size: 0.9rem;
}

/* AI报告样式 */
.cross-ai-report {
    background: rgba(15,20,45,.6); border-radius: 14px;
    border: 1px solid rgba(124,58,237,.2); overflow: hidden;
}
.car-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(124,58,237,.3), rgba(79,70,229,.3));
    border-bottom: 1px solid rgba(124,58,237,.2);
}
.car-icon { font-size: 1.3rem; }
.car-title { font-size: 0.95rem; font-weight: 700; color: #fff; }
.car-body {
    padding: 20px 24px;
    font-size: 0.9rem; color: #d1d5db; line-height: 1.8;
}
.car-h4 {
    font-size: 0.95rem; font-weight: 700; color: #a78bfa;
    margin: 16px 0 6px; border-bottom: 1px solid rgba(124,58,237,.2);
    padding-bottom: 4px;
}
.car-footer {
    padding: 10px 24px 14px;
    font-size: 0.75rem; color: #4b5563;
    border-top: 1px solid rgba(255,255,255,.05);
}

.bazi-report .car-header { background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(217,119,6,.25)); }
.bazi-report .car-h4 { color: #fbbf24; }

/* Loading ring (通用) */
.btn-loading-ring {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle; margin-right: 8px;
}
.btn-loading-ring.large { width: 36px; height: 36px; border-width: 3px; margin: 0 auto; display: block; }

/* 响应式 */
@media (max-width: 900px) {
    .astro-dims-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .astro-dims-grid { grid-template-columns: 1fr; }
    .cross-container { padding: 16px; }
    .cross-ai-btn { padding: 14px 32px; font-size: 0.9rem; }
    .big-three-badges { gap: 6px; }
    .b3-badge { padding: 6px 12px; }
}