#calories-screen { min-width: 0; color: var(--text); }
#calories-screen.active { display: block; }
#calories-screen [hidden] { display: none !important; }
#calories-screen .nutrition-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
#calories-screen .nutrition-heading > svg { width: 32px; height: 32px; }
#calories-screen h1 { margin: 4px 0; font-size: 28px; line-height: 1.2; }
#calories-screen h2 { margin: 0 0 18px; font-size: 20px; }
#calories-screen .calorie-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
#calories-screen form { display: block; }
#calories-screen .calorie-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#calories-screen .calorie-fields > label { grid-column: auto; }
#calories-screen .calorie-fields > label:last-child { grid-column: 1/-1; }
#calories-screen label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); min-width: 0; }
#calories-screen :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; padding: 11px 12px; min-height: 46px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
#calories-screen :is(input, select, button, a, summary):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#calories-screen .calorie-check { display: flex; align-items: center; margin: 18px 0 12px; }
#calories-screen .calorie-check input { width: 18px; height: 18px; min-height: 18px; margin: 0; }
#calories-screen .nutrition-note { color: var(--muted); font-size: 13px; line-height: 1.6; }
#calories-screen .nutrition-source-label { font-size: 14px; font-weight: 600; line-height: 1.5; }
#calories-screen .calorie-actions { display: flex; gap: 12px; flex-wrap: wrap; }
#calories-screen .calorie-actions button { width: auto; padding: 12px 16px; border-radius: 6px; }
#calories-screen .primary-button { display: inline-flex; align-items: center; gap: 8px; }
#calories-screen button svg { width: 18px; height: 18px; }
#calories-screen #calorieError { color: var(--red); font-size: 14px; }
#calories-screen .calorie-targets { display: grid; gap: 12px; margin: 0; }
#calories-screen .calorie-targets > div { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 6px; }
#calories-screen .calorie-targets > div:nth-child(2) { border-left-color: #cf8094; }
#calories-screen .calorie-targets > div:nth-child(3) { border-left-color: #669dc9; }
#calories-screen dt { font-size: 13px; color: var(--muted); }
#calories-screen dd { margin: 5px 0; font-size: 28px; font-weight: 700; }
#calories-screen small { font-size: 12px; color: var(--muted); font-weight: 400; }
#calories-screen .calorie-method { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
#calories-screen summary { cursor: pointer; font-size: 14px; }
#calories-screen a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#calories-screen .food-library { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 28px; }
#calories-screen .food-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 16px; }
#calories-screen .food-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-height: 720px; overflow-y: auto; padding: 3px; }
#calories-screen .food-item { padding: 18px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; min-width: 0; }
#calories-screen .food-item h3 { font-size: 15px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
#calories-screen .food-item dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
#calories-screen .food-item dd { font-size: 20px; overflow-wrap: anywhere; }
#calories-screen .food-item a { font-size: 12px; }
#calories-screen #foodMore { margin: 18px 0; }
#calories-screen .food-source { max-width: 850px; }
@media(max-width:1100px) { #calories-screen .calorie-layout { grid-template-columns: 1fr; } #calories-screen .food-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:599px) { #calories-screen { padding: 12px 4px; } #calories-screen h1 { font-size: 24px; } #calories-screen .food-list { grid-template-columns: 1fr; } #calories-screen .food-tools { grid-template-columns: repeat(2,minmax(0,1fr)); } #calories-screen .food-search { grid-column: 1/-1; } #calories-screen .calorie-fields { grid-template-columns: 1fr; } }