--vaadin-*/--lumo-* compatibility aliases the rules below consume,and a light base reset. ============================================================================ */ --aura-*/--vaadin-* tokens above;logical properties only (RTL-safe). Component look-and-feel comes from the Aura theme. */ :root{--fc-logomark-arc-a: var(--fc-brand-blue,#3266e4);--fc-logomark-arc-b: var(--fc-brand-green,#009f34)}:root[data-theme="dark"],.dark{--fc-logomark-arc-a: #6a97f2;--fc-logomark-arc-b: #2ec16a}html,body{margin: 0;font-family: var(--fc-font-sans)}.user-shell,.admin-shell{min-block-size: 100vh;background: var(--fc-bg-sunken);color: var(--fc-text);padding-inline: 0 !important;--aura-app-layout-border-width: 0;--_app-layout-radius: 0}.account-avatar{cursor: pointer;background-color: var(--fc-accent);color: #ffffff}.auth-view,.signup-view,.home-view{padding-inline: var(--vaadin-padding-m,1rem)}.auth-card{display: flex;flex-direction: column;gap: var(--vaadin-gap-m,1rem);inline-size: 100%;max-inline-size: 24rem;padding: var(--vaadin-padding-l,1.5rem);border-radius: var(--vaadin-radius-l,12px);background: var(--aura-surface-color,#ffffff);box-shadow: var(--aura-shadow-m,0 4px 16px rgba(0,0,0,0.08))}.auth-title{margin-block: 0;font-size: var(--aura-font-size-xl,1.5rem)}.auth-footer{margin-block-start: var(--vaadin-gap-m,1rem)}.password-strength{font-size: var(--aura-font-size-s,0.875rem);color: var(--aura-accent-text-color,#3b82f6)}.app-navbar{background: var(--fc-bg-sunken)}.verify-banner{display: flex;align-items: center;gap: var(--vaadin-gap-s,0.5rem);box-sizing: border-box;inline-size: 100%;max-inline-size: calc(var(--fc-shell-max,60rem) - 24px);margin-inline: auto;margin-block: var(--vaadin-padding-s,0.75rem);padding: var(--vaadin-padding-s,0.75rem) var(--vaadin-padding-m,1rem);border-radius: var(--fc-radius-m,9px);background: var(--aura-warning-bg,#fef3c7);color: var(--aura-warning-text,#92400e)}.verify-banner-icon{flex: none;inline-size: 1.15rem;block-size: 1.15rem;color: var(--aura-warning-text,#92400e)}.verify-banner-text{flex: 1}.verify-banner vaadin-button{flex: none;color: var(--fc-accent-text);background: transparent;box-shadow: none;--vaadin-button-background: transparent;--vaadin-button-border-color: transparent;--vaadin-button-text-color: var(--fc-accent-text)}.verify-banner--sent{background: var(--aura-success-bg,#d1fae5);color: var(--aura-success-text,#065f46)}.verify-banner--sent .verify-banner-icon{color: var(--aura-success-text,#065f46)}.plan-view{padding: var(--vaadin-padding-m,1rem)}.app-title{margin: 0;font-size: var(--aura-font-size-l,1.25rem)}vaadin-app-layout::part(navbar){padding: 0}.app-header{padding-inline: max(var(--vaadin-padding-m,1rem),calc((100% - var(--fc-shell-max,60rem)) / 2 + var(--vaadin-padding-m,1rem)));padding-block: 0.9375rem;background: var(--fc-surface);border-block-end: 1px solid var(--fc-border-secondary)}.app-title{letter-spacing: -0.02em;color: var(--fc-header-text)}.app-user{color: var(--vaadin-text-color-secondary,#6b7280);font-size: var(--aura-font-size-s,0.875rem)}.account-menu-anchor{display: inline-flex;align-items: center}.account-menu-panel{min-inline-size: 14rem;gap: var(--vaadin-gap-xs,0.25rem)}.account-menu-panel hr{inline-size: 100%;block-size: 0;margin-block: var(--vaadin-gap-xs,0.25rem);margin-inline: 0;border: none;border-block-start: 1px solid var(--fc-border-secondary)}.account-menu-header{gap: 0}.account-menu-name{font-weight: 600;padding-inline: var(--vaadin-padding-s,0.5rem);overflow-wrap: anywhere}.account-menu-email{color: var(--fc-text-secondary);font-size: var(--aura-font-size-s,0.8125rem);padding-inline: var(--vaadin-padding-s,0.5rem);overflow-wrap: anywhere}.account-menu-links{gap: 0}.account-menu-link{display: block;text-decoration: none;color: var(--vaadin-text-color,#1f2937);padding: var(--vaadin-padding-xs,0.25rem) var(--vaadin-padding-s,0.5rem);border-radius: var(--vaadin-radius-s,6px)}.account-menu-link:hover{background: var(--vaadin-surface-color-2,#f3f4f6);color: var(--aura-accent-text-color,#2563eb)}.account-menu-link[highlight]{color: var(--aura-accent-text-color,#2563eb);font-weight: 600}.account-menu-logout{align-self: flex-start}.account-menu-theme{padding-inline: var(--vaadin-padding-s,0.5rem);padding-block: var(--vaadin-padding-xs,0.25rem);font-size: var(--fc-font-size-s,0.8125rem)}.top-nav{gap: var(--vaadin-gap-xs,0.25rem);margin-inline-start: var(--vaadin-gap-l,1.5rem)}.top-nav-link{text-decoration: none;color: var(--fc-text-secondary);font-weight: 500;padding: var(--vaadin-padding-xs,0.25rem) var(--vaadin-padding-s,0.5rem);border-radius: var(--vaadin-radius-m,9px);transition: background 120ms ease,color 120ms ease}.top-nav-link:hover{color: var(--fc-header-text);background: var(--fc-surface-2)}.top-nav-link[highlight]{color: var(--fc-accent-text);background: var(--fc-tint-accent);font-weight: 600}.brand-lockup{display: inline-flex;align-items: center;gap: 0.5rem;text-decoration: none}.brand-mark{inline-size: 28px;block-size: 28px;flex: none}.brand-mark>svg,.login-brand-mark>svg{display: block;inline-size: 100%;block-size: 100%}.brand-wordmark{font-size: 1.1875rem;font-weight: 600;letter-spacing: -0.02em;color: var(--fc-header-text)}.brand-wordmark .brand-cal{color: var(--fc-brand-blue)}:root{--fc-shell-max: 60rem}.centered-view{box-sizing: border-box;inline-size: 100%;max-inline-size: var(--fc-shell-max,60rem);margin-inline: auto;padding-inline: var(--vaadin-padding-m,1rem) !important;padding-block-end: var(--vaadin-padding-xl,2.5rem);background: transparent !important;border: 0 !important;box-shadow: none}@media (max-width: 640px){.user-header{flex-wrap: wrap}.user-header .app-user{display: none}.user-header .top-nav{order: 3;flex-basis: 100%;justify-content: center;gap: var(--vaadin-gap-m,1rem)}}.admin-users-view,.admin-user-view{padding: var(--vaadin-padding-m,1rem);gap: var(--vaadin-gap-m,1rem)}.consent-block{margin-block: var(--vaadin-gap-s,0.5rem)}.consent-desc{margin-block: var(--vaadin-gap-xs,0.25rem) 0;padding-inline-start: 1.75rem;font-size: var(--aura-font-size-s,0.875rem);color: var(--vaadin-text-color-secondary,#6b7280)}.onboarding-step{font-size: var(--aura-font-size-s,0.875rem);color: var(--vaadin-text-color-secondary,#6b7280)}.onboarding-nav{margin-block-start: var(--vaadin-gap-m,1rem)}.settings-view{padding: var(--vaadin-padding-m,1rem);gap: var(--vaadin-gap-m,1rem)}.locale-field{margin-block-start: var(--vaadin-gap-s,0.5rem)}.locale-field-label{font-weight: 600;font-size: var(--aura-font-size-s,0.875rem);color: var(--vaadin-text-color,#1f2937)}.locale-field-helper{margin-block: var(--vaadin-gap-xs,0.25rem) var(--vaadin-gap-xs,0.25rem);font-size: var(--aura-font-size-s,0.875rem);color: var(--vaadin-text-color-secondary,#6b7280)}.recipe-langs{inline-size: 100%;gap: var(--vaadin-gap-xs,0.25rem)}.recipe-lang-row{padding-block: var(--vaadin-padding-xs,0.25rem);border-block-end: 1px solid var(--vaadin-border-color,#e5e7eb)}.recipe-lang-name{font-size: var(--aura-font-size-m,1rem)}.form-actions{margin-block-start: var(--vaadin-gap-m,1rem);gap: var(--vaadin-gap-s,0.5rem)}.profile-form{inline-size: 100%;max-inline-size: 100%;gap: var(--vaadin-gap-m,1rem)}.profile-form>vaadin-number-field,.profile-form>vaadin-combo-box,.profile-form .profile-field>*{inline-size: 100%}.profile-field-label{font-weight: 600;font-size: var(--aura-font-size-s,0.875rem);color: var(--vaadin-text-color,#1f2937);margin-block-end: var(--vaadin-gap-xs,0.25rem)}.nutrition-preview{box-sizing: border-box;inline-size: 100%}.nutrition-preview>*{inline-size: 100%}.preview-title{font-weight: 600;font-size: var(--aura-font-size-s,0.875rem);color: var(--vaadin-text-color-secondary,#6b7280)}.preview-row{display: flex;gap: var(--vaadin-gap-m,1rem)}.preview-figure{display: flex;flex-direction: column;flex: 1}.preview-label{font-size: var(--aura-font-size-xs,0.75rem);color: var(--vaadin-text-color-secondary,#6b7280)}.preview-value{font-size: var(--aura-font-size-l,1.25rem);font-weight: 600}.preview-value-primary{font-size: var(--aura-font-size-xl,2rem);font-weight: 700;color: var(--aura-accent-text-color,#2563eb)}.preview-formula{font-size: var(--aura-font-size-xs,0.75rem);color: var(--vaadin-text-color-secondary,#6b7280)}.preview-caption{font-size: var(--aura-font-size-xs,0.75rem);color: var(--vaadin-text-color-secondary,#6b7280)}.preview-formula-details{margin-block-start: var(--vaadin-gap-xs,0.25rem)}.home-view{gap: var(--vaadin-gap-m,1rem)}.home-hero-title{margin-block: 0;font-size: var(--aura-font-size-xl,2rem)}.home-hero-tagline{margin-block: 0;font-size: var(--aura-font-size-l,1.25rem);color: var(--vaadin-text-color-secondary,#6b7280)}.home-cta{align-self: flex-start}.home-steps{padding-inline-start: 1.25rem;line-height: 1.7}.home-science-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));gap: var(--vaadin-gap-m,1rem);inline-size: 100%}.body-edit-hint{font-size: var(--aura-font-size-s,0.875rem);color: var(--vaadin-text-color-secondary,#6b7280);margin-block: 0}vaadin-grid#body-readings::part(cell){cursor: pointer}.bodycomp-derived{font-size: var(--aura-font-size-s,0.875rem);color: var(--aura-accent-text-color,#2563eb)}.bodycomp-warning{margin-block: var(--vaadin-gap-xs,0.25rem);color: var(--aura-orange-text,#92400e);font-size: var(--aura-font-size-s,0.875rem)}.bodycomp-disclaimer{box-sizing: border-box;inline-size: 100%;padding: var(--vaadin-padding-s,0.5rem);border-radius: var(--vaadin-radius-m,8px);background: var(--aura-yellow,#fef3c7);color: var(--aura-yellow-text,#92400e);font-size: var(--aura-font-size-s,0.875rem)}.preview-safety{box-sizing: border-box;inline-size: 100%;margin-block: var(--vaadin-gap-xs,0.25rem) 0;padding: var(--vaadin-padding-s,0.5rem);border-radius: var(--vaadin-radius-m,8px);background: var(--aura-yellow,#fef3c7);color: var(--aura-yellow-text,#92400e);font-size: var(--aura-font-size-s,0.875rem)}.not-medical-advice{box-sizing: border-box;inline-size: 100%;margin-block-start: var(--vaadin-gap-m,1rem);padding: var(--vaadin-padding-s,0.5rem);border-radius: var(--vaadin-radius-m,8px);background: var(--aura-yellow,#fef3c7);color: var(--aura-yellow-text,#92400e);font-size: var(--aura-font-size-s,0.875rem)}.login-view{display: grid;grid-template-columns: 1fr 1fr;min-block-size: 100vh}.login-brand{display: flex;flex-direction: column;justify-content: space-between;gap: var(--vaadin-gap-l,1.5rem);padding: 3rem 2.75rem;color: #ffffff;background: var(--fc-brand-gradient)}.login-brand-lockup{display: flex;align-items: center;gap: 0.75rem}.login-brand-mark{inline-size: 36px;block-size: 36px;flex: none;--fc-logomark-arc-a: #ebebeb78;--fc-logomark-arc-b: #ffffff}.login-brand-name{font-size: 1.5rem;font-weight: 600;letter-spacing: -0.03em}.login-brand-title{margin-block: 0;font-size: 2.5rem;line-height: 1.1;letter-spacing: -0.02em;max-inline-size: 26rem;color: #ffffff}.login-brand-lead{margin-block-start: 1rem;font-size: 1.0625rem;line-height: 1.5;max-inline-size: 25rem;opacity: 0.9}.login-brand-principles{font-size: 0.8125rem;opacity: 0.8}.login-panel{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--vaadin-gap-m,1rem);padding: var(--vaadin-padding-l,2rem);background: var(--vaadin-background-color,#ffffff)}.login-panel vaadin-login-form{box-shadow: var(--aura-shadow-s,0 2px 8px rgba(0,0,0,0.08));border-radius: var(--vaadin-radius-l,12px)}@media (max-width: 640px){.login-view{grid-template-columns: 1fr}.login-brand{min-block-size: auto;padding-block: var(--vaadin-padding-l,2rem);text-align: center}}.fc-card{box-sizing: border-box;inline-size: 100%;padding: var(--fc-space-l,1.5rem);background: var(--fc-surface);border: 1px solid var(--fc-border-secondary);border-radius: var(--fc-radius-l,15px);box-shadow: var(--fc-shadow-s)}.today-summary-card{display: flex;flex-direction: column;gap: var(--fc-space-s,0.5rem)}vaadin-grid{border: 1px solid var(--fc-border-secondary);border-radius: var(--fc-radius-l,15px);overflow: hidden;background: var(--fc-surface)}vaadin-grid::part(header-cell){background: var(--fc-surface-2);font-size: var(--fc-font-size-s,0.8125rem);font-weight: var(--fc-weight-semibold,600);color: var(--fc-text-secondary)}vaadin-grid::part(row){background: var(--fc-surface)}vaadin-grid::part(even-row-cell){background: var(--fc-tint-neutral)}:root{--vaadin-overlay-background: var(--fc-surface);--vaadin-popover-background: var(--fc-surface)}.today-content{display: flex;flex-direction: column;gap: var(--fc-space-l,1.5rem)}.section-header{align-items: center;margin-block-start: var(--fc-space-xs,0.25rem)}.section-title{margin: 0;font-size: var(--fc-font-size-xl,1.125rem);font-weight: 600;letter-spacing: -0.01em;color: var(--fc-header-text)}.macro-rings{display: flex;flex-wrap: wrap;gap: var(--vaadin-gap-l,1.5rem);justify-content: center;inline-size: 100%;margin-block: var(--vaadin-padding-m,1rem)}.macro-ring{display: flex;flex-direction: column;align-items: center;gap: var(--vaadin-gap-xs,0.25rem)}.macro-ring-label{font-size: var(--fc-font-size-s,0.8125rem);font-weight: var(--fc-weight-medium,500);color: var(--fc-text-secondary)}.today-remaining{text-align: center;font-size: var(--fc-font-size-l,0.9375rem);color: var(--fc-text-secondary)}.today-remaining .remaining-kcal{font-weight: 600;color: var(--fc-macro-kcal-text,#2a55c0)}.today-remaining .remaining-protein{font-weight: 600;color: var(--fc-macro-protein-text,#5e36be)}.macro-fields{flex-wrap: wrap;gap: var(--vaadin-gap-m,1rem)}@media (min-width: 641px){.macro-rings{flex-wrap: nowrap}}.macro-bars{display: flex;flex-direction: column;gap: var(--vaadin-gap-s,0.5rem);inline-size: 100%;margin-block-start: var(--vaadin-padding-s,0.5rem)}.macro-bar{display: flex;flex-direction: column;gap: 0.25rem}.macro-bar-head{display: flex;justify-content: space-between;font-size: var(--vaadin-font-size-s,0.875rem)}.macro-bar-value{color: var(--aura-secondary-text-color,#6b7280)}