/* 学习工具通用样式 */
.calculator-section { padding: 20px 0; }
.calculator-container { max-width: 800px; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 30px; }

/* 输入样式 */
.input-section { margin-bottom: 25px; }
.input-label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 500; color: #333; }
.input-text { width: 100%; padding: 12px 15px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 16px; }
.input-text:focus { outline: none; border-color: #2196f3; }
.select-box { width: 100%; padding: 12px 15px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 16px; background: #fff; }
.select-box:focus { outline: none; border-color: #2196f3; }
.input-row { display: flex; gap: 15px; align-items: center; }
.input-group { flex: 1; }
.currency-symbol { font-size: 16px; color: #666; margin-right: 5px; }

/* 按钮样式 */
.calculate-btn, .generate-btn {
    display: block; width: 100%; padding: 15px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white; border: none; border-radius: 4px;
    font-size: 16px; font-weight: 500; cursor: pointer;
    margin-bottom: 30px; transition: opacity 0.3s;
}
.calculate-btn:hover, .generate-btn:hover { opacity: 0.9; }

/* 结果区域 */
.result-section { background: #f8f9fa; border-radius: 8px; padding: 25px; margin-bottom: 30px; }
.result-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 20px; text-align: center; }
.result-card {
    padding: 30px; border-radius: 12px; text-align: center; color: white;
    margin-bottom: 20px;
}
.result-card.success { background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%); }
.result-card.warning { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); }
.result-card.danger { background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); }
.result-amount { font-size: 48px; font-weight: 700; margin-bottom: 10px; }
.result-label { font-size: 16px; opacity: 0.9; }

/* 详情列表 */
.detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.detail-item { padding: 15px; background: #fff; border-radius: 8px; text-align: center; }
.detail-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.detail-value { font-size: 24px; font-weight: 600; color: #333; }

/* 分类区域 */
.category-section { margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid #eee; }
.category-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 20px; display: flex; align-items: center; }
.category-title i { margin-right: 10px; }

/* 小贴士 */
.tips-section { background: #e3f2fd; border: 1px solid #bbdefb; border-radius: 8px; padding: 15px; }
.tips-title { font-size: 14px; font-weight: 600; color: #1565c0; margin-bottom: 10px; }
.tips-list { font-size: 14px; color: #1565c0; line-height: 1.8; }

/* 风格卡片 */
.style-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-bottom: 25px; }
.style-card {
    padding: 15px; border: 2px solid #dee2e6; border-radius: 8px;
    text-align: center; cursor: pointer; transition: all 0.3s;
}
.style-card:hover, .style-card.active { border-color: #ff5722; background: #fff3e0; }
.style-icon { font-size: 24px; margin-bottom: 8px; }
.style-name { font-size: 14px; font-weight: 500; color: #333; }

/* 角色标签 */
.role-tabs { display: flex; gap: 10px; margin-bottom: 25px; }
.role-tab {
    flex: 1; padding: 12px; text-align: center; border: 2px solid #dee2e6;
    border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500;
    transition: all 0.3s;
}
.role-tab:hover, .role-tab.active { border-color: #9c27b0; background: #f3e5f5; color: #7b1fa2; }

/* 长度选项 */
.length-options { display: flex; gap: 10px; margin-bottom: 25px; }
.length-option {
    flex: 1; padding: 10px; text-align: center; border: 2px solid #dee2e6;
    border-radius: 4px; cursor: pointer; font-size: 13px;
    transition: all 0.3s;
}
.length-option:hover, .length-option.active { border-color: #9c27b0; background: #f3e5f5; }

/* 复制按钮 */
.copy-btn {
    padding: 8px 15px; background: #2196f3; color: white;
    border: none; border-radius: 4px; font-size: 13px; cursor: pointer;
    transition: all 0.3s;
}
.copy-btn:hover { opacity: 0.9; }
.copy-btn.copied { background: #4caf50; }

/* 表格样式 */
.plan-table { width: 100%; border-collapse: collapse; }
.plan-table th, .plan-table td { padding: 12px; text-align: center; border-bottom: 1px solid #dee2e6; }
.plan-table th { background: #f8f9fa; font-weight: 600; }
.plan-table tr:hover { background: #f8f9fa; }

/* 物品卡片 */
.item-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.item-card {
    padding: 15px; border: 2px solid #dee2e6; border-radius: 8px;
    cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 12px;
}
.item-card:hover, .item-card.selected { border-color: #ff5722; background: #fff3e0; }
.item-checkbox { width: 20px; height: 20px; cursor: pointer; }
.item-info { flex: 1; }
.item-name { font-size: 14px; font-weight: 500; color: #333; }
.item-price { font-size: 13px; color: #ff5722; margin-top: 2px; }

/* 自定义物品 */
.custom-item { margin-top: 15px; }
.custom-input-row { display: flex; gap: 10px; }
.custom-input { flex: 1; padding: 10px 12px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px; }
.custom-input:focus { outline: none; border-color: #ff5722; }
.add-custom-btn { padding: 10px 20px; background: #ff5722; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
.custom-items-list { margin-top: 15px; }
.custom-item-row { display: flex; align-items: center; padding: 10px; background: #fff3e0; border-radius: 4px; margin-bottom: 8px; gap: 10px; }
.custom-item-name { flex: 2; font-size: 14px; color: #333; }
.custom-item-price { flex: 1; font-size: 14px; color: #ff5722; text-align: right; }
.remove-custom-btn { padding: 5px 10px; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }

/* 旅行类型卡片 */
.travel-type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.travel-type-card {
    padding: 20px; border: 2px solid #dee2e6; border-radius: 8px;
    text-align: center; cursor: pointer; transition: all 0.3s;
}
.travel-type-card:hover, .travel-type-card.active { border-color: #00bcd4; background: #e1f5fe; }
.travel-type-icon { font-size: 28px; margin-bottom: 10px; }
.travel-type-name { font-size: 15px; font-weight: 500; color: #333; }
.travel-type-desc { font-size: 12px; color: #666; margin-top: 5px; }

/* 学校卡片 */
.school-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.school-card { background: #fff; border-radius: 8px; padding: 20px; border-left: 4px solid; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.school-card.risk-high { border-color: #f44336; }
.school-card.risk-medium { border-color: #ff9800; }
.school-card.risk-low { border-color: #4caf50; }
.school-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 10px; }
.school-type { font-size: 13px; color: #666; margin-bottom: 15px; }
.school-stats { display: flex; justify-content: space-between; margin-bottom: 10px; }
.stat-item { text-align: center; }
.stat-label { font-size: 12px; color: #999; margin-bottom: 4px; }
.stat-value { font-size: 16px; font-weight: 600; }
.probability-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 15px; }
.probability-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.probability-fill.high { background: linear-gradient(90deg, #4caf50, #81c784); }
.probability-fill.medium { background: linear-gradient(90deg, #ff9800, #ffcc80); }
.probability-fill.low { background: linear-gradient(90deg, #f44336, #ff8a80); }
.risk-label { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; margin-top: 10px; }
.risk-label.high { background: #ffebee; color: #c62828; }
.risk-label.medium { background: #fff3e0; color: #e65100; }
.risk-label.low { background: #e8f5e9; color: #2e7d32; }

/* 比较区域 */
.comparison-section { margin-top: 20px; padding: 20px; background: #fff; border-radius: 8px; }
.comparison-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 15px; }
.comparison-row { display: flex; gap: 20px; }
.comparison-item { flex: 1; padding: 15px; text-align: center; border-radius: 8px; }
.comparison-item.full { background: #e8f5e9; }
.comparison-item.installment { background: #fff3e0; }
.comparison-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.comparison-value { font-size: 28px; font-weight: 700; }
.comparison-item.full .comparison-value { color: #2e7d32; }
.comparison-item.installment .comparison-value { color: #e65100; }

/* 目标区域 */
.target-section { margin-top: 20px; padding: 20px; background: #fff3e0; border-radius: 8px; }
.target-title { font-size: 16px; font-weight: 600; color: #e65100; margin-bottom: 15px; }
.target-row { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
.target-input { flex: 1; padding: 10px; border: 1px solid #ffb74d; border-radius: 4px; }
.target-result { padding: 15px; background: #fff; border-radius: 8px; text-align: center; }
.target-amount { font-size: 28px; font-weight: 700; color: #00bcd4; }
.target-label { font-size: 14px; color: #666; margin-top: 5px; }

/* 年龄卡片 */
.age-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.age-card { padding: 25px; border-radius: 12px; text-align: center; }
.age-card.solar { background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%); }
.age-card.lunar { background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%); }
.age-label { font-size: 14px; color: rgba(255,255,255,0.9); margin-bottom: 10px; }
.age-value { font-size: 48px; font-weight: 700; color: white; }

/* 生日卡片 */
.birthday-card { background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%); padding: 25px; border-radius: 12px; text-align: center; color: white; }
.birthday-days { font-size: 36px; font-weight: 700; margin-bottom: 10px; }
.birthday-label { font-size: 16px; opacity: 0.9; }

/* 详情区域 */
.detail-section { margin-top: 20px; padding: 20px; background: #fff; border-radius: 8px; }
.detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
.detail-label { color: #666; }
.detail-value { font-weight: 600; color: #333; }

/* 状态警告 */
.budget-warning { background: #fff3e0; border: 1px solid #ffe0b2; border-radius: 8px; padding: 15px; margin-top: 15px; display: none; }
.budget-warning.show { display: block; }
.warning-icon { font-size: 16px; margin-right: 5px; }
.warning-text { font-size: 14px; color: #e65100; }

/* 响应式 */
@media (max-width: 768px) {
    .calculator-container { padding: 20px; }
    .input-row { flex-direction: column; }
    .input-group { width: 100%; }
    .detail-list { grid-template-columns: 1fr; }
    .school-list { grid-template-columns: 1fr; }
    .comparison-row { flex-direction: column; }
    .age-cards { grid-template-columns: 1fr; }
}