/* 重置样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; font-size: 14px; color: #333; }
body { background: #f5f5f5; min-height: 100vh; }
input, button, textarea, select { font-family: inherit; outline: none; border: none; background: none; }
button { cursor: pointer; }

/* 公共类 */
.page { width: 100%; min-height: 100vh; display: none; }
.page.active { display: block; }

/* ==================== 登录页 ==================== */
.login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
    padding: 80px 40px;
    box-sizing: border-box;
}
.login-header { text-align: center; margin-bottom: 80px; }
.login-title { font-size: 56px; font-weight: bold; color: #fff; display: block; margin-bottom: 20px; }
.login-subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.8); }

.login-tab-bar {
    display: flex;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 60px;
}
.login-tab {
    flex: 1;
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    transition: all 0.3s;
    cursor: pointer;
}
.login-tab.active { background: #fff; color: #8B4513; font-weight: bold; }

.login-form { background: #fff; border-radius: 20px; padding: 60px 40px; }
.login-form-item { margin-bottom: 40px; }
.login-label { display: block; font-size: 28px; color: #333; margin-bottom: 16px; font-weight: 500; }
.login-input {
    width: 100%;
    height: 88px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 24px;
    box-sizing: border-box;
    font-size: 28px;
}
.login-input:focus { border-color: #8B4513; }

.login-submit {
    width: 100%;
    height: 96px;
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 32px;
    font-weight: bold;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ==================== 通用页面容器 ==================== */
.mp-container {
    padding: 30px;
    padding-bottom: 120px;
    background: #f5f5f5;
    min-height: 100vh;
}

.mp-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.mp-section-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin-bottom: 24px;
    padding-left: 16px;
    border-left: 6px solid #8B4513;
}

/* ==================== 排盘首页 ==================== */
.mp-header { text-align: center; padding: 40px 0; }
.mp-title { display: block; font-size: 48px; font-weight: 700; color: #8B4513; margin-bottom: 12px; }
.mp-subtitle { display: block; font-size: 26px; color: #999; }

.mp-user-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 16px 32px;
    background: rgba(139, 69, 19, 0.1);
    border-radius: 30px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.mp-user-name { font-size: 26px; color: #8B4513; margin-right: 20px; }
.mp-logout-text { font-size: 24px; color: #999; padding: 8px 20px; background: #fff; border-radius: 20px; cursor: pointer; }
.mp-profile-text { font-size: 24px; color: #fff; padding: 8px 20px; background: #8B4513; border-radius: 20px; margin-right: 16px; cursor: pointer; }

.mp-tab-group {
    display: flex;
    background: #f5f5f5;
    border-radius: 44px;
    padding: 6px;
    margin-top: 20px;
}
.mp-tab-item {
    flex: 1;
    text-align: center;
    padding: 20px 0;
    border-radius: 38px;
    font-size: 28px;
    color: #666;
    transition: all 0.3s;
    cursor: pointer;
}
.mp-tab-item.active { background: #8B4513; color: #fff; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3); }

.mp-picker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #f0f0f0;
    min-height: 80px;
}
.mp-picker-row:last-child { border-bottom: none; }
.mp-picker-label { font-size: 28px; color: #333; flex-shrink: 0; }
.mp-picker-value {
    font-size: 28px;
    color: #8B4513;
    padding: 12px 24px;
    background: #f9f9f9;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

.mp-dizhi-display {
    font-size: 32px;
    font-weight: 600;
    color: #DAA520;
    padding: 12px 20px;
    background: linear-gradient(135deg, #FFF8DC 0%, #FAF0E6 100%);
    border-radius: 8px;
    border: 2px solid #DAA520;
    margin-left: 20px;
}

.mp-dizhi-hint {
    margin-top: 20px;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
    font-size: 24px;
    color: #666;
    line-height: 1.6;
}
.mp-dizhi-hint > div { display: block; margin-bottom: 8px; }
.mp-dizhi-hint > div:last-child { margin-bottom: 0; }

/* 开关 */
.mp-switch { position: relative; display: inline-block; width: 100px; height: 56px; }
.mp-switch input { opacity: 0; width: 0; height: 0; }
.mp-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 56px;
}
.mp-switch-slider:before {
    position: absolute;
    content: "";
    height: 44px;
    width: 44px;
    left: 6px;
    bottom: 6px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
.mp-switch input:checked + .mp-switch-slider { background-color: #8B4513; }
.mp-switch input:checked + .mp-switch-slider:before { transform: translateX(44px); }

/* 按钮 */
.mp-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    border-radius: 44px;
    padding: 28px;
    margin-top: 20px;
    border: none;
    box-shadow: 0 8px 24px rgba(139, 69, 19, 0.3);
    cursor: pointer;
}
.mp-btn-secondary {
    width: 100%;
    background: #fff;
    color: #8B4513;
    font-size: 32px;
    font-weight: 600;
    border-radius: 44px;
    padding: 28px;
    margin-top: 20px;
    border: 2px solid #8B4513;
    cursor: pointer;
}

/* ==================== 排盘结果页 ==================== */
.mp-action-bar { display: flex; gap: 20px; margin-bottom: 30px; }
.mp-action-btn {
    flex: 1;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    font-size: 28px;
    color: #666;
    border: 2px solid #e0e0e0;
    cursor: pointer;
}
.mp-action-btn.primary {
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
    color: #fff;
    border: none;
}

.mp-bazi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.mp-bazi-item {
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}
.mp-bazi-label { font-size: 24px; color: rgba(255, 255, 255, 0.8); margin-bottom: 8px; }
.mp-bazi-value { font-size: 36px; font-weight: 700; color: #fff; }

.mp-zodiac-row {
    text-align: center;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}
.mp-zodiac-label { font-size: 28px; color: #666; }
.mp-zodiac-value { font-size: 32px; color: #8B4513; font-weight: 600; }

/* 十神 */
.mp-ten-god-item {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    margin-bottom: 16px;
}
.mp-ten-god-pillar { font-size: 30px; font-weight: 600; color: #333; margin-bottom: 8px; }
.mp-ten-god-detail { font-size: 26px; color: #666; line-height: 1.6; }

.mp-pillar-explanation {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #E8F4FD 0%, #D4E8F7 100%);
    border-radius: 8px;
    border-left: 4px solid #4A90E2;
}
.mp-pillar-meaning { font-size: 24px; color: #4A90E2; font-weight: 600; margin-bottom: 8px; }
.mp-pillar-desc { font-size: 24px; color: #336699; line-height: 1.6; margin-bottom: 8px; }
.mp-pillar-aspect {
    font-size: 22px;
    color: #6688AA;
    background: rgba(255, 255, 255, 0.7);
    padding: 8px 12px;
    border-radius: 4px;
}

.mp-ten-god-explanation {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%);
    border-radius: 8px;
    border-left: 4px solid #8B4513;
}
.mp-explanation-category { font-size: 24px; color: #8B4513; font-weight: 600; margin-bottom: 8px; }
.mp-explanation-desc { font-size: 24px; color: #555; line-height: 1.6; margin-bottom: 8px; }
.mp-explanation-aspect {
    font-size: 22px;
    color: #888;
    background: rgba(255, 255, 255, 0.7);
    padding: 8px 12px;
    border-radius: 4px;
}

.mp-legend { margin-top: 24px; padding-top: 24px; border-top: 1px solid #eee; }
.mp-legend-title { font-size: 26px; font-weight: 600; color: #333; margin-bottom: 16px; text-align: center; }
.mp-legend-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mp-legend-item { background: #f9f9f9; border-radius: 8px; padding: 12px 8px; text-align: center; }
.mp-legend-name { display: block; font-size: 24px; font-weight: 600; color: #8B4513; margin-bottom: 4px; }
.mp-legend-desc { display: block; font-size: 20px; color: #666; }

/* 日主身强身弱 */
.mp-strength-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CD 100%);
    border-radius: 12px;
}
.mp-day-master-info { display: flex; flex-direction: column; }
.mp-day-master-label { font-size: 22px; color: #999; margin-bottom: 8px; }
.mp-day-master-value { font-size: 32px; font-weight: 700; color: #8B4513; }
.mp-strength-level {
    font-size: 28px;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 32px;
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    color: #fff;
}
.mp-strength-level.level-1 { background: linear-gradient(135deg, #F44336 0%, #FF5722 100%); }
.mp-strength-level.level-2 { background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%); }
.mp-strength-level.level-3 { background: linear-gradient(135deg, #FFC107 0%, #FFEB3B 100%); }
.mp-strength-level.level-4 { background: linear-gradient(135deg, #2196F3 0%, #03A9F4 100%); }
.mp-strength-level.level-5 { background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%); }
.mp-strength-level.level-6 { background: linear-gradient(135deg, #607D8B 0%, #9E9E9E 100%); }
.mp-strength-level.level-7 { background: linear-gradient(135deg, #795548 0%, #9E9E9E 100%); }

.mp-power-comparison { margin-bottom: 24px; }
.mp-power-item { display: flex; align-items: center; margin-bottom: 16px; }
.mp-power-label { width: 140px; font-size: 26px; color: #666; flex-shrink: 0; }
.mp-power-value { width: 80px; font-size: 28px; font-weight: 600; color: #333; text-align: right; flex-shrink: 0; margin-right: 16px; }
.mp-power-bar-wrapper { flex: 1; height: 24px; background: #f0f0f0; border-radius: 12px; overflow: hidden; }
.mp-power-bar { height: 100%; border-radius: 12px; transition: width 0.3s; }
.mp-power-bar.support { background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%); }
.mp-power-bar.restrain { background: linear-gradient(135deg, #F44336 0%, #FF5722 100%); }

.mp-strength-analysis { margin-bottom: 24px; padding: 20px; background: #f9f9f9; border-radius: 12px; }
.mp-analysis-title { font-size: 26px; font-weight: 600; color: #333; margin-bottom: 16px; }
.mp-analysis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mp-analysis-item { background: #fff; padding: 16px; border-radius: 8px; text-align: center; }
.mp-analysis-name { font-size: 24px; color: #666; margin-bottom: 8px; }
.mp-analysis-value { font-size: 32px; font-weight: 700; color: #8B4513; }

.mp-strength-suggestion {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    border-radius: 12px;
    padding: 24px;
    border-left: 6px solid #4CAF50;
}
.mp-suggestion-title { font-size: 28px; font-weight: 700; color: #2E7D32; margin-bottom: 12px; }
.mp-suggestion-content { font-size: 26px; color: #333; line-height: 1.6; margin-bottom: 12px; }
.mp-suggestion-tip {
    font-size: 24px;
    color: #555;
    background: rgba(255, 255, 255, 0.7);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    line-height: 1.6;
}
.mp-suggestion-elements { font-size: 24px; color: #2E7D32; margin-bottom: 8px; font-weight: 500; }
.mp-suggestion-careers { font-size: 24px; color: #666; }

/* 十二长生 */
.mp-longevity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mp-longevity-item { background: #f9f9f9; border-radius: 8px; padding: 16px; text-align: center; }
.mp-longevity-pillar { font-size: 22px; color: #999; }
.mp-longevity-dz { font-size: 28px; font-weight: 600; color: #333; margin: 8px 0; }
.mp-longevity-state { font-size: 22px; color: #8B4513; }

/* 神煞 */
.mp-pillar-section { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f0f0f0; }
.mp-pillar-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.mp-pillar-title {
    font-size: 28px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 24px;
    margin-bottom: 16px;
    display: inline-block;
    color: #fff;
}
.mp-pillar-title.year { background: linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%); }
.mp-pillar-title.month { background: linear-gradient(135deg, #4ECDC4 0%, #44B3AB 100%); }
.mp-pillar-title.day { background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%); }
.mp-pillar-title.hour { background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%); }

.mp-shensha-list { display: flex; flex-wrap: wrap; gap: 16px; }
.mp-shensha-item {
    background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%);
    border: 1px solid #DEB887;
    border-radius: 24px;
    padding: 16px 24px;
}
.mp-shensha-name { font-size: 28px; font-weight: 600; color: #8B4513; }
.mp-shensha-desc { font-size: 22px; color: #666; margin-top: 4px; }

.mp-no-shensha { text-align: center; padding: 40px; color: #999; font-size: 28px; }

/* 冲合 */
.mp-chonghe-summary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 16px;
    margin-bottom: 30px;
}
.mp-summary-item { display: flex; flex-direction: column; align-items: center; }
.mp-summary-label { font-size: 24px; color: #666; margin-bottom: 8px; }
.mp-summary-value { font-size: 36px; font-weight: 700; color: #333; }
.mp-summary-item.good .mp-summary-value { color: #4CAF50; }
.mp-summary-item.bad .mp-summary-value { color: #F44336; }
.mp-summary-divider { width: 1px; height: 60px; background: #ddd; }

.mp-chonghe-list { margin-bottom: 30px; }
.mp-chonghe-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.mp-chonghe-item.liuhe, .mp-chonghe-item.wuhe {
    border-color: #FFD700;
    background: linear-gradient(135deg, #FFF8DC 0%, #FFECB3 100%);
}
.mp-chonghe-item.sanhe, .mp-chonghe-item.sanhui {
    border-color: #8BC34A;
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}
.mp-chonghe-item.liuchong {
    border-color: #F44336;
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
}
.mp-chonghe-item.xianghai {
    border-color: #FF9800;
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}

.mp-chonghe-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mp-chonghe-type { font-size: 32px; font-weight: 700; color: #333; }
.mp-chonghe-item.liuhe .mp-chonghe-type, .mp-chonghe-item.wuhe .mp-chonghe-type { color: #FFD700; }
.mp-chonghe-item.sanhe .mp-chonghe-type, .mp-chonghe-item.sanhui .mp-chonghe-type { color: #8BC34A; }
.mp-chonghe-item.liuchong .mp-chonghe-type { color: #F44336; }
.mp-chonghe-item.xianghai .mp-chonghe-type { color: #FF9800; }
.mp-chonghe-relation {
    font-size: 26px;
    color: #666;
    background: #fff;
    padding: 6px 16px;
    border-radius: 20px;
}
.mp-chonghe-pillars { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.mp-pillar-tag {
    background: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 24px;
    color: #555;
    border: 1px solid #ddd;
}
.mp-chonghe-desc { font-size: 26px; color: #666; line-height: 1.6; }
.mp-no-chonghe { text-align: center; padding: 40px; color: #999; font-size: 28px; }

.mp-chonghe-explanation { background: #f9f9f9; border-radius: 12px; padding: 24px; }
.mp-explanation-title { font-size: 28px; font-weight: 600; color: #333; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.mp-explanation-item { margin-bottom: 12px; }
.mp-explanation-text { font-size: 24px; color: #666; line-height: 1.6; }

/* 称骨 */
.mp-bone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.mp-bone-item { background: #f9f9f9; border-radius: 8px; padding: 20px; text-align: center; }
.mp-bone-label { font-size: 24px; color: #999; margin-bottom: 8px; }
.mp-bone-value { font-size: 28px; color: #333; font-weight: 600; }

.mp-bone-total {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
    border-radius: 12px;
    margin-bottom: 16px;
}
.mp-bone-total-label { font-size: 28px; color: rgba(255, 255, 255, 0.9); }
.mp-bone-total-value { font-size: 36px; font-weight: 700; color: #fff; margin: 0 8px; }
.mp-bone-comment {
    font-size: 26px;
    color: #666;
    line-height: 1.8;
    text-align: center;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* 大运/小运 */
.mp-luck-info {
    font-size: 28px;
    color: #666;
    margin-bottom: 20px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}
.mp-luck-list { max-height: 600px; overflow-y: auto; }
.mp-luck-item {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 12px;
}
.mp-luck-age { font-size: 26px; color: #999; }
.mp-luck-pillar { font-size: 32px; font-weight: 600; color: #333; margin: 8px 0; }
.mp-luck-detail { font-size: 24px; color: #666; }

/* 流年 */
.mp-liunian-info {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%);
    border-radius: 12px;
}
.mp-liunian-year { font-size: 28px; color: #666; }
.mp-liunian-pillar { font-size: 40px; font-weight: 700; color: #8B4513; margin: 12px 0; }
.mp-liunian-detail { font-size: 26px; color: #666; }

/* 运势 */
.mp-fortune-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mp-fortune-date { font-size: 26px; color: #999; }
.mp-fortune-level {
    font-size: 28px;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 30px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #fff;
}

.mp-fortune-pillar {
    font-size: 24px;
    color: #666;
    text-align: center;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 24px;
}

.mp-fortune-content {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CD 100%);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.mp-fortune-title { font-size: 32px; font-weight: 700; color: #8B4513; text-align: center; margin-bottom: 16px; }
.mp-fortune-text { font-size: 26px; color: #555; line-height: 1.8; margin-bottom: 16px; }
.mp-fortune-quote {
    font-size: 24px;
    color: #999;
    font-style: italic;
    text-align: center;
    margin-bottom: 20px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
}
.mp-fortune-suggestion { background: rgba(255, 255, 255, 0.8); border-radius: 8px; padding: 16px; }
.mp-suggestion-label { font-size: 24px; color: #8B4513; font-weight: 600; margin-bottom: 8px; }
.mp-suggestion-text { font-size: 24px; color: #666; line-height: 1.6; }

.mp-day-master-note {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border-left: 6px solid #2196F3;
}
.mp-note-title { font-size: 26px; font-weight: 600; color: #1565C0; margin-bottom: 8px; }
.mp-note-desc { font-size: 22px; color: #666; line-height: 1.6; }

.mp-lucky-info { display: flex; flex-direction: column; gap: 16px; }
.mp-lucky-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f9f9f9;
    border-radius: 8px;
}
.mp-lucky-label { font-size: 26px; color: #666; font-weight: 500; }
.mp-lucky-value { font-size: 26px; color: #8B4513; font-weight: 600; }

/* 五行 */
.mp-wuxing-list { margin-bottom: 24px; }
.mp-wuxing-item { display: flex; align-items: center; margin-bottom: 20px; }
.mp-wuxing-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    margin-right: 20px;
    flex-shrink: 0;
}
.mp-wuxing-bar-wrapper {
    flex: 1;
    height: 40px;
    background: #f0f0f0;
    border-radius: 20px;
    overflow: hidden;
    margin-right: 20px;
}
.mp-wuxing-bar { height: 100%; border-radius: 20px; transition: width 0.3s; min-width: 20px; }
.mp-wuxing-count {
    width: 80px;
    font-size: 26px;
    color: #333;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}
.mp-wuxing-summary {
    text-align: center;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 26px;
    color: #666;
}

/* ==================== 配婚页 ==================== */
.mp-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #f0f0f0;
    min-height: 80px;
}
.mp-form-row:last-child { border-bottom: none; }
.mp-form-label { font-size: 28px; color: #333; }

/* ==================== 配婚结果 ==================== */
.mp-match-score { display: flex; justify-content: center; margin-bottom: 24px; }
.mp-score-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#8B4513 0deg, #8B4513 0deg, #f0f0f0 0deg, #f0f0f0 360deg);
}
.mp-score-inner {
    width: 160px;
    height: 160px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mp-score-value { font-size: 56px; font-weight: 700; color: #8B4513; }
.mp-score-label { font-size: 24px; color: #999; }
.mp-match-level { text-align: center; font-size: 36px; font-weight: 700; margin-top: 16px; }

.mp-couple-info { display: flex; justify-content: space-between; align-items: center; }
.mp-person-item { display: flex; align-items: center; flex: 1; }
.mp-person-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    margin-right: 20px;
}
.mp-person-icon.male { background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); }
.mp-person-icon.female { background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%); }
.mp-person-detail { display: flex; flex-direction: column; }
.mp-person-zodiac { font-size: 32px; font-weight: 600; color: #333; }
.mp-person-year { font-size: 24px; color: #999; }
.mp-heart-icon { font-size: 48px; color: #E91E63; margin: 0 20px; }

.mp-analysis-content { background: #f9f9f9; border-radius: 12px; padding: 20px; }
.mp-analysis-item {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}
.mp-analysis-item:last-child { border-bottom: none; }
.mp-analysis-label { font-size: 28px; color: #666; }
.mp-analysis-value { font-size: 28px; color: #8B4513; font-weight: 600; }

.mp-comment-content {
    background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%);
    border-radius: 12px;
    padding: 24px;
    font-size: 28px;
    color: #8B4513;
    line-height: 1.8;
}
.mp-tips-content {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 24px;
    font-size: 26px;
    color: #666;
    line-height: 1.8;
}

/* ==================== 个人中心 ==================== */
.mp-profile-header { text-align: center; padding: 40px 0; }
.mp-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
    color: #fff;
    font-size: 60px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.mp-nickname { font-size: 36px; font-weight: 600; color: #333; margin-bottom: 8px; }
.mp-username { font-size: 24px; color: #999; }

.mp-menu-list { background: #fff; border-radius: 16px; margin-bottom: 30px; overflow: hidden; }
.mp-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}
.mp-menu-item:last-child { border-bottom: none; }
.mp-menu-left { display: flex; align-items: center; }
.mp-menu-icon { font-size: 36px; margin-right: 20px; }
.mp-menu-text { font-size: 30px; color: #333; }
.mp-menu-arrow { font-size: 36px; color: #ccc; }
.mp-menu-value { font-size: 26px; color: #999; }

.mp-logout-btn {
    background: #fff;
    color: #F44336;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    padding: 30px;
    border-radius: 16px;
    margin-top: 40px;
    cursor: pointer;
}

/* ==================== 记录页 ==================== */
.mp-records-loading {
    text-align: center;
    padding: 60px 0;
    color: #999;
    font-size: 26px;
}
.mp-records-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #8B4513;
    border-radius: 50%;
    animation: mp-spin 1s linear infinite;
    margin: 0 auto 20px;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }

.mp-records-empty { text-align: center; padding: 100px 0; }
.mp-empty-icon { font-size: 100px; margin-bottom: 20px; }
.mp-empty-text { font-size: 28px; color: #999; }

.mp-records-list { display: flex; flex-direction: column; gap: 20px; }
.mp-record-item {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.mp-record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    cursor: pointer;
}
.mp-record-name { font-size: 30px; font-weight: 600; color: #333; }
.mp-record-date { font-size: 24px; color: #999; }
.mp-record-bazi {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    cursor: pointer;
}
.mp-record-bazi .mp-bazi-item { background: #f9f9f9; padding: 12px 16px; font-size: 26px; color: #8B4513; font-weight: 600; border-radius: 8px; }
.mp-record-actions { display: flex; gap: 16px; }
.mp-record-actions .mp-action-btn { font-size: 24px; padding: 12px; height: auto; line-height: 1.4; }
.mp-record-actions .pdf-btn { color: #8B4513; border-color: #8B4513; }
.mp-record-actions .delete-btn { color: #F44336; border-color: #F44336; }

/* ==================== Loading ==================== */
.mp-loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mp-loading-spinner {
    width: 80px;
    height: 80px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 6px solid #fff;
    border-radius: 50%;
    animation: mp-spin 1s linear infinite;
    margin-bottom: 20px;
}
.mp-loading-text { color: #fff; font-size: 28px; }

/* ==================== Toast ==================== */
.mp-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    font-size: 28px;
    z-index: 10000;
    max-width: 80%;
    text-align: center;
}

/* ==================== 弹窗 ==================== */
.mp-modal-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.mp-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
}
.mp-modal-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    padding: 30px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
.mp-modal-body { padding: 30px; }
.mp-modal-input {
    width: 100%;
    height: 80px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    box-sizing: border-box;
}
.mp-modal-input:focus { border-color: #8B4513; }
.mp-modal-text { font-size: 28px; color: #666; line-height: 1.6; }
.mp-modal-footer { display: flex; border-top: 1px solid #f0f0f0; }
.mp-modal-btn {
    flex: 1;
    padding: 28px;
    font-size: 30px;
    background: #fff;
    color: #666;
    border: none;
    border-right: 1px solid #f0f0f0;
    cursor: pointer;
}
.mp-modal-btn:last-child { border-right: none; }
.mp-modal-btn.primary { color: #8B4513; font-weight: 600; }

/* ==================== Picker 弹层 ==================== */
.mp-picker-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9997;
    display: flex;
    align-items: flex-end;
}
.mp-picker {
    background: #fff;
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.mp-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    border-bottom: 1px solid #f0f0f0;
}
.mp-picker-cancel, .mp-picker-confirm {
    font-size: 30px;
    background: none;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
}
.mp-picker-cancel { color: #666; }
.mp-picker-confirm { color: #8B4513; font-weight: 600; }
.mp-picker-title { font-size: 32px; font-weight: 600; color: #333; }
.mp-picker-body {
    overflow-y: auto;
    padding: 20px 0;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.mp-picker-option {
    padding: 24px 30px;
    font-size: 28px;
    color: #333;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
}
.mp-picker-option.active { background: rgba(139, 69, 19, 0.1); color: #8B4513; font-weight: 600; }
.mp-picker-option:hover { background: #f9f9f9; }