/* Impulso: the selected orange and black visual direction. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;1,700;1,800&display=swap');

:root {
  color-scheme: dark;
  --accent: #ff7029;
  --green: var(--accent);
  --paper: #101213;
  --muted: #a4a8ab;
  --line: #2c3033;
  --surface: #191c1e;
  color: #f6f6f7;
  background: #090a0b;
}
body { background: #090a0b; }
.app { background: var(--paper); }
header { height: 82px; }
.brand, h1, h2, .calories > span:first-child, .calculation strong {
  font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  font-weight: 800;
  font-style: italic;
}
.brand { color: var(--accent); font-size: 34px; letter-spacing: -.5px; text-transform: uppercase; }
.brand span { color: var(--accent); font-size: 20px; margin-left: 8px; }
.avatar { border-color: var(--line); background: var(--surface); color: var(--accent); border-radius: 12px; }
.intro { padding: 12px 0 16px; }
.intro .eyebrow { color: var(--accent); }
h1 { font-size: 40px; letter-spacing: -.5px; margin: 8px 0; }
h2 { text-transform: uppercase; font-size: 28px; letter-spacing: .2px; }
.intro p { color: var(--muted); font-size: 12px; }
.datebar { padding-bottom: 18px; }
.arrow { border-radius: 10px; background: var(--surface); min-width: 44px; height: 44px; }
.date-label:focus-within { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.summary { background: linear-gradient(135deg, #1c1f21, #141617); color: #f6f6f7; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.summary-top { color: #bfc2c4; }
.live-dot { color: var(--muted); }
.live-dot:before { background: var(--accent); }
.calories { flex-wrap: wrap; margin: 12px 0 19px; }
.calories > span:first-child { font-size: clamp(50px, 16vw, 76px); letter-spacing: -1px; overflow-wrap: anywhere; max-width: 100%; }
.calories > span:last-child { font-size: 22px; font-style: italic; font-weight: 700; color: #bfc2c4; }
.progress { height: 12px; background: #2b2e30; border-radius: 5px; }
#progressFill { background: repeating-linear-gradient(110deg, transparent 0 22px, #10121380 22px 25px), linear-gradient(90deg, #ff9b43, #ff7029); border-radius: 5px; }
.summary-bottom, .summary-foot { color: #bfc2c4; font-size: 12px; flex-wrap: wrap; }
.summary-bottom button { color: #ff995f; min-height: 44px; }
.summary-foot { border-color: var(--line); margin-top: 8px; }
#remaining { color: #f6f6f7; font-weight: 600; }
.section-heading { margin: 26px 0 16px; }
.tag { color: #c6c8ca; background: #24282a; border: 1px solid var(--line); border-radius: 6px; }
.meal-card { background: var(--surface); border-radius: 12px; margin-bottom: 10px; }
.meal-heading { padding: 14px 12px; gap: 10px; }
.meal-heading h3 { font-family: 'DM Sans', sans-serif; font-size: 14px; }
.meal-heading p { font-size: 11px; }
.meal-icon { color: var(--accent); background: transparent; border-radius: 0; width: 30px; height: 35px; }
.meal-icon svg { width: 28px; height: 28px; }
.meal-heading .meal-total { font-size: 13px; }
.meal-add { color: var(--accent); border-color: #b84a17; background: transparent; width: 44px; height: 44px; border-radius: 9px; font-size: 25px; }
.entry { border-color: var(--line); }
.entry-edit { min-height: 44px; }
.entry-name { font-size: 13px; }
.entry-detail { font-size: 11px; }
.delete-entry { color: #c2c5c7; width: 44px; height: 44px; }
.gentle-note { color: var(--accent); }
.gentle-note p, .gentle-note strong { color: var(--muted); }
.add-main, .primary { background: var(--accent); color: #17100b; border-radius: 11px; font-size: 15px; font-weight: 700; }
.add-main { box-shadow: 0 0 0 8px var(--paper), 0 -12px 24px #101213cc; }
nav { background: #101213f5; }
nav button { color: #a4a8ab; min-height: 48px; }
nav button.active { color: var(--accent); }
nav svg { width: 23px; height: 23px; display: block; }
dialog { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 100px #0009; }
dialog::backdrop { background: #000a; }
.dialog-heading { gap: 12px; }
.dialog-heading h2 { font-size: 32px; }
input, select { background: #191c1e; border-color: #3d4246; border-radius: 9px; color: #f6f6f7; }
input::placeholder { color: #9b9fa2; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline-color: var(--accent); }
.calculation { background: #191b1c; border: 1px solid #a3471c; border-radius: 10px; flex-wrap: wrap; gap: 10px; }
.calculation > span { color: #c3c6c8; }
.calculation strong { font-size: 36px; color: var(--accent); }
.secondary, .import-label { background: #25292c; color: #f4f4f5; border: 1px solid #3d4246; border-radius: 10px; }
.text-button { color: #ff995f; min-height: 44px; }
.settings-card { background: var(--surface); border-radius: 12px; }
.future { background: #1f1a16; }
.future .eyebrow { color: #ff995f; }
.history-row { background: var(--surface); border-radius: 10px; gap: 12px; }
.history-row:first-child { border-color: #9e461f; background: #241b16; }
.history-row strong { font-size: 14px; }
.history-row > strong { text-align: right; }
.empty { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
#toast { background: #303437; border: 1px solid #626970; color: white; }
@media (hover: hover) {
  .meal-add:hover, .arrow:hover { background: #39241a; border-color: var(--accent); }
  .add-main:hover, .primary:hover { background: #ff8b4f; }
  .history-row:hover { border-color: var(--accent); }
}
@media (min-width: 600px) { .app { box-shadow: 0 0 80px #0006; border-inline: 1px solid #202426; } }
@media (max-width: 360px) {
  h1 { font-size: 36px; }
  .meal-heading { gap: 7px; padding-inline: 10px; }
  .meal-heading .meal-total { font-size: 11px; }
  .meal-icon { width: 24px; }
  .meal-icon svg { width: 24px; }
}
@media (prefers-reduced-motion: reduce) { #progressFill { transition: none; } }