html{--lumo-primary-color: #6366f1;--lumo-primary-color-50pct: rgba(99,102,241,0.5);--lumo-primary-color-10pct: rgba(99,102,241,0.1);--lumo-primary-text-color: #6366f1;--lumo-border-radius-l: 16px;--lumo-border-radius-m: 12px;--lumo-border-radius-s: 8px;--ct-color-protein: #3b82f6;--ct-color-carbs: #f97316;--ct-color-fat: #f59e0b;--ct-color-satfat: #ef4444;--ct-color-sugar: #ec4899;--ct-color-fibres: #10b981;--ct-color-salt: #8b5cf6}vaadin-app-layout::part(navbar){background: var(--lumo-base-color);border-bottom: 1px solid var(--lumo-contrast-10pct);box-shadow: 0 1px 6px rgba(0,0,0,0.06)}vaadin-app-layout::part(drawer){background: var(--lumo-base-color);border-right: 1px solid var(--lumo-contrast-10pct)}vaadin-app-layout::part(content){background: var(--lumo-contrast-5pct)}.app-title{font-size: var(--lumo-font-size-xl);font-weight: 800;letter-spacing: -0.5px;background: linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin: 0}.user-section{background: var(--lumo-contrast-5pct);border-radius: 12px;margin: 0 var(--lumo-space-s) var(--lumo-space-s)}.calorie-card{background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border-radius: 20px !important;padding: 28px !important;box-shadow: 0 8px 32px rgba(99,102,241,0.38) !important}.calorie-label{display: block;font-size: 11px;font-weight: 700;letter-spacing: 1.8px;text-transform: uppercase;color: rgba(255,255,255,0.7);margin-bottom: 6px}.calorie-value{display: block;font-size: 3rem;font-weight: 800;line-height: 1;color: white;letter-spacing: -1px}.calorie-goal{display: block;font-size: var(--lumo-font-size-s);color: rgba(255,255,255,0.6);margin-top: 4px;margin-bottom: 20px}.calorie-card vaadin-progress-bar{--vaadin-progress-bar-value-color: rgba(255,255,255,0.88);--vaadin-progress-bar-background: rgba(255,255,255,0.22);height: 10px;border-radius: 5px}.macro-card{background: var(--lumo-base-color);border-radius: 14px !important;padding: 16px !important;box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;flex: 1 1 120px;min-width: 120px}.macro-name{display: block;font-size: 10px;font-weight: 700;letter-spacing: 1.2px;text-transform: uppercase;margin-bottom: 4px}.macro-value{display: block;font-size: var(--lumo-font-size-s);color: var(--lumo-secondary-text-color);margin-bottom: 10px}.macro-card vaadin-progress-bar{--vaadin-progress-bar-background: var(--lumo-contrast-10pct);height: 6px;border-radius: 3px}.slide-panel{position: fixed;top: 0;right: 0;height: 100vh;width: 380px;background: var(--lumo-base-color);box-shadow: -6px 0 40px rgba(0,0,0,0.14);border-radius: 20px 0 0 20px;transform: translateX(100%);transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);z-index: 200;overflow-y: auto}.slide-panel.panel-open{transform: translateX(0)}.login-page{background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 55%,#ec4899 100%);min-height: 100vh}.login-card{background: var(--lumo-base-color);border-radius: 24px;padding: 40px;box-shadow: 0 20px 60px rgba(0,0,0,0.22);width: min(400px,90vw);display: flex;flex-direction: column;align-items: center}.login-app-title{font-size: 2.2rem;font-weight: 800;letter-spacing: -1px;background: linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin: 0 0 4px 0;display: block}.login-subtitle{display: block;color: var(--lumo-secondary-text-color);font-size: var(--lumo-font-size-s);margin-bottom: 28px}.login-remember-me{font-size: var(--lumo-font-size-s);margin-top: -8px;margin-bottom: 4px}.login-error{display: block;width: 100%;box-sizing: border-box;background: color-mix(in srgb,#ef4444 12%,var(--lumo-base-color));color: #ef4444;border: 1px solid color-mix(in srgb,#ef4444 35%,var(--lumo-base-color));border-radius: 10px;padding: 10px 14px;font-size: var(--lumo-font-size-s);margin-bottom: 12px;text-align: center}.log-section{background: var(--lumo-base-color);border-radius: 14px;padding: 4px 0;box-shadow: 0 2px 10px rgba(0,0,0,0.07);overflow: hidden}.weight-chip{display: inline-flex;align-items: center;background: color-mix(in srgb,#16a34a 12%,var(--lumo-base-color));color: #16a34a;border: 1px solid color-mix(in srgb,#16a34a 35%,var(--lumo-base-color));border-radius: 20px;padding: 4px 14px;font-size: var(--lumo-font-size-s);font-weight: 500;margin-top: 8px}.food-card{background: var(--lumo-base-color);border-radius: 16px;padding: 18px 20px;box-shadow: 0 2px 10px rgba(0,0,0,0.07);flex: 1 1 260px;min-width: 240px;max-width: 340px;display: flex;flex-direction: column;gap: 14px;box-sizing: border-box}.food-card-name{font-size: var(--lumo-font-size-l);font-weight: 700;color: var(--lumo-body-text-color);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.food-card-cal-box{display: flex;align-items: baseline;gap: 6px;padding: 10px 14px;background: color-mix(in srgb,var(--lumo-primary-color) 12%,var(--lumo-base-color));border-radius: 10px}.food-card-cal-value{font-size: 1.6rem;font-weight: 800;color: var(--lumo-primary-color);line-height: 1}.food-card-cal-unit{font-size: var(--lumo-font-size-xs);color: var(--lumo-primary-color-50pct);font-weight: 500}.food-nutrient-grid{display: grid;grid-template-columns: repeat(4,1fr);gap: 10px 6px;padding-top: 2px;border-top: 1px solid var(--lumo-contrast-10pct);padding-top: 12px}.food-nutrient-item{display: flex;flex-direction: column;align-items: center;text-align: center;gap: 2px}.food-nutrient-value{font-size: var(--lumo-font-size-s);font-weight: 700;color: var(--lumo-body-text-color)}.food-nutrient-label{font-size: 9px;font-weight: 600;letter-spacing: 0.4px;text-transform: uppercase;color: var(--lumo-secondary-text-color)}.portion-computed-grams{display: block;font-size: var(--lumo-font-size-s);font-weight: 600;color: var(--lumo-primary-color);margin-top: -8px}.mode-toggle{background: var(--lumo-contrast-10pct);border-radius: 10px;padding: 3px;gap: 2px !important;width: 100%;box-sizing: border-box}.mode-toggle vaadin-button{flex: 1}.history-section-card{background: var(--lumo-base-color);border-radius: 14px;box-shadow: 0 2px 10px rgba(0,0,0,0.07)}.history-section-title{font-size: var(--lumo-font-size-l);font-weight: 700;color: var(--lumo-body-text-color)}.history-week-label{font-size: var(--lumo-font-size-m);font-weight: 700;color: var(--lumo-body-text-color);min-width: 180px;text-align: center}.history-avg-label{font-size: var(--lumo-font-size-s);color: var(--lumo-secondary-text-color)}.history-day-col{flex: 1;display: flex;flex-direction: column;align-items: center;gap: 4px}.history-day-name{font-size: 10px;font-weight: 700;letter-spacing: 0.5px;color: var(--lumo-secondary-text-color);text-transform: uppercase}.history-date-num{font-size: var(--lumo-font-size-s);color: var(--lumo-secondary-text-color);font-weight: 500}.history-today-num{color: var(--lumo-primary-color);font-weight: 800}.history-bar-container{width: 100%;height: 80px;display: flex;align-items: flex-end;justify-content: center;border-bottom: 2px solid var(--lumo-contrast-20pct)}.history-bar-fill{width: 60%;max-width: 32px;border-radius: 4px 4px 0 0;background: #c7d2fe;min-height: 0;transition: height 0.3s ease}.history-day-today .history-bar-fill{background: linear-gradient(180deg,#8b5cf6,#6366f1)}.history-bar-cal{font-size: 10px;font-weight: 600;color: var(--lumo-body-text-color)}.history-bar-empty{color: var(--lumo-disabled-text-color)}.history-day-card{background: var(--lumo-contrast-5pct);border-radius: 12px;padding: 14px 16px;border: 1px solid var(--lumo-contrast-10pct);width: 100%;box-sizing: border-box}.history-daycard-date{font-size: var(--lumo-font-size-m);font-weight: 600;color: var(--lumo-body-text-color)}.history-daycard-cals{font-size: var(--lumo-font-size-m);font-weight: 700;color: var(--lumo-primary-color);white-space: nowrap}.history-macro-chip{display: inline-flex;align-items: center;border-radius: 20px;padding: 3px 10px;font-size: 11px;font-weight: 600;background: color-mix(in srgb,var(--chip-color) 12%,var(--lumo-base-color));color: var(--chip-color)}.history-page-label{font-size: var(--lumo-font-size-s);color: var(--lumo-secondary-text-color);min-width: 80px;text-align: center}@media (max-width: 600px){.slide-panel{width: 100vw;border-radius: 0}.calorie-value{font-size: 2.2rem}}