/* 全局样式 */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft Yahei","SimHei",sans-serif}
body{padding:20px;background-color:#f5f7fa;min-width:1200px}

/* 容器样式 */
.container{max-width:1600px;margin:0 auto;background:#fff;padding:0;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);display:flex;flex-direction:column;height:calc(100vh - 40px);overflow:hidden}
.title{text-align:center;color:#2c3e50;font-size:28px;padding:20px 0;font-weight:700;border-bottom:1px solid #e6e9ed}

/* 主内容区 */
.main{display:flex;flex:1;overflow:hidden}
.sidebar{width:220px;background:#f8f9fa;border-right:1px solid #e6e9ed;display:flex;flex-direction:column;gap:0;overflow-y:auto}
.tab-btn{padding:15px 20px;background:#f8f9fa;border:none;border-bottom:1px solid #e6e9ed;cursor:pointer;font-size:15px;color:#666;transition:all 0.3s;text-align:left}
.tab-btn.active{background:#fff;color:#2980b9;font-weight:600;border-left:4px solid #3498db}
.tab-btn:hover{background:#eef2f7;color:#2980b9}
.content{flex:1;padding:30px;overflow-y:auto}
.panel{display:none;height:100%}
.panel.active{display:block}
.panel-title{font-size:18px;color:#34495e;margin-bottom:20px;padding-left:10px;border-left:4px solid #3498db}

/* 表单样式 */
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:25px}
.form-grid-2{grid-template-columns:repeat(2,1fr)!important}
.form-grid-3{grid-template-columns:repeat(3,1fr)!important}
.form-grid-6{grid-template-columns:repeat(6,1fr)!important;gap:15px!important}
.form-item{display:flex;flex-direction:column;gap:8px}
.form-item label{font-size:14px;color:#34495e;font-weight:600}
.form-item input,.form-item select{padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;outline:none;transition:border 0.3s}
.form-item input:focus,.form-item select:focus{border-color:#3498db;box-shadow:0 0 0 2px rgba(52,152,219,0.1)}
.form-item input[readonly]{background-color:#f5f7fa;color:#2c3e50;cursor:not-allowed}
.hide{display:none!important}

/* 按钮样式 */
.calc-btn{padding:12px 30px;background-color:#3498db;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background 0.3s;margin-bottom:20px}
.calc-btn:hover{background-color:#2980b9}
.convert-btn{padding:6px 12px;background-color:#2ecc71;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;margin:0 5px}
.convert-btn:hover{background-color:#27ae60}

/* 提示文本 */
.tips{padding:15px;background-color:#f8f9fa;border-radius:6px;font-size:14px;color:#666;line-height:1.6;border-left:4px solid #95a5a6}
.warn{color:#e74c3c;font-weight:600}

/* 结果框样式 */
.result-box{padding:15px;border-radius:6px;margin-top:8px}
.result-box.blue{background-color:#e8f4fd;border:1px solid #3498db}
.result-box.green{background-color:#eafaf1;border:1px solid #2ecc71}
.result-label{font-size:12px;color:#666;margin-bottom:5px}
.result-value{font-size:18px;font-weight:600;color:#2c3e50}
.blue .result-value{color:#2980b9}
.green .result-value{color:#27ae60}

/* 单位换算区域 */
.convert-box{padding:20px;background:#f8f9fa;border-radius:8px}
.convert-item{display:flex;align-items:center;gap:15px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px dashed #eee}
.convert-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.convert-label{width:120px;font-size:14px;color:#34495e;font-weight:600}
.convert-input{flex:1;display:flex;align-items:center}
.convert-input input{width:150px;margin-right:8px}
.convert-input span{font-size:12px;color:#666}

/* 记录面板 */
.record-panel{padding:20px;background:#f8f9fa;border-top:1px solid #e6e9ed;max-height:300px;overflow:hidden}
.record-header{font-size:16px;color:#2c3e50;font-weight:600;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center}
.export-btn{padding:8px 16px;background-color:#e67e22;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background 0.3s}
.export-btn:hover{background-color:#d35400}
.clear-btn{padding:8px 16px;background-color:#e74c3c;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background 0.3s;margin-left:10px}
.clear-btn:hover{background-color:#c0392b}
.record-table{width:100%;border-collapse:collapse;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05);max-height:200px;display:block;overflow-y:auto}
.record-table th,.record-table td{padding:12px 15px;text-align:left;border-bottom:1px solid #eee;min-width:120px}
.record-table th{background-color:#3498db;color:#fff;font-weight:600;font-size:14px;position:sticky;top:0}
.record-table tr:hover{background-color:#f8f9fa}
.record-table td{font-size:13px;color:#34495e}