/* ========================================= */
/*   Calorie Calculator - 清新绿色系主题     */
/* ========================================= */

/* Tabs */
.calorie-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.tab-btn {
    padding: 10px 24px;
    border: 2px solid #e0e8e5;
    border-radius: 25px;
    background: #fff;
    color: #636e72;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
}
.tab-btn:hover {
    border-color: #2dd4a8;
    color: #1a936f;
}
.tab-btn.active {
    background: linear-gradient(135deg, #2dd4a8 0%, #1a936f 100%);
    border-color: transparent;
    color: #fff;
}
.tab-btn i {
    margin-right: 5px;
}

/* Card */
.calc-card, .diary-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 25px;
}
.card-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
}
.card-title i {
    color: #2dd4a8;
}
.card-desc {
    color: #999;
    font-size: 13px;
    margin-bottom: 20px;
}

/* Form */
.calc-form {
    max-width: 500px;
    margin: 0 auto;
}
.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.form-group {
    flex: 1;
    margin-bottom: 0;
}
.form-group.full-width {
    width: 100%;
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    font-weight: 500;
}
.form-group label .unit {
    color: #aaa;
    font-weight: 400;
}
.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    transition: border-color 0.3s;
    background: #fafafa;
    height: auto;
    margin: 0;
    box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus {
    border-color: #2dd4a8;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(45,212,168,0.12);
}
.gender-btns {
    display: flex;
    gap: 10px;
}
.gender-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}
.gender-btn:hover {
    border-color: #2dd4a8;
}
.gender-btn.active {
    background: linear-gradient(135deg, #2dd4a8 0%, #1a936f 100%);
    border-color: transparent;
    color: #fff;
}
.calc-btn {
    padding: 12px 40px;
    background: linear-gradient(135deg, #2dd4a8 0%, #1a936f 100%);
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(45,212,168,0.3);
}
.calc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45,212,168,0.4);
}

/* Results */
.result-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 25px;
}
.result-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}
.result-item {
    text-align: center;
    padding: 20px 10px;
    border-radius: 12px;
    background: #f8f9fa;
}
.result-item.bmi-result {
    background: #e8f8f3;
}
.result-item.loss-result {
    background: #fff8f0;
}
.result-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}
.result-value {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}
.result-value.highlight {
    color: #1a936f;
}
.result-unit {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}
.result-status {
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
}

/* Macro advice */
.macro-advice {
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.macro-advice h4 {
    font-size: 15px;
    color: #333;
    margin-bottom: 15px;
}
.macro-advice h4 i {
    color: #2dd4a8;
}
.macro-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.macro-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.macro-bar {
    height: 24px;
    border-radius: 12px;
    transition: width 0.5s ease;
    min-width: 30px;
}
.protein-bar { background: linear-gradient(90deg, #2dd4a8, #1a936f); }
.fat-bar { background: linear-gradient(90deg, #ff7675, #d63031); }
.carb-bar { background: linear-gradient(90deg, #74b9ff, #0984e3); }
.macro-item span {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

/* Food Lookup */
.lookup-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}
.search-box {
    position: relative;
    margin-bottom: 15px;
}
.search-box input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 15px;
    color: #333;
    transition: all 0.3s;
    background: #fafafa;
    height: auto;
    margin: 0;
    box-sizing: border-box;
}
.search-box input:focus {
    border-color: #2dd4a8;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(45,212,168,0.12);
}
.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 16px;
}
.category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cat-btn {
    padding: 5px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    background: #fff;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}
.cat-btn:hover, .cat-btn.active {
    background: linear-gradient(135deg, #2dd4a8 0%, #1a936f 100%);
    border-color: transparent;
    color: #fff;
}

/* Food table */
.food-list {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 20px;
}
.food-table-header {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr 1fr 0.6fr;
    padding: 12px 20px;
    background: #f8f9fa;
    font-size: 12px;
    color: #999;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
}
.food-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr 1fr 0.6fr;
    padding: 12px 20px;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #f8f8f8;
    align-items: center;
    transition: background 0.2s;
}
.food-row:hover {
    background: #e8f8f3;
}
.food-row:last-child {
    border-bottom: none;
}
.food-name { font-weight: 500; }
.food-cal { font-weight: 600; }
.food-cal.high-cal { color: #f5576c; }
.food-cal.low-cal { color: #28a745; }
.cat-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-style: normal;
}
.cat-tag.cat-grain { background: #fff3cd; color: #856404; }
.cat-tag.cat-veg { background: #d4edda; color: #155724; }
.cat-tag.cat-fruit { background: #f8d7da; color: #721c24; }
.cat-tag.cat-meat { background: #f5c6cb; color: #721c24; }
.cat-tag.cat-fish { background: #d1ecf1; color: #0c5460; }
.cat-tag.cat-egg { background: #fff3cd; color: #856404; }
.cat-tag.cat-bean { background: #d4edda; color: #155724; }
.cat-tag.cat-nut { background: #fde2c8; color: #7a4a1e; }
.cat-tag.cat-milk { background: #e8f4fd; color: #1a5276; }
.cat-tag.cat-oil { background: #fef3cd; color: #856404; }
.cat-tag.cat-drink { background: #d1ecf1; color: #0c5460; }
.cat-tag.cat-sugar { background: #f8d7da; color: #721c24; }
.cat-tag.cat-snack, .cat-tag.cat-snack2 { background: #fde2c8; color: #7a4a1e; }
.cat-tag.cat-season { background: #e2e3e5; color: #383d41; }
.cat-tag.cat-default { background: #e2e3e5; color: #383d41; }

.add-food-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #2dd4a8 0%, #1a936f 100%);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.add-food-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(45,212,168,0.4);
}

.data-source-tip {
    text-align: center;
    color: #aaa;
    font-size: 12px;
    padding: 15px;
}
.data-source-tip i {
    color: #ffc107;
}

.empty-tip {
    text-align: center;
    color: #aaa;
    padding: 40px 20px;
    font-size: 14px;
}
.empty-tip i {
    font-size: 24px;
    display: block;
    margin-bottom: 10px;
    color: #ddd;
}

/* Diary */
.diary-summary {
    display: flex;
    gap: 20px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.diary-summary span {
    font-size: 13px;
    color: #666;
}
.diary-summary strong {
    color: #1a936f;
    font-size: 16px;
}
.diary-summary .over-limit {
    color: #f5576c;
}
.diary-summary .tip-text {
    color: #aaa;
    font-style: italic;
}
.diary-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 0.6fr;
    padding: 10px 15px;
    background: #f8f9fa;
    font-size: 12px;
    color: #999;
    font-weight: 600;
    border-radius: 8px;
    margin-bottom: 5px;
}
.diary-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 0.6fr;
    padding: 10px 15px;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #f8f8f8;
    align-items: center;
}
.diary-food { font-weight: 500; }
.weight-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    height: auto;
    margin: 0;
    box-sizing: border-box;
}
.weight-input:focus {
    border-color: #2dd4a8;
    outline: none;
}
.remove-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #f5576c;
    background: #fff;
    color: #f5576c;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.remove-btn:hover {
    background: #f5576c;
    color: #fff;
}

/* Responsive */
@media (max-width: 767px) {
    .result-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
    .food-table-header, .food-row,
    .diary-header, .diary-row {
        grid-template-columns: 2fr 1fr 1fr 0.8fr;
        font-size: 12px;
    }
    .food-table-header .food-pro,
    .food-table-header .food-fat,
    .food-row .food-pro,
    .food-row .food-fat,
    .diary-header span:nth-child(4),
    .diary-header span:nth-child(5),
    .diary-row .diary-pro,
    .diary-row .diary-fat {
        display: none;
    }
    .calorie-hero h2 {
        font-size: 22px;
    }
    .result-value {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .food-table-header, .food-row,
    .diary-header, .diary-row {
        grid-template-columns: 2fr 1fr 1fr 0.8fr;
    }
    .food-table-header .food-cat,
    .food-row .food-cat,
    .diary-header span:nth-child(6),
    .diary-row .diary-carb {
        display: none;
    }
    .tab-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}