/* 基础样式 - 基于原始CSS */
body,p,td,div,span,input,th,li,textarea{font-family:arial,helvetica,sans-serif;font-size:16px;color:#000;}
body{background:#fff;margin:0px;padding:0px;border:0;text-align: center;}

p{margin:5px 0 8px 0;}
img{border:0px;}
h1{color:#003366;font-size:26px;font-weight:bold;padding:0;margin:12px 0;}
h2{font-size:22px;font-weight:bold;color:#003366;padding:0; margin-bottom: 2px;}
h3{font-size:19px;font-weight:bold;}
hr{border:0;color:#aaa;background-color:#aaa;height:1px;}
a{color:#069;text-decoration:underline;}
a:hover{text-decoration:none;}

/* 输入框样式 */
input{padding: 5px;color:#000;box-sizing: border-box;}
select{padding: 4px;color:#000;box-sizing: border-box;}
option{font-size:16px;}
input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=date],
input[type=email], select {
    border: 1px solid #044284;
    border-radius: 2px;
    box-shadow: 1px 1px 2px #666;
    font-size:16px;
    background-color:#fff;
}
input[type=submit] {
    border: 0px;
    color:#fff;
    padding: 11px 50px 11px 16px;
    font-size:16px;
    font-weight:bold;
    background-color: #4c7b25;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180px" height="40px"><circle cx="112" cy="20" r="11" fill="darkseagreen" /><path d="M110 12 L120 20 L110 28 Z" fill="white" /></svg>');
    background-repeat: no-repeat;
}
input[type=submit]:hover {background-color: #444;}
input[type=reset], input[type=button] {
    border: 0px;
    color:#fff;
    padding: 11px 8px;
    font-size:16px;
    background:#ababab;
}
input[type=reset]:hover, input[type=button]:hover {background:#444;}

/* 头部样式 */
#headerout{background:#003366;text-align: center;}
#header{width:1100px;height:60px;background:#003366;padding:0px;margin-left: auto;margin-right: auto;text-align: left;overflow:hidden;}
#logo{padding: 18px 0px;width:270px;float:left;}
#login{padding: 2px;float:right;color: #ccc;}
#login a{color:#ccc;text-decoration:none;}
#login a:hover{text-decoration:underline;}

/* 内容区域 */
#contentout{width:1100px;padding-top:5px;margin-left: auto;margin-right: auto;text-align: left;overflow:auto;}
#content{padding:0px 0px 15px 0px;width:728px;float:left;}
#right{width:336px;float:right;text-align:center;}

/* 面包屑导航 */
#breadcrumbs, #breadcrumbs span{font-size:13px;}
#breadcrumbs a, #breadcrumbs a span{text-decoration: none;color: #069;}
#breadcrumbs a:hover, #breadcrumbs a span:hover{text-decoration:underline;}

/* 主要分类样式 */
.main-categories {
    margin: 20px 0;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.category-card {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.category-icon {
    margin-bottom: 15px;
}

.category-card h2 {
    margin: 10px 0;
    font-size: 20px;
}

.category-card h2 a {
    color: #003366;
    text-decoration: none;
}

.category-card h2 a:hover {
    text-decoration: underline;
}

.category-card p {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.category-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-links a {
    display: block;
    padding: 8px 12px;
    background: #336699;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.category-links a:hover {
    background: #417516;
}

/* 特色计算器 */
.featured-calculators {
    margin: 40px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.calc-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s ease;
}

.calc-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.calc-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #333;
}

.calc-item a:hover {
    color: #069;
}

.calc-item span {
    font-size: 14px;
    font-weight: 500;
}

/* 关于部分 */
.about-section {
    margin: 40px 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.feature {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.feature h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #003366;
}

.feature p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* 网站地图 */
.sitemap-section {
    margin: 40px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.sitemap-column h3 {
    color: #003366;
    margin-bottom: 10px;
    font-size: 16px;
}

.sitemap-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-column li {
    margin-bottom: 5px;
}

.sitemap-column a {
    color: #069;
    text-decoration: none;
    font-size: 14px;
}

.sitemap-column a:hover {
    text-decoration: underline;
}

/* 侧边栏 */
#othercalc{
    border:solid 1px #336699;
    margin: auto;
    text-align:left;
    width:332px;
}
#octitle{
    background-color: #336699;
    padding: 6px;
    color: #fff;
    font-size: 18px;
    font-weight:bold;
}
#octitle a{
    color: #fff;
    text-decoration: none;
}
#octitle a:hover {
    text-decoration: underline;
}
#occontent{
    padding: 3px 6px;
    font-size: 14px;
}
#occontent a{
    display: inline-block;
    width: 158px;
    padding: 3px 0px;
}

/* 页脚 */
#footer{background:#e1e1e1;padding:25px 0px;font-size:13px;color:#555;text-align:center;}
#footer a{color:#444;}
#footer a:hover{text-decoration:none;}
#footerin{width:1100px;margin-left: auto;margin-right: auto;text-align: left;overflow:auto;color:#555;}
#footernav{text-align: center;}

/* 清除浮动 */
#clear{margin-left: auto;margin-right: auto;clear: both;height: 0px;}

/* 响应式设计 */
@media (max-width:1140px){
    #header{width:990px;padding-left: 8px;}
    #contentout{width:1000px;}
    #content{width:640px;float:left;padding-left:10px;}
    #footerin{width:990px;}
    
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .calculator-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:720px){
    #header{width:auto;padding: 0px 8px;}
    #contentout{width:auto;padding:8px;}
    #content{float:none;width:auto;padding:0px;}
    #right{width:auto;float:none;}
    #footerin{width:auto;}
    
    .category-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .calculator-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .features {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .sitemap-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (max-width:480px){
    .calculator-grid {
        grid-template-columns: 1fr;
    }

    .category-links {
        gap: 6px;
    }

    .category-links a {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* 计算器响应式 */
    .calculator {
        padding: 15px;
        max-width: 280px;
    }

    .calculator-display input {
        height: 50px;
        font-size: 20px;
    }

    .btn {
        height: 45px;
        font-size: 16px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .examples-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* 横幅图片样式 */
#insmdc{background-color:#336699;margin-bottom:3px;text-align:center;}

/* 工具提示 */
#tt {position:absolute;display:block;background-color: #474747;color: #fff;padding: 8px;border: 1px solid #000;text-align:left;}
.ttimg{opacity: 0.4;vertical-align: top;}
.ttimg:hover{opacity: 1;}

/* 面板样式 */
.panel{background:#eee;border: solid 1px #bbbbbb;padding: 5px;}
.panel2{background-color:#eeeeee;padding: 5px;border-right:1px solid #bbbbbb;border-bottom:1px solid #bbbbbb;border-left:1px solid #bbbbbb;}

/* 结果样式 */
.h2result{background:#518428;color:#fff;border:1px solid #518428;padding: 5px;margin-top:3px;font-size:22px;font-weight: normal;}

/* 按钮样式 */
#bluebtn{border-radius: 1px;background:#336699;padding: 5px 8px;font-size:18px;color:#fff;}
#bluebtn:hover{background:#444;color:#fff;}

/* 表格样式 */
table.cinfoT{border-collapse:collapse;border-spacing:0;margin-top:0;}
table.cinfoT th, table.cinfoT td.cinfoHd, table.cinfoT td.cinfoHdL{border-top:1px solid #114477;border-left:1px solid #114477;border-right:1px solid #114477;border-bottom:1px solid #336699;background-color:#336699;font-weight:bold;color:#fff;padding: 5px 3px;}
table.cinfoT td{border:1px solid #ccc;color:#000;padding:3px;}
table.cinfoT tr:nth-child(odd) {background-color: #eee;}
table.cinfoT tr:nth-child(even) {background-color: #fff;}

/* 计算器样式 */
.calculator-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.calculator {
    background: #f8f9fa;
    border: 2px solid #336699;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 320px;
    width: 100%;
}

.calculator-display {
    margin-bottom: 15px;
}

.calculator-display input {
    width: 100%;
    height: 60px;
    font-size: 24px;
    text-align: right;
    padding: 10px;
    border: 2px solid #336699;
    border-radius: 5px;
    background: #000;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    box-sizing: border-box;
}

.calculator-buttons {
    display: grid;
    gap: 8px;
}

.button-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.btn {
    height: 50px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btn-number {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
}

.btn-number:hover {
    background: #f0f0f0;
}

.btn-operator {
    background: #336699;
    color: white;
}

.btn-operator:hover {
    background: #2a5580;
}

.btn-clear {
    background: #ff6b6b;
    color: white;
}

.btn-clear:hover {
    background: #ff5252;
}

.btn-equals {
    background: #4caf50;
    color: white;
}

.btn-equals:hover {
    background: #45a049;
}

.btn-zero {
    grid-column: span 2;
}

/* 计算器信息样式 */
.calculator-info {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.info-item {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #336699;
}

.info-item h3 {
    margin: 0 0 10px 0;
    color: #336699;
    font-size: 16px;
}

.info-item p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* 特色功能样式 */
.features-section {
    margin: 30px 0;
    padding: 20px;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.feature-card {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
}

.feature-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.feature-card h3 {
    margin: 10px 0;
    color: #336699;
    font-size: 16px;
}

.feature-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* 示例样式 */
.examples-section {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.example {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.example h4 {
    margin: 0 0 10px 0;
    color: #336699;
    font-size: 16px;
}

.example p {
    margin: 5px 0;
    font-size: 14px;
}

.example p:first-of-type {
    color: #333;
}

.example p:last-of-type {
    color: #666;
    font-style: italic;
}

/* 相关计算器样式 */
.related-calculators {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.related-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.related-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    color: #336699;
}

.related-item span {
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
}

/* FAQ样式 */
.faq-section {
    margin: 30px 0;
    padding: 20px;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
}

.faq-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.faq-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.faq-item h4 {
    margin: 0 0 10px 0;
    color: #336699;
    font-size: 16px;
}

.faq-item p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

/* 科学计算器样式 */
.scientific-calculator {
    background: #f8f9fa;
    border: 2px solid #336699;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 400px;
    width: 100%;
}

.scientific-buttons {
    display: grid;
    gap: 6px;
}

.scientific-buttons .button-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.btn-function {
    background: #FF9800;
    color: white;
    font-size: 14px;
}

.btn-function:hover {
    background: #F57C00;
}

/* 函数说明样式 */
.functions-section {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.functions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.function-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.function-card h4 {
    margin: 0 0 10px 0;
    color: #336699;
    font-size: 16px;
}

.function-card ul {
    margin: 0;
    padding-left: 20px;
}

.function-card li {
    margin-bottom: 5px;
    font-size: 14px;
    color: #666;
}

.function-card strong {
    color: #333;
    font-family: 'Courier New', monospace;
}

/* 分数计算器样式 */
.fraction-calculator-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.fraction-calculator {
    background: #f8f9fa;
    border: 2px solid #FF9800;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 500px;
    width: 100%;
}

.fraction-calculator h3 {
    text-align: center;
    color: #FF9800;
    margin-bottom: 20px;
}

.fraction-input-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.fraction-input {
    flex: 1;
    min-width: 120px;
}

.fraction-input label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.fraction-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.fraction-display input {
    width: 60px;
    height: 40px;
    text-align: center;
    font-size: 16px;
    border: 2px solid #FF9800;
    border-radius: 4px;
}

.fraction-line {
    font-size: 20px;
    font-weight: bold;
    color: #FF9800;
}

.operation-select {
    display: flex;
    align-items: center;
    justify-content: center;
}

.operation-select select {
    width: 60px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    border: 2px solid #FF9800;
    border-radius: 4px;
    background: white;
}

.calculate-section {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.btn-calculate {
    background: #FF9800;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-calculate:hover {
    background: #F57C00;
}

.result-section {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fraction-equation {
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
}

.fraction {
    font-family: 'Times New Roman', serif;
    font-size: 20px;
    font-weight: bold;
}

.result-fraction {
    color: #FF9800;
    font-size: 24px;
}

.decimal-result {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.error {
    color: #ff0000;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    background: #ffe6e6;
    border-radius: 5px;
}

/* 转换器样式 */
.converter-section {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

.converter {
    background: #f0f4f8;
    border: 2px solid #336699;
    border-radius: 10px;
    padding: 20px;
    max-width: 400px;
    width: 100%;
}

.converter h3 {
    text-align: center;
    color: #336699;
    margin-bottom: 15px;
}

.converter-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.converter-input label {
    font-weight: bold;
    color: #333;
}

.converter-input input {
    padding: 8px;
    border: 2px solid #336699;
    border-radius: 4px;
    font-size: 16px;
}

.btn-convert {
    background: #336699;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-convert:hover {
    background: #2a5580;
}

/* 提示样式 */
.tips-section {
    margin: 30px 0;
    padding: 20px;
    background: #fff3e0;
    border-radius: 8px;
    border-left: 4px solid #FF9800;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.tip {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #FFE0B2;
}

.tip h4 {
    margin: 0 0 10px 0;
    color: #FF9800;
    font-size: 16px;
}

.tip p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* 联系页面样式 */
.contact-section {
    margin: 20px 0;
}

.contact-info {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.contact-item {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #336699;
}

.contact-item h3 {
    margin: 0 0 10px 0;
    color: #336699;
    font-size: 16px;
}

.contact-item p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}

.contact-form-section {
    padding: 20px;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
}

.contact-form {
    max-width: 500px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #336699;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-submit {
    background: #336699;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-submit:hover {
    background: #2a5580;
}

.support-section {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.support-item {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.support-item h3 {
    margin: 0 0 10px 0;
    color: #336699;
    font-size: 16px;
}

.support-item p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* 隐私政策样式 */
.privacy-section {
    margin: 20px 0;
}

.privacy-intro {
    padding: 20px;
    background: #e3f2fd;
    border-radius: 8px;
    border-left: 4px solid #2196f3;
    margin-bottom: 30px;
}

.privacy-intro p {
    margin: 10px 0;
    line-height: 1.6;
}

.privacy-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.privacy-content h2 {
    color: #336699;
    border-bottom: 2px solid #336699;
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.privacy-content h2:first-child {
    margin-top: 0;
}

.content-section {
    margin-bottom: 25px;
}

.content-section h3 {
    color: #555;
    margin: 15px 0 10px 0;
    font-size: 16px;
}

.content-section ul {
    padding-left: 20px;
    margin: 10px 0;
}

.content-section li {
    margin-bottom: 5px;
    line-height: 1.5;
    color: #666;
}

.content-section p {
    line-height: 1.6;
    color: #666;
    margin: 10px 0;
}

.privacy-summary {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.summary-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #ddd;
}

.summary-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.summary-item h3 {
    margin: 10px 0;
    color: #336699;
    font-size: 16px;
}

.summary-item p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* 百分比计算器样式 */
.percent-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.percent-calculator {
    background: #f8f9fa;
    border: 2px solid #9C27B0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.percent-calculator h3 {
    text-align: center;
    color: #9C27B0;
    margin-bottom: 15px;
    font-size: 18px;
}

.calc-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.input-group input {
    width: 80px;
    padding: 6px;
    border: 2px solid #9C27B0;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}

.input-group select {
    padding: 6px;
    border: 2px solid #9C27B0;
    border-radius: 4px;
    font-size: 14px;
}

.input-group label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    display: block;
    width: 100%;
}

.input-group span {
    color: #666;
    font-weight: 500;
}

.result-display {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

/* 公式样式 */
.formula-section {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.formula-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.formula-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.formula-card h4 {
    margin: 0 0 10px 0;
    color: #9C27B0;
    font-size: 16px;
}

.formula {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    border-left: 4px solid #9C27B0;
}

.formula-card p {
    margin: 0;
    color: #666;
    font-size: 13px;
    font-style: italic;
}

/* 响应式设计 - 百分比计算器 */
@media (max-width: 720px) {
    .percent-calculators {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .formula-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .input-group input {
        width: 100%;
        max-width: 150px;
    }

    .input-group select {
        width: 100%;
        max-width: 150px;
    }
}

/* Casio计算器样式 */
.casio-calculator-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.casio-calculator {
    background: linear-gradient(145deg, #2C3E50, #34495E);
    border: 3px solid #1A252F;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    max-width: 350px;
    width: 100%;
    font-family: 'Arial', sans-serif;
}

.casio-header {
    text-align: center;
    margin-bottom: 15px;
    color: white;
}

.casio-brand {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 5px;
}

.casio-model {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #BDC3C7;
}

.casio-features {
    font-size: 10px;
    color: #95A5A6;
}

.casio-features span {
    display: block;
    margin: 2px 0;
}

.casio-display {
    background: #000;
    border: 2px solid #34495E;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
}

.display-screen {
    background: #001100;
    border-radius: 4px;
    padding: 10px;
    min-height: 60px;
    position: relative;
}

.display-content {
    color: #00FF00;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    text-align: right;
    word-wrap: break-word;
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.display-indicators {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 10px;
    color: #00AA00;
}

.display-indicators span {
    margin-right: 10px;
}

.casio-buttons {
    display: grid;
    gap: 3px;
}

.casio-buttons .button-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.casio-buttons .button-row:last-child {
    grid-template-columns: 1fr 2fr 1fr;
}

.casio-btn {
    height: 35px;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
}

.casio-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.casio-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.number-btn {
    background: linear-gradient(145deg, #ECF0F1, #BDC3C7);
    color: #2C3E50;
}

.number-btn:hover {
    background: linear-gradient(145deg, #D5DBDB, #AEB6BF);
}

.operator-btn {
    background: linear-gradient(145deg, #3498DB, #2980B9);
    color: white;
}

.operator-btn:hover {
    background: linear-gradient(145deg, #5DADE2, #3498DB);
}

.function-btn {
    background: linear-gradient(145deg, #95A5A6, #7F8C8D);
    color: white;
    font-size: 9px;
}

.function-btn:hover {
    background: linear-gradient(145deg, #AEB6BF, #95A5A6);
}

.clear-btn {
    background: linear-gradient(145deg, #E74C3C, #C0392B);
    color: white;
}

.clear-btn:hover {
    background: linear-gradient(145deg, #EC7063, #E74C3C);
}

.equals-btn {
    background: linear-gradient(145deg, #27AE60, #229954);
    color: white;
    font-size: 16px;
}

.equals-btn:hover {
    background: linear-gradient(145deg, #58D68D, #27AE60);
}

/* 响应式设计 - Casio计算器 */
@media (max-width: 480px) {
    .casio-calculator {
        max-width: 300px;
        padding: 15px;
    }

    .casio-btn {
        height: 30px;
        font-size: 10px;
    }

    .display-content {
        font-size: 16px;
    }

    .casio-brand {
        font-size: 20px;
    }

    .casio-model {
        font-size: 14px;
    }
}

/* 足球预测计算器样式 */
.prediction-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.prediction-calculator {
    background: #f8f9fa;
    border: 2px solid #4CAF50;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.prediction-calculator h3 {
    text-align: center;
    color: #4CAF50;
    margin-bottom: 15px;
    font-size: 18px;
}

.team-input, .stats-input {
    margin-bottom: 15px;
    padding: 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.team-input label, .stats-input label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.team-input input, .stats-input input {
    width: 100%;
    padding: 8px;
    border: 2px solid #4CAF50;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.stats-input h4 {
    margin: 0 0 10px 0;
    color: #4CAF50;
    font-size: 16px;
    border-bottom: 1px solid #4CAF50;
    padding-bottom: 5px;
}

/* 警告部分样式 */
.warning-section {
    margin: 30px 0;
    padding: 20px;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    border-left: 6px solid #ff6b6b;
}

.warning-section h2 {
    color: #856404;
    margin-bottom: 15px;
}

.warning-content p {
    color: #856404;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.5;
}

.warning-content ul {
    color: #856404;
    padding-left: 20px;
}

.warning-content li {
    margin-bottom: 8px;
    line-height: 1.4;
}

/* 响应式设计 - 足球预测 */
@media (max-width: 720px) {
    .prediction-calculators {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .prediction-calculator {
        padding: 15px;
    }

    .team-input, .stats-input {
        padding: 10px;
    }
}

/* BMI计算器样式 */
.bmi-calculator-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.bmi-calculator {
    background: #f8f9fa;
    border: 2px solid #17a2b8;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 400px;
    width: 100%;
}

.bmi-calculator h3 {
    text-align: center;
    color: #17a2b8;
    margin-bottom: 20px;
}

.bmi-chart {
    margin: 30px 0;
    padding: 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #eee;
}

.health-tips {
    margin: 30px 0;
    padding: 20px;
    background: #f0f8ff;
    border-radius: 8px;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.tip-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #17a2b8;
}

.tip-card h4 {
    margin: 0 0 10px 0;
    color: #17a2b8;
    font-size: 16px;
}

.tip-card ul {
    margin: 0;
    padding-left: 20px;
}

.tip-card li {
    margin-bottom: 5px;
    font-size: 14px;
    color: #666;
}

.weight-goals {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.goals-calculator {
    background: white;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
}

.goal-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.goal-inputs label {
    font-weight: bold;
    color: #333;
}

.goal-inputs input {
    padding: 8px;
    border: 2px solid #17a2b8;
    border-radius: 4px;
    font-size: 16px;
}

/* 响应式设计 - BMI */
@media (max-width: 720px) {
    .tips-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .bmi-calculator {
        max-width: 350px;
    }
}

/* 分类页面样式 */
.category-intro {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #336699;
}

.category-intro p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

.calculators-grid {
    display: grid;
    gap: 30px;
    margin: 30px 0;
}

.calculator-category {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.calculator-category h2 {
    margin: 0 0 15px 0;
    color: #336699;
    font-size: 20px;
    border-bottom: 2px solid #336699;
    padding-bottom: 8px;
}

.calculator-list {
    display: grid;
    gap: 10px;
}

.calculator-link {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.calculator-link:hover {
    background: #e9ecef;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #336699;
}

.calculator-link img {
    margin-right: 12px;
    flex-shrink: 0;
}

.calc-info h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #336699;
}

.calc-info p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.3;
}

.popular-calculators {
    margin: 40px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.popular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.popular-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease;
    border: 1px solid #ddd;
}

.popular-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #336699;
}

.popular-item h4 {
    margin: 10px 0 5px 0;
    color: #336699;
}

.popular-item p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

.seo-content {
    margin: 40px 0;
    padding: 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #eee;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.seo-item h3 {
    margin: 0 0 10px 0;
    color: #336699;
    font-size: 16px;
}

.seo-item p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

/* Casio模型卡片样式 */
.casio-models {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.casio-model-card {
    display: flex;
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.casio-model-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.model-image {
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.model-info {
    flex: 1;
}

.model-info h2 {
    margin: 0 0 10px 0;
    color: #2C3E50;
    font-size: 22px;
}

.model-description {
    margin: 0 0 15px 0;
    color: #666;
    line-height: 1.5;
}

.model-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.feature {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.btn-primary {
    background: #2C3E50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.btn-primary:hover {
    background: #34495E;
    text-decoration: none;
    color: white;
}

/* 指南网格样式 */
.guides-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.guide-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.guide-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #336699;
}

.guide-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.guide-card h3 {
    margin: 10px 0;
    color: #336699;
}

.guide-card p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* 比较表格样式 */
.casio-comparison {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* 响应式设计 - 分类页面 */
@media (max-width: 720px) {
    .popular-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .seo-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .guides-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .casio-model-card {
        flex-direction: column;
        text-align: center;
    }

    .model-image {
        margin-right: 0;
        margin-bottom: 15px;
        justify-content: center;
    }
}

/* 开方计算器样式 */
.sqrt-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.sqrt-calculator {
    background: #f8f9fa;
    border: 2px solid #28a745;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.sqrt-calculator h3 {
    text-align: center;
    color: #28a745;
    margin-bottom: 15px;
    font-size: 18px;
}

.perfect-squares {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* 对数计算器样式 */
.log-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.log-calculator {
    background: #f8f9fa;
    border: 2px solid #6f42c1;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.log-calculator h3 {
    text-align: center;
    color: #6f42c1;
    margin-bottom: 15px;
    font-size: 18px;
}

.button-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.log-table {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.applications {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.app-item {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #6f42c1;
}

.app-item h4 {
    margin: 0 0 10px 0;
    color: #6f42c1;
    font-size: 16px;
}

.app-item p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* 卡路里计算器样式 */
.calorie-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.calorie-calculator {
    background: #f8f9fa;
    border: 2px solid #fd7e14;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.calorie-calculator h3 {
    text-align: center;
    color: #fd7e14;
    margin-bottom: 15px;
    font-size: 18px;
}

.calorie-tips {
    margin: 30px 0;
    padding: 20px;
    background: #fff3e0;
    border-radius: 8px;
    border-left: 4px solid #fd7e14;
}

.calorie-table {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* 年龄计算器样式 */
.age-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.age-calculator {
    background: #f8f9fa;
    border: 2px solid #20c997;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.age-calculator h3 {
    text-align: center;
    color: #20c997;
    margin-bottom: 15px;
    font-size: 18px;
}

.age-facts {
    margin: 30px 0;
    padding: 20px;
    background: #f0f8ff;
    border-radius: 8px;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.fact-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #20c997;
}

.fact-card h4 {
    margin: 0 0 10px 0;
    color: #20c997;
    font-size: 16px;
}

.fact-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.age-milestones {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.zodiac-info {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.zodiac-item {
    background: white;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-align: center;
}

.zodiac-item h4 {
    margin: 0 0 8px 0;
    color: #20c997;
    font-size: 14px;
}

.zodiac-item p {
    margin: 0;
    color: #666;
    font-size: 12px;
}

/* 响应式设计 - 新页面 */
@media (max-width: 720px) {
    .sqrt-calculators,
    .log-calculators,
    .calorie-calculators,
    .age-calculators {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .apps-grid,
    .facts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .zodiac-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .button-group {
        flex-direction: column;
    }
}

/* XSMB预测计算器样式 */
.xsmb-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.xsmb-calculator {
    background: #f8f9fa;
    border: 2px solid #dc3545;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.xsmb-calculator h3 {
    text-align: center;
    color: #dc3545;
    margin-bottom: 15px;
    font-size: 18px;
}

.xsmb-structure {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.tips-section {
    margin: 30px 0;
    padding: 20px;
    background: #e8f5e8;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.tips-section .tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.tip {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #28a745;
}

.tip h4 {
    margin: 0 0 10px 0;
    color: #28a745;
    font-size: 16px;
}

.tip p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* 在线分数计算器样式 */
.fraction-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.fraction-calculator {
    background: #f8f9fa;
    border: 2px solid #6610f2;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.fraction-calculator h3 {
    text-align: center;
    color: #6610f2;
    margin-bottom: 15px;
    font-size: 18px;
}

.fraction-input-group {
    margin-bottom: 15px;
}

.fraction-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.numerator, .denominator {
    width: 80px;
    padding: 8px;
    border: 2px solid #6610f2;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
}

.fraction-line {
    font-size: 24px;
    font-weight: bold;
    color: #6610f2;
}

.operation-group {
    margin: 15px 0;
    text-align: center;
}

.operation-group select {
    padding: 8px 15px;
    border: 2px solid #6610f2;
    border-radius: 4px;
    font-size: 16px;
    background: white;
}

.conversion-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 2px solid #6610f2;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: #f8f9fa;
    color: #6610f2;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: #6610f2;
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.fraction-examples {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.example {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #6610f2;
}

.example h4 {
    margin: 0 0 10px 0;
    color: #6610f2;
    font-size: 16px;
}

.example p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}

.fraction-rules {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.rule-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-align: center;
}

.rule-card h4 {
    margin: 0 0 10px 0;
    color: #6610f2;
    font-size: 16px;
}

.rule-formula {
    background: #f0f4f8;
    padding: 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 16px;
    margin: 10px 0;
    color: #6610f2;
    font-weight: bold;
}

.rule-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.common-fractions {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* 响应式设计 - 新增页面 */
@media (max-width: 720px) {
    .xsmb-calculators,
    .fraction-calculators {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .tips-section .tips-grid,
    .examples-grid,
    .rules-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .fraction-inputs {
        justify-content: center;
    }

    .conversion-tabs {
        flex-direction: column;
    }

    .tab-btn {
        border-bottom: 1px solid #ddd;
    }
}

/* Casio FX-580VN X样式 */
.casio-container {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.casio-calculator-fx580 {
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    max-width: 400px;
    width: 100%;
}

.casio-screen {
    background: #1a1a1a;
    border: 3px solid #444;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
}

.screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 10px;
    color: #888;
}

.casio-model {
    font-weight: bold;
    color: #00ff00;
}

.battery-indicator {
    font-size: 12px;
}

.main-display {
    background: #000;
    color: #00ff00;
    font-size: 24px;
    font-weight: bold;
    text-align: right;
    padding: 10px;
    border-radius: 4px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 5px;
    border: 1px solid #333;
}

.sub-display {
    background: #111;
    color: #888;
    font-size: 14px;
    text-align: right;
    padding: 5px 10px;
    border-radius: 4px;
    min-height: 20px;
    margin-bottom: 10px;
    border: 1px solid #333;
}

.mode-indicators {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #00ff00;
}

.casio-keypad {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
}

.key {
    background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
    border: 1px solid #95a5a6;
    border-radius: 4px;
    padding: 8px 4px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s ease;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.key:hover {
    background: linear-gradient(145deg, #d5dbdb, #a6acaf);
    transform: translateY(-1px);
}

.key:active {
    background: linear-gradient(145deg, #a6acaf, #95a5a6);
    transform: translateY(1px);
}

.key.number {
    background: linear-gradient(145deg, #3498db, #2980b9);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.key.number:hover {
    background: linear-gradient(145deg, #2980b9, #1f618d);
}

.key.operation {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    color: white;
    font-size: 12px;
}

.key.operation:hover {
    background: linear-gradient(145deg, #c0392b, #a93226);
}

.key.function {
    background: linear-gradient(145deg, #f39c12, #d68910);
    color: white;
    font-size: 9px;
}

.key.function:hover {
    background: linear-gradient(145deg, #d68910, #b7950b);
}

.key.equals {
    background: linear-gradient(145deg, #27ae60, #229954);
    color: white;
    font-size: 16px;
    font-weight: bold;
    grid-column: span 2;
}

.key.equals:hover {
    background: linear-gradient(145deg, #229954, #1e8449);
}

.key.nav {
    background: linear-gradient(145deg, #8e44ad, #7d3c98);
    color: white;
    font-size: 12px;
}

.key.nav:hover {
    background: linear-gradient(145deg, #7d3c98, #6c3483);
}

.navigation-keys {
    grid-column: span 6;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-top: 10px;
}

/* FX-580VN X特色功能样式 */
.fx580-features {
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    color: white;
}

.fx580-features h2 {
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.feature-card {
    background: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.feature-card h4 {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 16px;
}

.feature-card p {
    margin: 0;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    line-height: 1.4;
}

.calculator-modes {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.modes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.mode-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #2c3e50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mode-card h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 16px;
}

.mode-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.usage-tips {
    margin: 30px 0;
    padding: 20px;
    background: #e8f5e8;
    border-radius: 8px;
    border-left: 4px solid #27ae60;
}

.comparison-table {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* 响应式设计 - Casio FX-580VN X */
@media (max-width: 720px) {
    .casio-calculator-fx580 {
        max-width: 350px;
        padding: 15px;
    }

    .casio-keypad {
        gap: 2px;
    }

    .key {
        min-height: 30px;
        padding: 6px 2px;
        font-size: 9px;
    }

    .key.number {
        font-size: 12px;
    }

    .main-display {
        font-size: 20px;
        min-height: 35px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .modes-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* 日期计算器样式 */
.date-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.date-calculator {
    background: #f8f9fa;
    border: 2px solid #17a2b8;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.date-calculator h3 {
    text-align: center;
    color: #17a2b8;
    margin-bottom: 15px;
    font-size: 18px;
}

.checkbox-group {
    margin: 15px 0;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.date-chart {
    margin: 30px 0;
    padding: 20px;
    background: #f0f8ff;
    border-radius: 8px;
    text-align: center;
}

.chart-container {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.chart-controls {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.chart-controls select {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.calendar-info {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.holidays-vietnam {
    margin: 30px 0;
    padding: 20px;
    background: #fff3e0;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
}

/* 时间计算器样式 */
.time-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.time-calculator {
    background: #f8f9fa;
    border: 2px solid #9c27b0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.time-calculator h3 {
    text-align: center;
    color: #9c27b0;
    margin-bottom: 15px;
    font-size: 18px;
}

.time-input-group {
    margin-bottom: 15px;
}

.time-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.time-inputs input {
    width: 60px;
    padding: 8px;
    border: 2px solid #9c27b0;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
}

.time-inputs span {
    font-size: 18px;
    font-weight: bold;
    color: #9c27b0;
}

.world-clock {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.clock-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.world-clock-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.clock-flag {
    font-size: 24px;
    margin-bottom: 5px;
}

.clock-city {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.clock-time {
    font-size: 18px;
    font-weight: bold;
    color: #9c27b0;
    margin-bottom: 5px;
}

.clock-offset {
    font-size: 12px;
    color: #666;
}

.time-conversion-table {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.time-zones-info {
    margin: 30px 0;
    padding: 20px;
    background: #e8f5e8;
    border-radius: 8px;
    border-left: 4px solid #4caf50;
}

.timezone-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.timezone-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #4caf50;
}

.timezone-card h4 {
    margin: 0 0 10px 0;
    color: #4caf50;
    font-size: 16px;
}

.timezone-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* 折扣计算器样式 */
.discount-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.discount-calculator {
    background: #f8f9fa;
    border: 2px solid #e91e63;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.discount-calculator h3 {
    text-align: center;
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 18px;
}

.discount-chart {
    margin: 30px 0;
    padding: 20px;
    background: #fff3e0;
    border-radius: 8px;
    text-align: center;
    border-left: 4px solid #ff9800;
}

.shopping-tips {
    margin: 30px 0;
    padding: 20px;
    background: #e8f5e8;
    border-radius: 8px;
    border-left: 4px solid #4caf50;
}

.discount-types {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.discount-psychology {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.psychology-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.psychology-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #2196f3;
}

.psychology-card h4 {
    margin: 0 0 10px 0;
    color: #2196f3;
    font-size: 16px;
}

.psychology-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.discount-steps {
    background: #f0f8ff;
    padding: 15px;
    border-radius: 6px;
    margin: 10px 0;
    border-left: 4px solid #2196f3;
}

.discount-steps p {
    margin: 5px 0;
    font-size: 14px;
    color: #333;
}

/* 响应式设计 - 新增页面 */
@media (max-width: 720px) {
    .date-calculators,
    .time-calculators,
    .discount-calculators {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .clock-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .timezone-grid,
    .psychology-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .time-inputs {
        justify-content: center;
    }

    .chart-controls {
        flex-direction: column;
        gap: 5px;
    }
}

/* 利率计算器样式 */
.interest-calculators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.interest-calculator {
    background: #f8f9fa;
    border: 2px solid #28a745;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.interest-calculator h3 {
    text-align: center;
    color: #28a745;
    margin-bottom: 15px;
    font-size: 18px;
}

.interest-chart {
    margin: 30px 0;
    padding: 20px;
    background: #e8f5e8;
    border-radius: 8px;
    text-align: center;
    border-left: 4px solid #28a745;
}

.bank-rates {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.bank-rates .note {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 10px;
}

.investment-tips {
    margin: 30px 0;
    padding: 20px;
    background: #fff3e0;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
}

.financial-planning {
    margin: 30px 0;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 8px;
}

.planning-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.step-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.step-number {
    background: #2196f3;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.step-content h4 {
    margin: 0 0 10px 0;
    color: #2196f3;
    font-size: 16px;
}

.step-content p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* 响应式设计 - 利率计算器 */
@media (max-width: 720px) {
    .interest-calculators {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .planning-steps {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .step-card {
        flex-direction: column;
        text-align: center;
    }

    .step-number {
        align-self: center;
    }
}

/* 通用计算器样式 - 2024年12月28日添加 */
.calculator-container {
    max-width: 800px;
    margin: 20px auto;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.calculator-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.calculator-header h2 {
    color: #003366;
    margin-bottom: 10px;
}

.calculator-header p {
    color: #666;
    margin: 0;
}

.calc-btn, .calc-btn-main {
    background: #4c7b25;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 100%;
    margin: 10px 0;
}

.calc-btn:hover, .calc-btn-main:hover {
    background: #3a5f1c;
}

.result, .result-section {
    margin-top: 20px;
}

.result-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    padding: 15px;
    color: #155724;
    margin: 10px 0;
}

.result-success h4 {
    color: #155724;
    margin-bottom: 10px;
}

.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    padding: 15px;
    color: #721c24;
    margin: 10px 0;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.input-group input, .input-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.info-section {
    margin: 30px 0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.info-card {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.info-card h3 {
    color: #003366;
    margin-bottom: 15px;
}

.info-card ul {
    list-style-type: none;
    padding: 0;
}

.info-card li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.related-calculators {
    margin: 30px 0;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.related-item {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    text-decoration: none;
}

.related-item h3 {
    color: #003366;
    margin-bottom: 10px;
}

.related-item p {
    color: #666;
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .calculator-container {
        margin: 10px;
        padding: 15px;
    }

    .info-grid, .related-grid {
        grid-template-columns: 1fr;
    }

    .calc-btn, .calc-btn-main {
        padding: 12px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .calculator-header {
        padding: 15px;
    }

    .calculator-header h2 {
        font-size: 18px;
    }

    .input-group input, .input-group select {
        padding: 10px;
        font-size: 14px;
    }

    .info-card, .related-item {
        padding: 15px;
    }
}