/* Demo-scoped port of LilySalesDemo.html design system.
   :root tokens + @font-face are global; all other rules scoped to .lily-demo-ref so the SPA-shell rules cannot break Phoenix layout. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-e6397c2c-d6e7-4222-b295-7141a7cd4f39.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-55a9c633-6ff4-483a-aed4-82471d90b693.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-723f68f8-a977-4698-91d9-0d6114fd971f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-ada6e82c-7119-4dbd-a20b-429e9c7ec59b.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: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-e6397c2c-d6e7-4222-b295-7141a7cd4f39.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-55a9c633-6ff4-483a-aed4-82471d90b693.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-723f68f8-a977-4698-91d9-0d6114fd971f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-ada6e82c-7119-4dbd-a20b-429e9c7ec59b.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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-1abd3cb7-26a2-4990-b885-1846d0b03e11.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-f0bc09f7-6aaa-4b62-8187-44023ddde762.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-e6ee6a9e-1d70-4db6-9c40-3f83c1d722f0.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: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-1abd3cb7-26a2-4990-b885-1846d0b03e11.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-f0bc09f7-6aaa-4b62-8187-44023ddde762.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-e6ee6a9e-1d70-4db6-9c40-3f83c1d722f0.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: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ref-1abd3cb7-26a2-4990-b885-1846d0b03e11.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ref-f0bc09f7-6aaa-4b62-8187-44023ddde762.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ref-e6ee6a9e-1d70-4db6-9c40-3f83c1d722f0.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-305797e9-84fc-4327-9452-07bbbb961c5f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-81bbd9cd-3fef-46c8-b757-743c7b8518ca.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-da8570da-beb0-42cb-8415-707a266a78f1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-55a4a7bf-b00b-46bb-8035-6689ec2d3d71.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-e8e60a6b-5472-4160-a83e-64b9d06978da.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-9caa1d8c-acda-4351-8f17-5f6f763044aa.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-cf297363-a55f-4629-bc5a-65aa6b0a9461.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-55e72be7-36cb-4e78-81c9-a7d70f8d6a2b.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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-e8e60a6b-5472-4160-a83e-64b9d06978da.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-9caa1d8c-acda-4351-8f17-5f6f763044aa.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-cf297363-a55f-4629-bc5a-65aa6b0a9461.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-55e72be7-36cb-4e78-81c9-a7d70f8d6a2b.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-e8e60a6b-5472-4160-a83e-64b9d06978da.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-9caa1d8c-acda-4351-8f17-5f6f763044aa.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-cf297363-a55f-4629-bc5a-65aa6b0a9461.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-55e72be7-36cb-4e78-81c9-a7d70f8d6a2b.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: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-8f07a6de-62b4-40ad-ace3-4d4405b17f2c.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-8e209607-f7ac-4b65-8771-a161787fee0d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-c8f1b5b5-5e98-4498-b6e0-61d88a6638e6.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-96493416-8cf1-4720-b385-ee63cd096a42.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-a722104b-1df7-4ef6-9392-8853ed68c0fe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-a8797442-088a-4dcb-a5f1-00b5e0887b7f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-89dec1e5-cc36-45f7-a2ec-69faa09c49ab.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: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-8f07a6de-62b4-40ad-ace3-4d4405b17f2c.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-8e209607-f7ac-4b65-8771-a161787fee0d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-c8f1b5b5-5e98-4498-b6e0-61d88a6638e6.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-96493416-8cf1-4720-b385-ee63cd096a42.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-a722104b-1df7-4ef6-9392-8853ed68c0fe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-a8797442-088a-4dcb-a5f1-00b5e0887b7f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-89dec1e5-cc36-45f7-a2ec-69faa09c49ab.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-992203f1-c19e-4ade-be9e-4effebf75de0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-88982ff3-76f0-4c20-9ae9-824fd6332249.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ref-9e8e028f-ea63-48ff-8683-a1cf61217870.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-992203f1-c19e-4ade-be9e-4effebf75de0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-88982ff3-76f0-4c20-9ae9-824fd6332249.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ref-9e8e028f-ea63-48ff-8683-a1cf61217870.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-992203f1-c19e-4ade-be9e-4effebf75de0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-88982ff3-76f0-4c20-9ae9-824fd6332249.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ref-9e8e028f-ea63-48ff-8683-a1cf61217870.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ref-992203f1-c19e-4ade-be9e-4effebf75de0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ref-88982ff3-76f0-4c20-9ae9-824fd6332249.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ref-9e8e028f-ea63-48ff-8683-a1cf61217870.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;
}
:root{
  /* Base */
  --background: 43 30% 94%;
  --foreground: 145 60% 20%;

  /* Surfaces */
  --card: 43 28% 96%;
  --card-foreground: 145 60% 20%;
  --popover: 43 30% 98%;

  /* Primary — Deep Forest Green */
  --primary: 145 60% 26%;
  --primary-foreground: 43 30% 94%;
  --primary-hover: 145 55% 30%;
  --primary-active: 145 65% 22%;

  /* Secondary — Teal Green */
  --secondary: 165 45% 35%;
  --secondary-foreground: 0 0% 100%;
  --secondary-hover: 165 50% 30%;

  /* Accent — Warm Peach */
  --accent: 35 80% 70%;
  --accent-foreground: 145 60% 20%;
  --accent-hover: 35 75% 65%;

  /* Semantic emotional */
  --calm: 165 35% 55%;
  --energized: 45 85% 65%;
  --reflective: 280 35% 55%;
  --hopeful: 140 55% 45%;

  /* Brand green petals */
  --lily-green-dark: 145 70% 28%;
  --lily-green-medium: 140 55% 40%;
  --lily-green-light: 95 55% 50%;
  --lily-sage: 150 20% 60%;

  /* Functional */
  --muted: 43 20% 90%;
  --muted-foreground: 145 15% 45%;
  --destructive: 0 65% 55%;
  --success: 145 55% 35%;
  --warning: 40 90% 55%;
  --info: 200 70% 50%;

  /* UI */
  --border: 145 10% 85%;
  --input: 40 25% 96%;
  --ring: 175 60% 40%;

  /* Elevated surfaces */
  --elevated-1: 40 30% 99%;
  --elevated-2: 40 25% 97%;
  --elevated-3: 40 20% 95%;

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(31, 46, 42, 0.06), 0 1px 2px -1px rgba(31, 46, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(31, 46, 42, 0.08), 0 2px 4px -2px rgba(31, 46, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(31, 46, 42, 0.1), 0 4px 6px -4px rgba(31, 46, 42, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(31, 46, 42, 0.12), 0 8px 10px -6px rgba(31, 46, 42, 0.08);
  --shadow-teal: 0 4px 14px -3px rgba(13, 93, 94, 0.25);

  /* Radii */
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Type */
  --font-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-brand: 'Playfair Display', Georgia, serif;
  --font-wordmark: 'Jost', sans-serif;
  --font-accent: 'Caveat', cursive;
  --font-mono: 'Source Code Pro', ui-monospace, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
}
*, *::before, *::after{ box-sizing: border-box; }
html, .lily-demo-ref{
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.lily-demo-ref h1, .lily-demo-ref h2, .lily-demo-ref h3, .lily-demo-ref h4, .lily-demo-ref h5{
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
  margin: 0;
}
.lily-demo-ref h1{ font-size: 44px; line-height: 1.08; letter-spacing: -0.025em; }
.lily-demo-ref h2{ font-size: 30px; line-height: 1.15; }
.lily-demo-ref h3{ font-size: 22px; line-height: 1.22; }
.lily-demo-ref h4{ font-size: 18px; line-height: 1.3; }
.lily-demo-ref em{ font-style: italic; color: hsl(var(--primary)); }
.lily-demo-ref p{ margin: 0.6em 0; max-width: 68ch; }
.lily-demo-ref a{ color: hsl(var(--primary)); text-decoration: none; border-bottom: 1px solid hsla(145, 60%, 26%, 0.25); }
.lily-demo-ref a:hover{ border-bottom-color: hsl(var(--primary)); }
.lily-demo-ref code{
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: hsl(var(--muted));
  padding: 1px 5px;
  border-radius: 3px;
  color: hsl(var(--primary));
}
.lily-demo-ref .lily-card{
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.lily-demo-ref .page-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid hsl(var(--border));
}
.lily-demo-ref .page-head h1{
  font-size: 28px;
  font-family: var(--font-heading);
  font-weight: 500;
}
.lily-demo-ref .page-head .eyebrow{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 4px;
}
.lily-demo-ref .chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.lily-demo-ref .chip-sm{ font-size: 10px; padding: 2px 8px; }
.lily-demo-ref .chip-default{ background: hsla(145, 20%, 80%, 0.3); color: hsl(var(--primary)); }
.lily-demo-ref .chip-teal{ background: hsla(165, 45%, 55%, 0.18); color: hsl(165, 50%, 28%); }
.lily-demo-ref .chip-peach{ background: hsla(35, 80%, 70%, 0.28); color: hsl(30, 60%, 35%); }
.lily-demo-ref .chip-purple{ background: hsla(280, 35%, 70%, 0.2); color: hsl(280, 40%, 40%); }
.lily-demo-ref .chip-danger{ background: hsla(0, 65%, 55%, 0.12); color: hsl(var(--destructive)); }
.lily-demo-ref .chip-success{ background: hsla(145, 55%, 35%, 0.15); color: hsl(var(--primary)); }
.lily-demo-ref .chip-warning{ background: hsla(40, 90%, 55%, 0.2); color: hsl(30, 70%, 35%); }
.lily-demo-ref .stat-tile{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lily-demo-ref .stat-num{
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 500;
  color: hsl(var(--primary));
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lily-demo-ref .stat-label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.lily-demo-ref .lily-avatar{ position: relative; flex-shrink: 0; border-radius: 999px; overflow: hidden; display: inline-block; }
.lily-demo-ref .lily-avatar-sm{ width: 24px; height: 24px; font-size: 10px; }
.lily-demo-ref .lily-avatar-md{ width: 36px; height: 36px; font-size: 12px; }
.lily-demo-ref .lily-avatar-lg{ width: 56px; height: 56px; font-size: 16px; }
.lily-demo-ref .lily-avatar-xl{ width: 80px; height: 80px; font-size: 20px; }
.lily-demo-ref .lily-sidebar{
  width: 240px;
  background: hsl(var(--elevated-1));
  border-right: 1px solid hsl(var(--border));
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lily-demo-ref .lily-sidebar-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: transparent;
  width: 100%;
  text-align: left;
}
.lily-demo-ref .lily-sidebar-item:hover{ background: hsla(145, 20%, 80%, 0.2); color: hsl(var(--foreground)); }
.lily-demo-ref .lily-sidebar-item.active{ background: hsla(145, 60%, 26%, 0.1); color: hsl(var(--primary)); }
.lily-demo-ref .lily-sidebar-item svg{ width: 16px; height: 16px; flex-shrink: 0; }
.lily-demo-ref .lily-bubble{ padding: 10px 14px; border-radius: 16px; max-width: 70%; font-size: 14px; line-height: 1.45; }
.lily-demo-ref .lily-bubble-me{ background: hsl(var(--primary)); color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.lily-demo-ref .lily-bubble-them{ background: hsl(var(--muted)); color: hsl(var(--foreground)); border-bottom-left-radius: 4px; }
.lily-demo-ref .btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  text-decoration: none;
  line-height: 1.2;
}
.lily-demo-ref .btn:active{ transform: translateY(1px); }
.lily-demo-ref .btn-primary{ background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.lily-demo-ref .btn-primary:hover{ background: hsl(var(--primary-hover)); }
.lily-demo-ref .btn-secondary{ background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.lily-demo-ref .btn-outline{ background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.lily-demo-ref .btn-outline:hover{ background: hsl(var(--muted)); }
.lily-demo-ref .btn-ghost{ background: transparent; color: hsl(var(--muted-foreground)); }
.lily-demo-ref .btn-ghost:hover{ color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.lily-demo-ref .btn-danger{ background: hsl(var(--destructive)); color: white; }
.lily-demo-ref .btn-sm{ padding: 6px 12px; font-size: 12px; }
.lily-demo-ref .btn-lg{ padding: 12px 22px; font-size: 15px; }
.lily-demo-ref .input, .lily-demo-ref .textarea, .lily-demo-ref .select{
  width: 100%;
  background: hsl(var(--input));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: hsl(var(--foreground));
  transition: border-color 0.15s;
}
.lily-demo-ref .input:focus, .lily-demo-ref .textarea:focus, .lily-demo-ref .select:focus{
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}
.lily-demo-ref .textarea{ min-height: 100px; resize: vertical; }
.lily-demo-ref .label{ font-size: 12px; font-weight: 600; color: hsl(var(--foreground)); display: block; margin-bottom: 4px; }
.lily-demo-ref .help{ font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 3px; }
.lily-demo-ref .lily-toast{ display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid; font-size: 13px; }
.lily-demo-ref .lily-toast-success{ background: hsla(145, 55%, 35%, 0.1);  border-color: hsla(145, 55%, 35%, 0.3); color: hsl(var(--primary)); }
.lily-demo-ref .lily-toast-error{ background: hsla(0, 65%, 55%, 0.1);    border-color: hsla(0, 65%, 55%, 0.3);   color: hsl(var(--destructive)); }
.lily-demo-ref .lily-toast-warning{ background: hsla(40, 90%, 55%, 0.1);   border-color: hsla(40, 90%, 55%, 0.3);  color: hsl(30, 70%, 35%); }
.lily-demo-ref .lily-toast-info{ background: hsla(200, 70%, 50%, 0.1);  border-color: hsla(200, 70%, 50%, 0.3); color: hsl(200, 60%, 35%); }
.lily-demo-ref .lily-progress-track{ height: 8px; border-radius: var(--radius-full); background: hsl(var(--muted)); overflow: hidden; }
.lily-demo-ref .lily-progress-fill{ height: 100%; border-radius: var(--radius-full); background: hsl(var(--primary)); transition: width 0.4s; }
.lily-demo-ref .step-progress{ display: flex; align-items: center; gap: 8px; }
.lily-demo-ref .step-progress-bar{ flex: 1; height: 6px; border-radius: var(--radius-full); background: hsl(var(--muted)); }
.lily-demo-ref .step-progress-bar.done{ background: hsl(var(--primary)); }
.lily-demo-ref .step-progress-count{ font-size: 11px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.lily-demo-ref .quiz-option{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  cursor: pointer;
  transition: all 0.12s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.lily-demo-ref .quiz-option:hover{ border-color: hsl(var(--primary) / 0.4); background: hsl(var(--primary) / 0.03); }
.lily-demo-ref .quiz-option.selected{
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.08);
}
.lily-demo-ref .quiz-option-icon{
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: hsl(var(--primary) / 0.08);
  display: flex; align-items: center; justify-content: center;
}
.lily-demo-ref .quiz-option-icon svg{ width: 22px; height: 22px; color: hsl(var(--primary)); }
.lily-demo-ref .crisis-banner{
  position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: hsl(var(--destructive));
  color: white;
  border-radius: var(--radius-full);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
}
.lily-demo-ref .match-result{
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.lily-demo-ref .match-score{
  width: 72px; height: 72px;
  border-radius: 50%;
  background: conic-gradient(hsl(var(--primary)) calc(var(--score, 0) * 1%), hsl(var(--muted)) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.lily-demo-ref .match-score::after{
  content: '';
  position: absolute;
  inset: 5px;
  background: hsl(var(--card));
  border-radius: 50%;
}
.lily-demo-ref .match-score span{
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: hsl(var(--primary));
}
.lily-demo-ref .divider{ height: 1px; background: hsl(var(--border)); border: none; margin: 16px 0; }
.lily-demo-ref .muted{ color: hsl(var(--muted-foreground)); }
.lily-demo-ref .mono{ font-family: var(--font-mono); }
html, .lily-demo-ref{ height: 100%; }
.lily-demo-ref{
  font-family: var(--font-body);
  background: hsl(43 30% 96%);
  color: hsl(var(--foreground));
  
}
.lily-demo-ref .demo-bar{
  position: fixed; top: 0; left: 0; right: 0;
  height: 44px;
  background: linear-gradient(180deg, hsl(145 60% 16%), hsl(145 60% 12%));
  color: hsla(43, 30%, 96%, 0.92);
  display: flex; align-items: center;
  padding: 0 14px 0 16px;
  gap: 14px;
  font-size: 12px;
  z-index: 100;
  border-bottom: 1px solid hsla(43, 30%, 96%, 0.08);
}
.lily-demo-ref .demo-brand{ display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: 0.02em; font-family: var(--font-wordmark); }
.lily-demo-ref .demo-brand .pill{ font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: hsla(35, 80%, 70%, 0.25); color: hsl(35, 90%, 80%); border: 1px solid hsla(35, 80%, 70%, 0.4); }
.lily-demo-ref .demo-bar .sep{ width: 1px; height: 18px; background: hsla(43, 30%, 96%, 0.15); }
.lily-demo-ref .demo-bar .scenario{ display: flex; align-items: center; gap: 6px; opacity: 0.7; font-family: var(--font-mono); font-size: 11px; }
.lily-demo-ref .demo-bar .scenario b{ color: hsl(35, 80%, 75%); font-weight: 600; }
.lily-demo-ref .demo-bar .right{ margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lily-demo-ref .demo-bar button{ background: transparent; border: 1px solid hsla(43, 30%, 96%, 0.15); color: hsla(43, 30%, 96%, 0.85); padding: 5px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; font-family: var(--font-body); display: inline-flex; align-items: center; gap: 5px; }
.lily-demo-ref .demo-bar button:hover{ background: hsla(43, 30%, 96%, 0.08); color: hsla(43, 30%, 96%, 1); }
.lily-demo-ref .demo-bar button.active{ background: hsla(35, 80%, 70%, 0.18); border-color: hsla(35, 80%, 70%, 0.45); color: hsl(35, 80%, 78%); }
.lily-demo-ref .persona-switch{ display: flex; gap: 4px; padding: 3px; background: hsla(43, 30%, 96%, 0.06); border-radius: 8px; }
.lily-demo-ref .persona-switch button{ border: 1px solid transparent; padding: 5px 10px; }
.lily-demo-ref .persona-switch button.active{ background: hsla(43, 30%, 96%, 0.12); border-color: hsla(43, 30%, 96%, 0.18); color: white; }
.lily-demo-ref .persona-switch .dot{ width: 7px; height: 7px; border-radius: 50%; }
.lily-demo-ref .persona-switch .dot.client{ background: hsl(35, 80%, 65%); }
.lily-demo-ref .persona-switch .dot.practitioner{ background: hsl(165, 50%, 55%); }
.lily-demo-ref .persona-switch .dot.org{ background: hsl(40, 90%, 60%); }
.lily-demo-ref .persona-switch .dot.admin{ background: hsl(280, 35%, 65%); }
.lily-demo-ref .persona-switch .dot.public{ background: hsl(145, 30%, 70%); }
.lily-demo-ref .app-shell{ position: fixed; inset: 44px 0 0 0; display: flex; background: hsl(43 30% 96%); }
.lily-demo-ref .sidebar{
  width: 240px;
  flex-shrink: 0;
  background: hsl(43 30% 99%);
  border-right: 1px solid hsl(var(--border));
  padding: 14px 10px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.lily-demo-ref .sb-brand{ display: flex; align-items: center; gap: 8px; padding: 6px 10px 16px; }
.lily-demo-ref .sb-brand img{ height: 26px; }
.lily-demo-ref .sb-section{ font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: 14px 10px 6px; }
.lily-demo-ref .sb-item{ display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: hsl(145 25% 30%); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; }
.lily-demo-ref .sb-item:hover{ background: hsla(145, 20%, 80%, 0.18); }
.lily-demo-ref .sb-item.active{ background: hsla(145, 60%, 26%, 0.1); color: hsl(var(--primary)); }
.lily-demo-ref .sb-item .ic{ width: 18px; height: 18px; display: inline-flex; }
.lily-demo-ref .sb-item .ic svg{ width: 16px; height: 16px; }
.lily-demo-ref .sb-item .badge{ margin-left: auto; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.lily-demo-ref .sb-foot{ margin-top: auto; padding-top: 10px; border-top: 1px solid hsl(var(--border)); }
.lily-demo-ref .sb-user{ display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.lily-demo-ref .sb-user .avatar{ width: 30px; height: 30px; border-radius: 50%; background: hsl(var(--primary)); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.lily-demo-ref .sb-user .info{ flex: 1; min-width: 0; }
.lily-demo-ref .sb-user .name{ font-size: 12px; font-weight: 600; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lily-demo-ref .sb-user .role{ font-size: 10px; color: hsl(var(--muted-foreground)); }
.lily-demo-ref .main{ flex: 1; overflow: auto; }
.lily-demo-ref .page{ max-width: 1320px; margin: 0 auto; padding: 28px 36px 80px; }
.lily-demo-ref .page-narrow{ max-width: 920px; }
.lily-demo-ref .page-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.lily-demo-ref .page-head .eyebrow{ font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 6px; }
.lily-demo-ref .page-head h1{ font-family: var(--font-heading); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.lily-demo-ref .page-head h1 em{ font-style: italic; color: hsl(var(--primary)); }
.lily-demo-ref .page-head .sub{ font-size: 14px; color: hsl(var(--muted-foreground)); margin-top: 6px; max-width: 60ch; }
.lily-demo-ref .glass{
  background: hsla(43, 30%, 99%, 0.7);
  backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid hsla(145, 15%, 80%, 0.45);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(31,46,42,0.04), 0 8px 24px -12px rgba(31,46,42,0.08);
}
.lily-demo-ref .card{
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.lily-demo-ref .card.tone-peach{ background: linear-gradient(180deg, hsla(35, 80%, 70%, 0.12), hsl(var(--card))); border-color: hsla(35, 80%, 60%, 0.35); }
.lily-demo-ref .card.tone-sage{ background: linear-gradient(180deg, hsla(165, 45%, 55%, 0.10), hsl(var(--card))); border-color: hsla(165, 45%, 55%, 0.3); }
.lily-demo-ref .card.tone-amber{ background: linear-gradient(180deg, hsla(40, 90%, 70%, 0.12), hsl(var(--card))); border-color: hsla(40, 90%, 60%, 0.35); }
.lily-demo-ref .card.tone-forest{ background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.lily-demo-ref .card.tone-forest h2, .lily-demo-ref .card.tone-forest h3, .lily-demo-ref .card.tone-forest h4{ color: inherit; }
.lily-demo-ref .card.tone-forest .muted{ color: hsla(43, 30%, 96%, 0.7); }
.lily-demo-ref .card.elev{ box-shadow: var(--shadow-md); }
.lily-demo-ref .eyebrow{ font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.lily-demo-ref .muted{ color: hsl(var(--muted-foreground)); }
.lily-demo-ref .italic{ font-style: italic; }
.lily-demo-ref .italic-accent{ font-family: var(--font-heading); font-style: italic; color: hsl(var(--primary)); }
.lily-demo-ref .handwritten{ font-family: var(--font-accent); color: hsl(var(--primary)); }
.lily-demo-ref .mono{ font-family: var(--font-mono); font-size: 0.86em; }
.lily-demo-ref .xs{ font-size: 11px; }
.lily-demo-ref .sm{ font-size: 12px; }
.lily-demo-ref .text-accent{ color: hsl(35 70% 40%); }
.lily-demo-ref .text-success{ color: hsl(var(--success)); }
.lily-demo-ref .text-danger{ color: hsl(var(--destructive)); }
.lily-demo-ref .text-warning{ color: hsl(40 70% 35%); }
.lily-demo-ref .text-secondary{ color: hsl(var(--secondary)); }
.lily-demo-ref .row{ display: flex; align-items: center; }
.lily-demo-ref .col{ display: flex; flex-direction: column; }
.lily-demo-ref .spread{ display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lily-demo-ref .gap-2{ gap: 8px; }
.lily-demo-ref .gap-3{ gap: 12px; }
.lily-demo-ref .gap-4{ gap: 16px; }
.lily-demo-ref .gap-5{ gap: 20px; }
.lily-demo-ref .gap-6{ gap: 24px; }
.lily-demo-ref .mt-1{ margin-top: 4px; }
.lily-demo-ref .mt-2{ margin-top: 8px; }
.lily-demo-ref .mt-3{ margin-top: 12px; }
.lily-demo-ref .mt-4{ margin-top: 16px; }
.lily-demo-ref .mt-5{ margin-top: 20px; }
.lily-demo-ref .mt-6{ margin-top: 24px; }
.lily-demo-ref .mt-8{ margin-top: 32px; }
.lily-demo-ref .mb-2{ margin-bottom: 8px; }
.lily-demo-ref .mb-3{ margin-bottom: 12px; }
.lily-demo-ref .mb-4{ margin-bottom: 16px; }
.lily-demo-ref .flex-1{ flex: 1; }
.lily-demo-ref .grid{ display: grid; }
.lily-demo-ref .grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lily-demo-ref .grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lily-demo-ref .grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lily-demo-ref .grid-5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lily-demo-ref .chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.lily-demo-ref .chip-default{ background: hsla(145, 20%, 80%, 0.3); color: hsl(var(--primary)); }
.lily-demo-ref .chip-teal{ background: hsla(165, 45%, 55%, 0.18); color: hsl(165, 50%, 28%); }
.lily-demo-ref .chip-peach{ background: hsla(35, 80%, 70%, 0.28); color: hsl(30, 60%, 35%); }
.lily-demo-ref .chip-purple{ background: hsla(280, 35%, 70%, 0.2); color: hsl(280, 40%, 40%); }
.lily-demo-ref .chip-danger{ background: hsla(0, 65%, 55%, 0.12); color: hsl(var(--destructive)); }
.lily-demo-ref .chip-success{ background: hsla(145, 55%, 35%, 0.15); color: hsl(var(--success)); }
.lily-demo-ref .chip-warning{ background: hsla(40, 90%, 55%, 0.2); color: hsl(30, 70%, 35%); }
.lily-demo-ref .chip-outline{ background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.lily-demo-ref .chip-amber{ background: hsla(40, 90%, 55%, 0.2); color: hsl(30, 70%, 35%); }
.lily-demo-ref .btn{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 500; border: 1px solid transparent; cursor: pointer; line-height: 1.2; transition: background 0.12s, transform 0.06s, border 0.12s; text-decoration: none; }
.lily-demo-ref .btn:active{ transform: translateY(1px); }
.lily-demo-ref .btn-primary{ background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.lily-demo-ref .btn-primary:hover{ background: hsl(var(--primary-hover)); }
.lily-demo-ref .btn-secondary{ background: hsl(var(--secondary)); color: white; }
.lily-demo-ref .btn-accent{ background: hsl(var(--accent)); color: hsl(30, 60%, 25%); }
.lily-demo-ref .btn-outline{ background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.lily-demo-ref .btn-outline:hover{ background: hsla(145, 60%, 26%, 0.05); border-color: hsl(var(--primary)); }
.lily-demo-ref .btn-ghost{ background: transparent; color: hsl(var(--muted-foreground)); }
.lily-demo-ref .btn-ghost:hover{ color: hsl(var(--foreground)); background: hsla(145, 20%, 80%, 0.2); }
.lily-demo-ref .btn-danger{ background: hsl(var(--destructive)); color: white; }
.lily-demo-ref .btn-sm{ padding: 5px 10px; font-size: 12px; }
.lily-demo-ref .btn-lg{ padding: 11px 22px; font-size: 14px; }
.lily-demo-ref .btn-icon{ padding: 6px; }
.lily-demo-ref .btn-block{ width: 100%; justify-content: center; }
.lily-demo-ref .input, .lily-demo-ref .textarea, .lily-demo-ref .select{
  width: 100%; background: hsl(40 25% 98%); border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 9px 12px; font-family: var(--font-body); font-size: 13px; color: hsl(var(--foreground)); transition: border-color 0.12s;
}
.lily-demo-ref .input:focus, .lily-demo-ref .textarea:focus, .lily-demo-ref .select:focus{ outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsla(175, 60%, 40%, 0.15); }
.lily-demo-ref .textarea{ min-height: 100px; resize: vertical; font-family: var(--font-body); }
.lily-demo-ref .label{ font-size: 11px; font-weight: 600; color: hsl(var(--foreground)); display: block; margin-bottom: 5px; letter-spacing: 0.02em; }
.lily-demo-ref .help{ font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.lily-demo-ref .topbar{ display: flex; align-items: center; gap: 14px; padding: 10px 24px; background: hsla(43, 30%, 99%, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); position: sticky; top: 0; z-index: 10; }
.lily-demo-ref .topbar .search{ flex: 1; max-width: 480px; position: relative; }
.lily-demo-ref .topbar .search input{ width: 100%; padding: 7px 12px 7px 32px; border-radius: 8px; background: hsl(40 25% 98%); border: 1px solid hsl(var(--border)); font-size: 13px; }
.lily-demo-ref .topbar .search svg{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.lily-demo-ref .topbar .right{ margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lily-demo-ref .orbit-wrap{ position: relative; display: inline-block; }
.lily-demo-ref .orbit-avatar{
  border-radius: 50%;
  background: hsl(var(--primary));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.02em;
  position: relative;
}
.lily-demo-ref .orbit-avatar.peach{ background: linear-gradient(135deg, hsl(35, 80%, 75%), hsl(20, 70%, 60%)); color: hsl(30, 60%, 22%); }
.lily-demo-ref .orbit-avatar.sage{ background: linear-gradient(135deg, hsl(165, 45%, 55%), hsl(165, 45%, 35%)); color: white; }
.lily-demo-ref .orbit-avatar.teal{ background: linear-gradient(135deg, hsl(175, 50%, 55%), hsl(175, 60%, 35%)); color: white; }
.lily-demo-ref .orbit-avatar.amber{ background: linear-gradient(135deg, hsl(40, 90%, 70%), hsl(35, 70%, 50%)); color: hsl(30, 60%, 22%); }
.lily-demo-ref .orbit-avatar.lavender{ background: linear-gradient(135deg, hsl(280, 50%, 80%), hsl(280, 35%, 55%)); color: white; }
.lily-demo-ref .orbit-avatar.forest{ background: linear-gradient(135deg, hsl(145, 60%, 35%), hsl(145, 70%, 22%)); color: white; }
.lily-demo-ref .orbit-badges{ position: absolute; inset: 0; pointer-events: none; }
.lily-demo-ref .orbit-badge{
  position: absolute; top: 50%; left: 50%;
  background: white;
  border: 1.5px solid hsl(var(--border));
  border-radius: 999px;
  height: 22px; min-width: 22px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px;
  font-size: 10px; font-weight: 600;
  color: hsl(var(--primary));
  pointer-events: auto;
  white-space: nowrap;
  transition: all 0.18s ease-out;
  box-shadow: 0 1px 4px rgba(31,46,42,0.1);
  transform-origin: center;
}
.lily-demo-ref .orbit-badge .lbl{ display: none; }
.lily-demo-ref .orbit-badge:hover{ padding: 0 9px; }
.lily-demo-ref .orbit-badge:hover .lbl{ display: inline; }
.lily-demo-ref .orbit-badge svg{ width: 12px; height: 12px; flex-shrink: 0; }
.lily-demo-ref .orbit-badge.tone-rose{ color: hsl(355, 65%, 45%); border-color: hsla(355, 65%, 45%, 0.3); }
.lily-demo-ref .orbit-badge.tone-terra{ color: hsl(15, 60%, 45%); border-color: hsla(15, 60%, 45%, 0.3); }
.lily-demo-ref .orbit-badge.tone-lavender{ color: hsl(280, 35%, 45%); border-color: hsla(280, 35%, 45%, 0.3); }
.lily-demo-ref .orbit-badge.tone-olive{ color: hsl(75, 45%, 30%); border-color: hsla(75, 45%, 30%, 0.3); }
.lily-demo-ref .orbit-badge.tone-sage{ color: hsl(165, 50%, 28%); border-color: hsla(165, 50%, 28%, 0.3); }
.lily-demo-ref .orbit-badge.tone-cream{ color: hsl(35, 70%, 35%); border-color: hsla(35, 70%, 50%, 0.4); }
.lily-demo-ref .orbit-badge.tone-teal{ color: hsl(175, 60%, 30%); border-color: hsla(175, 60%, 30%, 0.3); }
.lily-demo-ref .orbit-badge.tone-slate{ color: hsl(215, 25%, 35%); border-color: hsla(215, 25%, 35%, 0.3); }
.lily-demo-ref .lily-verified{ display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: hsl(var(--primary)); background: hsla(145, 60%, 26%, 0.1); padding: 2px 7px 2px 5px; border-radius: 999px; }
.lily-demo-ref .lily-verified svg{ width: 12px; height: 12px; }
.lily-demo-ref .stat{ padding: 16px 18px; }
.lily-demo-ref .stat .label{ font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 6px; }
.lily-demo-ref .stat .num{ font-family: var(--font-heading); font-size: 32px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: hsl(var(--primary)); }
.lily-demo-ref .stat .delta{ font-size: 11px; font-weight: 500; margin-top: 4px; }
.lily-demo-ref .stat .delta.up{ color: hsl(var(--success)); }
.lily-demo-ref .stat .delta.down{ color: hsl(var(--destructive)); }
.lily-demo-ref .stat .sub{ font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.lily-demo-ref .table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.lily-demo-ref .table th{ text-align: left; padding: 10px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); }
.lily-demo-ref .table td{ padding: 12px; border-bottom: 1px solid hsl(var(--border)); }
.lily-demo-ref .table tr:last-child td{ border-bottom: none; }
.lily-demo-ref .table tr:hover td{ background: hsla(145, 20%, 80%, 0.08); }
.lily-demo-ref .avatar{ display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; flex-shrink: 0; font-family: var(--font-heading); }
.lily-demo-ref .avatar-sm{ width: 26px; height: 26px; font-size: 11px; }
.lily-demo-ref .avatar-md{ width: 36px; height: 36px; font-size: 12px; }
.lily-demo-ref .avatar-lg{ width: 56px; height: 56px; font-size: 16px; }
.lily-demo-ref .avatar-xl{ width: 88px; height: 88px; font-size: 24px; }
.lily-demo-ref .divider{ height: 1px; background: hsl(var(--border)); border: none; margin: 16px 0; }
.lily-demo-ref .crisis-pill{ position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: hsl(var(--destructive)); color: white; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); cursor: pointer; border: none; }
.lily-demo-ref .crisis-pill:hover{ background: hsl(0, 65%, 48%); }
.lily-demo-ref .progress-track{ height: 6px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; }
.lily-demo-ref .progress-fill{ height: 100%; background: hsl(var(--primary)); border-radius: 999px; transition: width 0.3s; }
.lily-demo-ref .toggle{ position: relative; width: 36px; height: 20px; background: hsl(var(--muted)); border-radius: 999px; cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
.lily-demo-ref .toggle::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: left 0.15s; }
.lily-demo-ref .toggle.on{ background: hsl(var(--primary)); }
.lily-demo-ref .toggle.on::after{ left: 18px; }
.lily-demo-ref .tabs{ display: flex; gap: 2px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 18px; }
.lily-demo-ref .tabs .tab{ padding: 9px 14px; font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lily-demo-ref .tabs .tab.active{ color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }
.lily-demo-ref .tabs .tab:hover:not(.active){ color: hsl(var(--foreground)); }
.lily-demo-ref .modal-backdrop{ position: fixed; inset: 0; background: rgba(20, 30, 26, 0.45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lily-demo-ref .modal{ background: white; border-radius: 14px; max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-xl); }
.lily-demo-ref .modal-head{ padding: 18px 22px; border-bottom: 1px solid hsl(var(--border)); display: flex; justify-content: space-between; align-items: center; }
.lily-demo-ref .modal-body{ padding: 20px 22px; }
.lily-demo-ref .modal-foot{ padding: 14px 22px; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: flex-end; gap: 8px; background: hsl(43 25% 98%); }
.lily-demo-ref .ambient{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 800px 400px at 20% 0%, hsla(35, 80%, 70%, 0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 30%, hsla(165, 45%, 55%, 0.15), transparent 60%),
    radial-gradient(ellipse 900px 600px at 50% 100%, hsla(145, 60%, 26%, 0.08), transparent 65%);
}
.lily-demo-ref .placeholder-img{ background: linear-gradient(135deg, hsl(43 30% 88%), hsl(145 15% 82%)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: hsla(145, 30%, 25%, 0.4); font-size: 12px; font-weight: 500; }
.lily-demo-ref .cal-grid{ display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 1px; background: hsl(var(--border)); border-radius: 10px; overflow: hidden; }
.lily-demo-ref .cal-grid > div{ background: hsl(var(--card)); padding: 6px 8px; min-height: 40px; font-size: 11px; }
.lily-demo-ref .cal-grid > .head{ background: hsl(43 30% 99%); font-weight: 600; text-align: center; color: hsl(var(--muted-foreground)); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px; }
.lily-demo-ref .cal-event{ background: hsla(145, 60%, 26%, 0.12); border-left: 3px solid hsl(var(--primary)); border-radius: 4px; padding: 4px 6px; margin: 2px 0; font-size: 10px; line-height: 1.3; color: hsl(var(--primary)); }
.lily-demo-ref .cal-event.peach{ background: hsla(35, 80%, 70%, 0.22); border-color: hsl(35, 80%, 55%); color: hsl(30, 60%, 30%); }
.lily-demo-ref .cal-event.teal{ background: hsla(165, 45%, 55%, 0.18); border-color: hsl(165, 50%, 35%); color: hsl(165, 50%, 25%); }
.lily-demo-ref .cal-event.purple{ background: hsla(280, 35%, 65%, 0.18); border-color: hsl(280, 35%, 55%); color: hsl(280, 35%, 35%); }
.lily-demo-ref .empty{ text-align: center; padding: 40px 20px; color: hsl(var(--muted-foreground)); }
.lily-demo-ref .empty .ic{ font-size: 32px; opacity: 0.4; margin-bottom: 10px; }
.lily-demo-ref .heatmap{ display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.lily-demo-ref .heatmap > div{ aspect-ratio: 1; border-radius: 2px; background: hsl(43 20% 90%); }
.lily-demo-ref .heatmap > div.l1{ background: hsla(145, 60%, 26%, 0.18); }
.lily-demo-ref .heatmap > div.l2{ background: hsla(145, 60%, 26%, 0.36); }
.lily-demo-ref .heatmap > div.l3{ background: hsla(145, 60%, 26%, 0.6); }
.lily-demo-ref .heatmap > div.l4{ background: hsl(145, 60%, 26%); }
.lily-demo-ref .video-stage{ background: linear-gradient(135deg, hsl(145, 30%, 18%), hsl(165, 30%, 12%)); border-radius: 14px; aspect-ratio: 16/9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: white; }
.lily-demo-ref .video-self{ position: absolute; bottom: 14px; right: 14px; width: 160px; aspect-ratio: 4/3; background: hsl(145, 25%, 22%); border-radius: 8px; border: 2px solid white; display: flex; align-items: center; justify-content: center; font-size: 11px; color: hsla(255, 100%, 100%, 0.7); }
.lily-demo-ref .section-title{ font-family: var(--font-heading); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 12px; }
.lily-demo-ref .pill-nav{ display: inline-flex; gap: 2px; padding: 3px; background: hsla(145, 20%, 80%, 0.25); border-radius: 999px; }
.lily-demo-ref .pill-nav button{ background: transparent; border: none; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; }
.lily-demo-ref .pill-nav button.active{ background: white; color: hsl(var(--primary)); box-shadow: var(--shadow-sm); }
.lily-demo-ref .kv{ display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; font-size: 13px; }
.lily-demo-ref .kv > .k{ color: hsl(var(--muted-foreground)); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 2px; }
.lily-demo-ref .tag{ display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: hsla(145, 20%, 80%, 0.3); color: hsl(var(--primary)); border-radius: 4px; font-size: 11px; font-weight: 500; }
.lily-demo-ref .li-row{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); }
.lily-demo-ref .li-row:last-child{ border-bottom: none; }
.lily-demo-ref .li-row:hover{ background: hsla(145, 20%, 80%, 0.08); }
.lily-demo-ref .mini-bars{ display: flex; align-items: flex-end; gap: 3px; height: 50px; }
.lily-demo-ref .mini-bars > div{ flex: 1; background: hsla(145, 60%, 26%, 0.65); border-radius: 2px 2px 0 0; min-height: 4px; }
.lily-demo-ref svg.spark{ display: block; }
.lily-demo-ref .marketing-shell{ min-height: 100%; background: linear-gradient(180deg, hsl(43, 30%, 96%), hsl(43, 30%, 92%)); position: relative; }
.lily-demo-ref .marketing-nav{ display: flex; align-items: center; gap: 28px; padding: 18px 36px; max-width: 1320px; margin: 0 auto; }
.lily-demo-ref .marketing-nav img{ height: 28px; }
.lily-demo-ref .marketing-nav a{ color: hsl(145, 25%, 30%); font-size: 13px; border: none; font-weight: 500; }
.lily-demo-ref .marketing-hero{ max-width: 1100px; margin: 0 auto; padding: 60px 36px; text-align: center; position: relative; }
.lily-demo-ref .marketing-hero h1{ font-family: var(--font-heading); font-size: 64px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; }
.lily-demo-ref .marketing-hero h1 em{ font-style: italic; color: hsl(var(--primary)); }
.lily-demo-ref .marketing-hero .lede{ font-size: 18px; color: hsl(145, 25%, 30%); max-width: 640px; margin: 18px auto 0; line-height: 1.5; }
.lily-demo-ref .timer{ font-family: var(--font-mono); font-size: 12px; color: hsl(var(--muted-foreground)); }
.lily-demo-ref .split{ display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.lily-demo-ref .split-3{ display: grid; grid-template-columns: 240px 1fr 280px; gap: 18px; }
.lily-demo-ref .swipe-card{ background: white; border-radius: 24px; box-shadow: var(--shadow-xl); overflow: hidden; position: relative; max-width: 380px; }
.lily-demo-ref .swipe-img{ aspect-ratio: 4/5; position: relative; background: linear-gradient(135deg, hsl(35, 60%, 75%), hsl(165, 30%, 55%)); display: flex; align-items: center; justify-content: center; color: white; }
.lily-demo-ref .soap-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lily-demo-ref .soap-block{ background: hsl(43, 25%, 98%); border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 14px; }
.lily-demo-ref .soap-block h4{ font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 8px; }
.lily-demo-ref .codeblock{ background: hsl(145, 30%, 12%); color: hsl(43, 30%, 92%); border-radius: 10px; padding: 14px 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; overflow-x: auto; }
.lily-demo-ref .demo-note{ display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: hsla(35, 80%, 70%, 0.14); border: 1px dashed hsla(35, 80%, 60%, 0.5); border-radius: 8px; font-size: 12px; color: hsl(30, 50%, 28%); }
.lily-demo-ref .demo-note strong{ font-weight: 600; }
.lily-demo-ref .onb-stage{ display: grid; grid-template-columns: 380px 1fr; min-height: calc(100vh - 44px); }
.lily-demo-ref .onb-aside{ background: linear-gradient(180deg, hsl(145, 60%, 22%), hsl(145, 60%, 14%)); color: hsla(43, 30%, 96%, 0.92); padding: 40px 36px; display: flex; flex-direction: column; }
.lily-demo-ref .onb-aside h1{ color: white; font-family: var(--font-heading); font-size: 36px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.lily-demo-ref .onb-aside h1 em{ color: hsl(35, 80%, 75%); font-style: italic; }
.lily-demo-ref .onb-aside .step{ display: flex; gap: 12px; padding: 10px 0; }
.lily-demo-ref .onb-aside .step .num{ width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1px solid hsla(43, 30%, 96%, 0.3); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.lily-demo-ref .onb-aside .step.done .num{ background: hsl(35, 80%, 70%); border-color: hsl(35, 80%, 70%); color: hsl(30, 60%, 22%); }
.lily-demo-ref .onb-aside .step.active .num{ background: hsla(43, 30%, 96%, 0.18); border-color: white; color: white; }
.lily-demo-ref .onb-aside .step.todo{ opacity: 0.6; }
.lily-demo-ref .onb-main{ background: hsl(43, 30%, 98%); padding: 60px 56px; overflow-y: auto; }
.lily-demo-ref .bignum{ font-family: var(--font-heading); font-size: 56px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: hsl(var(--primary)); }
.lily-demo-ref .chat-stage{ display: grid; grid-template-rows: 1fr auto; height: 100%; }
.lily-demo-ref .chat-list{ padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.lily-demo-ref .bubble{ padding: 9px 14px; border-radius: 16px; max-width: 70%; font-size: 13px; line-height: 1.45; }
.lily-demo-ref .bubble.me{ background: hsl(var(--primary)); color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.lily-demo-ref .bubble.them{ background: hsl(43, 25%, 92%); color: hsl(var(--foreground)); border-bottom-left-radius: 4px; }
.lily-demo-ref .bubble.coach{ background: linear-gradient(135deg, hsla(165, 45%, 55%, 0.2), hsla(35, 80%, 70%, 0.2)); border: 1px solid hsla(165, 45%, 55%, 0.3); color: hsl(var(--foreground)); border-bottom-left-radius: 4px; }
.lily-demo-ref .bubble .meta{ font-size: 10px; opacity: 0.7; margin-top: 4px; }
.lily-demo-ref .status-dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lily-demo-ref .status-dot.green{ background: hsl(var(--success)); }
.lily-demo-ref .status-dot.amber{ background: hsl(var(--warning)); }
.lily-demo-ref .status-dot.red{ background: hsl(var(--destructive)); }
.lily-demo-ref .status-dot.gray{ background: hsl(var(--border)); }
.lily-demo-ref .lily-petal-bg{ position: absolute; pointer-events: none; }
.lily-demo-ref #app{ min-height: 100vh; }
.lily-demo-ref .loading{ position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: hsl(var(--muted-foreground)); font-family: var(--font-body); }
.lily-demo-ref .loading .dot-pulse{ width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--primary)); animation: pulse 1.2s infinite ease-in-out; }
@keyframes pulse { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.1); opacity: 1; } }

/* ============================================================
   PRODUCT TOUR + MOBILE APP SHOWCASE + LOGO STRIP
   Ported from lily-marketing/src/styles/marketing.css
   These are global (not scoped to .lily-demo-ref) so the
   Phoenix home page sections can use them directly.
   ============================================================ */

/* ---- Section / container helpers ---- */
.mkt-section { padding: 88px 0; }
.mkt-section.cream { background: hsl(43 28% 96%); }
.mkt-section.dark { background: hsl(145 28% 16%); color: hsl(43 30% 92%); }
.mkt-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.mkt-section-head { max-width: 720px; margin: 0 auto; text-align: center; margin-bottom: 48px; }
.mkt-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(145 15% 45%); margin-bottom: 12px; }
.mkt-section-title { font-family: var(--font-display); font-size: clamp(30px,3.6vw,46px); font-weight: 500; line-height: 1.1; color: hsl(145 60% 18%); margin: 0 0 14px; }
.mkt-section-sub { font-size: 17px; color: hsl(145 15% 42%); line-height: 1.55; margin: 0 auto; max-width: 620px; }

/* ---- Tour slideshow ---- */
.tour-slideshow { position: relative; margin-top: 8px; }
.tour-stage { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 18px; position: relative; }
.tour-track { position: relative; overflow: hidden; border-radius: 22px; min-height: 360px; }
.tour-slide { width: 100%; }
.tour-slide .tile { grid-column: unset !important; width: 100%; }
.tour-slide .tour-tile {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  align-items: stretch;
  background: hsla(43,40%,99%,0.65);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid hsla(0,0%,100%,0.6);
  box-shadow: 0 1px 0 0 hsla(0,0%,100%,0.7) inset, 0 1px 2px hsla(145,30%,15%,0.04), 0 28px 60px -24px hsla(145,35%,18%,0.22);
}
.tour-slide .tile-screen { border-radius: 0; border-right: 1px solid hsl(var(--border,210 12% 88%)); min-height: 420px; padding: 22px 24px; }
.tour-slide .tile-meta { border-top: none; background: transparent; padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tour-slide .tile-eyebrow { font-size: 11px; margin-bottom: 6px; }
.tour-slide .tile-title { font-size: 26px; line-height: 1.18; margin-bottom: 4px; }
.tour-slide .tile-sub { font-size: 14px; line-height: 1.5; color: hsl(145 25% 38%); max-width: 36ch; }

@keyframes tour-slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tour-slide-in-left  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
.tour-slide-enter-right { animation: tour-slide-in-right .42s cubic-bezier(.34,1.05,.52,1) both; }
.tour-slide-enter-left  { animation: tour-slide-in-left  .42s cubic-bezier(.34,1.05,.52,1) both; }

.tour-nav {
  width: 48px; height: 48px; border-radius: 50%;
  background: hsla(43,40%,99%,0.75); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid hsla(0,0%,100%,0.65); color: hsl(145 50% 22%);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .15s, background .15s, box-shadow .2s;
  box-shadow: 0 1px 0 0 hsla(0,0%,100%,0.7) inset, 0 6px 18px -8px hsla(145,30%,18%,0.2);
}
.tour-nav:hover:not(:disabled) { background: hsla(43,40%,99%,0.95); transform: scale(1.05); color: hsl(145 60% 18%); }
.tour-nav:active:not(:disabled) { transform: scale(0.97); }
.tour-nav:disabled { opacity: 0.4; cursor: not-allowed; }

.tour-indicators { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 14px; }
.tour-dots { display: flex; gap: 6px; align-items: center; }
.tour-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(145 18% 78%); border: none; padding: 0; cursor: pointer; transition: width .25s, background .2s, transform .15s; }
.tour-dot:hover { background: hsl(145 30% 60%); }
.tour-dot.active { width: 28px; border-radius: 4px; background: hsl(20 65% 50%); }

.tour-tile { background: white; border: 1px solid hsl(var(--border,210 12% 88%)); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.tour-tile .tile-screen { position: relative; background: linear-gradient(180deg,hsl(43 35% 97%),hsl(43 30% 94%)); padding: 18px 18px 0; min-height: 260px; flex: 1; overflow: hidden; }
.tour-tile .tile-screen.dark { background: linear-gradient(180deg,hsl(145 30% 12%),hsl(145 35% 8%)); color: hsl(43 30% 95%); }
.tour-tile .tile-screen.peach { background: linear-gradient(180deg,hsl(20 50% 96%),hsl(20 60% 92%)); }
.tour-tile .tile-screen.sage  { background: linear-gradient(180deg,hsl(145 25% 96%),hsl(145 30% 92%)); }
.tour-tile .tile-meta { padding: 14px 18px 16px; border-top: 1px solid hsl(var(--border,210 12% 88%)); background: hsl(43 28% 97%); }
.tour-tile .tile-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(145 15% 50%); margin-bottom: 4px; }
.tour-tile .tile-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.25; color: hsl(145 55% 18%); margin: 0; letter-spacing: -0.01em; }
.tour-tile .tile-sub { font-size: 12px; color: hsl(145 15% 45%); margin-top: 4px; line-height: 1.45; }

/* Stagger entrance */
.tour-slide .tile-screen > * { animation: lottieFadeUp .55s cubic-bezier(.34,1.05,.52,1) both; }
.tour-slide .tile-screen > *:nth-child(1) { animation-delay: .08s; }
.tour-slide .tile-screen > *:nth-child(2) { animation-delay: .18s; }
.tour-slide .tile-screen > *:nth-child(3) { animation-delay: .28s; }
.tour-slide .tile-screen > *:nth-child(4) { animation-delay: .36s; }
@keyframes lottieFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 760px) {
  .tour-slide .tour-tile { grid-template-columns: 1fr; }
  .tour-slide .tile-screen { border-right: none; border-bottom: 1px solid hsl(var(--border,210 12% 88%)); min-height: 380px; }
  .tour-slide .tile-meta { padding: 20px 22px 24px; }
  .tour-slide .tile-title { font-size: 22px; }
  .tour-stage { grid-template-columns: 44px 1fr 44px; gap: 10px; }
  .tour-nav { width: 40px; height: 40px; }
  .tour-track { min-height: 0; }
}
@media (max-width: 600px) {
  .tour-stage { grid-template-columns: 1fr; }
  .tour-stage .tour-nav { display: none; }
  .tour-indicators { gap: 14px; flex-wrap: wrap; }
}

/* ---- Mini UI primitives (inside tour tiles) ---- */
.mini-bar { height: 8px; border-radius: 999px; background: hsla(145,20%,80%,0.4); overflow: hidden; }
.mini-bar > span { display: block; height: 100%; background: hsl(145 60% 26%); border-radius: 999px; }
.mini-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: hsla(145,30%,90%,0.6); color: hsl(145 50% 28%); border: 1px solid hsla(145,30%,80%,0.5); }
.mini-chip.peach { background: hsla(20,60%,92%,0.8); color: hsl(20 60% 35%); border-color: hsla(20,60%,80%,0.5); }
.mini-chip.dark  { background: hsla(43,30%,95%,0.12); color: hsl(43 30% 90%); border-color: hsla(43,30%,95%,0.18); }
.mini-card { background: white; border: 1px solid hsl(var(--border,210 12% 88%)); border-radius: 12px; padding: 10px 12px; }
.mini-card.dark { background: hsla(43,30%,95%,0.06); border-color: hsla(43,30%,95%,0.16); color: hsl(43 30% 95%); }
.mini-row { display: flex; align-items: center; gap: 8px; }
.mini-h { font-size: 13px; font-weight: 600; color: inherit; line-height: 1.3; }
.mini-sub { font-size: 11.5px; color: hsl(145 15% 50%); line-height: 1.4; }
.mini-card.dark .mini-sub { color: hsl(43 30% 75%); }
.mini-num { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: hsl(145 60% 26%); letter-spacing: -0.01em; line-height: 1; }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: hsl(145 55% 18%); background: hsl(20 60% 86%); flex-shrink: 0; }
.mini-avatar.sage  { background: hsl(145 30% 80%); color: hsl(145 60% 22%); }
.mini-avatar.gold  { background: hsl(35 70% 80%); color: hsl(20 60% 32%); }
.mini-avatar.lilac { background: hsl(265 30% 82%); color: hsl(265 50% 32%); }
.tile-stack { display: flex; flex-direction: column; gap: 8px; }

/* ---- Mobile App Showcase ---- */
.app-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; align-items: end; }
@media (max-width: 880px) { .app-trio { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }
.app-frame {
  background: linear-gradient(165deg, hsla(0,0%,100%,0.28) 0%, hsla(0,0%,100%,0.14) 14%, hsla(0,0%,100%,0.05) 30%, hsla(145,30%,60%,0.06) 48%, hsla(0,0%,100%,0.07) 62%, hsla(0,0%,100%,0.18) 80%, hsla(0,0%,100%,0.08) 100%);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-radius: 38px; padding: 12px;
  border: 1px solid hsla(0,0%,100%,0.45);
  box-shadow: 0 1px 0 hsla(0,0%,100%,0.65) inset, 0 -1px 0 hsla(0,0%,0%,0.06) inset, 0 30px 60px -12px hsla(145,40%,12%,0.22), 0 8px 20px -8px hsla(145,40%,12%,0.14);
  width: 100%; max-width: 280px; margin: 0 auto;
  transition: transform .35s cubic-bezier(.34,1.2,.52,1), box-shadow .35s;
}
.app-frame:hover { transform: translateY(-6px); box-shadow: 0 1px 0 hsla(0,0%,100%,0.75) inset, 0 -1px 0 hsla(0,0%,0%,0.06) inset, 0 38px 70px -10px hsla(145,40%,12%,0.28), 0 12px 28px -8px hsla(145,40%,12%,0.18); }
.app-frame .app-screen { background: hsl(43 35% 96%); border-radius: 28px; overflow: hidden; aspect-ratio: 9/19; position: relative; display: flex; flex-direction: column; }
.app-frame .app-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; background: hsl(20 30% 8%); border-radius: 12px; z-index: 5; }
.app-frame .app-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 6px; font-size: 11px; font-weight: 600; color: hsl(145 55% 18%); }
.app-frame .app-body { flex: 1; padding: 8px 14px 12px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.app-frame .app-tabbar { display: flex; justify-content: space-around; padding: 10px 8px 14px; border-top: 1px solid hsl(var(--border,210 12% 88%)); background: white; }
.app-frame .app-tabbar .tabicon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: hsla(145,55%,18%,0.4); }
.app-frame .app-tabbar .tabicon.active { color: hsl(145 60% 26%); }
.app-frame .app-caption { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsla(145,55%,18%,0.55); text-align: center; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.app-frame .app-caption strong { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: hsl(145 55% 18%); margin-top: 4px; }
.app-card { background: white; border: 1px solid hsl(var(--border,210 12% 88%)); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.app-card.peach { background: hsl(20 60% 95%); border-color: hsl(20 50% 88%); }
.app-row { display: flex; align-items: center; gap: 8px; }
.app-h { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.app-sub { font-size: 11px; color: hsla(145,55%,18%,0.6); line-height: 1.4; }
.app-bar { height: 5px; background: hsla(145,60%,26%,0.18); border-radius: 3px; overflow: hidden; position: relative; }
.app-bar > div { position: absolute; inset: 0 auto 0 0; background: hsl(145 60% 26%); border-radius: 3px; }
.app-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 999px; background: hsl(35 80% 88%); color: hsl(35 60% 28%); }
.app-pill.green { background: hsl(145 30% 86%); color: hsl(145 50% 22%); }