:root {
    --primary-blue: #007bff;
    --color-light: #f8f9fa; /* 浅灰色背景 */
    --color-white: #ffffff;
    --text-dark: #343a40; /* 深色文本 */
    --text-muted: #6c757d; /* 柔和文本 */
    --border-color: #dee2e6; /* 边框颜色 */
    --shadow-color: rgba(0, 0, 0, 0.05);
}

/* --- BASE STYLES --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-light);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0; 
}

/* 保持 container 最大宽度和居中，用于限制主要内容 */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- HEADER STYLES --- */
.header {
    /* 头部全屏，白色背景 */
    width: 100%;
    background-color: var(--color-white); 
    padding: 15px 0;
    box-shadow: 0 2px 4px var(--shadow-color);
    margin-bottom: 0; 
}

/* 限制头部内部内容的宽度和居中，使用 Flex 布局实现左右对齐 */
.header-content {
    display: flex;
    justify-content: space-between; /* 关键：推开左侧 Logo 和右侧导航 */
    align-items: center;
    max-width: 1100px; 
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo 区域样式 */
.header-logo-area {
    /* 保证 logo 区域居中对齐 */
    display: flex;
    align-items: center;
}

/* Logo 图片样式 */
.logo-img {
    height: 80px; /* 调整 Logo 大小到合适尺寸 */
    width: auto;
}

/* 导航容器样式 (Right) */
.header-right {
    display: flex;
    align-items: center;
}

/* 导航链接样式 */
.nav-links a {
    color: var(--text-dark); /* 链接改为深色，与白色背景形成对比 */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    margin-left: 25px; /* 增加链接之间的距离 */
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--primary-blue); /* 悬停时使用蓝色 */
}

/* --- PAGE TITLE (New H1 Position) --- */
.page-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-dark);
    margin-top: 30px; 
    margin-bottom: 40px; 
}

/* --- CALCULATOR WRAPPER & LAYOUT --- */
.calculator-wrapper {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

.calculator-form {
    flex: 2; /* 占据 2/3 空间 */
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.calculator-results {
    flex: 1; /* 占据 1/3 空间 */
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    min-width: 300px;
}



/* --- TABS --- */
.tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.tab-button {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: border-bottom 0.3s, color 0.3s;
}

.tab-button.active {
    color: var(--primary-blue);
    border-bottom: 3px solid var(--primary-blue);
}

.tab-content {
    animation: fadeIn 0.5s ease-in-out;
}

.tab-content.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- FORM STYLES --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
	position: relative;
}

.form-group label {
	display: flex; /* 启用 Flex 布局 */
    align-items: center; /* 垂直居中对齐图标和文本 */
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--color-white);
}

.input-wrapper input[type="number"] {
    flex-grow: 1;
    border: none;
    padding: 10px;
    outline: none;
    font-size: 1rem;
}

.currency-symbol, .suffix {
    padding: 0 10px;
    color: var(--text-muted);
    font-weight: 500;
}

input[type="number"], select {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--text-dark);
    box-sizing: border-box;
    width: 100%;
}

select {
    appearance: none; /* 移除默认下拉箭头 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2069.4L146.2%20208.7L5.4%2069.4h281.6z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/* Tax and Fees adjustment */
.tax-fees-section {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}

/* --- CONTROL GROUP & BUTTONS --- */
.control-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.checkbox-group {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

.calculate-btn {
    background-color: var(--primary-blue);
    color: var(--color-white);
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.calculate-btn:hover {
    background-color: #0056b3;
}

/* --- RESULTS ASIDE --- */
.results-heading {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.result-card {
    text-align: center;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 6px;
    background-color: var(--color-light);
}

.result-card h3 {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 0;
    margin-bottom: 5px;
}

.big-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-blue);
}

.result-details {
    margin-bottom: 25px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95rem;
    border-bottom: 1px dotted var(--border-color);
}

.detail-row:last-of-type {
    border-bottom: none;
}

.detail-row span:first-child {
    color: var(--text-dark);
}

.detail-row .value {
    font-weight: 600;
    color: var(--text-dark);
}

.detail-row.total {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    border-top: 2px solid var(--text-dark);
    padding-top: 10px;
}

.divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 10px 0;
}

.chart-container {
    padding: 15px 0;
    text-align: center;
}

.chart-container h3 {
    color: var(--text-dark);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.disclaimer {
    margin-top: 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-color);
    padding-top: 10px;
}


/* --- AMORTIZATION CHART BELOW FORM (Line Chart) --- */
.chart-below-form {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.chart-below-form h3 {
    color: var(--text-dark);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* --- AMORTIZATION SCHEDULE SECTION --- */
.amortization-section {
    margin-bottom: 50px;
    padding: 30px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.schedule-heading {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.schedule-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.schedule-tab-button {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: border-bottom 0.3s, color 0.3s;
}

.schedule-tab-button.active {
    color: var(--primary-blue);
    border-bottom: 3px solid var(--primary-blue);
}

.schedule-output-content.hidden {
    display: none;
}

.no-results-message {
    text-align: center;
    padding: 40px;
    font-style: italic;
    color: var(--text-muted);
}

/* --- AMORTIZATION SCHEDULE TABLE STYLES --- */
.schedule-output-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.9rem;
    table-layout: fixed; 
}

/* 核心修复：对齐所有表头和数据单元格 */
.schedule-output-content th,
.schedule-output-content td {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    text-align: right; /* 确保数字和标题右对齐 */
    vertical-align: middle;
}

/* 保持第一列（例如：月份/年份标签）为左对齐，以便于阅读 */
.schedule-output-content th:first-child,
.schedule-output-content td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-dark);
    width: 120px; /* 设置第一列固定宽度 */
}

/* 表头背景和字体样式 (蓝色) */
.schedule-output-content th {
    background-color: var(--primary-blue); /* 标题行改为蓝色 */
    color: var(--color-white); /* 标题文本改为白色 */
    font-weight: 600;
    text-transform: uppercase;
}

/* --- TOOLTIP STYLES --- */
.tooltip-trigger {
    cursor: help; /* 鼠标样式改为问号，提示可点击 */
    color: var(--primary-blue);
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 5px;
    position: relative; /* 确保问号图标相对于 label 正确定位 */
}

/* Tooltip 浮动框样式 */
.tooltip-box {
    position: absolute;
    background-color: var(--text-dark); /* 深色背景 */
    color: var(--color-white); /* 白色文字 */
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    width: 250px;
    z-index: 1000;
    line-height: 1.5;
    pointer-events: none; /* 允许鼠标穿透，不阻挡下方元素 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: none; /* 默认隐藏 */
    transform: none;
    top: 100%; /* 默认显示在触发器下方 */
    left: 0;
	margin-top: 5px;
}

/* Tooltip 箭头 */
.tooltip-box::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--text-dark) transparent;
}

/* Tooltip 显示状态 */
.tooltip-box.show {
    display: block;
}


/* --- FEATURE CONTENT SECTION STYLES --- */

/* 整体布局：确保内容区域与主体内容宽度对齐 */
.content-feature-section {
    padding: 30px 20px;
    margin-bottom: 50px;
    background-color: var(--color-light); /* 与 Body 背景色一致 */
    border-radius: 8px; /* 轻微圆角 */
    /* 使用 Flexbox 或 Grid 布局，使两部分内容并排（如果空间足够） */
    display: grid;
    grid-template-columns: 1fr 2fr; /* 左侧简介 1 份，右侧提示 2 份 */
    gap: 30px;
}

.content-feature-section h3 {
    color: var(--text-dark); /* 深色标题 */
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
}

.content-feature-section p,
.content-feature-section li {
    font-size: 1rem;
    color: var(--text-muted); /* 柔和的文字颜色 */
    line-height: 1.7;
}

/* 左侧介绍卡片样式 */
.feature-card {
    padding: 20px;
    background-color: var(--color-white); /* 白色背景，突出显示 */
    border-left: 5px solid var(--primary-blue); /* 品牌色装饰条 */
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow-color);
}

.feature-card strong {
    color: var(--primary-blue);
    font-weight: 600;
}

/* 右侧提示列表样式 */
.feature-tips ul {
    list-style: none; /* 移除默认点 */
    padding-left: 0;
    margin-top: 15px;
}

.feature-tips li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
}

/* 模拟自定义列表点 */
.feature-tips li::before {
    content: '✔️'; /* 使用勾号作为列表点 */
    color: var(--primary-blue);
    font-size: 1rem;
    position: absolute;
    left: 0;
    top: 0;
}

/* --- AUTO LOAN TERMINOLOGY STYLES --- */
.terminology-section {
    padding: 30px 20px;
    margin-bottom: 50px;
    background-color: var(--color-light);
    border-radius: 8px;
}

.terminology-section h2 {
    color: var(--text-dark);
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}

.terminology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.terminology-item {
    padding: 20px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.terminology-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.terminology-item h3 {
    color: var(--primary-blue);
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
}

.terminology-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* --- AUTO LOAN STRATEGIES STYLES --- */
.strategies-section {
    padding: 30px 20px;
    margin-bottom: 50px;
    background-color: var(--color-light);
    border-radius: 8px;
}

.strategies-section h2 {
    color: var(--text-dark);
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}

.strategies-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

.strategy-item {
    padding: 25px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border-left: 4px solid var(--primary-blue);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.strategy-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.strategy-item h3 {
    color: var(--text-dark);
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
}

.strategy-item p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* --- FOOTER STYLES (修正版) --- */
.footer {
    width: 100%;
    /* 1. 背景改为浅色或白色（与主体内容更接近） */
    background-color: var(--color-light); 
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid var(--border-color); /* 添加顶部细线分隔 */
}

.footer-content {
    /* 2. 移除 Flexbox 布局，改为块级居中 */
    display: block; 
    text-align: center; /* 关键：内容居中 */
    /* 继承 .container 的最大宽度和居中设置 */
    font-size: 0.9rem;
}

.copyright {
    /* 3. 版权信息颜色改为深色，以适应浅色背景 */
    color: var(--text-muted); 
    margin: 0;
    margin-bottom: 5px; /* 在移动端或居中时，与链接隔开 */
}

.footer-links {
    margin: 0;
    padding: 0;
}

.footer-links a {
    /* 4. 链接颜色改为蓝色，以适应浅色背景 */
    color: var(--primary-blue); 
    text-decoration: none;
    font-weight: 500;
    margin: 0 10px; /* 链接之间保持间距 */
    transition: color 0.3s;
}

.footer-links a:hover {
    text-decoration: underline; /* 悬停时添加下划线 */
    color: #0056b3; /* 悬停颜色稍深 */
}

/* 移除响应式媒体查询（因为现在是居中块级布局，默认就是响应式的） */

/* 响应式调整 */
@media (max-width: 600px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .copyright {
        margin-bottom: 10px;
    }
    
    .footer-links a {
        margin: 0 10px;
    }
}

/* 响应式调整 */
@media (max-width: 850px) {
    .content-feature-section {
        grid-template-columns: 1fr; /* 移动端改为单列布局 */
        gap: 20px;
        padding: 20px;
    }
}

/* --- MEDIA QUERIES (Responsiveness) --- */
@media (max-width: 1000px) {
    .calculator-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 850px) {
    /* Header Responsive Adjustments */
    .header-content {
        flex-direction: column; 
        align-items: flex-start;
        gap: 10px;
    }

    .header-logo-area {
        width: 100%;
        justify-content: center; /* 在移动端 Logo 居中 */
        order: 1; /* 确保 Logo 放在第一位 */
    }

    .header-right {
        width: 100%;
        justify-content: center; /* 在移动端导航菜单居中 */
        order: 2; /* 导航菜单在 Logo 下方 */
    }
    
    .nav-links {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
    }

    .nav-links a {
        margin: 5px 10px;
        font-size: 0.9rem;
    }
    
    .page-title {
        font-size: 1.5rem;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Form Responsive Adjustments */
    .form-grid {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 15px;
    }

    .tax-fees-section {
        grid-template-columns: 1fr;
    }
    
    .control-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .calculate-btn {
        width: 100%;
    }
    
    .calculator-form,
    .calculator-results,
    .amortization-section {
        padding: 20px;
    }
    
    /* 表格响应式样式 - 让表格在移动端全部显示 */
    .schedule-output-content table {
        font-size: 0.75rem; /* 缩小字体大小 */
        min-width: auto; /* 移除最小宽度限制 */
        width: 100%; /* 确保表格占满容器宽度 */
    }
    
    /* 减小表格单元格内边距 */
    .schedule-output-content th,
    .schedule-output-content td {
        padding: 8px 6px; /* 减少内边距 */
    }
    
    /* 调整列宽比例 */
    .schedule-output-content th:first-child,
    .schedule-output-content td:first-child {
        width: 80px; /* 进一步缩小第一列宽度 */
    }
    
    /* 确保数字列内容不换行 */
    .schedule-output-content td:not(:first-child) {
        white-space: nowrap; /* 防止数字换行 */
    }
}