/* Sara Aahaar - the food diary in the patient app (2-3 Oct 2026). Glass on blue and orange.
 *
 * Dr. Ranadheer turned down four looks in one night - plain cards, a green hero, flat blue and
 * orange, a warm ivory - and said what he was after: "floating things, a little transparent...
 * the big plus icons don't feel like a premium app... surprise me... international standard".
 * Of the finished concepts he chose this one: frosted glass cards floating on a soft field of the
 * hospital's own two colours, light blue and orange; modern lettering with heavy numerals; food
 * shown as studio cut-out plates; small round glass buttons; and a white frosted pill of a bar
 * that floats above the bottom of the screen, its one orange "+" the only loud thing on it.
 *
 * While Aahaaram is open it owns the phone (body.aa-on): the patient app's own header, tab bar
 * and chat button step aside, and this screen brings its own bar - Today, Plan, +, Progress, Me.
 * Everything is scoped under .aa.
 *
 * The app's rules still hold: a 390px phone in daylight, body text 15px or more and nothing
 * under 12.5px (those are the small-caps labels), the phone's own fonts, no CDN. Colour is never
 * the only signal - the number is always written beside it. Glass is kept opaque enough (56%
 * white over a pale field) that ink text stays above 4.5:1.
 */
/* The app's lettering (static/font/README.md): Outfit, and Anek Telugu for Telugu. The Telugu face is
   set smaller - "letters should not be too big" in Telugu (3 Oct 2026) - so a Telugu line sits at the
   same visual size as the English beside it instead of crowding the card. */
@font-face { font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/app/font/outfit-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/app/font/outfit-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Anek Telugu"; font-style:normal; font-weight:100 800; font-display:swap; src:url(/app/font/anektelugu-telugu.woff2) format("woff2");
  size-adjust:86%; unicode-range:U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC; }

body.aa-on #top, body.aa-on #tabs, body.aa-on .pc-fab, body.aa-on .ptr { display:none !important; }
body.aa-on { background:#FFFFFF; }
body.aa-on main { padding-top:0; padding-bottom:0; }

.aa {
  --page:#FFFFFF; --ink:#141A24; --soft:#5B6474; --acc:var(--fl-o-dk); --acc-deep:var(--fl-o-dk); --clay:#D9482B;
  --blue:var(--fl-o);
  --grad:var(--fl-o);     /* the action colour: orange */
  --gold:var(--fl-o);
  --glass:#FFFFFF; --edge:#ECEEF2; --rail:#ECEEF2;
  --shadow: 0 1px 3px rgba(16,24,40,.06);
  --serif:inherit;
  color:var(--ink); margin:0 -16px; padding:calc(14px + env(safe-area-inset-top)) 20px calc(118px + env(safe-area-inset-bottom));
  min-height:100vh; font-variant-numeric:tabular-nums; position:relative;
  font-family:"Anek Telugu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Telugu", system-ui, sans-serif; line-height:1.45;
}
/* The colour field stays put while the page scrolls over it, so the glass always has light behind it. */
.aa::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:
    radial-gradient(64% 40% at 92% 4%, #FF9F5C 0%, rgba(255,159,92,0) 70%),
    radial-gradient(76% 46% at 2% 10%, #5E9FF2 0%, rgba(94,159,242,0) 70%),
    radial-gradient(74% 42% at 14% 82%, #86BBF7 0%, rgba(134,187,247,0) 70%),
    radial-gradient(64% 42% at 100% 74%, #FFB98A 0%, rgba(255,185,138,0) 70%), var(--page); }
.aa > * { position:relative; z-index:1; }
.aa > .aa-dock, .aa > .aa-basket { position:fixed; z-index:40; }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) { .aa { --glass:rgba(255,255,255,.86); } }
.aa button, .aa input, .aa select { font-family:inherit; }
.aa button { cursor:pointer; -webkit-tap-highlight-color:transparent; line-height:1.3; color:inherit; }
.aa button:active { transform:scale(.96); }
.aa button:focus-visible, .aa input:focus-visible, .aa select:focus-visible { outline:2.5px solid var(--fl-o); outline-offset:2px; }
.aa svg { flex:none; }
.aa .ic { width:21px; height:21px; }
.aa-glass { background:var(--glass); border:1px solid var(--edge); border-radius:26px; box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); }
.aa-num { font-family:var(--serif); font-weight:500; letter-spacing:-.02em; }
.aa-cap { display:block; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--acc);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.te .aa-cap { letter-spacing:.02em; }

/* ------------------------------------------------------------------ the top of every tab */
.aa-top { display:flex; align-items:center; gap:10px; }
.aa-top .t { flex:1; min-width:0; text-align:center; }
.aa-top .t b { display:block; font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:-.01em; }
.aa-top .t small { display:block; font-size:13px; font-weight:500; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aa-round { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0;
  background:var(--glass); border:1px solid var(--edge); box-shadow:0 6px 16px rgba(16,24,40,0.04);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.aa-round.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.aa-days { display:flex; gap:6px; margin-top:14px; padding:6px; border-radius:22px; }
.aa-days button { flex:1 1 0; min-width:0; border:0; border-radius:16px; padding:7px 0 6px; background:none; color:var(--soft);
  display:flex; flex-direction:column; align-items:center; gap:1px; min-height:54px; }
.aa-days button small { font-size:12.5px; font-weight:500; }
.aa-days button b { font-family:var(--serif); font-size:16px; font-weight:500; color:var(--ink); }
.aa-days button i { width:5px; height:5px; border-radius:50%; background:transparent; }
.aa-days button.has i { background:#F4691E; }
.aa-days button.on { background:var(--ink); color:#B7C2D6; }
.aa-days button.on b { color:#fff; }

/* ------------------------------------------------------------------ Today: the dial */
.aa-dial { margin-top:16px; padding:18px 16px 16px; }
.aa-dial .row { display:grid; grid-template-columns:1fr 156px 1fr; align-items:center; }
.aa-side { text-align:center; }
.aa-side b { display:block; font-family:var(--serif); font-size:24px; font-weight:500; }
.aa-side small { font-size:12.5px; font-weight:500; letter-spacing:.06em; color:var(--soft); text-transform:uppercase; }
.aa-ring { width:156px; height:156px; position:relative; }
.aa-ring svg { width:156px; height:156px; transform:rotate(-90deg); }
.aa-ring .aa-rt { stroke:var(--rail); }
.aa-ring .go { stroke:url(#aa-g); transition:stroke-dasharray .8s cubic-bezier(.2,.8,.2,1); }
.aa-ring.over .go { stroke:var(--clay); }
.aa-ring .in { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.aa-ring .in b { font-family:var(--serif); font-size:42px; font-weight:500; letter-spacing:-.03em; line-height:1; }
.aa-ring .in small { font-size:12.5px; font-weight:500; letter-spacing:.06em; color:var(--soft); margin-top:6px; text-transform:uppercase; }
.aa-macros { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:16px; }
.aa-macros small { display:flex; justify-content:space-between; gap:4px; font-size:12.5px; font-weight:500; color:var(--soft); }
.aa-macros small b { color:var(--ink); }
.aa-macros i { display:block; height:4px; border-radius:99px; background:var(--rail); margin-top:6px; overflow:hidden; }
.aa-macros i u { display:block; height:100%; border-radius:99px; }
.aa-say { margin:14px 0 0; padding:10px 13px; border-radius:16px; background:rgba(var(--fl-o-rgb),.08); font-size:14px; font-weight:500; color:var(--acc-deep); }
.aa-start { display:flex; align-items:center; gap:12px; margin-top:12px; padding:14px 14px 14px 16px; }
.aa-start b { display:block; font-family:var(--serif); font-size:17px; }
.aa-start span { display:block; font-size:14px; font-weight:500; color:var(--soft); }

/* ------------------------------------------------------------------ pictures: cut-out plates */
.aa-pic { flex:none; width:52px; height:52px; object-fit:contain; display:flex; align-items:center; justify-content:center; border-radius:50%; }
img.aa-pic { filter:drop-shadow(0 6px 8px rgba(16,24,40,0.13)); border-radius:0; }
span.aa-pic { background:radial-gradient(circle at 35% 30%, #FFFFFF 0%, #DCEBFB 100%); color:var(--acc); border:1px solid var(--edge);
  box-shadow:0 6px 12px rgba(16,24,40,0.05); }
span.aa-pic svg { width:48%; height:48%; }

/* ------------------------------------------------------------------ Today: meals */
.aa-meal { position:relative; margin-top:12px; padding:0; border-radius:24px; }
.aa-meal.sug { border-style:dashed; border-color:rgba(var(--fl-o-rgb),.35); }
.aa-meal-top { display:flex; align-items:center; gap:10px; min-height:74px; padding:10px 12px 10px 84px; position:relative; }
.aa-meal-top .plate { position:absolute; left:-8px; top:50%; width:88px; height:88px; transform:translateY(-50%); }
.aa-meal-top .plate .aa-pic { width:88px; height:88px; }
.aa-meal-top .plate span.aa-pic { width:64px; height:64px; margin:12px; }
.aa-meal-open { flex:1; min-width:0; border:0; background:none; text-align:left; padding:0; }
.aa-meal-open b { display:block; font-size:15.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aa-meal-open em { display:block; font-style:normal; font-size:13.5px; font-weight:500; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aa-kcal { text-align:right; flex:none; }
.aa-kcal b { display:block; font-family:var(--serif); font-size:17px; font-weight:500; }
.aa-kcal small { font-size:12.5px; font-weight:500; color:var(--soft); }
.aa-mini { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; flex:none;
  background:rgba(255,255,255,.82); border:1px solid var(--edge); color:var(--acc); box-shadow:0 4px 10px rgba(16,24,40,0.05); }
.aa-mini .ic { width:17px; height:17px; }
.aa-pill { height:34px; padding:0 15px; border:0; border-radius:999px; background:var(--grad); color:#fff !important; font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; box-shadow:0 6px 14px rgba(var(--fl-o-rgb),.3); flex:none; }
.aa-pill.quiet { background:rgba(255,255,255,.82); color:var(--acc) !important; border:1px solid var(--edge); box-shadow:0 4px 10px rgba(16,24,40,0.05); }
.aa-pill.wide { height:44px; width:100%; justify-content:center; font-size:14.5px; margin-top:12px; }
.aa-pill .ic { width:16px; height:16px; }
/* the diet card the doctor gave: one clear line under the top bar */
.aa-pill.aa-dietcard { height:52px; margin:12px 0 4px; padding:0 18px; justify-content:flex-start; gap:10px; font-size:15.5px; font-weight:700;
  background:#fff; color:var(--aa-ink, #141B2D) !important; border:1.5px solid rgba(226,87,15,.45); box-shadow:0 6px 16px rgba(226,87,15,.10); }
.aa-pill.aa-dietcard .ic { width:22px; height:22px; color:#E2570F; }
.aa-pill.aa-dietcard span { flex:1; text-align:left; }
.aa-pill.aa-dietcard::after { content:"›"; font-size:24px; line-height:1; color:#E2570F; }
.aa-items { list-style:none; margin:0; padding:2px 14px 6px; border-top:1px solid var(--rail); }
.aa-items li { border-top:1px solid var(--rail); }
.aa-items li:first-child { border-top:0; }
.aa-item { display:flex; align-items:center; gap:10px; width:100%; padding:8px 0; background:none; border:0; text-align:left; }
.aa-item .aa-pic { width:44px; height:44px; }
.aa-item .n { flex:1; min-width:0; font-size:15px; font-weight:500; }
.aa-item .n small { display:block; font-size:13.5px; font-weight:500; color:var(--soft); }
.aa-item .k { font-family:var(--serif); font-size:15px; font-weight:500; white-space:nowrap; }
.aa-edit { display:flex; align-items:center; gap:10px; padding:0 0 10px 54px; }
.aa-step { display:inline-flex; align-items:center; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid var(--edge); box-shadow:0 4px 10px rgba(16,24,40,0.05); flex:none; }
.aa-step button { font-size:18px; font-weight:500; width:40px; height:40px; border:0; background:none; color:var(--acc); }
.aa-step b { min-width:30px; text-align:center; font-family:var(--serif); font-size:16px; font-weight:500; }
.aa-link { font-size:14px; font-weight:600; color:var(--acc); background:none; border:0; padding:8px 4px; min-height:40px; }
.aa-link.danger { color:var(--clay); }
.aa-row-acts { display:flex; gap:8px; align-items:center; padding:0 12px 12px 84px; flex-wrap:wrap; }

/* ------------------------------------------------------------------ water and small rows */
.aa-water { position:relative; display:flex; align-items:center; gap:10px; min-height:74px; padding:10px 12px 10px 84px; margin-top:12px; border-radius:24px; }
/* the same big round picture the meals have, in the same place */
.aa-water .plate { position:absolute; left:-8px; top:50%; width:88px; height:88px; transform:translateY(-50%); filter:drop-shadow(0 9px 12px rgba(var(--fl-o-rgb),.34)); }
.aa-water .plate svg { display:block; width:100%; height:100%; }
.aa-water .t { flex:1; min-width:0; }
.aa-water .t b { display:block; font-size:15.5px; font-weight:600; white-space:nowrap; }
.aa-water .t small { font-size:13px; font-weight:500; color:var(--soft); margin-left:4px; }
.aa-drops { display:flex; gap:4px; margin-top:6px; }
.aa-drops i { width:9px; height:16px; border-radius:5px; background:var(--rail); }
.aa-drops i.on { background:#5EA6F4; }      /* water keeps its blue */
.aa-blue { color:#3E8CE6; }
.aa-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:22px 2px 2px; }
.aa-h h2 { margin:0; font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:-.01em; }
.aa-h span { font-size:13px; font-weight:500; color:var(--soft); }
.aa-card { padding:16px; margin-top:12px; }
.aa-empty { text-align:center; padding:26px 16px; color:var(--soft); font-size:15px; font-weight:500; }
.aa-hint { font-size:13.5px; font-weight:500; color:var(--soft); margin:12px 2px 0; }
.aa-chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.aa-chip { display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:500;
  background:rgba(255,164,92,.22); color:#7A3A0C; }

/* ------------------------------------------------------------------ Plan */
.aa-guide { padding:16px; margin-top:16px; }
.aa-guide h3 { margin:6px 0 0; font-family:var(--serif); font-size:20px; font-weight:500; line-height:1.25; }
.aa-guide ul { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.aa-guide li { display:flex; gap:10px; font-size:15px; font-weight:500; line-height:1.45; }
.aa-guide li .ic { width:18px; height:18px; padding:3px; border-radius:50%; background:rgba(var(--fl-o-rgb),.12); color:var(--acc); margin-top:2px; }
.aa-plate { position:relative; padding:14px; margin-top:12px; }
.aa-plate h3 { margin:4px 0 0; font-family:var(--serif); font-size:19px; font-weight:500; }
.aa-plate h3 small { font-family:inherit; font-size:14px; font-weight:500; color:var(--soft); margin-left:6px; }
.aa-plate ul { list-style:none; margin:8px 0 0; padding:0; }
.aa-plate li { display:flex; align-items:center; gap:12px; padding:7px 0; border-top:1px solid var(--rail); }
.aa-plate li .aa-pic { width:46px; height:46px; }
.aa-plate li > span:not(.aa-pic) { flex:1; min-width:0; }
.aa-plate li b { display:block; font-size:15px; font-weight:500; line-height:1.25; }
.aa-plate li span small { display:block; font-size:13px; font-weight:500; color:var(--soft); }
.aa-plate li i { flex:none; font-style:normal; font-size:15px; font-weight:600; white-space:nowrap; }
.aa-plate li i small { font-size:12px; font-weight:500; color:var(--soft); margin-left:3px; }
.aa-plate .acts { display:flex; gap:8px; margin-top:12px; }
.aa-done { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:14.5px; font-weight:600; color:var(--acc); }
.aa-mark { display:inline-block; font-style:normal; font-size:12.5px; font-weight:600; padding:2px 9px; border-radius:999px; margin-top:4px; }
.aa-mark.good { background:rgba(var(--fl-o-rgb),.12); color:var(--acc-deep); }
.aa-mark.limit { background:rgba(255,164,92,.24); color:#7A3A0C; }
.aa-mark.avoid { background:rgba(217,72,43,.14); color:#8E2A14; }

/* ------------------------------------------------------------------ Progress */
.aa-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:16px; }
.aa-stat { padding:13px 8px; text-align:center; border-radius:22px; }
.aa-stat b { display:block; font-family:var(--serif); font-size:24px; font-weight:500; }
.aa-stat small { display:block; font-size:12.5px; font-weight:500; color:var(--soft); }
.aa-week { display:flex; align-items:flex-end; gap:10px; height:128px; margin-top:6px; position:relative; }
.aa-week .d { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; }
.aa-week .d i { display:block; width:100%; max-width:22px; border-radius:99px; background:#B9D4F4; min-height:5px; }
.aa-week .d.ok i { background:var(--blue); }
.aa-week .d.over i { background:var(--grad); }
.aa-week .d.none i { background:var(--rail); }
.aa-week .d small { font-size:12.5px; font-weight:500; color:var(--soft); }
.aa-week .d.today small { color:var(--ink); font-weight:600; }
.aa-week .goal { position:absolute; left:0; right:0; border-top:1.5px dashed rgba(12,21,38,.35); }
.aa-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:13px; font-weight:500; color:var(--soft); }
.aa-legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; }
.aa-spark { width:100%; height:76px; display:block; margin-top:6px; }
.aa-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:12px; }
.aa-tile { padding:12px; border-radius:22px; text-align:left; width:100%; }
.aa-tile.on { border-color:var(--acc); }
.aa-tile .ic { color:var(--acc); }
.aa-tile b { display:block; font-family:var(--serif); font-size:21px; font-weight:500; margin-top:8px; }
.aa-tile b small { font-family:inherit; font-size:12.5px; font-weight:500; color:var(--soft); }
.aa-tile span { display:block; font-size:13px; font-weight:500; color:var(--soft); }
.aa-form label { display:block; font-size:13.5px; font-weight:600; color:var(--soft); margin:0 0 5px; }
.aa-form .two { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.aa input, .aa select { font:inherit; font-size:16px; font-weight:500; width:100%; border:1px solid rgba(12,21,38,.16); border-radius:16px; padding:11px 14px;
  background:rgba(255,255,255,.82); color:var(--ink); min-height:48px; margin:0; }
.aa input:focus, .aa select:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(var(--fl-o-rgb),.16); outline:none; }
.aa-moves { list-style:none; margin:10px 0 0; padding:0; }
.aa-moves li { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--rail); font-size:15px; font-weight:500; }
.aa-moves li span { flex:1; min-width:0; }
.aa-moves li small { display:block; font-size:13.5px; font-weight:500; color:var(--soft); }

/* ------------------------------------------------------------------ Me */
.aa-me { display:flex; align-items:center; gap:14px; padding:16px; margin-top:16px; }
.aa-me .aa-avatar { width:60px; height:60px; }
.aa-me b { display:block; font-family:var(--serif); font-size:20px; font-weight:500; }
.aa-me span { display:block; font-size:14px; font-weight:500; color:var(--soft); }
.aa-rows { list-style:none; margin:0; padding:0; }
.aa-rows li { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--rail); font-size:15px; font-weight:500; color:var(--soft); }
.aa-rows li:first-child { border-top:0; padding-top:0; }
.aa-rows li b { color:var(--ink); font-weight:600; text-align:right; }
.aa-src { font-size:13px; font-weight:500; color:var(--soft); margin:16px 2px 0; }

/* ------------------------------------------------------------------ the floating bar */
.aa-dock { position:fixed; z-index:40; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:2px;
  padding:7px; border-radius:999px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 20px 44px rgba(16,24,40,0.10);
  backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%); }
.aa-dock button { width:52px; height:48px; border:0; border-radius:999px; background:none; color:#4F5C78 !important; display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:13.5px; font-weight:600; padding:0; white-space:nowrap; }
.aa-dock button.on { width:auto; padding:0 16px; background:#0C1526; color:#fff !important; }
.aa-dock button.add { width:48px; background:var(--gold); color:#fff !important; margin:0 4px; box-shadow:0 8px 18px rgba(238,90,14,0.14); }
.aa-dock button.add .ic { stroke-width:2.3; }

/* ------------------------------------------------------------------ choosing what was eaten */
.aa-find { position:relative; margin-top:14px; }
.aa-find svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--soft); }
.aa .aa-find input { padding-left:46px; border-radius:999px; min-height:50px; background:var(--glass); border:1px solid var(--edge); box-shadow:0 8px 20px rgba(16,24,40,0.04); }
.aa-cats { display:flex; gap:8px; overflow-x:auto; padding:14px 20px 2px; margin:0 -20px; scrollbar-width:none; }
.aa-cats::-webkit-scrollbar { display:none; }
.aa-cats button { flex:none; border:1px solid var(--edge); background:var(--glass); border-radius:999px; padding:0 15px; min-height:40px; font-size:14px; font-weight:500; white-space:nowrap; }
.aa-cats button.on { background:var(--ink); border-color:var(--ink); color:#fff !important; }
.aa-sub { font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin:18px 2px 8px; }
.aa-foods { list-style:none; margin:0; padding:0; }
.aa-foods li { display:flex; align-items:center; gap:12px; padding:9px 12px 9px 9px; margin-bottom:8px; border-radius:22px;
  background:var(--glass); border:1px solid var(--edge); box-shadow:0 6px 16px rgba(16,24,40,0.03); }
.aa-foods li.in { border-color:rgba(238,90,14,0.18); background:rgba(255,244,235,.9); }
.aa-foods .aa-pic { width:58px; height:58px; }
.aa-foods .n { flex:1; min-width:0; font-size:15.5px; font-weight:600; line-height:1.3; }
.aa-foods .n small { display:block; font-size:13.5px; font-weight:500; color:var(--soft); }
.aa-foods .n small b { font-family:var(--serif); color:var(--ink); font-weight:500; }
.aa-camcard { display:flex; align-items:center; gap:12px; width:100%; text-align:left; margin-top:14px; padding:12px 14px; border-radius:22px; }
.aa-camcard .ic { width:40px; height:40px; padding:10px; border-radius:50%; background:var(--blue); color:#fff; }
.aa-camcard b { display:block; font-size:15.5px; font-weight:600; }
.aa-camcard span span { display:block; font-size:13.5px; font-weight:500; color:var(--soft); }
.aa-note { margin:12px 0 0; padding:11px 13px; border-radius:16px; font-size:14px; font-weight:500; background:rgba(255,164,92,.2); color:#7A3A0C; }
.aa-basket { position:fixed; z-index:40; left:16px; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); max-width:528px; margin:0 auto;
  display:flex; align-items:center; gap:12px; color:#fff; border-radius:999px; padding:8px 8px 8px 20px;
  background:rgba(12,21,38,.92); box-shadow:0 20px 44px rgba(12,21,38,.34); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.aa-basket span { flex:1; min-width:0; font-size:15px; font-weight:600; }
.aa-basket span small { display:block; font-size:12.5px; font-weight:500; color:#B7C2D6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aa-basket button { height:44px; padding:0 22px; border:0; border-radius:999px; background:var(--gold); color:#fff !important; font-size:14.5px; font-weight:600; }

/* ------------------------------------------------------------------ about me */
.aa-q { font-size:15px; font-weight:600; margin:18px 0 8px; }
.aa-pick { display:grid; grid-template-columns:repeat(auto-fit, minmax(98px, 1fr)); gap:8px; }
.aa-pick button { font-size:14px; font-weight:600; min-height:52px; padding:8px 10px; border-radius:18px; border:1px solid var(--edge); background:rgba(255,255,255,.82); }
.aa-pick button small { display:block; font-size:12.5px; font-weight:500; color:var(--soft); }
/* what is chosen is orange, like every lit thing in the app - not black (his word, 5 Oct 2026) */
.aa-pick button.on { background:#E2570F; border-color:#E2570F; color:#fff !important; box-shadow:0 6px 14px rgba(226,87,15,.22); }
.aa-pick button.on small { color:rgba(255,255,255,.88); }
.aa-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.aa-two label { font-size:13.5px; font-weight:600; color:var(--soft); }
.aa-two label input { margin-top:5px; }

/* ------------------------------------------------------------------ the card on the patient app's Home tab */
.aa-home { position:relative; display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; font:inherit; color:#0C1526; text-align:left; cursor:pointer;
  border-radius:24px; margin:0 0 12px; border:1px solid rgba(255,255,255,.9); box-shadow:0 18px 40px rgba(16,24,40,0.09);
  background:radial-gradient(70% 160% at 100% 0%, #FFD9BC 0%, rgba(255,217,188,0) 70%), radial-gradient(70% 160% at 0% 100%, #CFE6FF 0%, rgba(207,230,255,0) 70%), #F7FAFE; }
.aa-home .mark { flex:none; width:50px; height:50px; border-radius:50%; background:var(--fl-o); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.aa-home .mark svg { width:25px; height:25px; }
.aa-home .w { flex:1; min-width:0; }
.aa-home .w b { display:block; font-size:17.5px; font-weight:600; letter-spacing:-.02em; }
.aa-home .w span { display:block; font-size:14px; font-weight:500; color:#4F5C78; }
.aa-home .go { font-size:22px; color:var(--fl-o-dk); }
.aa-avatar { border-radius:50%; overflow:hidden; border:2px solid #fff; box-shadow:0 8px 18px rgba(16,24,40,0.09); flex:none; background:#FBE3CB; }
.aa-avatar svg { display:block; width:100%; height:100%; }
/* modern lettering: the numerals are heavy and tight, not serif */
.aa-num, .aa-top .t b, .aa-side b, .aa-ring .in b, .aa-kcal b, .aa-item .k, .aa-step b, .aa-h h2, .aa-guide h3, .aa-plate h3, .aa-stat b, .aa-tile b,
.aa-me b, .aa-days button b, .aa-start b, .aa-foods .n small b { font-weight:600; letter-spacing:-.03em; }
.aa-ring .in b { letter-spacing:-.045em; }
.aa-pill.quiet { background:rgba(255,255,255,.82); }
@media (prefers-reduced-motion: reduce) { .aa-ring .go { transition:none; } .aa button:active { transform:none; } }

/* ------------------------------------------------------------------ the bar: every tab can be read (3 Oct 2026)
   as in the hospital app's own bar (patient_app_glass.css): a dark bold icon with its name under it. */
.aa-dock button:not(.add) { width:auto; min-width:56px; padding:0 5px; flex-direction:column; gap:2px; color:#0C1526 !important; }
.aa-dock button:not(.add) .ic { stroke-width:2.1; }
.aa-dock button span { font-size:10.5px; font-weight:600; line-height:1.1; white-space:nowrap; }
.aa-dock button.on:not(.add) { flex-direction:row; gap:8px; padding:0 16px; color:#fff !important; }
.aa-dock button.on span { font-size:13.5px; }

/* ------------------------------------------------------------------ not switched on yet: how to begin (3 Oct 2026) */
.aa-invite { margin-top:18px; padding:22px 18px 20px; text-align:center; }
.aa-invite-pics { display:flex; justify-content:center; align-items:flex-end; margin:-46px 0 10px; }
.aa-invite-pics img { width:96px; height:96px; object-fit:contain; margin:0 -9px; filter:drop-shadow(0 12px 14px rgba(16,24,40,0.14)); }
.aa-invite-pics img:nth-child(2) { width:124px; height:124px; z-index:1; }
.aa-invite h2 { margin:4px 0 0; font-family:var(--serif); font-size:23px; font-weight:600; letter-spacing:-.03em; line-height:1.2; }
.aa-invite p { margin:8px 0 0; font-size:15.5px; font-weight:500; line-height:1.45; color:var(--soft); }
.aa-how { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.aa-how li { display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:22px; }
.aa-how li i { flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal;
  font-size:17px; font-weight:600; color:#fff; background:var(--fl-o); box-shadow:0 8px 16px rgba(var(--fl-o-rgb),.3); }
.aa-how li:nth-child(even) i { background:var(--grad); box-shadow:0 8px 16px rgba(238,90,14,0.12); }
.aa-how li b { display:block; font-size:15.5px; font-weight:600; line-height:1.25; }
.aa-how li small { display:block; margin-top:2px; font-size:13.5px; font-weight:500; line-height:1.4; color:var(--soft); }

/* ------------------------------------------------------------------ a meal's plate: the main food and what goes with it (3 Oct 2026) */
.aa-combo { position:relative; display:block; width:100%; height:100%; }
.aa-combo img { position:absolute; object-fit:contain; filter:drop-shadow(0 5px 7px rgba(16,24,40,0.14)); }
.aa-combo img.m { left:-2%; top:3%; width:84%; height:84%; }
.aa-combo img.s1 { right:-8%; top:5%; width:46%; height:46%; }
.aa-combo img.s2 { right:-2%; bottom:-1%; width:44%; height:44%; }

/* ------------------------------------------------------------------ eat these / avoid these (3 Oct 2026) */
.aa-ea { padding:14px 14px 10px; margin-top:12px; }
.aa-ea-h { display:flex; align-items:center; gap:10px; }
.aa-ea-h i { flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal;
  font-size:19px; font-weight:700; color:#fff; background:#2E9E5B; }
.aa-ea-h i .ic { width:17px; height:17px; }
.aa-ea.no .aa-ea-h i { background:#D9412F; }
.aa-ea.some .aa-ea-h i { background:var(--fl-o); font-size:14px; }
.aa-ea-h b { display:block; font-size:17px; font-weight:700; }
.aa-ea-h small { display:block; font-size:13px; color:var(--soft); }
.aa-ea-kinds { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.aa-ea-kind { padding:5px 11px; border-radius:999px; font-size:13.5px; font-weight:500; background:rgba(46,158,91,.12); color:#1F6E40; }
.aa-ea-kind.no { background:rgba(217,65,47,.12); color:#9E2A1C; }
.aa-ea-kind.some { background:var(--fl-o-soft); color:var(--fl-o-dk); }
.aa-ea-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 8px; margin-top:12px; }
.aa-ea-food { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; min-width:0; }
.aa-ea-food .aa-pic { width:62px; height:62px; }
.aa-ea-food.no .aa-pic { filter:grayscale(.15); opacity:.92; }
.aa-ea-food b { font-size:13px; font-weight:500; line-height:1.25; color:var(--ink); overflow-wrap:anywhere; }
.aa-ea-food small { font-size:12px; color:var(--fl-o-dk); }

/* ------------------------------------------------------------------ movement (3 Oct 2026, "while swiping, food images
   moving round, collapsing or expanding") - pictures roll in as they come into view, the lists fold to two rows and
   open with "See all", and the advice slides away when she swipes to her next condition. */
/* the picture spins in; its name only fades up, so the words never turn */
.aa-will-roll { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .6s ease; }
.aa-will-roll .aa-pic, .aa-will-roll.plate > *, .aa-will-roll.aa-pic { transform:rotate(-140deg) scale(.45);
  transition:transform .85s cubic-bezier(.2,.9,.3,1.3); transition-delay:inherit; }
.aa-will-roll.in { opacity:1; transform:none; }
.aa-will-roll.in .aa-pic, .aa-will-roll.in.plate > *, .aa-will-roll.in.aa-pic { transform:none; }
/* folded: two whole rows; the rest roll in when she opens it */
.aa-ea:not(.open) .aa-ea-food:nth-child(n+7) { display:none; }
.aa-ea-more { display:flex; justify-content:center; width:100%; margin-top:6px; min-height:44px; border:0; background:none;
  color:var(--fl-o-dk) !important; font-size:14.5px; font-weight:500; cursor:pointer; }
.aa-ea-more span + span, .aa-ea.open .aa-ea-more span:first-child { display:none; }
.aa-ea.open .aa-ea-more span + span { display:inline; }
.aa-guide { transition:transform .16s ease, opacity .16s ease; }
.aa-guide.aa-out-l { transform:translateX(-40px); opacity:0; }
.aa-guide.aa-out-r { transform:translateX(40px); opacity:0; }
.aa-ea-food .aa-pic { transition:transform .25s ease; }
.aa-ea-food:active .aa-pic { transform:rotate(12deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .aa-will-roll { opacity:1; transform:none; transition:none; }
  .aa-ea .aa-ea-grid, .aa-guide { transition:none; }
}

/* On Home, Sara Aahaar's card is light green and Sara Vyayam's light blue, so the two read as two
   different things (he, 5 Oct 2026: "so it will be different and looks as separate in Home Screen
   - not the full app"). Only these two cards; nothing inside either screen changes. */
#aa-home.gh-glass { background:linear-gradient(160deg,#F0FAF2 0%,#DFF4E5 100%) !important; border-color:#CBE9D3 !important; }
/* ...and the names above them: "Aahaar in green and Vyayam in blue" (5 Oct 2026) */
.gh-sec b .aa-name { color:#15803D; }