.category-tabs {flex-wrap: wrap;gap: 10px;margin-bottom: 25px;justify-content: center;}
.category-tab {padding: 10px 22px;border: none;border-radius: 25px;background: white;cursor: pointer;white-space: nowrap;font-size: 14px;transition: all 0.3s;border: 2px solid #e0e3eb;font-weight: 500;}
.category-tab.active {background: var(--primary-color);color: white;border-color: var(--primary-color);box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);}
.category-tab:hover:not(.active) {background: #e3f2fd;border-color: var(--primary-color);color: var(--primary-color);}
.input1 {padding: 12px 15px;border-radius: 8px;font-size: 15px;transition: border-color 0.3s, box-shadow 0.3s;}
.input1:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);}
.select1{width: 100%;padding: 12px 15px;border-radius: 8px;font-size: 15px;cursor: pointer;background: white;transition: border-color 0.3s, box-shadow 0.3s;}
.select1:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);}
/* 换算区域 - 新增样式 */
.converter-box {background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);border-radius: 12px;padding: 30px;margin-bottom: 20px;border: 1px solid #e0e3eb;}

.converter-main {display: grid;grid-template-columns: 1fr auto 1fr;gap: 20px;align-items: end;margin-bottom: 25px;}
.converter-item {display: flex;flex-direction: column;gap: 10px;}
.converter-item label {font-size: 14px;font-weight: 600;color: #555;display: flex;align-items: center;gap: 5px;}
.converter-item label i {font-size: 18px;color: var(--primary-color);}

.converter-arrow {display: flex;flex-direction: column;align-items: center;justify-content: center;padding-bottom: 8px;}
.converter-arrow i {font-size: 32px;color: var(--primary-color);}
.converter-arrow span {font-size: 12px;color: #999;margin-top: 5px;}

/* 目标单位选择区域 - 新增样式 */
.converter-target {background: white;border-radius: 10px;padding: 20px;border: 2px dashed #e0e3eb;margin-top: 20px;}
.converter-target-title {font-size: 14px;font-weight: 600;color: #555;margin-bottom: 12px;display: flex;align-items: center;gap: 8px;}
.converter-target-title i {color: var(--primary-color);}
.target-unit-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 10px;}
.target-unit-btn {padding: 10px 15px;border: 2px solid #e0e3eb;border-radius: 8px;background: white;cursor: pointer;font-size: 14px;transition: all 0.3s;text-align: center;}
.target-unit-btn:hover {border-color: var(--primary-color);background: #e3f2fd;}
.target-unit-btn.active {border-color: var(--primary-color);background: var(--primary-color);color: white;}

/* 结果展示样式 - 新增样式 */
.result-box {background: white;border-radius: 12px;padding: 25px;margin-top: 20px;border: 2px solid var(--primary-color);box-shadow: 0 4px 15px rgba(33, 150, 243, 0.1);}
.result-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 20px;display: flex;align-items: center;gap: 10px;padding-bottom: 15px;border-bottom: 1px solid #eee;}
.result-title i {color: var(--primary-color);font-size: 24px;}

.result-main {background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);border-radius: 10px;padding: 20px;margin-bottom: 20px;}
.result-main-label {font-size: 14px;color: #666;margin-bottom: 8px;}
.result-main-value {font-size: 28px;font-weight: 700;color: var(--primary-color);display: flex;align-items: center;gap: 15px;flex-wrap: wrap;}
.result-main-value .copy-btn {background: white;border: none;color: var(--primary-color);cursor: pointer;padding: 8px 12px;border-radius: 6px;transition: all 0.3s;font-size: 14px;display: flex;align-items: center;gap: 5px;}
.result-main-value .copy-btn:hover {background: var(--primary-color);color: white;}

.result-all-title {font-size: 14px;color: #666;margin-bottom: 15px;padding-top: 15px;border-top: 1px dashed #e0e3eb;}
.result-item {display: flex;justify-content: space-between;align-items: center;padding: 12px 15px;background: #f8f9fa;border-radius: 8px;margin-bottom: 8px;transition: all 0.3s;}
.result-item:hover {background: #e3f2fd;transform: translateX(5px);}
.result-label {font-size: 14px;color: #666;font-weight: 500;}
.result-value {font-size: 15px;font-weight: 600;color: var(--primary-color);display: flex;align-items: center;gap: 10px;}
.copy-btn-small {background: none;border: none;color: #999;cursor: pointer;padding: 5px;border-radius: 4px;transition: all 0.3s;}
.copy-btn-small:hover {color: var(--primary-color);background: #e3f2fd;}
.copy-btn-small.copied {color: #4CAF50;}
/* ========== 响应式调整 - 工具区域特有 ========== */
@media (max-width: 1024px) {
    
}

@media (max-width: 768px) {
    .category-tabs {gap: 8px;margin-bottom: 20px;}
    .category-tab {padding: 8px 16px;font-size: 13px;}
    
    .converter-box {padding: 20px 15px;}
    .converter-main {grid-template-columns: 1fr;gap: 15px;}
    .converter-arrow {flex-direction: row;padding: 10px 0;}
    .converter-arrow i {font-size: 24px;transform: rotate(90deg);}
    .converter-arrow span {margin-top: 0;margin-left: 8px;}
    
    .converter-target {padding: 15px;}
    .target-unit-grid {grid-template-columns: repeat(2, 1fr);gap: 8px;}
    .target-unit-btn {padding: 8px 12px;font-size: 13px;}
    
    .result-box {padding: 15px;}
    .result-main-value {font-size: 22px;}
}

@media (max-width: 480px) {
    .category-tabs {justify-content: flex-start;overflow-x: auto;flex-wrap: nowrap;padding-bottom: 10px;-webkit-overflow-scrolling: touch;}
    .category-tabs::-webkit-scrollbar {height: 4px;}
    .category-tabs::-webkit-scrollbar-thumb {background: #ddd;border-radius: 2px;}
    .category-tab {flex-shrink: 0;padding: 8px 14px;font-size: 12px;}
    .target-unit-grid {grid-template-columns: 1fr 1fr;}
    .result-item {flex-direction: column;align-items: flex-start;gap: 8px;}
    .result-value {width: 100%;justify-content: space-between;}
}