:root {
    color-scheme: light dark;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --background: var(--tg-theme-secondary-bg-color, #f4f6fb);
    --surface: var(--tg-theme-bg-color, #ffffff);
    --text: var(--tg-theme-text-color, #202431);
    --muted: var(--tg-theme-hint-color, #838a99);
    --accent: var(--tg-theme-button-color, #668c68);
    --accent-text: var(--tg-theme-button-text-color, #ffffff);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
}

[hidden] { display: none !important; }

.application {
    width: min(100%, 640px);
    margin: 0 auto;
    padding: max(24px, env(safe-area-inset-top)) 18px max(32px, env(safe-area-inset-bottom));
}

.page-header, .section-heading, .food-card, .date-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-header { margin-bottom: 26px; }
.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 13px; }
.page-header h1, .message-card h1 { margin: 0; font-size: 25px; letter-spacing: -0.7px; }

.avatar {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    background: var(--surface);
    border-radius: 16px;
    font-size: 22px;
}

.date-navigation {
    padding: 12px;
    background: var(--surface);
    border-radius: 20px;
}

.date-navigation > div { display: grid; gap: 3px; text-align: center; }
.date-navigation > div span { color: var(--muted); font-size: 12px; }

.icon-button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 13px;
    background: var(--background);
    color: var(--text);
    font-size: 27px;
}

.icon-button:disabled { opacity: 0.35; }

.hero-card {
    margin-top: 18px;
    padding: 22px;
    background: linear-gradient(140deg, #56795d, #729e77 68%, #9cbb83);
    border-radius: 24px;
    color: #fff;
}

.hero-label { margin: 0 0 9px; opacity: 0.85; font-size: 13px; }
.balance-value { display: flex; align-items: baseline; gap: 8px; }
.balance-value span:first-child { font-size: 43px; font-weight: 750; letter-spacing: -1.4px; }
.balance-value span:last-child { opacity: 0.8; font-size: 14px; }

.hero-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
    padding-top: 17px;
    border-top: 1px solid rgb(255 255 255 / 24%);
}

.hero-details div { display: grid; gap: 5px; }
.hero-details span { opacity: 0.8; font-size: 12px; }
.hero-details strong { font-size: 16px; }

.section-block { margin-top: 25px; }
.section-heading { margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 18px; }
.section-heading > span { color: var(--muted); font-size: 12px; }

.macros-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.macro-card { display: grid; gap: 10px; min-width: 0; padding: 15px 11px; border-radius: 17px; }
.macro-card span { font-size: 12px; }
.macro-card strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.macro-protein { background: #ebf0ff; color: #344c90; }
.macro-fat { background: #fff1df; color: #93601c; }
.macro-carbs { background: #f0eaff; color: #62439c; }

.food-list { display: grid; gap: 9px; }
.food-card { gap: 12px; padding: 15px; background: var(--surface); border-radius: 17px; }
.food-details { display: grid; min-width: 0; gap: 5px; }
.food-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-details span { color: var(--muted); font-size: 11px; }
.food-calories { flex-shrink: 0; color: var(--accent); font-size: 13px; }

.empty-card, .message-card { display: grid; place-items: center; text-align: center; }
.empty-card { gap: 3px; padding: 30px; background: var(--surface); border-radius: 20px; }
.empty-card > span { font-size: 30px; }
.empty-card p { margin: 7px 0 1px; }
.empty-card small { color: var(--muted); }

.message-card { min-height: 70vh; align-content: center; gap: 14px; }
.message-card h1 { max-width: 300px; }
.message-card p { max-width: 320px; margin: 0; color: var(--muted); line-height: 1.5; }
.message-icon { font-size: 40px; }

.primary-button {
    margin-top: 8px;
    padding: 13px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: var(--accent-text);
    font: inherit;
}

.spinner {
    width: 34px;
    height: 34px;
    border: 3px solid color-mix(in srgb, var(--accent), transparent 75%);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 360px) {
    .application { padding-right: 12px; padding-left: 12px; }
    .food-details span { max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}