.gi-page {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px 0 56px;
    color: #333;
    font-size: 14px;
    line-height: 1.65;
}


.gi-page .lv-low  { color: #17a673; }
.gi-page .lv-mid  { color: #d9822b; }
.gi-page .lv-high { color: #d9534f; }
.gi-page .lv-zero { color: #6b7c8f; }
.gi-page .gl-low  { color: #17a673; }
.gi-page .gl-mid  { color: #d9822b; }
.gi-page .gl-high { color: #d9534f; }



.gi-hero { margin-bottom: 24px; }

.gi-hero h1 {
    font-size: 26px;
    font-weight: 700;
    color: #1f2d3d;
    margin: 0 0 10px;
    line-height: 1.35;
}

.gi-hero-sub {
    font-size: 14.5px;
    color: #5a6b7c;
    margin: 0 0 16px;
    max-width: 900px;
}
.gi-hero-sub b { color: #4a6ee0; font-size: 15px; }

.gi-hero-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.gi-hero-card {
    background: #f7f9fc;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 14px 16px;
}
.gi-hero-card-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #4a6ee0;
    border-radius: 4px;
    padding: 1px 7px;
    margin-bottom: 8px;
}
.gi-hero-card h3 {
    font-size: 15px;
    margin: 0 0 6px;
    color: #1f2d3d;
}
.gi-hero-card p {
    margin: 0;
    font-size: 13px;
    color: #6b7c8f;
    line-height: 1.6;
}


.gi-quick-wrap { margin-bottom: 28px; }
.gi-quick {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 12px 14px;
}
.gi-quick-title {
    font-size: 14px;
    margin: 0 0 10px;
    color: #1f2d3d;
}
.gi-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gi-quick-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 118px;
    padding: 8px 10px;
    border: 1px solid #e6ecf5;
    border-radius: 8px;
    text-decoration: none;
    background: #fcfdff;
    transition: border-color .15s, box-shadow .15s;
}
.gi-quick-item:hover {
    border-color: #4a6ee0;
    box-shadow: 0 2px 8px rgba(74, 110, 224, .12);
}
.gi-quick-name {
    font-size: 13px;
    color: #1f2d3d;
    font-weight: 600;
}
.gi-quick-gi {
    font-size: 12px;
    font-weight: 700;
}
.gi-quick-gl {
    font-size: 11.5px;
    color: #98a6ad;
}



.gi-sec-title {
    font-size: 20px;
    color: #1f2d3d;
    margin: 0 0 6px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.gi-sec-count {
    font-size: 13px;
    font-weight: 400;
    color: #98a6ad;
}
.gi-sec-sub {
    font-size: 13.5px;
    color: #6b7c8f;
    margin: 0 0 16px;
    max-width: 900px;
}



.gi-explorer { margin-bottom: 28px; }

.gi-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.gi-search {
    display: flex;
    gap: 8px;
    flex: 1 1 380px;
    min-width: 260px;
}
.gi-search-input {
    flex: 1;
    height: 40px;
    border: 1px solid #d8e0ec;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: #1f2d3d;
    background: #fff;
}
.gi-search-input:focus {
    outline: none;
    border-color: #4a6ee0;
    box-shadow: 0 0 0 3px rgba(74, 110, 224, .12);
}
.gi-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7c8f;
}
.gi-sort select {
    height: 40px;
    border: 1px solid #d8e0ec;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13.5px;
    color: #1f2d3d;
    background: #fff;
}

.gi-filters {
    border-top: 1px dashed #e6ecf5;
    padding-top: 12px;
    margin-bottom: 14px;
}
.gi-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
}
.gi-filter-label {
    font-size: 12.5px;
    color: #98a6ad;
    min-width: 46px;
}
.gi-chip-btn {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid #e0e7f1;
    border-radius: 20px;
    font-size: 12.5px;
    color: #5a6b7c;
    text-decoration: none;
    background: #fbfcfe;
    transition: all .15s;
}
.gi-chip-btn:hover {
    border-color: #4a6ee0;
    color: #4a6ee0;
}
.gi-chip-btn.is-on {
    border-color: #4a6ee0;
    background: #4a6ee0;
    color: #fff;
    font-weight: 600;
}
.gi-chip-btn i {
    font-style: normal;
    opacity: .6;
    font-size: 11.5px;
}
.gi-filter-reset { margin-top: 2px; }



.gi-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gi-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 13px 14px 11px;
    transition: box-shadow .15s, border-color .15s;
}
.gi-card:hover {
    border-color: #cdd9ec;
    box-shadow: 0 3px 12px rgba(31, 45, 61, .07);
}
.gi-card.is-hidden { display: none; }

.gi-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.gi-card-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}
.gi-card-name a {
    color: #1f2d3d;
    text-decoration: none;
}
.gi-card-name a:hover { color: #4a6ee0; }

.gi-gi-badge {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    background: #f2f6fd;
}
.gi-gi-badge.lv-low  { background: #e8f7f1; }
.gi-gi-badge.lv-mid  { background: #fdf2e6; }
.gi-gi-badge.lv-high { background: #fdecec; }
.gi-gi-badge.lv-zero { background: #f1f4f8; }

.gi-est {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #98a6ad;
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 2px;
    vertical-align: 1px;
}

.gi-card-gl {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}
.gi-gl-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.gi-gl-label {
    font-size: 12px;
    color: #98a6ad;
}

.gi-card-nums {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    color: #6b7c8f;
    margin-bottom: 7px;
}
.gi-card-nums b {
    color: #1f2d3d;
    font-weight: 600;
}

.gi-card-serve {
    font-size: 12px;
    color: #98a6ad;
    margin: 0 0 7px;
}
.gi-card-range {
    margin-left: 6px;
    color: #b0bcc8;
}

.gi-card-note {
    font-size: 12.5px;
    color: #5a6b7c;
    margin: 0 0 10px;
    line-height: 1.6;
    
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gi-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f1f4f8;
}
.gi-card-cat {
    font-size: 11.5px;
    color: #98a6ad;
    flex: none;
}
.gi-card-swap {
    font-size: 11.5px;
    color: #4a6ee0;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.gi-card-swap:hover { text-decoration: underline; }

.gi-add {
    flex: none;
    margin-left: auto;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #4a6ee0;
    border-radius: 7px;
    background: #fff;
    color: #4a6ee0;
    font-size: 12.5px;
    cursor: pointer;
    transition: all .15s;
}
.gi-add:hover { background: #4a6ee0; color: #fff; }
.gi-add.is-added { background: #e8f7f1; border-color: #17a673; color: #17a673; }

.gi-empty {
    padding: 24px;
    text-align: center;
    color: #98a6ad;
    font-size: 14px;
    background: #fbfcfe;
    border: 1px dashed #e0e7f1;
    border-radius: 10px;
}


.gi-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}
.gi-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid #e0e7f1;
    border-radius: 8px;
    background: #fff;
    color: #5a6b7c;
    font-size: 13px;
    text-decoration: none;
    transition: all .15s;
}
.gi-page-btn:hover { border-color: #4a6ee0; color: #4a6ee0; }
.gi-page-btn.is-on {
    background: #4a6ee0;
    border-color: #4a6ee0;
    color: #fff;
    font-weight: 600;
}
.gi-page-gap { color: #c3ccd6; padding: 0 2px; }
.gi-page-info {
    font-size: 12px;
    color: #98a6ad;
    margin-left: 8px;
}



.gi-meal { margin-bottom: 28px; }

.gi-meal-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 22px;
}

.gi-meal-left {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 14px;
    position: sticky;
    top: 12px;
}
.gi-meal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.gi-meal-head h3 {
    font-size: 15px;
    margin: 0;
    color: #1f2d3d;
}

.gi-meal-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}
.gi-meal-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px dashed #f1f4f8;
    font-size: 13px;
}
.gi-meal-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1f2d3d;
}
.gi-meal-item-input {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.gi-meal-item-input input {
    width: 56px;
    height: 28px;
    border: 1px solid #d8e0ec;
    border-radius: 6px;
    text-align: right;
    padding: 0 5px;
    font-size: 12.5px;
    color: #1f2d3d;
}
.gi-meal-item-input em {
    font-style: normal;
    font-size: 11.5px;
    color: #98a6ad;
}
.gi-meal-item-gl {
    flex: none;
    font-size: 11.5px;
    color: #98a6ad;
    min-width: 48px;
    text-align: right;
}
.gi-meal-del {
    flex: none;
    width: 22px;
    height: 22px;
    line-height: 1;
    border: none;
    border-radius: 5px;
    background: #f4f7fb;
    color: #98a6ad;
    font-size: 15px;
    cursor: pointer;
}
.gi-meal-del:hover { background: #fdecec; color: #d9534f; }

.gi-meal-none {
    font-size: 12.5px;
    color: #98a6ad;
    padding: 12px 0;
    line-height: 1.6;
}

.gi-meal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.gi-meal-hint {
    font-size: 12px;
    color: #b0bcc8;
    margin: 8px 0 0;
}

.gi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #d8e0ec;
    border-radius: 8px;
    background: #fff;
    color: #5a6b7c;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
}
.gi-btn:hover { border-color: #4a6ee0; color: #4a6ee0; }
.gi-btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.gi-btn-primary {
    background: #4a6ee0;
    border-color: #4a6ee0;
    color: #fff;
}
.gi-btn-primary:hover { background: #3d5fc9; border-color: #3d5fc9; color: #fff; }



.gi-meal-right {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 16px;
    min-height: 180px;
}

.gi-result-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    text-align: center;
}
.gi-empty-tip {
    font-size: 13.5px;
    color: #98a6ad;
    margin: 0;
    max-width: 420px;
    line-height: 1.7;
}

.gi-result-top {
    display: flex;
    gap: 18px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f4f8;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.gi-score {
    flex: none;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid #e6ecf5;
    background: #fbfcfe;
}
.gi-score.sc-good { border-color: #17a673; }
.gi-score.sc-ok   { border-color: #d9822b; }
.gi-score.sc-bad  { border-color: #d9534f; }
.gi-score-num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: #1f2d3d;
}
.gi-score-unit {
    font-size: 11px;
    color: #98a6ad;
    margin-top: 1px;
}
.gi-score-label {
    font-size: 11px;
    color: #98a6ad;
    margin-top: 3px;
}

.gi-kpis {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    min-width: 260px;
}
.gi-kpi {
    background: #fbfcfe;
    border-radius: 8px;
    padding: 9px 11px;
}
.gi-kpi b {
    display: block;
    font-size: 19px;
    color: #1f2d3d;
    line-height: 1.2;
}
.gi-kpi b i {
    font-style: normal;
    font-size: 12px;
    color: #98a6ad;
    margin-left: 2px;
}
.gi-kpi span {
    display: block;
    font-size: 11.5px;
    color: #98a6ad;
    margin-top: 2px;
}
.gi-kpi em {
    display: inline-block;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 3px;
}
.gi-kpi-main { background: #f2f6fd; }
.gi-kpi-main b { color: #4a6ee0; }


.gi-bars { margin-bottom: 16px; }
.gi-bars-title {
    font-size: 13.5px;
    color: #1f2d3d;
    margin: 0 0 9px;
}
.gi-bar-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
    font-size: 12.5px;
}
.gi-bar-name {
    flex: none;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5a6b7c;
}
.gi-bar-track {
    flex: 1;
    height: 9px;
    background: #f1f4f8;
    border-radius: 5px;
    overflow: hidden;
    min-width: 60px;
}
.gi-bar-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: #4a6ee0;
}
.gi-bar-fill.lv-low  { background: #17a673; }
.gi-bar-fill.lv-mid  { background: #d9822b; }
.gi-bar-fill.lv-high { background: #d9534f; }
.gi-bar-fill.lv-zero { background: #c3ccd6; }
.gi-bar-val {
    flex: none;
    width: 76px;
    text-align: right;
    color: #1f2d3d;
    font-weight: 600;
}
.gi-bar-val small {
    font-weight: 400;
    color: #b0bcc8;
}


.gi-advice {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gi-advice li {
    display: flex;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fbfcfe;
    border-left: 3px solid #d8e0ec;
}
.gi-advice li.adv-good { background: #f2fbf7; border-left-color: #17a673; }
.gi-advice li.adv-warn { background: #fef6f6; border-left-color: #d9534f; }
.gi-advice li.adv-tip  { background: #f7f9fd; border-left-color: #4a6ee0; }

.gi-advice-icon {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #98a6ad;
    margin-top: 1px;
}
.adv-good .gi-advice-icon { background: #17a673; }
.adv-warn .gi-advice-icon { background: #d9534f; }
.adv-tip  .gi-advice-icon { background: #4a6ee0; }

.gi-advice-body { min-width: 0; }
.gi-advice-body strong {
    display: block;
    font-size: 13.5px;
    color: #1f2d3d;
    margin-bottom: 3px;
    line-height: 1.5;
}
.gi-advice-body p {
    margin: 0;
    font-size: 12.5px;
    color: #5a6b7c;
    line-height: 1.65;
}
.gi-advice-action {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #4a6ee0;
    background: #eef3fd;
    border-radius: 5px;
    padding: 2px 8px;
}


.gi-swaps {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f4f8;
}
.gi-swaps-title {
    font-size: 13.5px;
    color: #1f2d3d;
    margin: 0 0 9px;
}
.gi-swaps ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gi-swaps li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    padding: 7px 10px;
    background: #f7f9fd;
    border-radius: 7px;
    margin-bottom: 6px;
}
.gi-swap-from, .gi-swap-to {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #5a6b7c;
}
.gi-swap-to { color: #17a673; font-weight: 600; }
.gi-swap-from small, .gi-swap-to small {
    font-size: 11px;
    color: #98a6ad;
}
.gi-swap-arrow { color: #b0bcc8; }
.gi-swap-delta {
    margin-left: auto;
    color: #6b7c8f;
}
.gi-swap-delta b { color: #17a673; }



.gi-presets { margin-top: 8px; }
.gi-presets-title {
    font-size: 16px;
    color: #1f2d3d;
    margin: 0 0 5px;
}
.gi-presets-sub {
    font-size: 13px;
    color: #98a6ad;
    margin: 0 0 14px;
}
.gi-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.gi-preset {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 13px 14px;
}
.gi-preset-name {
    font-size: 14.5px;
    margin: 0 0 6px;
    color: #1f2d3d;
}
.gi-preset-desc {
    font-size: 12.5px;
    color: #6b7c8f;
    margin: 0 0 10px;
    line-height: 1.6;
}
.gi-preset-foods {
    list-style: none;
    margin: 0 0 11px;
    padding: 0;
    font-size: 12.5px;
    flex: 1;
}
.gi-preset-foods li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px dashed #f4f7fb;
}
.gi-preset-foods a {
    color: #5a6b7c;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gi-preset-foods a:hover { color: #4a6ee0; }
.gi-preset-foods span {
    flex: none;
    color: #b0bcc8;
    font-size: 11.5px;
}
.gi-preset-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid #f1f4f8;
}
.gi-preset-gl {
    font-size: 13px;
    font-weight: 700;
}
.gi-preset-gl.gl-low  { color: #17a673; }
.gi-preset-gl.gl-mid  { color: #d9822b; }
.gi-preset-gl.gl-high { color: #d9534f; }
.gi-preset-score {
    font-size: 11.5px;
    color: #98a6ad;
}
.gi-preset-load { margin-left: auto; }



.gi-knowledge, .gi-faq { margin-bottom: 28px; }

.gi-principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.gi-principle {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 14px 16px;
}
.gi-principle h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin: 0 0 8px;
    color: #1f2d3d;
}
.gi-principle-num {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4a6ee0;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gi-principle p {
    margin: 0;
    font-size: 13px;
    color: #5a6b7c;
    line-height: 1.75;
}

.gi-faq-list { margin-top: 12px; }
.gi-faq-item {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 9px;
    padding: 12px 15px;
    margin-bottom: 9px;
}
.gi-faq-item summary {
    font-size: 14px;
    font-weight: 600;
    color: #1f2d3d;
    cursor: pointer;
    list-style: none;
}
.gi-faq-item summary::-webkit-details-marker { display: none; }
.gi-faq-item summary::before {
    content: 'Q ';
    color: #4a6ee0;
    font-weight: 700;
}
.gi-faq-item[open] summary { margin-bottom: 8px; }
.gi-faq-item p {
    margin: 0;
    font-size: 13px;
    color: #5a6b7c;
    line-height: 1.75;
    padding-left: 22px;
}



.gi-note {
    background: #f7f9fc;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 16px 18px;
}
.gi-note-list {
    margin: 10px 0 0;
    padding-left: 20px;
    font-size: 12.5px;
    color: #5a6b7c;
    line-height: 1.8;
}
.gi-note-list li { margin-bottom: 6px; }
.gi-note-list b { color: #1f2d3d; }
.gi-note-list .gi-est { margin: 0 2px; }










.gi-ico,
.gi-ico-sm,
.gi-dot,
.gi-kpi-ico,
.gi-bar-ico,
.gi-swap-ico {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    font-style: normal;
    font-weight: 400;
}

.gi-ico {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 7px;
    background: #f2f6fd;
    font-size: 14px;
    margin-right: 6px;
    vertical-align: -4px;
    flex: none;
}

.gi-ico-sm {
    display: inline-block;
    font-size: 12px;
    margin-right: 3px;
    vertical-align: -1px;
    opacity: .9;
}

.gi-dot { font-size: 10px; margin-right: 4px; }
.gi-kpi-ico { font-size: 12px; margin-right: 3px; }
.gi-bar-ico { font-size: 13px; margin-right: 4px; }
.gi-swap-ico { font-size: 13px; margin-right: 4px; }


.gi-card[data-cat="grain"]     .gi-ico { background: #fdf5e6; }
.gi-card[data-cat="vegetable"] .gi-ico { background: #ebf7f0; }
.gi-card[data-cat="fruit"]     .gi-ico { background: #fdeef0; }
.gi-card[data-cat="bean"]      .gi-ico { background: #f7f1e7; }
.gi-card[data-cat="dairy"]     .gi-ico { background: #eef4fd; }
.gi-card[data-cat="drink"]     .gi-ico { background: #eaf6f8; }
.gi-card[data-cat="snack"]     .gi-ico { background: #fdf2ea; }
.gi-card[data-cat="dish"]      .gi-ico { background: #f0f1f8; }


.gi-chip-btn .gi-ico { width: 20px; height: 20px; line-height: 20px; font-size: 12.5px; margin-right: 4px; vertical-align: -4px; }
.gi-chip-btn.is-on .gi-ico { background: rgba(255, 255, 255, .24); }


.gi-quick-name { display: flex; align-items: center; }
.gi-quick-name .gi-ico { width: 20px; height: 20px; line-height: 20px; font-size: 12.5px; margin-right: 5px; vertical-align: -3px; }


.gi-preset-name .gi-ico { width: 22px; height: 22px; line-height: 22px; font-size: 13.5px; vertical-align: -4px; }
.gi-preset-foods .gi-ico-sm { margin-right: 4px; }


.gi-food-hero h1 .gi-ico { width: 30px; height: 30px; line-height: 30px; font-size: 18px; margin-right: 8px; vertical-align: -5px; }
.gi-food-num span .gi-ico-sm { margin-right: 4px; }
.gi-pair-tag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
}



.gi-meal-right.is-loading { opacity: .55; }
.gi-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    background: rgba(31, 45, 61, .92);
    color: #fff;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 8px;
    z-index: 9999;
    pointer-events: none;
}





.gi-crumb {
    font-size: 12.5px;
    color: #98a6ad;
    margin-bottom: 12px;
}
.gi-crumb a {
    color: #6b7c8f;
    text-decoration: none;
}
.gi-crumb a:hover { color: #4a6ee0; }
.gi-crumb span { margin: 0 5px; color: #c3ccd6; }
.gi-crumb-cur { color: #1f2d3d; }

.gi-food-hero { margin-bottom: 18px; }
.gi-food-hero h1 {
    font-size: 24px;
    color: #1f2d3d;
    margin: 0 0 10px;
    line-height: 1.4;
}
.gi-food-verdict {
    font-size: 14.5px;
    color: #5a6b7c;
    background: #f7f9fc;
    border-left: 3px solid #4a6ee0;
    border-radius: 0 8px 8px 0;
    padding: 12px 15px;
    margin: 0 0 12px;
    line-height: 1.75;
    max-width: 960px;
}
.gi-food-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.gi-tag-pill {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 6px;
    background: #f2f6fd;
    color: #5a6b7c;
    font-weight: 600;
}
.gi-tag-pill.gl-low  { background: #e8f7f1; color: #17a673; }
.gi-tag-pill.gl-mid  { background: #fdf2e6; color: #d9822b; }
.gi-tag-pill.gl-high { background: #fdecec; color: #d9534f; }

.gi-food-grid {
    display: grid;
    

    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
    margin-bottom: 24px;
}

.gi-food-nums {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.gi-food-num {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 9px;
    padding: 11px 13px;
}
.gi-food-num b {
    display: block;
    font-size: 21px;
    color: #1f2d3d;
    line-height: 1.2;
}
.gi-food-num b i {
    font-style: normal;
    font-size: 12px;
    color: #98a6ad;
    margin-left: 2px;
}
.gi-food-num span {
    display: block;
    font-size: 11.5px;
    color: #98a6ad;
    margin-top: 3px;
    line-height: 1.4;
}
.gi-food-num em {
    display: inline-block;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 3px;
}
.gi-food-num-main { background: #f2f6fd; border-color: #d6e0f7; }
.gi-food-num-main b { color: #4a6ee0; font-size: 24px; }

.gi-food-block {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 15px 17px;
    margin-bottom: 14px;
}
.gi-food-block h2 {
    font-size: 16px;
    color: #1f2d3d;
    margin: 0 0 7px;
}
.gi-food-block-sub {
    font-size: 12.5px;
    color: #6b7c8f;
    margin: 0 0 11px;
    line-height: 1.7;
}
.gi-food-block-sub a { color: #4a6ee0; }
.gi-food-note {
    font-size: 13.5px;
    color: #5a6b7c;
    line-height: 1.8;
    margin: 0 0 10px;
}
.gi-food-caveat {
    font-size: 12px;
    color: #98a6ad;
    line-height: 1.7;
    margin: 0;
    padding-top: 9px;
    border-top: 1px dashed #eef2f7;
}


.gi-portion-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.gi-portion-table th {
    text-align: left;
    font-weight: 600;
    color: #6b7c8f;
    font-size: 12px;
    padding: 7px 9px;
    background: #f7f9fc;
    border-bottom: 1px solid #e6ecf5;
}
.gi-portion-table td {
    padding: 8px 9px;
    border-bottom: 1px solid #f4f7fb;
    color: #5a6b7c;
}
.gi-portion-table td b { color: #1f2d3d; font-size: 14px; }
.gi-portion-table tr.is-serve { background: #f8faff; }
.gi-portion-table tr.is-serve td { font-weight: 600; color: #1f2d3d; }
.gi-serve-mark {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: #4a6ee0;
    background: #eef3fd;
    border-radius: 4px;
    padding: 0 5px;
}


.gi-pair-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 12px;
}
.gi-pair {
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: 9px;
    padding: 11px 13px;
}
.gi-pair h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    margin: 0 0 8px;
    color: #1f2d3d;
    line-height: 1.5;
}
.gi-pair-tag {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #4a6ee0;
    border-radius: 4px;
    padding: 1px 6px;
}
.gi-pair ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gi-pair li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    padding: 4px 0;
    border-bottom: 1px dashed #f1f4f8;
}
.gi-pair li:last-child { border-bottom: none; }
.gi-pair li a {
    color: #5a6b7c;
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gi-pair li a:hover { color: #4a6ee0; }
.gi-pair li span {
    flex: none;
    color: #98a6ad;
    font-size: 11.5px;
}


.gi-alt-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gi-alt-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    background: #f7f9fd;
    border-radius: 8px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}
.gi-alt-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.gi-alt-name a {
    color: #1f2d3d;
    font-weight: 600;
    text-decoration: none;
    font-size: 13.5px;
}
.gi-alt-name a:hover { color: #4a6ee0; }
.gi-alt-name small { color: #98a6ad; font-size: 11.5px; }
.gi-alt-delta {
    font-size: 12.5px;
    color: #6b7c8f;
}
.gi-alt-delta b { color: #17a673; margin-left: 4px; }


.gi-food-side { position: sticky; top: 12px; }
.gi-side-card {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 14px 15px;
    margin-bottom: 12px;
}
.gi-side-title {
    font-size: 14px;
    color: #1f2d3d;
    margin: 0 0 8px;
}
.gi-side-card p {
    font-size: 12.5px;
    color: #6b7c8f;
    margin: 0 0 11px;
    line-height: 1.65;
}
.gi-side-btn {
    width: 100%;
    margin-bottom: 7px;
}
.gi-same-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.gi-same-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    padding: 5px 0;
    border-bottom: 1px dashed #f4f7fb;
}
.gi-same-list a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5a6b7c;
    text-decoration: none;
}
.gi-same-list a:hover { color: #4a6ee0; }
.gi-same-gi {
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
}
.gi-same-gl {
    flex: none;
    font-size: 11px;
    color: #b0bcc8;
    min-width: 42px;
    text-align: right;
}
.gi-side-more {
    font-size: 12.5px;
    color: #4a6ee0;
    text-decoration: none;
}
.gi-side-more:hover { text-decoration: underline; }


.gi-nf {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 36px 24px;
    text-align: center;
}
.gi-nf h1 {
    font-size: 20px;
    color: #1f2d3d;
    margin: 0 0 10px;
}
.gi-nf p {
    font-size: 13.5px;
    color: #6b7c8f;
    margin: 0 0 16px;
    line-height: 1.7;
}



.gi-food-num, .gi-kpi, .gi-card, .gi-preset { min-width: 0; }
.gi-card-name, .gi-bar-name, .gi-advice-body { min-width: 0; }


.gi-food-main, .gi-food-side, .gi-food-block { min-width: 0; }
.gi-portion-table { max-width: 100%; }