/* Themes (picker in Settings). Moriah's flow / scanner themes 16-22, ported to the app's own tokens.
   - Only colours / backgrounds / radius / blur are taken from her files; her demo selectors are not used.
   - Everything is scoped by html[data-theme="NN"]; no attribute = the original look (tokens in app.css :root).
   - Decorative motion lives in the fixed .fx layer behind the app: transform/opacity only (GPU), paused while the page is hidden
     (html.theme-paused), and off under prefers-reduced-motion or the Settings switch (html.motion-off).
   - Assets (SVG art) are only requested when the theme that uses them is active.
   - Contrast: surfaces that hold text/inputs are solid (--panel) or her translucent surface (verified per theme by test/e2e/themes_contrast.py);
     deviations from her palette are listed in the commit message. */

html[data-theme="16"]{
  color-scheme:dark;
  --bg:#3E1856; --bg-img:linear-gradient(180deg,#3A1C6B 0%,#8E2E8E 18%,#E5527A 31%,#FF9A5A 43%,#FFC36B 100%); --card:rgba(80,22,92,.84); --card-b:rgba(255,200,170,.34); --ink:#FFF4E8; --ink2:#FFF4E8; --muted:#F6D8DA;
  --blue:#FFD27A; --blue-bg:#FFB45E; --blue-hover:#FFB45E; --blue-line:#FFD27A; --on-accent:#3A1245; --btn-img:linear-gradient(100deg,#FFD27A,#FF8F5C); --focus:#FFD27A;
  --panel:#43164f; --panel2:#5a2368; --field:rgba(0,0,0,.26); --soft:rgba(0,0,0,.26); --field-b:#F6D8DA; --ph:#F6D8DA; --danger-b:#ffc4c4;
  --green:#86efac; --green-bg:#4ade80; --orange:#fdba74; --orange-bg:#fb923c; --red:#ffc4c4; --track:rgba(255,225,205,.22); --pr-ink:#fcd34d;
  --suggest-bg:#5a2368; --suggest-b:#FFD27A; --res-bg:#5a2368; --nav-bg:rgba(78,22,92,.88); --nav-line:rgba(255,200,170,.30); --nav-act:rgba(255,210,122,.18);
  --grip:rgba(255,255,255,.45); --scrim:rgba(10,0,30,.6); --press:rgba(255,255,255,.1); --chip:rgba(70,20,84,.78);
  --chart-line:#FFB45E; --chart-grid:rgba(255,255,255,.28); --chart-txt:#F6D8DA; --chart-end:#62F0CC; --ring-arc:#FFD27A; --ring-arc-warn:#fb923c;
  --t-cal:#FF9A5A; --t-cal-t:#FFBF97; --t-carb:#FFD76B; --t-carb-t:#FFD76B; --t-pro:#7FC4FF; --t-pro-t:#9ED2FF; --t-fat:#FF86B8; --t-fat-t:#FFB9D6; --t-sug:#CDA2FF; --t-sug-t:#DDC1FF; --t-sod:#62F0CC; --t-sod-t:#62F0CC;
  --t-track:rgba(255,225,205,.22); --t-of:#F6D8DA; --t-over:#ff9a9a;
  --radius:26px; --radius-btn:999px; --blur:14px; --shadow:0 14px 34px rgba(40,10,60,.38); --btn-shadow:0 10px 26px rgba(255,140,92,.30); --dot:var(--muted); --th-b:var(--card-b); --skel-a:rgba(255,255,255,.10); --skel-b:rgba(255,255,255,.22);
}

html[data-theme="17"]{
  color-scheme:dark;
  --bg:#0C6CB0; --bg-img:linear-gradient(180deg,#0A3A9C 0%,#0C79B8 48%,#12BFB4 100%); --card:rgba(8,58,132,.86); --card-b:rgba(160,235,240,.36); --ink:#F0FCFF; --ink2:#F0FCFF; --muted:#C3E8F0;
  --blue:#FFD66B; --blue-bg:#FFB86B; --blue-hover:#FFB86B; --blue-line:#FFD66B; --on-accent:#3B1A05; --btn-img:linear-gradient(100deg,#FFD66B,#FF946B); --focus:#FFD66B;
  --panel:#0a3470; --panel2:#0f4690; --field:rgba(0,0,0,.26); --soft:rgba(0,0,0,.26); --field-b:#C3E8F0; --ph:#C3E8F0; --danger-b:#ffc4c4;
  --green:#86efac; --green-bg:#4ade80; --orange:#fdba74; --orange-bg:#fb923c; --red:#ffc4c4; --track:rgba(190,240,255,.2); --pr-ink:#fcd34d;
  --suggest-bg:#0f4690; --suggest-b:#FFD66B; --res-bg:#0f4690; --nav-bg:rgba(8,56,130,.9); --nav-line:rgba(160,235,240,.32); --nav-act:rgba(255,214,107,.18);
  --grip:rgba(255,255,255,.45); --scrim:rgba(10,0,30,.6); --press:rgba(255,255,255,.1); --chip:rgba(8,52,120,.8);
  --chart-line:#FFB86B; --chart-grid:rgba(255,255,255,.28); --chart-txt:#C3E8F0; --chart-end:#99F7E2; --ring-arc:#FFD66B; --ring-arc-warn:#fb923c;
  --t-cal:#FFAB85; --t-cal-t:#FFE0D1; --t-carb:#FFD36B; --t-carb-t:#FFE4A3; --t-pro:#8FD0FF; --t-pro-t:#CCEAFF; --t-fat:#FFA3CC; --t-fat-t:#FFE1EE; --t-sug:#CFB2FF; --t-sug-t:#EFE5FF; --t-sod:#5CF2D0; --t-sod-t:#99F7E2;
  --t-track:rgba(190,240,255,.2); --t-of:#C3E8F0; --t-over:#ff9a9a;
  --radius:22px; --radius-btn:16px; --blur:16px; --shadow:0 14px 32px rgba(2,30,80,.38); --btn-shadow:0 10px 24px rgba(255,148,107,.28); --dot:var(--muted); --th-b:var(--card-b); --skel-a:rgba(255,255,255,.10); --skel-b:rgba(255,255,255,.22);
}

html[data-theme="18"]{
  color-scheme:dark;
  --bg:#B03FC4; --bg-img:linear-gradient(150deg,#FF5C93 0%,#C23FD0 40%,#5B3FE0 75%,#2B7BFF 100%); --card:rgba(44,16,110,.80); --card-b:rgba(255,200,240,.34); --ink:#FFF2FA; --ink2:#FFF2FA; --muted:#EBD8F7;
  --blue:#FFC15A; --blue-bg:#FFB05E; --blue-hover:#FFB05E; --blue-line:#FFC15A; --on-accent:#3A0A3C; --btn-img:linear-gradient(100deg,#FFC15A,#FF6FA0); --focus:#FFC15A;
  --panel:#2f1470; --panel2:#432086; --field:rgba(0,0,0,.26); --soft:rgba(0,0,0,.26); --field-b:#EBD8F7; --ph:#EBD8F7; --danger-b:#ffc4c4;
  --green:#86efac; --green-bg:#4ade80; --orange:#fdba74; --orange-bg:#fb923c; --red:#ffc4c4; --track:rgba(255,225,250,.22); --pr-ink:#fcd34d;
  --suggest-bg:#432086; --suggest-b:#FFC15A; --res-bg:#432086; --nav-bg:rgba(44,16,110,.78); --nav-line:rgba(255,200,240,.34); --nav-act:rgba(255,193,90,.2);
  --grip:rgba(255,255,255,.45); --scrim:rgba(10,0,30,.6); --press:rgba(255,255,255,.1); --chip:rgba(44,14,100,.9);
  --chart-line:#FFB05E; --chart-grid:rgba(255,255,255,.28); --chart-txt:#EBD8F7; --chart-end:#66F2D2; --ring-arc:#FFC15A; --ring-arc-warn:#fb923c;
  --t-cal:#FFB36B; --t-cal-t:#FFC38A; --t-carb:#FFE066; --t-carb-t:#FFE066; --t-pro:#86C8FF; --t-pro-t:#A0D4FF; --t-fat:#FF8CC0; --t-fat-t:#FFBAD9; --t-sug:#D2AEFF; --t-sug-t:#DDC2FF; --t-sod:#66F2D2; --t-sod-t:#66F2D2;
  --t-track:rgba(255,225,250,.22); --t-of:#EBD8F7; --t-over:#ff9a9a;
  --radius:30px; --radius-btn:999px; --blur:20px; --shadow:0 16px 36px rgba(40,10,90,.38); --btn-shadow:0 12px 28px rgba(255,111,160,.32); --dot:var(--muted); --th-b:var(--card-b); --skel-a:rgba(255,255,255,.10); --skel-b:rgba(255,255,255,.22);
}

html[data-theme="19"]{
  color-scheme:dark;
  --bg:#6FD0A0; --bg-img:linear-gradient(160deg,#F6EE9A 0%,#B5E682 32%,#4FCFA0 68%,#2AA6BC 100%); --card:rgba(8,80,66,.88); --card-b:rgba(230,255,200,.38); --ink:#F4FFEA; --ink2:#F4FFEA; --muted:#D2F0D8;
  --blue:#FFE95C; --blue-bg:#FFE95C; --blue-hover:#FFE95C; --blue-line:#FFE95C; --on-accent:#083A2B; --btn-img:linear-gradient(100deg,#FFE95C,#A5E85E); --focus:#FFE95C;
  --panel:#0a4a3c; --panel2:#0f5f4d; --field:rgba(0,0,0,.26); --soft:rgba(0,0,0,.26); --field-b:#D2F0D8; --ph:#D2F0D8; --danger-b:#ffc4c4;
  --green:#86efac; --green-bg:#4ade80; --orange:#fdba74; --orange-bg:#fb923c; --red:#ffc4c4; --track:rgba(220,255,225,.22); --pr-ink:#fcd34d;
  --suggest-bg:#0f5f4d; --suggest-b:#FFE95C; --res-bg:#0f5f4d; --nav-bg:rgba(8,78,64,.94); --nav-line:rgba(230,255,200,.38); --nav-act:rgba(255,233,92,.18);
  --grip:rgba(255,255,255,.45); --scrim:rgba(10,0,30,.6); --press:rgba(255,255,255,.1); --chip:rgba(8,78,64,.9);
  --chart-line:#FFE95C; --chart-grid:rgba(255,255,255,.28); --chart-txt:#D2F0D8; --chart-end:#BBFAE1; --ring-arc:#FFE95C; --ring-arc-warn:#fb923c;
  --t-cal:#FFB383; --t-cal-t:#FFE8DA; --t-carb:#FFE45C; --t-carb-t:#FFEC8A; --t-pro:#8CD0FF; --t-pro-t:#D9EFFF; --t-fat:#FFAECB; --t-fat-t:#FFE6EF; --t-sug:#D7B5FF; --t-sug-t:#F3E8FF; --t-sod:#7DF5C6; --t-sod-t:#BBFAE1;
  --t-track:rgba(220,255,225,.22); --t-of:#D2F0D8; --t-over:#ff9a9a;
  --radius:20px; --radius-btn:14px; --blur:8px; --shadow:0 12px 28px rgba(10,70,55,.30); --btn-shadow:none; --dot:var(--muted); --th-b:var(--card-b); --skel-a:rgba(255,255,255,.10); --skel-b:rgba(255,255,255,.22);
}

html[data-theme="20"]{
  color-scheme:light;
  --bg:#FFD0E4; --bg-img:linear-gradient(150deg,#FFC2D8,#FFE0B0 45%,#C6EEB8 70%,#A8E0F5); --card:rgba(216,194,255,.74); --card-b:rgba(255,255,255,.55); --ink:#240A4A; --ink2:#240A4A; --muted:#472A7C;
  --blue:#3F1AA8; --blue-bg:#6A3DE8; --blue-hover:#6A3DE8; --blue-line:#3F1AA8; --on-accent:#FFFFFF; --btn-img:linear-gradient(100deg,#6A3DE8,#C7287A); --focus:#3F1AA8;
  --panel:#f5eeff; --panel2:#ece0ff; --field:rgba(80,40,150,.1); --soft:rgba(80,40,150,.1); --field-b:#472A7C; --ph:#472A7C; --danger-b:#991b1b;
  --green:#064e3b; --green-bg:#059669; --orange:#92400e; --orange-bg:#d97706; --red:#991b1b; --track:rgba(80,40,150,.16); --pr-ink:#92400e;
  --suggest-bg:#ece0ff; --suggest-b:#8a63e0; --res-bg:#ece0ff; --nav-bg:rgba(200,176,255,.84); --nav-line:rgba(255,255,255,.55); --nav-act:rgba(106,61,232,.18);
  --grip:rgba(0,0,0,.28); --scrim:rgba(20,10,50,.42); --press:rgba(0,0,0,.06); --chip:rgba(245,238,255,.82);
  --chart-line:#6A3DE8; --chart-grid:rgba(0,0,0,.16); --chart-txt:#472A7C; --chart-end:#0B6A5C; --ring-arc:#6A3DE8; --ring-arc-warn:#d97706;
  --t-cal:#A03D13; --t-cal-t:#772E0E; --t-carb:#7D5700; --t-carb-t:#593E00; --t-pro:#1E58BC; --t-pro-t:#16418C; --t-fat:#AB2662; --t-fat-t:#7D1C48; --t-sug:#7435D6; --t-sug-t:#5622A7; --t-sod:#0B6A5C; --t-sod-t:#084E44;
  --t-track:rgba(80,40,150,.16); --t-of:#472A7C; --t-over:#b91c1c;
  --radius:30px; --radius-btn:999px; --blur:18px; --shadow:0 14px 34px rgba(100,50,170,.20); --btn-shadow:0 10px 24px rgba(106,61,232,.28); --dot:var(--muted); --th-b:var(--card-b); --skel-a:rgba(0,0,0,.06); --skel-b:rgba(0,0,0,.12);
}

html[data-theme="21"]{
  color-scheme:light;
  --bg:#E6F5F4; --bg-img:none; --card:rgba(255,255,255,.92); --card-b:rgba(14,130,125,.42); --ink:#0A2A2A; --ink2:#0A2A2A; --muted:#3B605D;
  --blue:#0A6B64; --blue-bg:#0B7A72; --blue-hover:#0B7A72; --blue-line:#0A6B64; --on-accent:#FFFFFF; --btn-img:none; --focus:#0A6B64;
  --panel:#ffffff; --panel2:#f0faf9; --field:rgba(14,130,125,.1); --soft:rgba(14,130,125,.1); --field-b:#3B605D; --ph:#3B605D; --danger-b:#b91c1c;
  --green:#047857; --green-bg:#059669; --orange:#b45309; --orange-bg:#d97706; --red:#b91c1c; --track:#CFE6E4; --pr-ink:#92400e;
  --suggest-bg:#f0faf9; --suggest-b:#0E9A8E; --res-bg:#f0faf9; --nav-bg:#F2FBFA; --nav-line:rgba(14,130,125,.35); --nav-act:rgba(14,154,142,.14);
  --grip:rgba(0,0,0,.28); --scrim:rgba(20,10,50,.42); --press:rgba(0,0,0,.06); --chip:rgba(255,255,255,.92);
  --chart-line:#0B7A72; --chart-grid:rgba(0,0,0,.16); --chart-txt:#3B605D; --chart-end:#0C7768; --ring-arc:#0B7A72; --ring-arc-warn:#d97706;
  --t-cal:#E0561A; --t-cal-t:#BB4816; --t-carb:#B07A00; --t-carb-t:#916500; --t-pro:#2F6FDE; --t-pro-t:#2366DB; --t-fat:#D12E78; --t-fat-t:#C92C73; --t-sug:#8B45DC; --t-sug-t:#8B45DC; --t-sod:#0E8A78; --t-sod-t:#0C7768;
  --t-track:#CFE6E4; --t-of:#3B605D; --t-over:#b91c1c;
  --radius:12px; --radius-btn:12px; --blur:0px; --shadow:0 0 0 1px rgba(14,130,125,.06),0 8px 22px rgba(10,100,95,.10); --btn-shadow:0 8px 18px rgba(11,122,114,.28); --dot:var(--muted); --th-b:var(--card-b); --skel-a:rgba(0,0,0,.06); --skel-b:rgba(0,0,0,.12);
}

html[data-theme="22"]{
  color-scheme:light;
  --bg:#FFFFFF; --bg-img:none; --card:rgba(243,245,249,.8); --card-b:#E1E6EE; --ink:#0F2A2C; --ink2:#0F2A2C; --muted:#46605E;
  --blue:#0A6B64; --blue-bg:#0B7A72; --blue-hover:#0B7A72; --blue-line:#0A6B64; --on-accent:#FFFFFF; --btn-img:none; --focus:#0A6B64;
  --panel:#ffffff; --panel2:#f3f7f7; --field:rgba(15,42,44,.06); --soft:rgba(15,42,44,.06); --field-b:#46605E; --ph:#46605E; --danger-b:#b91c1c;
  --green:#047857; --green-bg:#059669; --orange:#b45309; --orange-bg:#d97706; --red:#b91c1c; --track:#E3E8EF; --pr-ink:#92400e;
  --suggest-bg:#f3f7f7; --suggest-b:#0E9A8E; --res-bg:#f3f7f7; --nav-bg:#FFFFFF; --nav-line:#E1E6EE; --nav-act:#E4F3F1;
  --grip:rgba(0,0,0,.28); --scrim:rgba(20,10,50,.42); --press:rgba(0,0,0,.06); --chip:rgba(243,245,249,.9);
  --chart-line:#0B7A72; --chart-grid:rgba(0,0,0,.16); --chart-txt:#46605E; --chart-end:#0D7C6C; --ring-arc:#0B7A72; --ring-arc-warn:#d97706;
  --t-cal:#E0561A; --t-cal-t:#BB4816; --t-carb:#B07A00; --t-carb-t:#916500; --t-pro:#2F6FDE; --t-pro-t:#2669DD; --t-fat:#D12E78; --t-fat-t:#C92C73; --t-sug:#8B45DC; --t-sug-t:#8B45DC; --t-sod:#0E8A78; --t-sod-t:#0D7C6C;
  --t-track:#E3E8EF; --t-of:#46605E; --t-over:#b91c1c;
  --radius:18px; --radius-btn:14px; --blur:6px; --shadow:none; --btn-shadow:none; --dot:var(--muted); --th-b:var(--card-b); --skel-a:rgba(0,0,0,.06); --skel-b:rgba(0,0,0,.12);
}

/* ---------- shared (every theme) ---------- */
html[data-theme]{--note-b:var(--muted);--ar-b:var(--muted)}
.fx{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:0;overflow:hidden;pointer-events:none;display:none;background:var(--bg-img)}
.fx i{position:absolute;display:none}
.app{position:relative;z-index:1}
html[data-theme]{background:var(--bg)}
html[data-theme] body{background-color:var(--bg)}   /* same base colour on html + body: overscroll / rubber-band / any gap never shows another colour */
html[data-theme] .fx{display:block}
html[data-theme] .card,html[data-theme] .total,html[data-theme] .meal{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--shadow)}
html[data-theme] .meal{border-radius:calc(var(--radius) - 2px)}
html[data-theme] .card:has(.xc-menu){position:relative;z-index:3}   /* backdrop-filter makes every card a stacking context: keep the open exercise menu above the next card */
html[data-theme] .btn,html[data-theme] .btn2{border-radius:var(--radius-btn)}
html[data-theme] .btn{box-shadow:var(--btn-shadow)}
html[data-theme] .nav{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
html[data-theme] .nav a[aria-current="page"]{background:var(--nav-act)}
html[data-theme] .top>.row{padding-inline-start:12px}
/* text that sits straight on the (animated) background gets a backing pill/panel so it keeps AA on every frame of every theme */
html[data-theme] .top,html[data-theme] .datenav,html[data-theme] .wk-past{background:var(--chip);border:1px solid var(--card-b);border-radius:var(--radius);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
html[data-theme] .top{padding:4px 12px}
html[data-theme] .wk-past{padding:6px 12px}
html[data-theme] .change,html[data-theme] .chart-sec{background:var(--card);border:1px solid var(--card-b);border-radius:var(--radius);padding:10px 4px;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
html[data-theme] .wk .card{background:var(--card);border:1px solid var(--card-b);border-radius:var(--radius);padding:10px 12px;margin-bottom:16px}
html[data-theme] .dn-arr,html[data-theme] .datenav .ar{box-shadow:none}

/* ---------- 16 dunes ---------- */
html[data-theme="16"] .fx{background:none}
html[data-theme="16"] .fx::before{content:"";position:absolute;left:0;right:0;top:0;height:116%;background:var(--bg-img);animation:fx-sky 26s ease-in-out infinite alternate}
@keyframes fx-sky{to{transform:translateY(-13.8%)}}
html[data-theme="16"] .fx::after{content:"";position:absolute;left:0;right:0;top:1070px;bottom:0;background:#3E1856}   /* the dune art is 1074px tall: below it (tablets, tall screens) continue with the dune's own bottom colour, never the orange sky */
html[data-theme="16"] .fx i:nth-child(-n+4){display:block}
html[data-theme="16"] .fx i:nth-child(1){width:300px;height:300px;left:40px;top:-8px;background:url(/themes/img/sun.svg) center/contain no-repeat;animation:fx-sun 14s ease-in-out infinite alternate}
@keyframes fx-sun{from{transform:translateY(-16px) scale(.97)}to{transform:translateY(16px) scale(1.05)}}
html[data-theme="16"] .fx i:nth-child(n+2){left:0;width:calc(100% + 1170px);height:1000px;background-size:1170px 1000px;background-repeat:repeat-x}
html[data-theme="16"] .fx i:nth-child(2){top:8px;background-image:url(/themes/img/dunes-far.svg);animation:fx-drift-l 70s linear infinite}
html[data-theme="16"] .fx i:nth-child(3){top:40px;background-image:url(/themes/img/dunes-mid.svg);animation:fx-drift-l 46s linear infinite}
html[data-theme="16"] .fx i:nth-child(4){top:74px;background-image:url(/themes/img/dunes-near.svg);animation:fx-drift-l 30s linear infinite}
@keyframes fx-drift-l{to{transform:translateX(-1170px)}}

/* ---------- 17 waves ---------- */
html[data-theme="17"] .fx i:nth-child(-n+4){display:block;left:0;width:100%;height:900px;overflow:hidden}
html[data-theme="17"] .fx i:nth-child(-n+4)::before{content:"";position:absolute;top:0;left:0;width:calc(100% + 780px);height:100%;background-size:780px 900px;background-repeat:repeat-x}
html[data-theme="17"] .fx i:nth-child(1){top:36px;animation:fx-bob 9s ease-in-out infinite alternate}
html[data-theme="17"] .fx i:nth-child(2){top:62px;animation:fx-bob 11s ease-in-out infinite alternate-reverse}
html[data-theme="17"] .fx i:nth-child(3){top:88px;animation:fx-bob 8s ease-in-out infinite alternate}
html[data-theme="17"] .fx i:nth-child(4){top:114px;animation:fx-bob 10s ease-in-out infinite alternate-reverse}
html[data-theme="17"] .fx i:nth-child(1)::before{background-image:url(/themes/img/wave-d.svg);animation:fx-wave 31s linear infinite}
html[data-theme="17"] .fx i:nth-child(2)::before{background-image:url(/themes/img/wave-a.svg);animation:fx-wave 22s linear infinite reverse}
html[data-theme="17"] .fx i:nth-child(3)::before{background-image:url(/themes/img/wave-b.svg);animation:fx-wave 16s linear infinite}
html[data-theme="17"] .fx i:nth-child(4)::before{background-image:url(/themes/img/wave-c.svg);animation:fx-wave 12s linear infinite reverse}
@keyframes fx-wave{to{transform:translateX(-780px)}}
html[data-theme="17"] .fx::after{content:"";position:absolute;left:0;right:0;top:1000px;bottom:0;background:#0F8BA7}   /* below the 1014px-tall wave art keep the waves' bottom colour */
@keyframes fx-bob{from{transform:translateY(-12px)}to{transform:translateY(14px)}}
html[data-theme="17"] .nav{border-radius:22px 22px 0 0}

/* ---------- 18 liquid ---------- */
html[data-theme="18"] .top{background:var(--chip);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,200,240,.3);border-radius:26px;padding:8px 20px;margin-top:4px;min-height:54px}
html[data-theme="18"] .fx i:nth-child(-n+5){display:block;filter:blur(5px);border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;animation:fx-blob var(--bd) ease-in-out infinite alternate;animation-delay:var(--l)}
html[data-theme="18"] .fx i:nth-child(1){width:300px;height:300px;right:-90px;top:40px;background:linear-gradient(135deg,#FFB347,#FF5C93);--bd:19s;--l:-3s}
html[data-theme="18"] .fx i:nth-child(2){width:260px;height:260px;left:-100px;top:250px;background:linear-gradient(135deg,#22C3FF,#8A4DFF);--bd:23s;--l:-8s}
html[data-theme="18"] .fx i:nth-child(3){width:320px;height:320px;right:-120px;top:470px;background:linear-gradient(135deg,#FF7A59,#FF4D8D);--bd:21s;--l:-5s}
html[data-theme="18"] .fx i:nth-child(4){width:240px;height:240px;left:-60px;top:640px;background:linear-gradient(135deg,#FFB347,#FF7A59);--bd:25s;--l:-11s}
html[data-theme="18"] .fx i:nth-child(5){width:220px;height:220px;left:80px;top:-70px;background:linear-gradient(135deg,#8A4DFF,#22C3FF);--bd:20s;--l:-14s}
@keyframes fx-blob{from{transform:translate(0,0) rotate(0deg) scale(1)}to{transform:translate(70px,-50px) rotate(40deg) scale(1.15)}}
html[data-theme="18"] .nav{left:16px;right:16px;bottom:14px;max-width:calc(560px - 32px);border:1px solid var(--nav-line);border-radius:999px;padding:4px 10px;box-shadow:0 14px 34px rgba(40,10,90,.4)}
html[data-theme="18"] .nav a{border-radius:999px}

/* ---------- 19 contour ---------- */
html[data-theme="19"] .fx i:nth-child(-n+4){display:block}
html[data-theme="19"] .fx i:nth-child(-n+2){top:0;width:calc(100% + 780px);height:calc(100% + 1688px);background-size:780px 1688px;background-repeat:repeat}
html[data-theme="19"] .fx i:nth-child(1){left:0;background-image:url(/themes/img/contours-a.svg);animation:fx-contA 80s linear infinite}
html[data-theme="19"] .fx i:nth-child(2){left:-780px;background-image:url(/themes/img/contours-b.svg);animation:fx-contB 120s linear infinite}
@keyframes fx-contA{to{transform:translate(-780px,-1688px)}}
@keyframes fx-contB{to{transform:translate(780px,-1688px)}}
html[data-theme="19"] .fx i:nth-child(3){width:300px;height:300px;right:-80px;top:80px;border-radius:50%;filter:blur(50px);background:#FFE45C;opacity:.65;animation:fx-washa 18s ease-in-out infinite alternate}
html[data-theme="19"] .fx i:nth-child(4){width:340px;height:340px;left:-120px;top:520px;border-radius:50%;filter:blur(50px);background:#2BC4C0;opacity:.6;animation:fx-washb 22s ease-in-out infinite alternate}
@keyframes fx-washa{to{transform:translate(-90px,300px) scale(1.2)}}
@keyframes fx-washb{to{transform:translate(120px,-280px) scale(1.15)}}
html[data-theme="19"] .nav{border-radius:20px 20px 0 0}

/* ---------- 20 rainbow ---------- */
html[data-theme="20"] .fx i:nth-child(-n+2){display:block;inset:-60%;filter:blur(46px)}
html[data-theme="20"] .fx i:nth-child(1){background:conic-gradient(from 0deg,#FF8FB8,#FFC27A,#B4EC92,#7FD6F5,#B29BFF,#FF8FB8);animation:fx-turn 44s linear infinite}
html[data-theme="20"] .fx i:nth-child(2){background:conic-gradient(from 90deg,transparent 0 20%,rgba(255,150,200,.75) 35%,transparent 50%,rgba(150,225,255,.75) 75%,transparent 90%);animation:fx-turn 62s linear infinite reverse;opacity:.8}
@keyframes fx-turn{to{transform:rotate(360deg)}}
html[data-theme="20"] .nav{border-radius:30px 30px 0 0}

/* ---------- 21 scanner light ---------- */
html[data-theme="21"] .fx{background-image:linear-gradient(rgba(10,120,115,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,120,115,.07) 1px,transparent 1px);background-size:28px 28px}
/* scan line: passes OVER the content (z-index above .app, pointer-events none), ~5s top -> bottom then a pause (9s cycle) */
html[data-theme="21"] body::after,html[data-theme="22"] body::after{content:"";position:fixed;left:0;right:0;top:0;z-index:3;pointer-events:none;transform:translateY(-160px);animation:fx-scan 9s linear infinite}
html[data-theme="21"] body::after{height:2px;background:rgba(14,154,142,.92);box-shadow:0 0 10px 1px rgba(14,154,142,.45)}   /* sharp teal line with a soft glow */
html[data-theme="22"] body::after{height:90px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.22) 60%,rgba(255,255,255,.34));border-bottom:1px solid rgba(255,255,255,.55)}   /* frosted translucent band, no glow */
@keyframes fx-scan{0%{transform:translateY(-160px)}55%{transform:translateY(100vh)}100%{transform:translateY(100vh)}}
html[data-theme="21"] .meal,html[data-theme="21"] .total{position:relative}
html[data-theme="21"] .meal::before,html[data-theme="21"] .total::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(#0E9A8E,#0E9A8E) top left/12px 2px no-repeat,linear-gradient(#0E9A8E,#0E9A8E) top left/2px 12px no-repeat,linear-gradient(#0E9A8E,#0E9A8E) top right/12px 2px no-repeat,linear-gradient(#0E9A8E,#0E9A8E) top right/2px 12px no-repeat,linear-gradient(#0E9A8E,#0E9A8E) bottom left/12px 2px no-repeat,linear-gradient(#0E9A8E,#0E9A8E) bottom left/2px 12px no-repeat,linear-gradient(#0E9A8E,#0E9A8E) bottom right/12px 2px no-repeat,linear-gradient(#0E9A8E,#0E9A8E) bottom right/2px 12px no-repeat}
html[data-theme="21"] .nav{border-radius:0}
html[data-theme="21"] .card,html[data-theme="21"] .total,html[data-theme="21"] .meal{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- 22 scanner white ---------- */
html[data-theme="22"] .nav{border-radius:0}
html[data-theme="22"] .meal{padding-block:14px 8px}