/* plus-jakarta-sans-cyrillic-ext-wght-normal */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(data:font/woff2;base64,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) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* plus-jakarta-sans-vietnamese-wght-normal */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/assets/plus-jakarta-sans-vietnamese-wght-normal-qRpaaN48.woff2) format('woff2-variations'); 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; } /* plus-jakarta-sans-latin-ext-wght-normal */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/assets/plus-jakarta-sans-latin-ext-wght-normal-DmpS2jIq.woff2) format('woff2-variations'); 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; } /* plus-jakarta-sans-latin-wght-normal */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/assets/plus-jakarta-sans-latin-wght-normal-eXO_dkmS.woff2) format('woff2-variations'); 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; }/* plus-jakarta-sans-cyrillic-ext-wght-italic */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: italic; font-display: swap; font-weight: 200 800; src: url(data:font/woff2;base64,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) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* plus-jakarta-sans-vietnamese-wght-italic */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/assets/plus-jakarta-sans-vietnamese-wght-italic-CPBsCcxN.woff2) format('woff2-variations'); 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; } /* plus-jakarta-sans-latin-ext-wght-italic */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/assets/plus-jakarta-sans-latin-ext-wght-italic-DJWiFoht.woff2) format('woff2-variations'); 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; } /* plus-jakarta-sans-latin-wght-italic */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/assets/plus-jakarta-sans-latin-wght-italic-DnD1KgkH.woff2) format('woff2-variations'); 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; }/* jetbrains-mono-cyrillic-ext-wght-normal */ @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(data:font/woff2;base64,d09GMgABAAAAAAfsABQAAAAAEAwAAAeCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoP0hWQVJbBmA/U1RBVIFiJyYAdC9qEQgKhGSEAAsgADCGCAE2AiQDOgQgBYlMB4EUDAcbLQ4onoexrSC/2ZyLAa8p8VHB8/x3Vue+V0hVJalMJg2nx/TCrQXxBeqLjQG7FyM1WEa/X1tEXN7cFz9EJEMmMUz3RihWSSKeQCbcIou0izz/C8v+fq3VfajEa9gDD11CImXS7qL/RJFVzC1qiB6KmKeD6TZdQ6IRGv78dL6uSVVCfgni5mzu7kcgQBgAEAQTQRCoL++STTYybkJxNfQxAAIAGu8OdEB9teW2jh4BpgDqFjAeSEByW3zFP0CBBgNMsMCGEDjgggdhiEAUAeIIED7ABTDUEnkIE9Q9ahFgKttcVhApo4ACB4qobHaccgDfEjFO6aaWUhjMLt2SyIvHKoDqoA4CSUwEIYQCEjhAO9R1G6keDeDZGjNo+AhxOjCEGTr1WeIF3kYBiLAOKvkJSMiKX0VdAyQt3SDJClCkxJCHkCzfqyVTriJZLcolS32JZHUekq2TYNkYtCtjYHMQXSxGjXDz2t/yLWXzDzxz+o3zFwDEaN23F+13pyMdQAEaSKAR9vcGq4A4MTSKCElGW+M7UcY7xqkggITb28ZJhlqc9q2twYKTt0NjixBgYvO9BIihEBLYuOFXQzfIQ7dXGUEEEgFDooBfAzqiQbpJrhiWSuKJCRFKYbHCyJKI2G5GiZbNAvgAu5pc3vwx4G+g3aDkhklABiSz0BICXrYghtYhx/cdJ+44rY2oZ0aMNRFz3VZjb6W33F3gzltqtOCV8tTHSpOeXuItfvr5lCdfzFpqtEitvqdcdGGFd28ZqqC0tPbeChGXgrIlnhSWu/eUso4uKWFLugyDzQJhflY4659+WjQ++6x72WUMv9G8mw6QJl7BVxX5fe/kpUsOvnZwee9uQ0cGXYd0o89XB2748sDSnt8d2VphdOTTgceDVvOds0v9P/s7HPq15aGun/6Vllb56f1dl0t1LejqrNkpdRZsG8TOnM5vkBG5oiVyVGnS8LHps5cfNWJs6qKPfaNSxiQNBUm3cKNWROr0GSur7Za31k1vieq7LH11VF+jXdRIasRKflc7jkobm1Z9te1IyZA0pDkhLR98+H37Zf1c/8at+dB7x+7GfVyTfJMPiYztsnl59Y5l4j+0n1RXlpHnF3Tq7HecmNF/CJodEMAikruxiyJaGLvHOdAfoA+oDvpjBm2b91cHGRZMU9n25xEU0A8fgEEAdKI3Q1iDtc034sug5YVMkE2jsE+BIkwSoQ3gxXMqz9tELp48bd0cFKOKS7xYjEuXBnZP5ia7DyiO/X/YI+PQSbt2uSdqAkWL9nQbV1XB94/+uPfdZz8dnXYFBYrcTl2SIR/ybxJNJPz/Gupb0JaZeens2ekC7EKr8t+Ls/P5VJPYJdHKyqfg2nqU6bhlidzcddQV/7MmecTzJ5VPcKXkNKSEogHjYFx6QZ7rQ+FSe8njaiNuOnXS8H2ScQ619c2mC3VTtauL0rRbXd/CkSOP37FY9Zkjz8+GibYUMOEWF+RdrFS8Ecv1SHOpPUPZGEIpjPvFyU5cXKjd6OXqorTqy9GwRd++HVufPGnVsW+aO3vggKZ18jR9sXaTC1PWTEsVUaK0FkNySbTQDqlm2PfDjZcu4aalnSLKjnOoYQ0nUlqqXcGpPu/4VgV/xU2pAqW4BW3qzhQ8/hFKhV2qE3+BKAtDqBXjfgnVdH4y0wg5tbVNRenNdTWOrenWLcupQdmsbq5b+18piTe/xRdp1xbILxNPJGInm2z6hoB21Lal0i+ePTtd7B45+3XhFJ329evskXm7qurUVREotqSluSo/L29d3qDhI4YOQqWhI4YNvBNfsMHeXKemXrxQfKeuPOGRVayA3JtkJKEgbPp+dXUDluddutRYLFoXGXWX6N3WFaGLbQtRSitVYNacTNSdy7AaG/HSaUEANcBoGXNdcZvZsOqQ1icBDv21/gzAoYPHH/WDW0qNR3QTYKEAEHig6o13NXbND06CQPlRtYjGNnSktRc09k1mAMDvAlDKfQjgy6fssInlfzmNAjKkDxoxHOBLdVRAIVt9j4qo+hA1w9T1aNBNTUOTTNUHLbqokE+UAfJXCIGw/IxCSL5GRUJeR40rL/UxTm4Q08H6MbCs70ObuNyIIXrINHQYInF06UUlevTjbQzTh5upiDMzMMogUtEnjPs/Y7jAHCJeB0GBHh04tC6FiB6ZFB1oArUSIoFoqhzCeAN6lHwm0T4C3VVPWvjpSMXReuWesMEcoqrmgtNBGd2noWeV0hNAz9rFeShNJxHGsPa3HXeKTk8b55hahySYHaYKKFFLpCfN8rsoaJn01CR04Gkc+5k7KVTCmClX8Q10HCrUEkVlSX+XO33oQR9609tJ516H497WSobWs5Up6TLaS10/dessIskgJSLiDlWvHVUywpkQ7hdPZqGyiEF0uVQerVcPamT1A3eKXdyI1vG9OoflrSXihZ1qqGE3nhmAgiIbRCQgPLEPtOM3UQwTLYaYYomNlpA44opnjV6jkD6id80OOrzf6BzmMD6eEa1zKyeYG1fzfEf16V6jw9XYOaar1/b2kP/IYX8oR2mcFvv2GtBV3JXgd437AQAA) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* jetbrains-mono-cyrillic-wght-normal */ @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/assets/jetbrains-mono-cyrillic-wght-normal-D73BlboJ.woff2) format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* jetbrains-mono-greek-wght-normal */ @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/assets/jetbrains-mono-greek-wght-normal-Bw9x6K1M.woff2) format('woff2-variations'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* jetbrains-mono-vietnamese-wght-normal */ @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/assets/jetbrains-mono-vietnamese-wght-normal-Bt-aOZkq.woff2) format('woff2-variations'); 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; } /* jetbrains-mono-latin-ext-wght-normal */ @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/assets/jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2) format('woff2-variations'); 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; } /* jetbrains-mono-latin-wght-normal */ @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/assets/jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2) format('woff2-variations'); 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; }/* heebo-hebrew-wght-normal */ @font-face { font-family: 'Heebo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/heebo-hebrew-wght-normal-BPH8bhzJ.woff2) format('woff2-variations'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } /* heebo-math-wght-normal */ @font-face { font-family: 'Heebo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/heebo-math-wght-normal-9gsQVfT-.woff2) format('woff2-variations'); unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF; } /* heebo-symbols-wght-normal */ @font-face { font-family: 'Heebo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/heebo-symbols-wght-normal-CDk8D5aH.woff2) format('woff2-variations'); unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF; } /* heebo-latin-ext-wght-normal */ @font-face { font-family: 'Heebo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/heebo-latin-ext-wght-normal-D5vEfs3i.woff2) format('woff2-variations'); 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; } /* heebo-latin-wght-normal */ @font-face { font-family: 'Heebo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/heebo-latin-wght-normal-CXdlclQD.woff2) format('woff2-variations'); 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; }/* noto-sans-arabic-arabic-wght-normal */ @font-face { font-family: 'Noto Sans Arabic Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/noto-sans-arabic-arabic-wght-normal-BhzieyvS.woff2) format('woff2-variations'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } /* noto-sans-arabic-math-wght-normal */ @font-face { font-family: 'Noto Sans Arabic Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/noto-sans-arabic-math-wght-normal-pS2d8anF.woff2) format('woff2-variations'); unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF; } /* noto-sans-arabic-symbols-wght-normal */ @font-face { font-family: 'Noto Sans Arabic Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/noto-sans-arabic-symbols-wght-normal-BJ6p-EzA.woff2) format('woff2-variations'); unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF; } /* noto-sans-arabic-latin-ext-wght-normal */ @font-face { font-family: 'Noto Sans Arabic Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/noto-sans-arabic-latin-ext-wght-normal-CIz31GGw.woff2) format('woff2-variations'); 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; } /* noto-sans-arabic-latin-wght-normal */ @font-face { font-family: 'Noto Sans Arabic Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/noto-sans-arabic-latin-wght-normal-BQEJrIpl.woff2) format('woff2-variations'); 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 { font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.6; font-weight: 400; } html[lang='he'], html[dir='rtl'] { font-family: 'Heebo Variable', 'Heebo', 'Rubik', 'Noto Sans Hebrew', 'Segoe UI', Arial, sans-serif; } html[lang='ar'] { font-family: 'Noto Sans Arabic Variable', 'Noto Sans Arabic', 'Cairo', 'Tajawal', 'Segoe UI', Arial, sans-serif; } :root { color-scheme: light dark; color: var(--text-primary); background-color: var(--bg-light); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { font-weight: 500; text-decoration: inherit; } body { margin: 0; min-width: 320px; min-height: 100vh; } h1 { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -0.025em; } /* h2 is a real heading again — the old global made EVERY h2 a small uppercase eyebrow, which forced pages to keep resetting it (and left section titles smaller than body text). The eyebrow look is now opt-in via .eyebrow for the section/card labels that actually want it. */ h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0; } .eyebrow { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color 0.25s; } /* Visible keyboard focus — cross-browser and keyboard-only, so the ring guides Tab navigation without flashing on every mouse click. */ button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary, #25d366); outline-offset: 2px; } button:focus:not(:focus-visible) { outline: none; } html { /* Root/overscroll background follows the app theme token, so an explicit dark theme on a light-OS device doesn't reveal a white background above/below the body (overscroll). */ background-color: var(--bg-light); } @media (prefers-color-scheme: light) { /* Guarded with :not([data-theme='dark']): when the OS prefers light but the user explicitly picked the dark theme, the app's own choice must win (otherwise the root is force-whitened). */ :root:not([data-theme='dark']) { color: #213547; background-color: #ffffff; } } /* Global select/dropdown styling */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; padding: 0.75rem 2.5rem 0.75rem 1rem; font-size: 0.9375rem; font-family: inherit; color: var(--text-primary); background-color: var(--bg-white, #fff); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; cursor: pointer; transition: all 0.2s; } select:hover { border-color: var(--primary, #25d366); } select:focus { outline: none; border-color: var(--primary, #25d366); box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1); } select:disabled { background-color: var(--bg-light, #f8fafc); color: var(--text-muted, #94a3b8); cursor: not-allowed; } /* GLOBAL MODAL STYLES */ /* Modal Overlay */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Modal Card */ .modal { background: var(--bg-white, #fff); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); width: 90%; max-width: 480px; animation: slideUp 0.3s ease; /* Cap height and lay out as a flex column so the body scrolls while the header and footer stay pinned — config-heavy modals no longer push the title/Save button off-screen. */ display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; } /* The install-plugin modal holds the catalog list — a bit wider on desktop for comfortable reading. The responsive rules below (<=768px: 95% width; <=480px: full-width bottom sheet) still apply, so it stays responsive on small screens. Lives here (global modal styles) rather than in a page CSS so it isn't subject to the page-root scoping rule. */ .modal.install-modal { max-width: 680px; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--border, #e2e8f0); flex-shrink: 0; } .modal-header h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #1e293b); margin: 0; text-transform: none; letter-spacing: normal; } .modal-body { padding: 1.5rem; /* Scroll the body (not the whole card) so the pinned header/footer stay visible. */ overflow-y: auto; flex: 1 1 auto; } .modal-body > label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary, #64748b); margin-bottom: 0.5rem; } .modal-body input { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 0.9375rem; background: var(--bg-light, #f8fafc); transition: all 0.2s; box-sizing: border-box; } .modal-body input:focus { outline: none; border-color: var(--primary, #25d366); background: var(--bg-white, #fff); box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1); } /* The rule above is meant for TEXT inputs. Radios/checkboxes would otherwise stretch to width:100% and shove their labels far to the right; reset them back to their native box. The :not() excludes the visually-hidden toggle-switch checkbox (it must stay width:0) so this never ties with the per-page `.toggle-switch input { width:0 }` rule on specificity. */ .modal-body input[type='radio']:not(.toggle-switch input), .modal-body input[type='checkbox']:not(.toggle-switch input) { width: auto; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; flex: none; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem 1.5rem; flex-shrink: 0; } /* Icon Button (modal close X) */ .btn-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg-light, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 8px; cursor: pointer; color: var(--text-secondary, #64748b); transition: all 0.2s; flex-shrink: 0; padding: 0; } .btn-icon svg { width: 20px; height: 20px; stroke: var(--text-secondary, #64748b); } .btn-icon:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: var(--error-text); } .btn-icon:hover svg { stroke: var(--error); } /* Secondary Button */ .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--bg-light, #f8fafc); color: var(--text-secondary, #64748b); border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-secondary:hover:not(:disabled) { background: var(--bg-white, #fff); border-color: var(--text-muted, #94a3b8); color: var(--text-primary, #1e293b); } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } /* Primary Button — canonical definition; page-scoped copies were consolidated here so the primary CTA looks identical on every page (padding/radius/disabled used to drift per page). */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--primary, #25d366); /* Dark text on the WhatsApp green: 9.0:1 (AAA). White was 1.98:1, failing even the AA large-text floor - the single worst contrast pair in the dashboard. */ color: #0f172a; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-primary:hover:not(:disabled) { background: var(--primary-hover, #1da851); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* Danger Button — canonical definition (page copies also used two different base reds). */ .btn-danger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--error, #ef4444); color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-danger:hover:not(:disabled) { background: #b91c1c; } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } /* Spin Animation */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } /* Code element styling */ code { background: var(--bg-light, #f1f5f9); padding: 0.125rem 0.375rem; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875em; color: var(--text-primary, #1e293b); } /* RTL / Hebrew direction support */ /* Keep code, technical identifiers, and numbers LTR even inside RTL containers */ [dir='rtl'] code, [dir='rtl'] .mono, [dir='rtl'] pre { direction: ltr; text-align: left; unicode-bidi: embed; } /* Modal footer: actions should align to the start of the writing direction */ [dir='rtl'] .modal-footer { justify-content: flex-end; flex-direction: row-reverse; } /* Select dropdown caret on the opposite side */ [dir='rtl'] select { padding: 0.75rem 1rem 0.75rem 2.5rem; background-position: left 0.75rem center; } /* Inputs in modals: text aligns naturally */ [dir='rtl'] .modal-body input, [dir='rtl'] .modal-body textarea, [dir='rtl'] input[type='text'], [dir='rtl'] input[type='url'], [dir='rtl'] input[type='password'], [dir='rtl'] input[type='number'], [dir='rtl'] textarea { text-align: right; } /* URLs, emails, phones — force LTR even inside RTL */ [dir='rtl'] input[type='url'], [dir='rtl'] input[type='email'], [dir='rtl'] input[type='tel'] { direction: ltr; text-align: left; } /* Toast container — slide in from the opposite side */ [dir='rtl'] .toast-container { right: auto; left: 1rem; } /* Mobile Responsive - Global */ @media (max-width: 768px) { h1 { font-size: 1.5rem; } .modal { width: 95%; max-width: none; margin: 1rem; border-radius: 12px; } .modal-header { padding: 1.25rem 1.25rem 0.875rem; } .modal-header h2 { font-size: 1.125rem; } .modal-body { padding: 1.25rem; } .modal-footer { padding: 0.875rem 1.25rem 1.25rem; } select { padding: 0.625rem 2.25rem 0.625rem 0.875rem; font-size: 0.875rem; } } @media (max-width: 480px) { h1 { font-size: 1.25rem; } .modal-overlay { align-items: flex-end; } .modal { width: 100%; margin: 0; border-radius: 16px 16px 0 0; /* max-height + body scroll already come from the base .modal rule; the bottom-sheet only changes width/anchoring. (Scrolling lives on .modal-body to avoid a double scrollbar.) */ } } .layout { display: flex; min-height: 100vh; } /* ==================== Sidebar ==================== */ .sidebar { width: 260px; background: var(--bg-white); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100; transition: width 0.3s ease, transform 0.3s ease; } .sidebar.collapsed { width: 72px; } .sidebar-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem; border-bottom: 1px solid var(--border); min-height: 72px; } .sidebar.collapsed .sidebar-header { justify-content: center; padding: 1.5rem 1rem; } .sidebar-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .mobile-brand .sidebar-logo { width: 24px; height: 24px; } .sidebar-brand { display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; } .brand-header-title { display: flex; align-items: center; gap: 0.45rem; } .brand-name { font-size: 1.125rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; } .brand-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background-color: var(--primary); animation: pulse-dot 2.5s infinite; flex-shrink: 0; } .brand-header-meta { display: flex; align-items: center; gap: 0.45rem; margin-top: 2px; } .brand-version { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace; } .brand-tag-chip { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 4px; background: var(--bg-light); color: var(--text-muted); border: 1px solid var(--border); } .brand-update { align-self: flex-start; margin-top: 2px; padding: 1px 6px; border-radius: var(--radius); font-size: 0.625rem; font-weight: 600; color: var(--primary-text); background: var(--primary-soft); text-decoration: none; } .brand-update:hover { text-decoration: underline; } /* Collapse Toggle Button - Circular design at edge */ .collapse-toggle { position: absolute; right: -14px; top: 36px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-white); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; z-index: 101; padding: 0; } .collapse-toggle:hover { background: var(--primary); border-color: var(--primary); color: white; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); } .collapse-toggle svg { width: 16px; height: 16px; } .sidebar.collapsed .collapse-toggle { right: -14px; } .sidebar-nav { flex: 1; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; } .sidebar.collapsed .sidebar-nav { padding: 1rem 0.5rem; } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; transition: all 0.2s; white-space: nowrap; overflow: hidden; } .sidebar.collapsed .nav-item { justify-content: center; padding: 0.7rem; } .nav-item:hover { background: var(--bg-light); color: var(--text-primary); text-decoration: none; } .nav-item.active { background: var(--primary-soft); color: var(--primary-text); } .nav-item.active svg { color: var(--primary-text); } .sidebar-footer { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); } .sidebar.collapsed .sidebar-footer { padding: 0.75rem 0.5rem; } .theme-toggle-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; color: var(--text-secondary); background: none; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; overflow: hidden; } .appearance-button-cue { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; /* Plain icon, no brand orb — the green swatch belonged to the removed palette picker. */ color: inherit; } .sidebar.collapsed .theme-toggle-btn, .sidebar.collapsed .logout-btn { justify-content: center; padding: 0.6rem; } .theme-toggle-btn:hover { background: var(--bg-light); color: var(--text-primary); } .language-menu, .appearance-menu { position: relative; } .language-menu .theme-toggle-btn, .appearance-menu .theme-toggle-btn { width: 100%; } .language-menu-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 0.35rem); display: flex; flex-direction: column; gap: 0.15rem; min-width: 160px; padding: 0.3rem; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16); z-index: 120; } .language-menu-item { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 0.45rem 0.6rem; color: var(--text-secondary); background: transparent; border: 0; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; font-weight: 500; text-align: left; cursor: pointer; transition: all 0.2s; } .language-menu-item:hover { background: var(--bg-light); color: var(--text-primary); } .language-menu-item.active { background: var(--primary-soft); color: var(--primary-text); } .sidebar.collapsed .language-menu-list { right: auto; left: calc(100% + 0.5rem); bottom: 0; } .logout-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; color: var(--text-secondary); background: none; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; overflow: hidden; } .logout-btn:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: var(--error-text); } /* ==================== Main Content ==================== */ .main-content { flex: 1; margin-left: 260px; width: calc(100% - 260px); background: var(--bg-light); min-height: 100vh; overflow-x: hidden; transition: margin-left 0.3s ease, width 0.3s ease; } .main-content.expanded { margin-left: 72px; width: calc(100% - 72px); } /* ==================== Mobile Styles ==================== */ .mobile-header { display: none; } .sidebar-overlay { display: none; } @media (max-width: 767px) { .mobile-header { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 1rem; background: var(--bg-white); border-bottom: 1px solid var(--border); z-index: 90; } .mobile-menu-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent !important; border: none; color: var(--text-primary); cursor: pointer; border-radius: var(--radius); transition: background 0.2s; padding: 0; } .mobile-menu-btn svg { color: var(--text-primary); stroke: var(--text-primary); } .mobile-menu-btn:hover { background: var(--bg-light) !important; } .mobile-brand { display: flex; align-items: center; gap: 0.5rem; } .mobile-brand .brand-name { font-size: 1rem; } .sidebar.mobile { transform: translateX(-100%); width: 280px; box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1); } .sidebar.mobile.open { transform: translateX(0); } .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 95; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .main-content.mobile { margin-left: 0; width: 100%; padding-top: 56px; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .collapse-toggle { display: none; } } /* ==================== RTL support ==================== */ [dir='rtl'] .sidebar { border-right: none; border-left: 1px solid var(--border); } [dir='rtl'] .collapse-toggle { right: auto; left: -14px; } [dir='rtl'] .language-menu-item { text-align: right; } [dir='rtl'] .sidebar.collapsed .language-menu-list { right: calc(100% + 0.5rem); left: auto; } [dir='rtl'] .main-content { margin-left: 0; margin-right: 260px; transition: margin-right 0.3s ease, width 0.3s ease; } [dir='rtl'] .main-content.expanded { margin-right: 72px; } @media (max-width: 767px) { [dir='rtl'] .main-content, [dir='rtl'] .main-content.mobile { margin-right: 0; } [dir='rtl'] .sidebar.mobile { transform: translateX(100%); box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1); } [dir='rtl'] .sidebar.mobile.open { transform: translateX(0); } } .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.75rem; max-width: 400px; } .toast { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--bg-card); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08); border-left: 4px solid; animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast-success { border-color: #22c55e; } .toast-success .toast-icon { color: var(--success-text); } .toast-error { border-color: #ef4444; } .toast-error .toast-icon { color: var(--error-text); } .toast-warning { border-color: #f59e0b; } .toast-warning .toast-icon { color: var(--warning-text); } .toast-info { border-color: #3b82f6; } .toast-info .toast-icon { color: #3b82f6; } .toast-icon { flex-shrink: 0; margin-top: 2px; } .toast-content { flex: 1; min-width: 0; } .toast-title { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); line-height: 1.4; } .toast-message { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.25rem; line-height: 1.5; } .toast-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .toast-close:hover { background: var(--bg-light); color: var(--text-secondary); } :root { --primary: #25d366; /* The brand green as FOREGROUND is 1.98:1 on white, far under the 4.5:1 AA needs for text. It stays the fill colour; anything rendering it as text or an icon uses --primary-text, the same hue darkened until it clears 4.5:1 on all three light backgrounds it lands on: 4.95:1 on white, 4.73:1 on --bg-light, and 4.53:1 on --primary-soft, which is the tightest of the three and the one the active sidebar item uses. */ --primary-text: #17813e; --primary-hover: #1da851; --primary-soft: rgba(37, 211, 102, 0.12); --bg-light: #f8fafc; --bg-white: #ffffff; --bg-card: #ffffff; --text-primary: #0f172a; /* Slate 900 */ --text-secondary: #475569; /* Slate 600 */ --text-muted: #64748b; /* Slate 500; 4.76:1 on white (AA) */ --border: #e2e8f0; /* Slate 200 */ --error: #ef4444; --success: #22c55e; --warning: #f59e0b; /* Status colours as FOREGROUND fail AA on light: error 3.76:1, success 2.28:1, warning 2.15:1. They stay the fill/border colours; text and icons use these darkened twins. Each clears 4.5:1 against the darkest surface it actually lands on, which is not white but the 10-20% tint of its own hue that the badges and callouts paint behind it. */ --error-text: #c63838; --success-text: #157c3b; --warning-text: #986207; --info: #2563eb; /* Blue 600 — info/permission/log badges + qr-ready pill */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --brand-gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #0d9488 100%); --brand-glow: 0 4px 20px -2px rgba(16, 185, 129, 0.35); --glass-bg: rgba(255, 255, 255, 0.88); --glass-border: rgba(226, 232, 240, 0.9); } /* Dark Mode */ [data-theme='dark'] { /* Make native controls (select option popups, scrollbars, date pickers) follow the EXPLICIT app theme, not just the OS preference — otherwise toggling dark while the OS is light left native dropdowns rendered in the light scheme (#249). */ color-scheme: dark; --bg-light: #0f172a; /* Slate 900 */ --bg-white: #1e293b; /* Slate 800 */ --bg-card: #1e293b; --text-primary: #f1f5f9; /* Slate 100 */ --text-secondary: #cbd5e1; /* Slate 300 */ --text-muted: #94a3b8; /* Slate 400; 5.71:1 on Slate 800 (AA) */ --border: #334155; /* Slate 700 */ --info: #60a5fa; /* Blue 400 — lighter so it reads over the dark translucent-blue tints */ /* On the dark surfaces success and warning already clear AA (6.42:1 and 6.81:1), so they keep their base value; error is 3.89:1 on Slate 800 and is lightened instead, to a value that still clears 4.65:1 on the darkest error tint behind it (20 percent over Slate 800). */ --error-text: #f77b7b; --success-text: var(--success); --warning-text: var(--warning); --primary-soft: color-mix(in srgb, var(--primary) 18%, transparent); /* On Slate 800 the brand green already measures 7.38:1, so dark keeps it for text too. */ --primary-text: var(--primary); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4); --glass-bg: rgba(30, 41, 59, 0.75); --glass-border: rgba(255, 255, 255, 0.08); } /* Explicit light toggle: keep native controls light even if the OS prefers dark. */ [data-theme='light'] { color-scheme: light; } /* System preference dark mode */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { /* Match native controls (e.g. the Login page