* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: #f4f7f6;
    color: #333333;
    line-height: 1.6;
}
/* 顶部导航栏 */
.navbar {
    background: #1a202c;
    padding: 15px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.navbar a {
    color: #a0aec0;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s;
}
.navbar a:hover { color: #fff; background: #2d3748; }
.navbar a.active {
    color: #fff;
    background: #2b6cb0;
    font-weight: 600;
}
/* 主体内容 */
.container {
    max-width: 950px;
    margin: 40px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
h1 { font-size: 1.8rem; color: #1a202c; margin-bottom: 20px; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }
h2 { font-size: 1.3rem; color: #2d3748; margin: 25px 0 15px; }
p { margin-bottom: 15px; color: #4a5568; }

/* ======== 修复后的表格样式 ======== */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 20px 0; 
    font-size: 0.95rem; 
    color: #333333 !important; /* 强制文字为深色 */
    background-color: #ffffff !important; /* 强制背景为白色 */
}
th, td { 
    border: 1px solid #e2e8f0; 
    padding: 12px; 
    text-align: center; 
}
th { 
    background-color: #edf2f7 !important; 
    color: #2d3748 !important; 
    font-weight: 600; 
}
tr:nth-child(even) { 
    background-color: #f7fafc !important; 
}

.tag { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; }
.tag-red { background: #fed7d7; color: #c53030; }
.tag-green { background: #c6f6d5; color: #276749; }
.tag-blue { background: #bee3f8; color: #2b6cb0; }
.card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.card h3 { margin-bottom: 10px; color: #2b6cb0; }

/* ======== 互动计算器样式 ======== */
.mode-tabs {
    display: flex; gap: 12px; margin-bottom: 24px;
    background: #edf2f7; padding: 6px; border-radius: 10px; width: fit-content;
}
.mode-tab {
    padding: 10px 24px; border-radius: 8px; font-weight: 600;
    cursor: pointer; border: none; background: transparent;
    color: #4a5568; font-size: 0.95rem; transition: 0.2s;
}
.mode-tab.active {
    background: #fff; color: #2b6cb0; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
    background: #ebf8ff; border: 1px solid #bee3f8; border-radius: 10px;
    padding: 20px 16px; text-align: center;
}
.stat-label { font-size: 0.85rem; color: #2b6cb0; margin-bottom: 8px; font-weight: 600; }
.stat-value { font-size: 2rem; font-weight: 700; color: #1a202c; line-height: 1.2; }
.stat-unit { font-size: 0.95rem; font-weight: normal; color: #718096; margin-left: 4px; }
.stat-sub { font-size: 0.8rem; color: #718096; margin-top: 8px; }

/* ======== 模拟抽卡页面样式 ======== */
.sim-box { text-align: center; padding: 20px; }
.sim-buttons { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; }
.sim-btn {
    padding: 12px 30px; border-radius: 8px; border: none;
    font-weight: bold; font-size: 1rem; cursor: pointer; transition: 0.2s; color: #fff;
}
.sim-btn-normal { background: #4299e1; }
.sim-btn-normal:hover { background: #3182ce; }
.sim-btn-new { background: #48bb78; }
.sim-btn-new:hover { background: #38a169; }
.sim-btn-reset { background: #a0aec0; }
.sim-btn-reset:hover { background: #718096; }
.sim-status {
    display: flex; justify-content: space-around; background: #edf2f7;
    padding: 20px; border-radius: 10px; margin-bottom: 20px;
}
.sim-status-item { font-size: 1.1rem; color: #333; }
.sim-status-value { font-size: 1.6rem; font-weight: bold; color: #2b6cb0; display: block; }
.sim-log {
    height: 300px; overflow-y: auto; background: #1a202c; color: #a0aec0;
    border-radius: 8px; padding: 15px; text-align: left;
    font-family: monospace; font-size: 1rem; line-height: 1.8;
}
.log-gold { color: #f6e05e; font-weight: bold; }
.log-up { color: #ed8936; font-weight: bold; }