/* Woof it out app · colour tokens (light / dark). Generated once by qa/round2/t/darkgen.py from the old literal colours, then
   tuned by hand at the end of the dark block. Theme: <html data-theme="light|dark"> set by the script in index.html
   (Εγώ → Εμφάνιση: Αυτόματο / Φωτεινό / Σκοτεινό; Αυτόματο follows the phone). Names: --bg-* backgrounds, --fg-* text and icons,
   --bd-* borders, --sh-* shadows; -ob = text on an orange/yellow surface, -x = a «pressed» ink chip.
   From now on edit this file by hand (the generator is a one-time step); the hand-tuned part is at the end. */
:root{
  --bd-000000-18:rgba(0,0,0,.18);
  --bd-000000-20:rgba(0,0,0,.2);
  --bd-111111:#111;
  --bd-111111-08:rgba(17,17,17,.08);
  --bd-141312:#141312;
  --bd-141312-08:rgba(20,19,18,.08);
  --bd-141312-12:rgba(20,19,18,.12);
  --bd-141312-14:rgba(20,19,18,.14);
  --bd-1f5fd6:#1F5FD6;
  --bd-1f8a4c:#1F8A4C;
  --bd-b23a2b:#B23A2B;
  --bd-cfc6b8:#cfc6b8;
  --bd-d93a3e:#D93A3E;
  --bd-e0d6c6:#E0D6C6;
  --bd-e4e1da:#E4E1DA;
  --bd-e6dccd:#e6dccd;
  --bd-e8b66b:#E8B66B;
  --bd-eadfce:#eadfce;
  --bd-ece9e2:#ECE9E2;
  --bd-f1e9dd:#f1e9dd;
  --bd-f2a53a:#F2A53A;
  --bd-ffffff:#fff;
  --bg-000000:#000;
  --bg-000000-00:rgba(0,0,0,0);
  --bg-000000-45:rgba(0,0,0,.6);
  --bg-000000-50:rgba(0,0,0,.5);
  --bg-000000-55:rgba(0,0,0,.55);
  --bg-000000-72:rgba(0,0,0,.72);
  --bg-111111:#111;
  --bg-111111-25:rgba(17,17,17,.25);
  --bg-111111-40:rgba(17,17,17,.4);
  --bg-111111-50:rgba(17,17,17,.5);
  --bg-111111-78:rgba(17,17,17,.78);
  --bg-111111-92-x:rgba(17,17,17,.92);
  --bg-111111-x:#111;
  --bg-141312:#141312;
  --bg-141312-00:rgba(20,19,18,0);
  --bg-141312-72:rgba(20,19,18,.72);
  --bg-141312-82:rgba(20,19,18,.82);
  --bg-141312-95:rgba(20,19,18,.95);
  --bg-141312-x:#141312;
  --bg-1f5fd6:#1F5FD6;
  --bg-1f8a4c:#1F8A4C;
  --bg-222222:#222;
  --bg-2e7de0:#2E7DE0;
  --bg-2f7a4c:#2F7A4C;
  --bg-5b8dd6:#5b8dd6;
  --bg-b23a2b:#B23A2B;
  --bg-c2412f:#C2412F;
  --bg-d6d2ca:#D6D2CA;
  --bg-d93a3e:#D93A3E;
  --bg-d9cfc0:#D9CFC0;
  --bg-d9d5cc:#D9D5CC;
  --bg-e1f1e6:#E1F1E6;
  --bg-e3ebf8:#E3EBF8;
  --bg-e3f4e8:#E3F4E8;
  --bg-e4e1da:#E4E1DA;
  --bg-e7f4e8:#E7F4E8;
  --bg-e8932a:#E8932A;
  --bg-e8f0fb:#E8F0FB;
  --bg-e8f2ff:#E8F2FF;
  --bg-e9e4da:#E9E4DA;
  --bg-eadfce:#eadfce;
  --bg-eeeeee:#eee;
  --bg-eef3fb:#EEF3FB;
  --bg-eef4ff:#EEF4FF;
  --bg-efe7da:#EFE7DA;
  --bg-efeae2:#EFEAE2;
  --bg-f1eee7:#F1EEE7;
  --bg-f1eee9:#F1EEE9;
  --bg-f2a53a:#F2A53A;
  --bg-f3e1de:#F3E1DE;
  --bg-f3eee6:#f3eee6;
  --bg-f4efe6:#F4EFE6;
  --bg-f4f1ea:#F4F1EA;
  --bg-f7c88a:#F7C88A;
  --bg-f7c9a6:#F7C9A6;
  --bg-f8f5f0:#F8F5F0;
  --bg-faf7f1:#FAF7F1;
  --bg-fafaf7:#FAFAF7;
  --bg-fbe3df:#FBE3DF;
  --bg-fbe4e1:#FBE4E1;
  --bg-fbf8f3-00:rgba(251,248,243,0);
  --bg-fbf8f3-92:rgba(251,248,243,.92);
  --bg-fbf8f3-94:rgba(251,248,243,.94);
  --bg-fbf8f3-96:rgba(251,248,243,.96);
  --bg-fde8e4:#FDE8E4;
  --bg-fdebd0:#FDEBD0;
  --bg-fdebdc:#FDEBDC;
  --bg-ffe08a:#FFE08A;
  --bg-fff1da:#FFF1DA;
  --bg-fff1dc:#FFF1DC;
  --bg-fff4e0:#fff4e0;
  --bg-fff4e2:#FFF4E2;
  --bg-fff6e0:#fff6e0;
  --bg-fff6e8:#FFF6E8;
  --bg-fffbf3:#FFFBF3;
  --bg-ffffff:#fff;
  --bg-ffffff-08:rgba(255,255,255,.08);
  --bg-ffffff-12:rgba(255,255,255,.12);
  --bg-ffffff-16:rgba(255,255,255,.16);
  --bg-ffffff-22:rgba(255,255,255,.22);
  --bg-ffffff-35:rgba(255,255,255,.35);
  --bg-ffffff-55:rgba(255,255,255,.55);
  --bg-ffffff-92:rgba(255,255,255,.92);
  --bg-ffffff-94:rgba(255,255,255,.94);
  --fg-111111:#111;
  --fg-111111-ob:#111;
  --fg-141312:#141312;
  --fg-141312-ob:#141312;
  --fg-163f96:#163F96;
  --fg-1d4e89:#1D4E89;
  --fg-1d7f48:#1d7f48;
  --fg-1f5fd6:#1F5FD6;
  --fg-1f6b3a:#1F6B3A;
  --fg-1f6b3e:#1F6B3E;
  --fg-1f7a44:#1F7A44;
  --fg-1f8a4c:#1F8A4C;
  --fg-23662e:#23662E;
  --fg-2b2926:#2b2926;
  --fg-3a3832:#3a3832;
  --fg-3b4a6b:#3b4a6b;
  --fg-4a453f:#4a453f;
  --fg-5c564e:#5c564e;
  --fg-6b4300:#6b4300;
  --fg-6b6560:#6b6560;
  --fg-6b6863:#6B6863;
  --fg-6e470e:#6E470E;
  --fg-6e675e:#6e675e;
  --fg-7a4a00:#7a4a00;
  --fg-8a2b22:#8A2B22;
  --fg-8a5a12:#8a5a12;
  --fg-8a837a:#8a837a;
  --fg-8e2a1e:#8E2A1E;
  --fg-8fd6a6:#8FD6A6;
  --fg-9a5b12:#9A5B12;
  --fg-9b2c22:#9B2C22;
  --fg-b23a2b:#B23A2B;
  --fg-b26a00:#B26A00;
  --fg-b3261e:#B3261E;
  --fg-b5651d:#B5651D;
  --fg-b5711b:#9A5E16;
  --fg-c8452f:#C8452F;
  --fg-c9c5bd:#C9C5BD;
  --fg-cfc9bf:#CFC9BF;
  --fg-cfcbc3:#CFCBC3;
  --fg-d93a3e:#C22F33;
  --fg-e8e1d6:#E8E1D6;
  --fg-f0a33a:#F0A33A;
  --fg-f2a53a:#F2A53A;
  --fg-ff8a80:#FF8A80;
  --fg-ffc94a:#FFC94A;
  --fg-ffffff:#fff;
  --fg-ffffff-70:rgba(255,255,255,.7);
  --fg-ffffff-72:rgba(255,255,255,.72);
  --fg-ffffff-80:rgba(255,255,255,.8);
  --fg-ffffff-x:#fff;
  --sh-000000-12:rgba(0,0,0,.12);
  --sh-000000-18:rgba(0,0,0,.18);
  --sh-000000-25:rgba(0,0,0,.25);
  --sh-000000-28:rgba(0,0,0,.28);
  --sh-000000-30:rgba(0,0,0,.3);
  --sh-000000-35:rgba(0,0,0,.35);
  --sh-111111:#111;
  --sh-111111-90:rgba(17,17,17,.9);
  --sh-141312:#141312;
  --sh-141312-10:rgba(20,19,18,.10);
  --sh-141312-12:rgba(20,19,18,.12);
  --sh-141312-55:rgba(20,19,18,.55);
  --sh-141312-60:rgba(20,19,18,.6);
  --sh-1f8a4c-00:rgba(31,138,76,0);
  --sh-1f8a4c-60:rgba(31,138,76,.6);
  --sh-2e7de0-22:rgba(46,125,224,.22);
  --sh-a01e1e-28:rgba(160,30,30,.28);
  --sh-a01e1e-45:rgba(160,30,30,.45);
  --sh-b23a2b-18:rgba(178,58,43,.18);
  --sh-d9cfc0:#d9cfc0;
  --sh-f2a53a:#F2A53A;
  --sh-f3d29c:#F3D29C;
  --sh-ffffff:#fff;
  --sh-ffffff-80:rgba(255,255,255,.8);
  --sh-ffffff-90:rgba(255,255,255,.9);
  --ink-bg:#111111;
  --on-ink:#FFFFFF;
  --on-sf:#141312;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bd-000000-18:rgba(255,255,255,0.245);
  --bd-000000-20:rgba(255,255,255,0.27);
  --bd-111111:#E6DFD4;
  --bd-111111-08:rgba(255,255,255,0.12);
  --bd-141312:#E6DFD4;
  --bd-141312-08:rgba(255,255,255,0.12);
  --bd-141312-12:rgba(255,255,255,0.17);
  --bd-141312-14:rgba(255,255,255,0.195);
  --bd-1f5fd6:rgba(255,240,220,.17);
  --bd-1f8a4c:#1F8A4C;
  --bd-b23a2b:#B23A2B;
  --bd-cfc6b8:#4A433B;
  --bd-d93a3e:#D93A3E;
  --bd-e0d6c6:#3A342E;
  --bd-e4e1da:#3A342E;
  --bd-e6dccd:#3A342E;
  --bd-e8b66b:#E8B66B;
  --bd-eadfce:#3A342E;
  --bd-ece9e2:#3A342E;
  --bd-f1e9dd:#3A342E;
  --bd-f2a53a:#F2A53A;
  --bd-ffffff:#3A342E;
  --bg-000000:#E2DBD0;
  --bg-000000-00:rgba(255,255,255,0);
  --bg-000000-45:rgba(0,0,0,0.55);
  --bg-000000-50:rgba(0,0,0,0.6);
  --bg-000000-55:rgba(0,0,0,0.65);
  --bg-000000-72:rgba(0,0,0,0.8);
  --bg-111111:#F2A53A;
  --bg-111111-25:rgba(255,255,255,0.22);
  --bg-111111-40:rgba(0,0,0,0.5);
  --bg-111111-50:rgba(0,0,0,0.6);
  --bg-111111-78:rgba(0,0,0,0.8);
  --bg-111111-92-x:rgba(0,0,0,0.8);
  --bg-111111-x:#ECE6DC;
  --bg-141312:#322D28;
  --bg-141312-00:rgba(255,255,255,0);
  --bg-141312-72:rgba(0,0,0,0.8);
  --bg-141312-82:rgba(0,0,0,0.8);
  --bg-141312-95:rgba(0,0,0,0.8);
  --bg-141312-x:#ECE6DC;
  --bg-1f5fd6:#1F5FD6;
  --bg-1f8a4c:#1F8A4C;
  --bg-222222:#27231F;
  --bg-2e7de0:#2E7DE0;
  --bg-2f7a4c:#457758;
  --bg-5b8dd6:#5b8dd6;
  --bg-b23a2b:#B23A2B;
  --bg-c2412f:#C2412F;
  --bg-d6d2ca:#3D3731;
  --bg-d93a3e:#D93A3E;
  --bg-d9cfc0:#4A433B;
  --bg-d9d5cc:#3D3731;
  --bg-e1f1e6:#1A2A1F;
  --bg-e3ebf8:#2E2417;
  --bg-e3f4e8:#1A2A1F;
  --bg-e4e1da:#322D28;
  --bg-e7f4e8:#1A2A1F;
  --bg-e8932a:#E8932A;
  --bg-e8f0fb:#1B2433;
  --bg-e8f2ff:#27231F;
  --bg-e9e4da:#322D28;
  --bg-eadfce:#322D28;
  --bg-eeeeee:#27231F;
  --bg-eef3fb:#1B2433;
  --bg-eef4ff:#1E1B18;
  --bg-efe7da:#27231F;
  --bg-efeae2:#27231F;
  --bg-f1eee7:#27231F;
  --bg-f1eee9:#27231F;
  --bg-f2a53a:#F2A53A;
  --bg-f3e1de:#301B18;
  --bg-f3eee6:#27231F;
  --bg-f4efe6:#27231F;
  --bg-f4f1ea:#27231F;
  --bg-f7c88a:#3A2C1A;
  --bg-f7c9a6:#3A2C1A;
  --bg-f8f5f0:#141210;
  --bg-faf7f1:#141210;
  --bg-fafaf7:#141210;
  --bg-fbe3df:#301B18;
  --bg-fbe4e1:#301B18;
  --bg-fbf8f3-00:rgba(20,18,16,0);
  --bg-fbf8f3-92:rgba(20,18,16,.92);
  --bg-fbf8f3-94:rgba(20,18,16,.94);
  --bg-fbf8f3-96:rgba(20,18,16,.96);
  --bg-fde8e4:#301B18;
  --bg-fdebd0:#2E2417;
  --bg-fdebdc:#2E2417;
  --bg-ffe08a:#FFE08A;
  --bg-fff1da:#2E2417;
  --bg-fff1dc:#2E2417;
  --bg-fff4e0:#2E2417;
  --bg-fff4e2:#2E2417;
  --bg-fff6e0:#2E2417;
  --bg-fff6e8:#2E2417;
  --bg-fffbf3:#141210;
  --bg-ffffff:#1E1B18;
  --bg-ffffff-08:rgba(255,255,255,0.04);
  --bg-ffffff-12:rgba(255,255,255,0.06);
  --bg-ffffff-16:rgba(255,255,255,0.08);
  --bg-ffffff-22:rgba(255,255,255,0.11);
  --bg-ffffff-35:rgba(255,255,255,0.175);
  --bg-ffffff-55:rgba(255,255,255,0.275);
  --bg-ffffff-92:rgba(30,27,24,0.92);
  --bg-ffffff-94:rgba(30,27,24,0.94);
  --fg-111111:#F1ECE4;
  --fg-111111-ob:#111;
  --fg-141312:#F1ECE4;
  --fg-141312-ob:#141312;
  --fg-163f96:#F2A53A;
  --fg-1d4e89:#9DBBF2;
  --fg-1d7f48:#86D0A4;
  --fg-1f5fd6:#9DBBF2;
  --fg-1f6b3a:#86D0A4;
  --fg-1f6b3e:#86D0A4;
  --fg-1f7a44:#86D0A4;
  --fg-1f8a4c:#86D0A4;
  --fg-23662e:#86D0A4;
  --fg-2b2926:#DDD6CC;
  --fg-3a3832:#D3CCC2;
  --fg-3b4a6b:#CFC7BB;
  --fg-4a453f:#C9C2B7;
  --fg-5c564e:#BFB8AD;
  --fg-6b4300:#F2B866;
  --fg-6b6560:#B3ACA2;
  --fg-6b6863:#B3ACA2;
  --fg-6e470e:#F2B866;
  --fg-6e675e:#B3ACA2;
  --fg-7a4a00:#F2B866;
  --fg-8a2b22:#F2948A;
  --fg-8a5a12:#F2B866;
  --fg-8a837a:#A79F94;
  --fg-8e2a1e:#F2948A;
  --fg-8fd6a6:#8FD6A6;
  --fg-9a5b12:#F2B866;
  --fg-9b2c22:#F2948A;
  --fg-b23a2b:#F2948A;
  --fg-b26a00:#F2B866;
  --fg-b3261e:#F2948A;
  --fg-b5651d:#F2B866;
  --fg-b5711b:#F2B866;
  --fg-c8452f:#F2948A;
  --fg-c9c5bd:#C9C5BD;
  --fg-cfc9bf:#CFC9BF;
  --fg-cfcbc3:#CFCBC3;
  --fg-d93a3e:#D93A3E;
  --fg-e8e1d6:#E8E1D6;
  --fg-f0a33a:#F0A33A;
  --fg-f2a53a:#F2A53A;
  --fg-ff8a80:#FF8A80;
  --fg-ffc94a:#FFC94A;
  --fg-ffffff:#fff;
  --fg-ffffff-70:rgba(255,255,255,.7);
  --fg-ffffff-72:rgba(255,255,255,.72);
  --fg-ffffff-80:rgba(255,255,255,.8);
  --fg-ffffff-x:#141210;
  --sh-000000-12:rgba(0,0,0,0.242);
  --sh-000000-18:rgba(0,0,0,0.338);
  --sh-000000-25:rgba(0,0,0,0.45);
  --sh-000000-28:rgba(0,0,0,0.498);
  --sh-000000-30:rgba(0,0,0,0.53);
  --sh-000000-35:rgba(0,0,0,0.61);
  --sh-111111:rgba(0,0,0,0.85);
  --sh-111111-90:rgba(0,0,0,0.85);
  --sh-141312:rgba(0,0,0,0.85);
  --sh-141312-10:rgba(0,0,0,0.21);
  --sh-141312-12:rgba(0,0,0,0.242);
  --sh-141312-55:rgba(0,0,0,0.85);
  --sh-141312-60:rgba(0,0,0,0.85);
  --sh-1f8a4c-00:rgba(31,138,76,0);
  --sh-1f8a4c-60:rgba(31,138,76,0.6);
  --sh-2e7de0-22:rgba(46,125,224,0.22);
  --sh-a01e1e-28:rgba(160,30,30,0.28);
  --sh-a01e1e-45:rgba(160,30,30,0.45);
  --sh-b23a2b-18:rgba(178,58,43,0.18);
  --sh-d9cfc0:#D9CFC0;
  --sh-f2a53a:#F2A53A;
  --sh-f3d29c:#F3D29C;
  --sh-ffffff:rgba(255,255,255,.12);
  --sh-ffffff-80:rgba(255,255,255,0.18);
  --sh-ffffff-90:rgba(255,255,255,0.18);
  --ink-bg:#322D28;
  --on-ink:#141210;
  --on-sf:#141312;
  --paper:#141210;
  --card:#1E1B18;
  --off:#27231F;
  --ink:#F1ECE4;
  --soft:#CFC7BB;
  --mute:#A79F94;
  --line:rgba(255,240,220,.10);
  --line2:rgba(255,240,220,.17);
  --sf:#F2A53A;
  --sf-ink:#F2C27C;
  --sf-soft:#2E2417;
  --blue:#8DB0F0;
  --blue-soft:#1B2433;
  --green:#7CC79A;
  --green-soft:#1A2A1F;
  --red:#F08A7C;
  --sh:0 1px 2px rgba(0,0,0,.5),0 8px 24px -14px rgba(0,0,0,.8);
}
/* (no @media copy: index.html sets data-theme before the first paint, and config.json on.dark can keep the app light) */

/* ---------- hand-tuned after the contrast audit (qa/round2/t/contrast.mjs, WCAG AA) ---------- */
:root{--on-ink-soft:rgba(255,255,255,.7)}
html[data-theme="dark"]{
  --on-ink-soft:rgba(20,18,16,.72);
  --fg-d93a3e:#F2827A;            /* SOS red used as text: lighter on the dark page (the red buttons keep #D93A3E) */
}
/* product photos are packshots on white: in dark they sit on a soft light card, not as glaring white boxes on black */
html[data-theme="dark"] .fx-gal{background:#EFEAE2;border-radius:18px}
html[data-theme="dark"] .fx-gal img{background:#EFEAE2}
html[data-theme="dark"] .fx-ph{background:#EFEAE2}
html[data-theme="dark"] .fx-ph.noimg,html[data-theme="dark"] .fx-noimg{background:var(--off)}
html[data-theme="dark"] .bk-i img{background:#EFEAE2;border-radius:12px}
/* photos a touch softer on a dark screen */
html[data-theme="dark"] .ph img,html[data-theme="dark"] .wide img,html[data-theme="dark"] .hero img{filter:brightness(.92)}

/* The welcome screens are an orange brand screen in both themes: inside them every token keeps its light value.
   Same for the orange home header stage (3/11, Thalia): Woofit, his bubble and the season effects (leaves, flakes, petals) keep their light colours */
html[data-theme="dark"] #onb,html[data-theme="dark"] .hd,html[data-theme="dark"] .dogcard .hd-dog{color-scheme:light;color:var(--ink);
  --bd-000000-18:rgba(0,0,0,.18);
    --bd-000000-20:rgba(0,0,0,.2);
    --bd-111111:#111;
    --bd-111111-08:rgba(17,17,17,.08);
    --bd-141312:#141312;
    --bd-141312-08:rgba(20,19,18,.08);
    --bd-141312-12:rgba(20,19,18,.12);
    --bd-141312-14:rgba(20,19,18,.14);
    --bd-1f5fd6:#1F5FD6;
    --bd-1f8a4c:#1F8A4C;
    --bd-b23a2b:#B23A2B;
    --bd-cfc6b8:#cfc6b8;
    --bd-d93a3e:#D93A3E;
    --bd-e0d6c6:#E0D6C6;
    --bd-e4e1da:#E4E1DA;
    --bd-e6dccd:#e6dccd;
    --bd-e8b66b:#E8B66B;
    --bd-eadfce:#eadfce;
    --bd-ece9e2:#ECE9E2;
    --bd-f1e9dd:#f1e9dd;
    --bd-f2a53a:#F2A53A;
    --bd-ffffff:#fff;
    --bg-000000:#000;
    --bg-000000-00:rgba(0,0,0,0);
    --bg-000000-45:rgba(0,0,0,.45);
    --bg-000000-50:rgba(0,0,0,.5);
    --bg-000000-55:rgba(0,0,0,.55);
    --bg-000000-72:rgba(0,0,0,.72);
    --bg-111111:#111;
    --bg-111111-25:rgba(17,17,17,.25);
    --bg-111111-40:rgba(17,17,17,.4);
    --bg-111111-50:rgba(17,17,17,.5);
    --bg-111111-78:rgba(17,17,17,.78);
    --bg-111111-92-x:rgba(17,17,17,.92);
    --bg-111111-x:#111;
    --bg-141312:#141312;
    --bg-141312-00:rgba(20,19,18,0);
    --bg-141312-72:rgba(20,19,18,.72);
    --bg-141312-82:rgba(20,19,18,.82);
    --bg-141312-95:rgba(20,19,18,.95);
    --bg-141312-x:#141312;
    --bg-1f5fd6:#1F5FD6;
    --bg-1f8a4c:#1F8A4C;
    --bg-222222:#222;
    --bg-2e7de0:#2E7DE0;
    --bg-2f7a4c:#2F7A4C;
    --bg-5b8dd6:#5b8dd6;
    --bg-b23a2b:#B23A2B;
    --bg-c2412f:#C2412F;
    --bg-d6d2ca:#D6D2CA;
    --bg-d93a3e:#D93A3E;
    --bg-d9cfc0:#D9CFC0;
    --bg-d9d5cc:#D9D5CC;
    --bg-e1f1e6:#E1F1E6;
    --bg-e3ebf8:#E3EBF8;
    --bg-e3f4e8:#E3F4E8;
    --bg-e4e1da:#E4E1DA;
    --bg-e7f4e8:#E7F4E8;
    --bg-e8932a:#E8932A;
    --bg-e8f0fb:#E8F0FB;
    --bg-e8f2ff:#E8F2FF;
    --bg-e9e4da:#E9E4DA;
    --bg-eadfce:#eadfce;
    --bg-eeeeee:#eee;
    --bg-eef3fb:#EEF3FB;
    --bg-eef4ff:#EEF4FF;
    --bg-efe7da:#EFE7DA;
    --bg-efeae2:#EFEAE2;
    --bg-f1eee7:#F1EEE7;
    --bg-f1eee9:#F1EEE9;
    --bg-f2a53a:#F2A53A;
    --bg-f3e1de:#F3E1DE;
    --bg-f3eee6:#f3eee6;
    --bg-f4efe6:#F4EFE6;
    --bg-f4f1ea:#F4F1EA;
    --bg-f7c88a:#F7C88A;
    --bg-f7c9a6:#F7C9A6;
    --bg-f8f5f0:#F8F5F0;
    --bg-faf7f1:#FAF7F1;
    --bg-fafaf7:#FAFAF7;
    --bg-fbe3df:#FBE3DF;
    --bg-fbe4e1:#FBE4E1;
    --bg-fbf8f3-00:rgba(251,248,243,0);
    --bg-fbf8f3-92:rgba(251,248,243,.92);
    --bg-fbf8f3-94:rgba(251,248,243,.94);
    --bg-fbf8f3-96:rgba(251,248,243,.96);
    --bg-fde8e4:#FDE8E4;
    --bg-fdebd0:#FDEBD0;
    --bg-fdebdc:#FDEBDC;
    --bg-ffe08a:#FFE08A;
    --bg-fff1da:#FFF1DA;
    --bg-fff1dc:#FFF1DC;
    --bg-fff4e0:#fff4e0;
    --bg-fff4e2:#FFF4E2;
    --bg-fff6e0:#fff6e0;
    --bg-fff6e8:#FFF6E8;
    --bg-fffbf3:#FFFBF3;
    --bg-ffffff:#fff;
    --bg-ffffff-08:rgba(255,255,255,.08);
    --bg-ffffff-12:rgba(255,255,255,.12);
    --bg-ffffff-16:rgba(255,255,255,.16);
    --bg-ffffff-22:rgba(255,255,255,.22);
    --bg-ffffff-35:rgba(255,255,255,.35);
    --bg-ffffff-55:rgba(255,255,255,.55);
    --bg-ffffff-92:rgba(255,255,255,.92);
    --bg-ffffff-94:rgba(255,255,255,.94);
    --fg-111111:#111;
    --fg-111111-ob:#111;
    --fg-141312:#141312;
    --fg-141312-ob:#141312;
    --fg-163f96:#163F96;
    --fg-1d4e89:#1D4E89;
    --fg-1d7f48:#1d7f48;
    --fg-1f5fd6:#1F5FD6;
    --fg-1f6b3a:#1F6B3A;
    --fg-1f6b3e:#1F6B3E;
    --fg-1f7a44:#1F7A44;
    --fg-1f8a4c:#1F8A4C;
    --fg-23662e:#23662E;
    --fg-2b2926:#2b2926;
    --fg-3a3832:#3a3832;
    --fg-3b4a6b:#3b4a6b;
    --fg-4a453f:#4a453f;
    --fg-5c564e:#5c564e;
    --fg-6b4300:#6b4300;
    --fg-6b6560:#6b6560;
    --fg-6b6863:#6B6863;
    --fg-6e470e:#6E470E;
    --fg-6e675e:#6e675e;
    --fg-7a4a00:#7a4a00;
    --fg-8a2b22:#8A2B22;
    --fg-8a5a12:#8a5a12;
    --fg-8a837a:#8a837a;
    --fg-8e2a1e:#8E2A1E;
    --fg-8fd6a6:#8FD6A6;
    --fg-9a5b12:#9A5B12;
    --fg-9b2c22:#9B2C22;
    --fg-b23a2b:#B23A2B;
    --fg-b26a00:#B26A00;
    --fg-b3261e:#B3261E;
    --fg-b5651d:#B5651D;
    --fg-b5711b:#B5711B;
    --fg-c8452f:#C8452F;
    --fg-c9c5bd:#C9C5BD;
    --fg-cfc9bf:#CFC9BF;
    --fg-cfcbc3:#CFCBC3;
    --fg-d93a3e:#D93A3E;
    --fg-e8e1d6:#E8E1D6;
    --fg-f0a33a:#F0A33A;
    --fg-f2a53a:#F2A53A;
    --fg-ff8a80:#FF8A80;
    --fg-ffc94a:#FFC94A;
    --fg-ffffff:#fff;
    --fg-ffffff-70:rgba(255,255,255,.7);
    --fg-ffffff-72:rgba(255,255,255,.72);
    --fg-ffffff-80:rgba(255,255,255,.8);
    --fg-ffffff-x:#fff;
    --sh-000000-12:rgba(0,0,0,.12);
    --sh-000000-18:rgba(0,0,0,.18);
    --sh-000000-25:rgba(0,0,0,.25);
    --sh-000000-28:rgba(0,0,0,.28);
    --sh-000000-30:rgba(0,0,0,.3);
    --sh-000000-35:rgba(0,0,0,.35);
    --sh-111111:#111;
    --sh-111111-90:rgba(17,17,17,.9);
    --sh-141312:#141312;
    --sh-141312-10:rgba(20,19,18,.10);
    --sh-141312-12:rgba(20,19,18,.12);
    --sh-141312-55:rgba(20,19,18,.55);
    --sh-141312-60:rgba(20,19,18,.6);
    --sh-1f8a4c-00:rgba(31,138,76,0);
    --sh-1f8a4c-60:rgba(31,138,76,.6);
    --sh-2e7de0-22:rgba(46,125,224,.22);
    --sh-a01e1e-28:rgba(160,30,30,.28);
    --sh-a01e1e-45:rgba(160,30,30,.45);
    --sh-b23a2b-18:rgba(178,58,43,.18);
    --sh-d9cfc0:#d9cfc0;
    --sh-f2a53a:#F2A53A;
    --sh-f3d29c:#F3D29C;
    --sh-ffffff:#fff;
    --sh-ffffff-80:rgba(255,255,255,.8);
    --sh-ffffff-90:rgba(255,255,255,.9);
    --ink-bg:#111111;
    --on-ink:#FFFFFF;
    --on-sf:#141312;
  --paper:#FBF8F3;
  --card:#FFFFFF;
  --off:#F2EEE7;
  --ink:#111111;
  --soft:#4F4C47;
  --mute:#8A857D;
  --line:rgba(17,17,17,.10);
  --line2:rgba(17,17,17,.16);
  --sf:#F2A53A;
  --sf-ink:#8A5A12;
  --sf-soft:#FDEBD0;
  --blue:#163F96;
  --blue-soft:#E3EBF8;
  --green:#2F7A4C;
  --green-soft:#E1F1E6;
  --red:#B23A2B;
  --sh:0 1px 2px rgba(17,17,17,.05),0 8px 24px -14px rgba(17,17,17,.25);
  --mute:#6B665F;
}
html[data-theme="dark"] .bk-t small{color:#4A453F}
/* light theme, same audit: text colours nudged to AA (time labels, SOS links, photo credits over photos) */
html[data-theme="dark"]{--bg-000000-45:rgba(0,0,0,.65)}
.pc .dist{color:var(--fg-ffffff)}
/* map chrome from the MapLibre stylesheet (vendor, white) */
html[data-theme="dark"] .maplibregl-ctrl-attrib,html[data-theme="dark"] .maplibregl-ctrl-attrib.maplibregl-compact{background:rgba(30,27,24,.85);color:#CFC7BB}
html[data-theme="dark"] .maplibregl-ctrl-attrib a{color:#E6DFD4}
html[data-theme="dark"] .maplibregl-ctrl-attrib-button{filter:invert(1)}
html[data-theme="dark"] .maplibregl-ctrl-group{background:#1E1B18;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
html[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(.9)}

/* ===================== DARK DESIGN PASS (2/11, after Thalia's phone screenshot) =====================
   One deliberate palette instead of mechanically darkened tints:
     page #141210 · card #1E1B18 · raised #27231F · strong #322D28 · lines rgba(255,240,220,.10/.17)
     text #F1ECE4 / #CFC7BB / #A79F94
     brand  orange #F2A53A, its one tint #2E2417 (icon tiles, highlights), orange text #F2B866
     alerts red #D93A3E (buttons), tint #301B18, text #F2948A
     open / available green tint #1A2A1F, text #86D0A4
     info / link blue only: tint #1B2433, text #9DBBF2
   Light mode is untouched: everything below is scoped to html[data-theme="dark"]. */

/* Home icon row: ONE family in dark (they were brown / grey / brown / navy). Same warm tile, brand-orange icon. */
html[data-theme="dark"] .hx-ic,html[data-theme="dark"] .hx-i.dk .hx-ic,html[data-theme="dark"] .hx-i.gr .hx-ic{background:#2E2417;color:#F2A53A;box-shadow:inset 0 0 0 1px rgba(242,165,58,.16)}
html[data-theme="dark"] .hx-i:focus-visible .hx-ic{box-shadow:0 0 0 3px var(--paper),0 0 0 5px #F2A53A}
html[data-theme="dark"] .fx-mh-i{background:#2E2417;color:#F2A53A}

/* «Ink» emphasis cards (black in light). In dark they were inverted to big cream boxes; now a raised dark card with a fine line.
   Small pressed chips / buttons keep the cream «pressed» look. */
html[data-theme="dark"] :is(.sw-card,.sw-alert,.ferry-card,.tile.dk,.tripcard,.fd-prod,.ad-org,.al-web,.ht,.day-live){
  --bg-141312-x:#2A2520;--fg-ffffff-x:#F1ECE4;--on-ink:#F1ECE4;--on-ink-soft:rgba(241,236,228,.72);
  background:#2A2520;color:#F1ECE4;box-shadow:inset 0 0 0 1px rgba(255,240,220,.12)}
html[data-theme="dark"] .ad-org .btn,html[data-theme="dark"] .ferry-card .btn,html[data-theme="dark"] .al-web .btn{background:#F1ECE4;color:#141210}
/* the floating basket bar: a raised dark bar (was a cream slab over the content) */
html[data-theme="dark"] .bk-bar{background:#322D28;color:#F1ECE4;box-shadow:inset 0 0 0 1px rgba(255,240,220,.14),0 14px 30px -10px rgba(0,0,0,.8)}
html[data-theme="dark"] .bk-bar small,html[data-theme="dark"] .bk-bar span{color:#CFC7BB}
html[data-theme="dark"] .bk-bar b{color:#F1ECE4}

/* Partner card (Barkibu / sample): was a navy box with a blue button. A card of the app's own family, the partner's name
   and the «advertising» label stay clear. */
html[data-theme="dark"] .pcard{background:#1E1B18;border-color:rgba(255,240,220,.17)}
html[data-theme="dark"] .pcard .pk{color:#A79F94}
html[data-theme="dark"] .pcard .pk-n{color:#F2B866}
html[data-theme="dark"] .pcard p{color:#CFC7BB}
html[data-theme="dark"] .pcard .pbtn{background:#F1ECE4;color:#141210}

/* «Μπήκε στο καλάθι» (green, done): white text on a deeper green (4.27:1 before) */
html[data-theme="dark"] .fx-add.done{background:#1B7A43;color:#fff}
/* carousel / step dots: the active one is the light one */
html[data-theme="dark"] :is(.fx-dots,.fp-dots) i.on,html[data-theme="dark"] .fy-dots i.ok{background:#F1ECE4}
/* poison badge on a Pet Alert card: a dark chip with the orange warning (was dark on dark) */
html[data-theme="dark"] .al-card .kd.poison{background:#3A2C1A;color:#F2B866}

/* Woofit illustrations: line drawings with black outlines vanish on a dark page. In dark they use their dark-mode drawing
   (cream lines, dark fur: img/woofit-*-d.svg, made by app_build.py from the same files). Swapped with CSS content, so no JS. */
html[data-theme="dark"] img[src$="img/woofit-ball.svg"]{content:url(img/woofit-ball-d.svg)}
html[data-theme="dark"] img[src$="img/woofit-face.svg"]{content:url(img/woofit-face-d.svg)}
html[data-theme="dark"] img[src$="img/woofit-hi.svg"]{content:url(img/woofit-hi-d.svg)}
html[data-theme="dark"] img[src$="img/woofit-love.svg"]{content:url(img/woofit-love-d.svg)}
html[data-theme="dark"] img[src$="img/woofit-paw.svg"]{content:url(img/woofit-paw-d.svg)}
html[data-theme="dark"] img[src$="img/woofit-pin.svg"]{content:url(img/woofit-pin-d.svg)}
html[data-theme="dark"] img[src$="img/woofit-run.svg"]{content:url(img/woofit-run-d.svg)}
html[data-theme="dark"] img[src$="img/woofit-sleep.svg"]{content:url(img/woofit-sleep-d.svg)}
html[data-theme="dark"] img[src$="img/woofit-travel.svg"]{content:url(img/woofit-travel-d.svg)}
/* on the orange brand surfaces (dog card, welcome screens, story card) the light drawing stays */
html[data-theme="dark"] :is(.dogcard,#onb,.sw-cardwrap,.hero,.hd) img[src*="img/woofit-"]{content:normal}
/* product / photo placeholders: the 🐾 emoji (blue in some emoji fonts) becomes a soft brand-orange paw, so the empty tile looks meant */
html[data-theme="dark"] :is(.fx-ph.noimg,.fd-img.noimg)::after,html[data-theme="dark"] :is(.bk-noimg,.fx-noimg){color:transparent;text-shadow:0 0 0 rgba(242,165,58,.7)}
html[data-theme="dark"] :is(.fd-img.noimg,.bk-noimg){background:#27231F}