/* Calories Tracker · "Holographic glass" theme (v3.2)
   Midnight aurora background, frosted-glass panels, a glowing gradient ring.
   Follows the phone's light/dark setting. Everything is local: no web fonts, no images. */

:root {
  /* dark (default) */
  --bg: #070b16;
  --bg-2: #0b1124;
  --surface: rgba(255, 255, 255, .055);
  --surface-2: rgba(255, 255, 255, .09);
  --solid: #111830;                 /* dialogs and anything that must not be see-through */
  --ink: #eef2ff;
  --muted: #9aa5c6;
  --line: rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .2);
  --hi: rgba(255, 255, 255, .16);   /* top-edge highlight on glass */
  --accent: #2ff3d0;
  --accent-2: #4aa8ff;
  --accent-3: #a87bff;
  --accent-ink: #04121a;
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  --ring-a: #2ff3d0; --ring-b: #4aa8ff; --ring-c: #a87bff;
  --glow: 0 0 22px rgba(47, 243, 208, .35), 0 0 60px rgba(74, 168, 255, .18);
  --warn: #ffb057;
  --over-b: #ff5fa2;
  --warn-bg: rgba(255, 176, 87, .12);
  --err: #ff7b8a;
  --protein: #ff6fa8;
  --carbs: #ffd166;
  --fat: #5ad1ff;
  --aurora-1: rgba(47, 243, 208, .30);
  --aurora-2: rgba(120, 90, 255, .38);
  --aurora-3: rgba(74, 168, 255, .26);
  --grid: rgba(140, 170, 255, .055);
  --shadow: 0 10px 40px rgba(0, 0, 0, .45);
  --radius: 20px;
  --font: "SF Pro Display", "Segoe UI Variable Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: "SF Pro Rounded", ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #eef1fb;
    --bg-2: #e4e8f8;
    --surface: rgba(255, 255, 255, .62);
    --surface-2: rgba(255, 255, 255, .85);
    --solid: #f8f9ff;
    --ink: #0d1330;
    --muted: #5a6386;
    --line: rgba(20, 30, 80, .1);
    --line-strong: rgba(20, 30, 80, .2);
    --hi: rgba(255, 255, 255, .9);
    --accent: #00a88f;
    --accent-2: #2f7bff;
    --accent-3: #7a4dff;
    --accent-ink: #ffffff;
    --ring-a: #00c9a7; --ring-b: #2f7bff; --ring-c: #7a4dff;
    --glow: 0 6px 22px rgba(47, 123, 255, .25);
    --warn: #e07a00;
    --over-b: #e0367c;
    --warn-bg: rgba(224, 122, 0, .1);
    --err: #d02c45;
    --protein: #e0437f;
    --carbs: #d79a00;
    --fat: #1f8fe0;
    --aurora-1: rgba(0, 201, 167, .22);
    --aurora-2: rgba(122, 77, 255, .2);
    --aurora-3: rgba(47, 123, 255, .18);
    --grid: rgba(40, 60, 140, .05);
    --shadow: 0 10px 34px rgba(30, 40, 110, .12);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; min-height: 100%;
  background: radial-gradient(1200px 800px at 50% -10%, var(--bg-2), var(--bg) 60%) fixed, var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.45 var(--font);
  background: transparent; -webkit-font-smoothing: antialiased;
}
/* Aurora: three soft colour clouds drifting behind everything. */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 22%, var(--aurora-1), transparent 70%),
    radial-gradient(42vmax 34vmax at 85% 18%, var(--aurora-2), transparent 70%),
    radial-gradient(40vmax 32vmax at 60% 92%, var(--aurora-3), transparent 70%);
  filter: blur(30px);
  animation: aurora 28s ease-in-out infinite alternate;
}
/* Fine holographic grid that fades out towards the bottom. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg); }
  100% { transform: translate3d(-3vmax, 2vmax, 0) rotate(-6deg); }
}

#app { max-width: 560px; margin: 0 auto; padding: 16px 16px 96px; padding-top: max(16px, env(safe-area-inset-top)); }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.35rem; font-weight: 700; }
h2 { font-size: 1.05rem; font-weight: 650; }
p { margin: 0; }
b { font-weight: 700; }
.muted { color: var(--muted); font-size: .9rem; }

/* ───────────── glass panels ───────────── */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 38%);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-top: 14px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  animation: rise .38s cubic-bezier(.2, .8, .2, 1) both;
}
#app > .card:nth-of-type(2) { animation-delay: .04s; }
#app > .card:nth-of-type(3) { animation-delay: .08s; }
#app > .card:nth-of-type(4) { animation-delay: .12s; }
#app > .card:nth-of-type(5) { animation-delay: .16s; }
#app > .card:nth-of-type(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.stack > * + * { margin-top: 12px; }
label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 6px; color: var(--muted); letter-spacing: .01em; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; padding: 11px 14px; min-height: 46px;
  border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--solid); color: var(--ink); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
textarea { resize: vertical; min-height: 88px; }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--accent-2) 70%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 40%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.6); }
@media (prefers-color-scheme: light) { input[type="date"]::-webkit-calendar-picker-indicator { filter: none; } }

/* ───────────── buttons ───────────── */
button {
  cursor: pointer; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 var(--hi);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line-strong)); }
button:active:not(:disabled) { transform: scale(.97); }
button.primary {
  border: 0; color: var(--accent-ink); font-weight: 700; letter-spacing: .01em;
  background: var(--grad); background-size: 160% 100%; background-position: 0 0;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
button.primary:hover:not(:disabled) { background-position: 100% 0; }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
button.ghost:hover:not(:disabled) { color: var(--ink); background: var(--surface); }
button.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
button:disabled { opacity: .45; cursor: not-allowed; }
[data-add] { color: var(--accent); font-weight: 650; padding: 8px 14px; min-height: 40px;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar h1 { text-align: center; flex: 1; font-size: 1.15rem; letter-spacing: .02em; }
.icon { width: 44px; padding: 0; font-size: 1.2rem; display: inline-grid; place-items: center; }
#settings { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.msg { padding: 11px 14px; border-radius: 14px; margin-top: 12px; font-size: .92rem; border: 1px solid transparent; }
.msg.err { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.msg.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.msg.ok { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
#preview:not(.warn):not(.err) { background: color-mix(in srgb, var(--accent-2) 10%, transparent); border-color: color-mix(in srgb, var(--accent-2) 28%, transparent); }
.greet { margin: 12px 2px 0; font-size: 1.1rem; color: var(--muted); }
.greet b { color: var(--ink); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ───────────── segmented tabs ───────────── */
.tabs { display: flex; gap: 4px; margin: 12px 0; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 50%, transparent); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabs button { flex: 1; border: 0; background: transparent; box-shadow: none; color: var(--muted); font-weight: 600; min-height: 40px; }
.tabs button[aria-selected="true"] { color: var(--accent-ink); background: var(--grad); box-shadow: var(--glow); }
.viewtabs { margin: 14px 0 0; }

/* ───────────── today's summary + ring ───────────── */
.summary { display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center; }
.ring { position: relative; width: 148px; height: 148px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { stroke: color-mix(in srgb, var(--ink) 9%, transparent); }
.ring-ticks { stroke: color-mix(in srgb, var(--ink) 18%, transparent); }
.ring-prog { stroke: url(#ringOk); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ring-b) 70%, transparent)); animation: ringIn 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.ring-prog.over { stroke: url(#ringOver); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--over-b) 70%, transparent)); }
@keyframes ringIn { from { stroke-dashoffset: var(--c); } }
.ring::before { content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ring-b) 22%, transparent), transparent 70%); filter: blur(6px); }
.ring .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .num b { font: 800 2rem/1 var(--num); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ring .num .muted { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.eaten { margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-3); border: 1px solid color-mix(in srgb, var(--accent-3) 50%, transparent); background: color-mix(in srgb, var(--accent-3) 12%, transparent); vertical-align: 1px; }
.macro + .macro { margin-top: 10px; }
.macro .top { display: flex; justify-content: space-between; font-size: .82rem; font-variant-numeric: tabular-nums; }
.macro .top span:first-child { font-weight: 600; }
.macro .track { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; margin-top: 5px; }
.macro .fill { height: 100%; border-radius: 99px; box-shadow: 0 0 12px currentColor; transform-origin: left; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes grow { from { transform: scaleX(0); } }

/* ───────────── meals ───────────── */
.meal .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meal .head .muted { font-variant-numeric: tabular-nums; }
.entry { display: flex; justify-content: space-between; gap: 10px; text-align: left;
  border: 0; border-radius: 12px; box-shadow: none;
  background: linear-gradient(var(--line), var(--line)) 8px 0 / calc(100% - 16px) 1px no-repeat;
  padding: 12px 8px; margin: 0 -8px; width: calc(100% + 16px); }
.entry:hover:not(:disabled) { background: linear-gradient(color-mix(in srgb, var(--accent-2) 9%, transparent), color-mix(in srgb, var(--accent-2) 9%, transparent)); }
.meal .entry:last-child { margin-bottom: -6px; }
.entry:active:not(:disabled) { transform: none; }
.entry:first-of-type { margin-top: 8px; }
.entry .name { overflow-wrap: anywhere; }
.entry .kc { white-space: nowrap; font: 700 1rem var(--num); font-variant-numeric: tabular-nums; color: var(--ink); }
.unsure { color: var(--warn); font-weight: 600; font-size: .85rem; }
.weightrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.weightrow b { font: 700 1.15rem var(--num); }

/* ───────────── dialogs ───────────── */
dialog { border: 1px solid var(--line-strong); border-radius: 24px; padding: 0; width: min(560px, calc(100vw - 20px)); max-height: 92vh;
  background: color-mix(in srgb, var(--solid) 88%, transparent); color: var(--ink);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), inset 0 1px 0 var(--hi);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
dialog[open] { animation: pop .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
dialog::backdrop { background: rgba(3, 6, 18, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg-body { padding: 20px; max-height: 92vh; overflow: auto; }
.row { border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-top: 10px; background: var(--surface); }
.row.needs { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.row .line { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.row .line input { max-width: 110px; }
.row .kcal { margin-left: auto; font: 700 1rem var(--num); font-variant-numeric: tabular-nums; }
.thumb { width: 100%; max-height: 220px; object-fit: cover; border-radius: 16px; margin-top: 10px; border: 1px solid var(--line); }
.spin { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: s .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes s { to { transform: rotate(360deg); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* custom daily target */
.withunit { display: flex; align-items: center; gap: 10px; }
.withunit input { max-width: 200px; }
.withunit span { color: var(--muted); font-weight: 600; }
.customtarget .muted { margin-top: 6px; font-size: .82rem; }

/* ───────────── week / month progress ───────────── */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.tiles .tile { margin-top: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.tile b { font: 800 1.6rem/1.15 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tile b small { font-size: .9rem; color: var(--muted); font-weight: 600; }
.tiles .tile:first-child b { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nowrap { white-space: nowrap; }
.chart { margin-top: 10px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .baseline { stroke: var(--line-strong); stroke-width: 1; }
.chart .goal { stroke: var(--accent-3); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .9; }
.chart .ax { fill: var(--muted); font-size: 11px; }
.chart .v { fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart .na { fill: var(--muted); font-size: 16px; }
.chart .b-on { fill: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 60%, transparent)); }
.chart .b-over { fill: var(--warn); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--warn) 60%, transparent)); }
.chart .b-under { fill: var(--accent-2); opacity: .75; }
.chart .wline { fill: none; stroke: var(--fat); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--fat)); }
.chart .wdot { fill: var(--fat); stroke: var(--bg); stroke-width: 2; }
.legend { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .82rem; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-left: 6px; vertical-align: -1px; }
.key:first-child { margin-left: 0; }
.key.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.key.over { background: var(--warn) repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, .35) 3px 5px); }
.key.under { background: var(--accent-2); opacity: .75; }
.key.goalkey { height: 0; border-radius: 0; border-top: 2px dashed var(--accent-3); width: 16px; vertical-align: 3px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.cal .ch { font-size: .72rem; color: var(--muted); text-align: center; padding-bottom: 2px; text-transform: uppercase; letter-spacing: .08em; }
.cal .cd { min-height: 56px; padding: 5px 2px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; font-size: .78rem;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 40%, transparent); box-shadow: none; }
.cal .cd .dn { font-weight: 700; }
.cal .cd .kc { font-variant-numeric: tabular-nums; font-size: .7rem; white-space: nowrap; letter-spacing: -.02em; }
.cal .cd .sym { font-size: .65rem; font-weight: 400; }
.cal .cd.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent); }
.cal .cd.over { background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.cal .cd.under { background: color-mix(in srgb, var(--accent-2) 10%, transparent); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); }
.cal .cd.today { outline: 2px solid var(--accent-3); outline-offset: -2px; }
.cal .cd:disabled { opacity: .35; }
@media (max-width: 380px) {
  .cal .cd .kc { font-size: .6rem; }
  .summary { grid-template-columns: 124px 1fr; gap: 14px; }
  .ring { width: 124px; height: 124px; }
  .ring .num b { font-size: 1.65rem; }
}

/* ───────────── settings + sign-in ───────────── */
.group { border-top: 1px solid var(--line); padding-top: 14px; }
.group h3 { font-size: .8rem; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.group button { width: 100%; }
#syncline { font-size: .82rem; margin-top: -4px; }
.welcome h1 { font-size: 1.6rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.welcome p { margin-top: 6px; }
.when { margin-top: 10px; }
.when input { max-width: 200px; }
.when .muted { margin-top: 6px; }

/* ───────────── printable summary ───────────── */
.report h1 { font-size: 1.4rem; }
.report table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.report th, .report td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: right; }
.report th:first-child, .report td:first-child { text-align: left; }
.report th { font-size: .74rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.report td { white-space: nowrap; }
.report .kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.report .kv div { display: flex; flex-direction: column; }
.report .kv b { font: 700 1.15rem var(--num); }
.report .scroll-x { overflow-x: auto; }
.report .actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media print {
  @page { margin: 14mm; }
  :root { --ink: #000; --muted: #444; --line: #bbb; }
  html, body { background: #fff !important; color: #000; }
  body::before, body::after { display: none; }
  #app { max-width: none; padding: 0; }
  .no-print, dialog { display: none !important; }
  .card { animation: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .report .card { border: 0; padding: 0; margin-top: 16px; break-inside: avoid; }
  .report .muted { color: #444; }
  .report th, .report td { border-color: #bbb; }
  .tile b, .report h1 { -webkit-text-fill-color: #000; background: none; }
}

/* Calm motion for people who ask for it. */
@media (prefers-reduced-motion: reduce) {
  body::before, .card, .ring-prog, .macro .fill, dialog[open] { animation: none !important; }
  .spin { animation-duration: 2s; }
  button { transition: none; }
}
/* Browsers without backdrop blur get a more solid panel so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: var(--solid); }
  dialog { background: var(--solid); }
}

/* sign-in brand mark */
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.brand img { border-radius: 12px; box-shadow: var(--glow); }
.brand h1 { font-size: 1.6rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Asian foods list: source tag, "varies" warning and one-tap portions */
.srctag { margin-top: 8px; font-size: .78rem; color: var(--accent-3); font-weight: 600; letter-spacing: .01em; }
.srctag .varies { color: var(--warn); }
.portions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.portion { min-height: 34px; padding: 5px 12px; font-size: .84rem; font-weight: 600; }
.portion span { color: var(--muted); font-weight: 500; margin-left: 2px; }
.portion[aria-pressed="true"] { border-color: transparent; color: var(--accent-ink); background: var(--grad); box-shadow: var(--glow); }
.portion[aria-pressed="true"] span { color: inherit; opacity: .8; }


/* Your usual (one-tap re-add) */
.usual { margin-top: 12px; }
.usual .lbl { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.usual .chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.chipbtn { flex: 0 0 auto; min-height: 38px; padding: 6px 12px; font-size: .86rem; font-weight: 600; white-space: nowrap;
  border-color: color-mix(in srgb, var(--accent-3) 45%, var(--line)); }
.chipbtn span { color: var(--muted); font-weight: 500; margin-left: 2px; }
.chipbtn:hover:not(:disabled) { border-color: var(--accent-3); }

/* My foods */
.ownfood { margin-top: 10px; }
.linkbtn { border: 0; background: none; box-shadow: none; padding: 4px 0; min-height: 32px; color: var(--accent-2); font-weight: 600; font-size: .9rem; text-align: left; }
.linkbtn:hover:not(:disabled) { text-decoration: underline; background: none; }
.myfood .scan { border: 1px dashed color-mix(in srgb, var(--accent-2) 55%, var(--line)); border-radius: 16px; padding: 12px; text-align: center; }
.myfood .scanbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; margin: 0 0 6px;
  padding: 10px 16px; border-radius: 999px; color: var(--accent-ink); background: var(--grad); box-shadow: var(--glow); font-weight: 700; font-size: .95rem; }
.myfood .scan .muted { font-size: .8rem; }
.grid4f { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 420px) { .grid4f { grid-template-columns: 1fr 1fr; } }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.myfoods { margin-top: 12px; }
.mf { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.mf .mfa { display: flex; gap: 6px; flex: 0 0 auto; }
button.small { min-height: 36px; padding: 6px 12px; font-size: .85rem; }

/* ───────────── v3.7: water, reminders, nudges, insights, copy ───────────── */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 420px) { .grid3 { grid-template-columns: 1fr 1fr; } }
.waterrow .wtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.waterrow .wtop b { font: 700 1.05rem var(--num); }
.waterrow .wbtns { display: flex; gap: 6px; }
.track.water { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; margin-top: 10px; }
.track.water .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5ad1ff, #4aa8ff); box-shadow: 0 0 12px #5ad1ff; transition: width .4s ease; }
.msg.remind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  background: color-mix(in srgb, var(--accent-2) 12%, transparent); color: var(--ink); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); }
.msg.remind .rb { display: flex; gap: 6px; }
.nudge { display: flex; gap: 10px; align-items: flex-start; border-color: color-mix(in srgb, var(--accent-3) 45%, var(--line)); }
.nudge .nicon { font-size: 1.3rem; line-height: 1.2; }
.nudge p { flex: 1; font-size: .95rem; }
.insight ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.insight li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 35%, transparent); border: 1px solid var(--line); }
.insight li.good { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.insight li.tip { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.insight li > span:first-child { font-size: 1.1rem; }
.mealbtns { display: flex; gap: 6px; align-items: center; }
.sameas { display: block; width: 100%; margin-top: 10px; text-align: left; border-style: dashed; color: var(--accent-2); font-weight: 600; font-size: .9rem; border-radius: 14px; }
.switch { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; font-weight: 400; color: var(--ink); }
.switch input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; }
.switch .muted { font-size: .82rem; }
.ownmacros { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.ownmacros summary { cursor: pointer; font-weight: 600; }
.ownmacros[open] summary { margin-bottom: 8px; }
.ownmacros .muted { font-size: .82rem; margin-bottom: 8px; }
.estline { margin-top: 8px; font-size: .86rem; color: var(--accent-3); }
.phototip { font-size: .84rem; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* barcode */
.scanbox { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanbox .aim { position: absolute; left: 12%; right: 12%; top: 38%; height: 24%; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.35), var(--glow); }
.bcrow { display: flex; gap: 8px; }
.bcrow input { flex: 1; }

/* v3.8: My foods row in the Add dialog, and the "Pick from yesterday" checklist */
.usual.mine .lbl { color: var(--accent-2); }
.usual.mine .chips { flex-wrap: wrap; overflow: visible; }
.chipbtn.more { color: var(--muted); }
.chipbtn.addown { border-style: dashed; color: var(--accent-2); }
.picklist { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pickrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.pickrow input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent-2); margin: 0; }
.pickrow .name { flex: 1; min-width: 0; }
.pickrow .kc { font-weight: 700; font-variant-numeric: tabular-nums; }
.pickrow:has(input:not(:checked)) { opacity: .55; }
.pickrow:has(input:not(:checked)) .name { text-decoration: line-through; }

/* v3.9: English / Bahasa Malaysia switch (login screen and Settings) */
.langsw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.langsw > .muted { font-size: .85rem; margin-right: 2px; }
.langsw button { min-height: 36px; }

/* v3.9.1: water target reached */
.waterrow .wdone { color: var(--accent-2); font-weight: 700; }
.waterrow.met .track.water .fill { background: linear-gradient(90deg, #3ee6b0, #5ad1ff); box-shadow: 0 0 14px #3ee6b0; }