/* Fonts */
		/* inter-cyrillic-ext-400-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-ext-400-normal-Dc4VJyIJ.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-400-normal-BE2fNs0E.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
		/* inter-cyrillic-400-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-400-normal-BLGc9T1a.woff2) format('woff2'), url(/assets/inter-cyrillic-400-normal-alAqRL36.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
		/* inter-greek-ext-400-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-ext-400-normal-Bput3-QP.woff2) format('woff2'), url(/assets/inter-greek-ext-400-normal-XIH6-K3k.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
		/* inter-greek-400-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-400-normal-DxZsaF_h.woff2) format('woff2'), url(/assets/inter-greek-400-normal-C3I71FoW.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
		/* inter-vietnamese-400-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-vietnamese-400-normal-DMkecbls.woff2) format('woff2'), url(/assets/inter-vietnamese-400-normal-Bbgyi5SW.woff) format('woff');
  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;
}
		/* inter-latin-ext-400-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-ext-400-normal-C1nco2VV.woff2) format('woff2'), url(/assets/inter-latin-ext-400-normal-77YHD8bZ.woff) format('woff');
  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;
}
		/* inter-latin-400-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-400-normal-C38fXH4l.woff2) format('woff2'), url(/assets/inter-latin-400-normal-CyCys3Eg.woff) format('woff');
  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;
}
		/* inter-cyrillic-ext-500-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-cyrillic-ext-500-normal-BShVwWPj.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-500-normal-NrhEyngK.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
		/* inter-cyrillic-500-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-cyrillic-500-normal-D4Vwzodn.woff2) format('woff2'), url(/assets/inter-cyrillic-500-normal-BoeW9iIj.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
		/* inter-greek-ext-500-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-greek-ext-500-normal-B6guLgqG.woff2) format('woff2'), url(/assets/inter-greek-ext-500-normal-1SJLBQ3N.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
		/* inter-greek-500-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-greek-500-normal-CeQXL5ds.woff2) format('woff2'), url(/assets/inter-greek-500-normal-CSBZZ4CI.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
		/* inter-vietnamese-500-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-vietnamese-500-normal-DOriooB6.woff2) format('woff2'), url(/assets/inter-vietnamese-500-normal-mJboJaSs.woff) format('woff');
  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;
}
		/* inter-latin-ext-500-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-latin-ext-500-normal-CV4jyFjo.woff2) format('woff2'), url(/assets/inter-latin-ext-500-normal-BxGbmqWO.woff) format('woff');
  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;
}
		/* inter-latin-500-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-latin-500-normal-Cerq10X2.woff2) format('woff2'), url(/assets/inter-latin-500-normal-BL9OpVg8.woff) format('woff');
  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;
}
		/* inter-cyrillic-ext-600-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-ext-600-normal-CaqZN2hq.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-600-normal-t7rHAwBu.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
		/* inter-cyrillic-600-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-600-normal-BGBWG807.woff2) format('woff2'), url(/assets/inter-cyrillic-600-normal-vZ-N8GHY.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
		/* inter-greek-ext-600-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-ext-600-normal-Cnui8OiR.woff2) format('woff2'), url(/assets/inter-greek-ext-600-normal-CCFnzSpK.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
		/* inter-greek-600-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-600-normal-Dhlb-90d.woff2) format('woff2'), url(/assets/inter-greek-600-normal-BVGIV3oK.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
		/* inter-vietnamese-600-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-vietnamese-600-normal-Cc8MFFhd.woff2) format('woff2'), url(/assets/inter-vietnamese-600-normal-BuLX-rYi.woff) format('woff');
  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;
}
		/* inter-latin-ext-600-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-ext-600-normal-D2bJ5OIk.woff2) format('woff2'), url(/assets/inter-latin-ext-600-normal-CIVaiw4L.woff) format('woff');
  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;
}
		/* inter-latin-600-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-600-normal-LgqL8muc.woff2) format('woff2'), url(/assets/inter-latin-600-normal-CiBQ2DWP.woff) format('woff');
  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;
}
		/* inter-cyrillic-ext-700-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-cyrillic-ext-700-normal-ClVoMEGq.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-700-normal-Cg0zx2i8.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
		/* inter-cyrillic-700-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-cyrillic-700-normal-bGtGjVdZ.woff2) format('woff2'), url(/assets/inter-cyrillic-700-normal-oWiwobpV.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
		/* inter-greek-ext-700-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-greek-ext-700-normal-SzCdnevJ.woff2) format('woff2'), url(/assets/inter-greek-ext-700-normal-D0KHSs-V.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
		/* inter-greek-700-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-greek-700-normal-Cxpycf-U.woff2) format('woff2'), url(/assets/inter-greek-700-normal-DtGkhywV.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
		/* inter-vietnamese-700-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-vietnamese-700-normal-CGpBpxLq.woff2) format('woff2'), url(/assets/inter-vietnamese-700-normal-DL6eWghQ.woff) format('woff');
  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;
}
		/* inter-latin-ext-700-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-latin-ext-700-normal-CfWAu3Qq.woff2) format('woff2'), url(/assets/inter-latin-ext-700-normal-Z3s-4e5M.woff) format('woff');
  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;
}
		/* inter-latin-700-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-latin-700-normal-Drs_5D37.woff2) format('woff2'), url(/assets/inter-latin-700-normal-KTwiWvO9.woff) format('woff');
  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;
}
		/* inter-cyrillic-ext-800-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/inter-cyrillic-ext-800-normal-DkJRRbRv.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-800-normal-f7wAPxr8.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
		/* inter-cyrillic-800-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/inter-cyrillic-800-normal-Gn5VisWc.woff2) format('woff2'), url(/assets/inter-cyrillic-800-normal-B7tloZ-q.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
		/* inter-greek-ext-800-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/inter-greek-ext-800-normal-JPzvdjtt.woff2) format('woff2'), url(/assets/inter-greek-ext-800-normal-CN1z_jol.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
		/* inter-greek-800-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/inter-greek-800-normal-C7uvZBs2.woff2) format('woff2'), url(/assets/inter-greek-800-normal-rjLA_ShQ.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
		/* inter-vietnamese-800-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/inter-vietnamese-800-normal-Cm7tD1pz.woff2) format('woff2'), url(/assets/inter-vietnamese-800-normal-DDlpr_Ee.woff) format('woff');
  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;
}
		/* inter-latin-ext-800-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/inter-latin-ext-800-normal-DZJjya6U.woff2) format('woff2'), url(/assets/inter-latin-ext-800-normal-BOMpwxm3.woff) format('woff');
  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;
}
		/* inter-latin-800-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/inter-latin-800-normal-BYj_oED-.woff2) format('woff2'), url(/assets/inter-latin-800-normal-D1mf63XC.woff) format('woff');
  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;
}
		/* inter-cyrillic-ext-900-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/inter-cyrillic-ext-900-normal-BduYe0K2.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-900-normal-Cq3Igddy.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
		/* inter-cyrillic-900-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/inter-cyrillic-900-normal-rsB9enUl.woff2) format('woff2'), url(/assets/inter-cyrillic-900-normal-B9EYNSoK.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
		/* inter-greek-ext-900-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/inter-greek-ext-900-normal-gmbm0Gan.woff2) format('woff2'), url(/assets/inter-greek-ext-900-normal-t9SXDfLo.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
		/* inter-greek-900-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/inter-greek-900-normal-DTZD6r2W.woff2) format('woff2'), url(/assets/inter-greek-900-normal-xMeZYaDo.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
		/* inter-vietnamese-900-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/inter-vietnamese-900-normal-C4P836tE.woff2) format('woff2'), url(/assets/inter-vietnamese-900-normal-DBSPUrC7.woff) format('woff');
  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;
}
		/* inter-latin-ext-900-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/inter-latin-ext-900-normal-ty8Tfvw5.woff2) format('woff2'), url(/assets/inter-latin-ext-900-normal-DG9wZIMw.woff) format('woff');
  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;
}
		/* inter-latin-900-normal */
		@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/inter-latin-900-normal-D4nM5aha.woff2) format('woff2'), url(/assets/inter-latin-900-normal-EUCDUbiG.woff) format('woff');
  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;
}
		*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
		::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
		/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
		/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
		*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
		::before,
::after {
  --tw-content: '';
}
		/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
		html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
		/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
		body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
		/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
		hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
		/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
		abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
		/*
Remove the default font size and weight for headings.
*/
		h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
		/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
		a {
  color: inherit;
  text-decoration: inherit;
}
		/*
Add the correct font weight in Edge and Safari.
*/
		b,
strong {
  font-weight: bolder;
}
		/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
		code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
		/*
Add the correct font size in all browsers.
*/
		small {
  font-size: 80%;
}
		/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
		sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
		sub {
  bottom: -0.25em;
}
		sup {
  top: -0.5em;
}
		/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
		table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
		/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
		button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
		/*
Remove the inheritance of text transform in Edge and Firefox.
*/
		button,
select {
  text-transform: none;
}
		/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
		button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
		/*
Use the modern Firefox focus style for all focusable elements.
*/
		:-moz-focusring {
  outline: auto;
}
		/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
		:-moz-ui-invalid {
  box-shadow: none;
}
		/*
Add the correct vertical alignment in Chrome and Firefox.
*/
		progress {
  vertical-align: baseline;
}
		/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
		::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
		/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
		[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
		/*
Remove the inner padding in Chrome and Safari on macOS.
*/
		::-webkit-search-decoration {
  -webkit-appearance: none;
}
		/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
		::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
		/*
Add the correct display in Chrome and Safari.
*/
		summary {
  display: list-item;
}
		/*
Removes the default spacing and border for appropriate elements.
*/
		blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
		fieldset {
  margin: 0;
  padding: 0;
}
		legend {
  padding: 0;
}
		ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
		/*
Reset default styling for dialogs.
*/
		dialog {
  padding: 0;
}
		/*
Prevent resizing textareas horizontally by default.
*/
		textarea {
  resize: vertical;
}
		/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
		input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
		input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
		/*
Set the default cursor for buttons.
*/
		button,
[role="button"] {
  cursor: pointer;
}
		/*
Make sure disabled buttons don't get the pointer cursor.
*/
		:disabled {
  cursor: default;
}
		/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
		img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
		/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
		img,
video {
  max-width: 100%;
  height: auto;
}
		/* Make elements with the HTML hidden attribute stay hidden by default */
		[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
		:root {
			--safe-area-inset-top: env(safe-area-inset-top, 0px);
			--safe-area-inset-right: env(safe-area-inset-right, 0px);
			--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
			--safe-area-inset-left: env(safe-area-inset-left, 0px);
			--banner-height: 0px;
			--overlay-bg: #F1F5F9;
			font-size: 16px;
			font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
		  }
		/* ==========================================================================
		   2. Theme Colors
		   ========================================================================== */
		/* --- Accent Colors --- */
		.theme-orange { --accent-color: #E5A20A; --accent-color-dark: #C28A08; }
		.theme-blue { --accent-color: #0A84E5; --accent-color-dark: #0868B7; }
		.theme-red { --accent-color: #EF4444; --accent-color-dark: #DC2626; }
		.theme-green { --accent-color: #22C55E; --accent-color-dark: #16A34A; }
		.theme-purple { --accent-color: #8B5CF6; --accent-color-dark: #7C3AED; }
		.theme-teal { --accent-color: #14B8A6; --accent-color-dark: #0D9488; }
		/* --- OLED Theme --- */
		.dark.oled-dark { --bg-dark: #000000; --card-dark: #000000; --popover-dark: #000000; --modal-dark: #000000; --header-dark: #000000; --surface-hover-dark: #0d0d0d; --text-dark: #F8FAFC; --text-muted-dark: #C7D2FE; --text-secondary-dark: #CBD5E1; --text-tertiary-dark: #94A3B8; --border-dark: rgba(255,255,255,0.08); --border-strong-dark: rgba(255,255,255,0.14); --divider-dark: rgba(255,255,255,0.10); --ring-dark: rgba(255,255,255,0.20); --shadow-dark: none; }
		.dark.oled-dark body, .dark.oled-dark #app-shell, .dark.oled-dark #app-main, .dark.oled-dark #app-sidebar { background: var(--bg-dark) !important; color: var(--text-dark); }
		.dark.oled-dark .bg-card-light, .dark.oled-dark .bg-card-dark { background-color: var(--card-dark) !important; color: var(--text-dark); }
		.dark.oled-dark header, .dark.oled-dark .header, .dark.oled-dark .topbar { background-color: var(--header-dark) !important; --tw-bg-opacity: 1 !important; }
		.dark.oled-dark .modal, .dark.oled-dark .menu, .dark.oled-dark .popover, .dark.oled-dark .dropdown, .dark.oled-dark .bottom-nav { background-color: var(--modal-dark) !important; color: var(--text-dark); border-color: var(--border-dark) !important; }
		.dark.oled-dark .\!modal { background-color: var(--modal-dark) !important; color: var(--text-dark) !important; border-color: var(--border-dark) !important; }
		 .dark.oled-dark .\!menu { background-color: var(--modal-dark) !important; color: var(--text-dark) !important; border-color: var(--border-dark) !important; }
		.dark.oled-dark input:not([type="checkbox"]):not([type="radio"]), .dark.oled-dark select, .dark.oled-dark textarea { background-color: #000 !important; color: var(--text-dark) !important; border-color: var(--border-dark) !important; box-shadow: none !important; }
		.dark.oled-dark input::-moz-placeholder, .dark.oled-dark textarea::-moz-placeholder { color: var(--text-tertiary-dark); }
		.dark.oled-dark input::placeholder, .dark.oled-dark textarea::placeholder { color: var(--text-tertiary-dark); }
		.dark.oled-dark .btn, .dark.oled-dark button { background-color: #0000; color: var(--text-dark); border-color: var(--border-dark); }
		.dark.oled-dark .\!btn { background-color: #0000 !important; color: var(--text-dark) !important; border-color: var(--border-dark) !important; }
		.dark.oled-dark .btn:hover, .dark.oled-dark button:hover { background-color: var(--surface-hover-dark); border-color: var(--border-strong-dark); }
		.dark.oled-dark .\!btn:hover { background-color: var(--surface-hover-dark) !important; border-color: var(--border-strong-dark) !important; }
		.dark.oled-dark .border, .dark.oled-dark .border-border-dark, .dark.oled-dark .border-border-light { border-color: var(--border-dark) !important; }
		.dark.oled-dark hr, .dark.oled-dark .divider { border-color: var(--divider-dark) !important; color: var(--divider-dark) !important; background-color: var(--divider-dark) !important; }
		 .dark.oled-dark .\!divider { border-color: var(--divider-dark) !important; color: var(--divider-dark) !important; background-color: var(--divider-dark) !important; }
		.dark.oled-dark .shadow, .dark.oled-dark .shadow-sm, .dark.oled-dark .shadow-md, .dark.oled-dark .shadow-lg, .dark.oled-dark .shadow-xl, .dark.oled-dark .drop-shadow, .dark.oled-dark .drop-shadow-md, .dark.oled-dark .drop-shadow-lg { box-shadow: none !important; filter: none !important; }
		.dark.oled-dark :focus-visible { outline: none !important; box-shadow: 0 0 0 1px var(--border-strong-dark), 0 0 0 3px var(--ring-dark) !important; }
		.dark.oled-dark [class*="bg-bg-dark/"], .dark.oled-dark [class*="bg-card-dark/"], .dark.oled-dark [class*="from-bg-dark"], .dark.oled-dark [class*="via-bg-dark"], .dark.oled-dark [class*="to-bg-dark"] { background-color: #000 !important; background-image: none !important; }
		.dark.oled-dark #sidebar-overlay { background: rgba(0,0,0,0.80) !important; }
		.dark.oled-dark *::-webkit-scrollbar { width: 10px; height: 10px; }
		.dark.oled-dark *::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.14); border: 2px solid #000; border-radius: 999px; }
		.dark.oled-dark *::-webkit-scrollbar-track { background: #000; }
		.dark.oled-dark .hoverable:hover, .dark.oled-dark tr:hover, .dark.oled-dark .list-row:hover { background-color: var(--surface-hover-dark); }
		.dark.oled-dark .code, .dark.oled-dark .chip, .dark.oled-dark .badge { background-color: #000 !important; border-color: var(--border-dark) !important; color: var(--text-secondary-dark) !important; }
		.dark.oled-dark .\!code { background-color: #000 !important; border-color: var(--border-dark) !important; color: var(--text-secondary-dark) !important; }
		/* Your base overrides in Tailwind's base layer */
		/* ==========================================================================
		   3. Global Page Layout & Structure
		   ========================================================================== */
		.\!container {
  width: 100% !important;
}
		.container {
  width: 100%;
}
		@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }
  .container {
    max-width: 640px;
  }
}
		@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }
  .container {
    max-width: 768px;
  }
}
		@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }
  .container {
    max-width: 1024px;
  }
}
		@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }
  .container {
    max-width: 1280px;
  }
}
		@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }
  .container {
    max-width: 1536px;
  }
}
		.ai-history-btn {
  border-radius: 9999px;
  background-color: rgb(226 232 240 / 0.5);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
		.ai-history-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
		.ai-history-btn:is(.dark *) {
  background-color: rgb(0 0 0 / 0.3);
}
		.ai-history-btn:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
		.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
		.pointer-events-none {
  pointer-events: none;
}
		.visible {
  visibility: visible;
}
		.invisible {
  visibility: hidden;
}
		.fixed {
  position: fixed;
}
		.absolute {
  position: absolute;
}
		.relative {
  position: relative;
}
		.inset-0 {
  inset: 0px;
}
		.inset-6 {
  inset: 1.5rem;
}
		.inset-x-0 {
  left: 0px;
  right: 0px;
}
		.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
		.-right-1 {
  right: -0.25rem;
}
		.-right-2 {
  right: -0.5rem;
}
		.-right-3 {
  right: -0.75rem;
}
		.-top-2 {
  top: -0.5rem;
}
		.-top-3 {
  top: -0.75rem;
}
		.bottom-0 {
  bottom: 0px;
}
		.bottom-2 {
  bottom: 0.5rem;
}
		.bottom-6 {
  bottom: 1.5rem;
}
		.bottom-8 {
  bottom: 2rem;
}
		.bottom-\[110px\] {
  bottom: 110px;
}
		.bottom-\[80px\] {
  bottom: 80px;
}
		.bottom-full {
  bottom: 100%;
}
		.left-0 {
  left: 0px;
}
		.left-1\/2 {
  left: 50%;
}
		.left-2 {
  left: 0.5rem;
}
		.left-3 {
  left: 0.75rem;
}
		.left-4 {
  left: 1rem;
}
		.left-5 {
  left: 1.25rem;
}
		.left-6 {
  left: 1.5rem;
}
		.left-8 {
  left: 2rem;
}
		.left-full {
  left: 100%;
}
		.right-0 {
  right: 0px;
}
		.right-1\.5 {
  right: 0.375rem;
}
		.right-2 {
  right: 0.5rem;
}
		.right-3 {
  right: 0.75rem;
}
		.right-4 {
  right: 1rem;
}
		.right-5 {
  right: 1.25rem;
}
		.right-6 {
  right: 1.5rem;
}
		.top-0 {
  top: 0px;
}
		.top-1 {
  top: 0.25rem;
}
		.top-1\.5 {
  top: 0.375rem;
}
		.top-1\/2 {
  top: 50%;
}
		.top-2 {
  top: 0.5rem;
}
		.top-3 {
  top: 0.75rem;
}
		.top-4 {
  top: 1rem;
}
		.top-full {
  top: 100%;
}
		.z-0 {
  z-index: 0;
}
		.z-10 {
  z-index: 10;
}
		.z-20 {
  z-index: 20;
}
		.z-40 {
  z-index: 40;
}
		.z-50 {
  z-index: 50;
}
		.z-\[1000\] {
  z-index: 1000;
}
		.z-\[100\] {
  z-index: 100;
}
		.z-\[59\] {
  z-index: 59;
}
		.z-\[60\] {
  z-index: 60;
}
		.z-\[70\] {
  z-index: 70;
}
		.z-\[80\] {
  z-index: 80;
}
		.z-\[90\] {
  z-index: 90;
}
		.col-span-1 {
  grid-column: span 1 / span 1;
}
		.col-span-full {
  grid-column: 1 / -1;
}
		.\!m-0 {
  margin: 0px !important;
}
		.-m-6 {
  margin: -1.5rem;
}
		.\!my-6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
		.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
		.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
		.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}
		.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
		.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
		.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
		.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
		.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
		.-mb-2 {
  margin-bottom: -0.5rem;
}
		.-mb-4 {
  margin-bottom: -1rem;
}
		.-mb-5 {
  margin-bottom: -1.25rem;
}
		.-mr-2 {
  margin-right: -0.5rem;
}
		.-mt-1 {
  margin-top: -0.25rem;
}
		.-mt-2 {
  margin-top: -0.5rem;
}
		.-mt-3 {
  margin-top: -0.75rem;
}
		.-mt-4 {
  margin-top: -1rem;
}
		.mb-0 {
  margin-bottom: 0px;
}
		.mb-1 {
  margin-bottom: 0.25rem;
}
		.mb-12 {
  margin-bottom: 3rem;
}
		.mb-2 {
  margin-bottom: 0.5rem;
}
		.mb-3 {
  margin-bottom: 0.75rem;
}
		.mb-4 {
  margin-bottom: 1rem;
}
		.mb-5 {
  margin-bottom: 1.25rem;
}
		.mb-6 {
  margin-bottom: 1.5rem;
}
		.mb-8 {
  margin-bottom: 2rem;
}
		.ml-0\.5 {
  margin-left: 0.125rem;
}
		.ml-1 {
  margin-left: 0.25rem;
}
		.ml-2 {
  margin-left: 0.5rem;
}
		.ml-4 {
  margin-left: 1rem;
}
		.ml-auto {
  margin-left: auto;
}
		.mr-3 {
  margin-right: 0.75rem;
}
		.mr-auto {
  margin-right: auto;
}
		.mt-0\.5 {
  margin-top: 0.125rem;
}
		.mt-1 {
  margin-top: 0.25rem;
}
		.mt-2 {
  margin-top: 0.5rem;
}
		.mt-3 {
  margin-top: 0.75rem;
}
		.mt-4 {
  margin-top: 1rem;
}
		.mt-6 {
  margin-top: 1.5rem;
}
		.mt-8 {
  margin-top: 2rem;
}
		.mt-auto {
  margin-top: auto;
}
		.block {
  display: block;
}
		.inline-block {
  display: inline-block;
}
		.inline {
  display: inline;
}
		.flex {
  display: flex;
}
		.inline-flex {
  display: inline-flex;
}
		.table {
  display: table;
}
		.\!grid {
  display: grid !important;
}
		.grid {
  display: grid;
}
		.contents {
  display: contents;
}
		.hidden {
  display: none;
}
		.aspect-\[2\/3\] {
  aspect-ratio: 2/3;
}
		.aspect-video {
  aspect-ratio: 16 / 9;
}
		.\!h-5 {
  height: 1.25rem !important;
}
		.\!h-6 {
  height: 1.5rem !important;
}
		.\!h-8 {
  height: 2rem !important;
}
		.h-1 {
  height: 0.25rem;
}
		.h-1\.5 {
  height: 0.375rem;
}
		.h-1\/4 {
  height: 25%;
}
		.h-10 {
  height: 2.5rem;
}
		.h-12 {
  height: 3rem;
}
		.h-14 {
  height: 3.5rem;
}
		.h-16 {
  height: 4rem;
}
		.h-2 {
  height: 0.5rem;
}
		.h-24 {
  height: 6rem;
}
		.h-3 {
  height: 0.75rem;
}
		.h-36 {
  height: 9rem;
}
		.h-4 {
  height: 1rem;
}
		.h-5 {
  height: 1.25rem;
}
		.h-6 {
  height: 1.5rem;
}
		.h-60 {
  height: 15rem;
}
		.h-72 {
  height: 18rem;
}
		.h-8 {
  height: 2rem;
}
		.h-9 {
  height: 2.25rem;
}
		.h-96 {
  height: 24rem;
}
		.h-\[60px\] {
  height: 60px;
}
		.h-\[75px\] {
  height: 75px;
}
		.h-full {
  height: 100%;
}
		.h-px {
  height: 1px;
}
		.max-h-48 {
  max-height: 12rem;
}
		.max-h-64 {
  max-height: 16rem;
}
		.max-h-80 {
  max-height: 20rem;
}
		.max-h-96 {
  max-height: 24rem;
}
		.max-h-\[200px\] {
  max-height: 200px;
}
		.max-h-\[60vh\] {
  max-height: 60vh;
}
		.max-h-\[70vh\] {
  max-height: 70vh;
}
		.min-h-\[100px\] {
  min-height: 100px;
}
		.min-h-\[32px\] {
  min-height: 32px;
}
		.min-h-\[400px\] {
  min-height: 400px;
}
		.\!w-5 {
  width: 1.25rem !important;
}
		.\!w-6 {
  width: 1.5rem !important;
}
		.\!w-8 {
  width: 2rem !important;
}
		.w-0 {
  width: 0px;
}
		.w-0\.5 {
  width: 0.125rem;
}
		.w-10 {
  width: 2.5rem;
}
		.w-11 {
  width: 2.75rem;
}
		.w-12 {
  width: 3rem;
}
		.w-14 {
  width: 3.5rem;
}
		.w-16 {
  width: 4rem;
}
		.w-2 {
  width: 0.5rem;
}
		.w-24 {
  width: 6rem;
}
		.w-28 {
  width: 7rem;
}
		.w-3 {
  width: 0.75rem;
}
		.w-32 {
  width: 8rem;
}
		.w-4 {
  width: 1rem;
}
		.w-40 {
  width: 10rem;
}
		.w-5 {
  width: 1.25rem;
}
		.w-6 {
  width: 1.5rem;
}
		.w-72 {
  width: 18rem;
}
		.w-8 {
  width: 2rem;
}
		.w-80 {
  width: 20rem;
}
		.w-9 {
  width: 2.25rem;
}
		.w-\[50px\] {
  width: 50px;
}
		.w-\[calc\(50\%-9rem\)\] {
  width: calc(50% - 9rem);
}
		.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
		.w-full {
  width: 100%;
}
		.w-screen {
  width: 100vw;
}
		.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}
		.max-w-2xl {
  max-width: 42rem;
}
		.max-w-3xl {
  max-width: 48rem;
}
		.max-w-4xl {
  max-width: 56rem;
}
		.max-w-6xl {
  max-width: 72rem;
}
		.max-w-7xl {
  max-width: 80rem;
}
		.max-w-\[160px\] {
  max-width: 160px;
}
		.max-w-\[170px\] {
  max-width: 170px;
}
		.max-w-\[250px\] {
  max-width: 250px;
}
		.max-w-\[min\(80\%\2c 38rem\)\] {
  max-width: min(80%,38rem);
}
		.max-w-lg {
  max-width: 32rem;
}
		.max-w-md {
  max-width: 28rem;
}
		.max-w-sm {
  max-width: 24rem;
}
		.max-w-xl {
  max-width: 36rem;
}
		.max-w-xs {
  max-width: 20rem;
}
		.flex-1 {
  flex: 1 1 0%;
}
		.flex-none {
  flex: none;
}
		.flex-shrink-0 {
  flex-shrink: 0;
}
		.shrink {
  flex-shrink: 1;
}
		.shrink-0 {
  flex-shrink: 0;
}
		.flex-grow {
  flex-grow: 1;
}
		.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.translate-x-\[150\%\] {
  --tw-translate-x: 150%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
		.animate-bounce {
  animation: bounce 1s infinite;
}
		@keyframes dropAndFade {
  0% {
    transform: translateY(-50px) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
}
		.animate-drop-and-fade {
  animation: dropAndFade 1.5s ease-in-out forwards;
}
		@keyframes dropIn {
  0% {
    transform: translateY(-50px) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
		.animate-drop-in {
  animation: dropIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
		@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
		.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}
		@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10px, 20px);
  }
  100% {
    transform: translate(0, 0);
  }
}
		.animate-float {
  animation: float 6s ease-in-out infinite;
}
		@keyframes pulse {
  50% {
    opacity: .5;
  }
}
		.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
		@keyframes pulse-dot {
  0%, 100% {
    transform: scale(.4);
    opacity: 1;
  }
  50% {
    transform: scale(.7);
    opacity: 0.7;
  }
}
		.animate-pulse-dot {
  animation: pulse-dot 2s infinite ease-in-out;
}
		@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
		.animate-spin {
  animation: spin 1s linear infinite;
}
		@keyframes wiggle {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
		.animate-wiggle {
  animation: wiggle 1s ease-in-out infinite;
}
		.cursor-not-allowed {
  cursor: not-allowed;
}
		.cursor-pointer {
  cursor: pointer;
}
		.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
		.resize-none {
  resize: none;
}
		.resize {
  resize: both;
}
		.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
		.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
		.snap-start {
  scroll-snap-align: start;
}
		.snap-center {
  scroll-snap-align: center;
}
		.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
		.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
		.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
		.flex-row-reverse {
  flex-direction: row-reverse;
}
		.flex-col {
  flex-direction: column;
}
		.flex-wrap {
  flex-wrap: wrap;
}
		.flex-nowrap {
  flex-wrap: nowrap;
}
		.place-items-center {
  place-items: center;
}
		.items-start {
  align-items: flex-start;
}
		.items-end {
  align-items: flex-end;
}
		.items-center {
  align-items: center;
}
		.items-baseline {
  align-items: baseline;
}
		.items-stretch {
  align-items: stretch;
}
		.justify-start {
  justify-content: flex-start;
}
		.justify-end {
  justify-content: flex-end;
}
		.justify-center {
  justify-content: center;
}
		.justify-between {
  justify-content: space-between;
}
		.gap-0 {
  gap: 0px;
}
		.gap-1 {
  gap: 0.25rem;
}
		.gap-1\.5 {
  gap: 0.375rem;
}
		.gap-2 {
  gap: 0.5rem;
}
		.gap-3 {
  gap: 0.75rem;
}
		.gap-4 {
  gap: 1rem;
}
		.gap-5 {
  gap: 1.25rem;
}
		.gap-6 {
  gap: 1.5rem;
}
		.gap-8 {
  gap: 2rem;
}
		.gap-y-8 {
  row-gap: 2rem;
}
		.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
		.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
		.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
		.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
		.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
		.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
		.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
		.self-start {
  align-self: flex-start;
}
		.overflow-auto {
  overflow: auto;
}
		.overflow-hidden {
  overflow: hidden;
}
		.overflow-x-auto {
  overflow-x: auto;
}
		.overflow-y-auto {
  overflow-y: auto;
}
		.overflow-y-hidden {
  overflow-y: hidden;
}
		.scroll-smooth {
  scroll-behavior: smooth;
}
		.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
		.whitespace-nowrap {
  white-space: nowrap;
}
		.whitespace-pre-wrap {
  white-space: pre-wrap;
}
		.break-all {
  word-break: break-all;
}
		.rounded {
  border-radius: 0.25rem;
}
		.rounded-2xl {
  border-radius: 1rem;
}
		.rounded-3xl {
  border-radius: 1.5rem;
}
		.rounded-full {
  border-radius: 9999px;
}
		.rounded-lg {
  border-radius: 0.5rem;
}
		.rounded-md {
  border-radius: 0.375rem;
}
		.rounded-xl {
  border-radius: 0.75rem;
}
		.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
		.rounded-l-xl {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
		.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
		.border {
  border-width: 1px;
}
		.border-2 {
  border-width: 2px;
}
		.border-4 {
  border-width: 4px;
}
		.border-b {
  border-bottom-width: 1px;
}
		.border-r {
  border-right-width: 1px;
}
		.border-t {
  border-top-width: 1px;
}
		.border-\[color-mix\(in_srgb\2c var\(--accent-color\)_20\%\2c transparent\)\] {
  border-color: color-mix(in srgb,var(--accent-color) 20%,transparent);
}
		.border-\[color-mix\(in_srgb\2c var\(--accent-color\)_30\%\2c transparent\)\] {
  border-color: color-mix(in srgb,var(--accent-color) 30%,transparent);
}
		.border-accent {
  border-color: var(--accent-color);
}
		.border-blue-500\/30 {
  border-color: rgb(59 130 246 / 0.3);
}
		.border-border-dark {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
		.border-border-light {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
		.border-card-light {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
		.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
		.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
		.border-gray-700\/50 {
  border-color: rgb(55 65 81 / 0.5);
}
		.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
		.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
		.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
		.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
		.border-red-500\/80 {
  border-color: rgb(239 68 68 / 0.8);
}
		.border-slate-300\/50 {
  border-color: rgb(203 213 225 / 0.5);
}
		.border-slate-500 {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}
		.border-slate-500\/40 {
  border-color: rgb(100 116 139 / 0.4);
}
		.border-slate-600 {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
		.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
		.border-transparent {
  border-color: transparent;
}
		.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
		.border-white\/50 {
  border-color: rgb(255 255 255 / 0.5);
}
		.border-yellow-500\/30 {
  border-color: rgb(234 179 8 / 0.3);
}
		.\!border-r-accent {
  border-right-color: var(--accent-color) !important;
}
		.\!border-r-black {
  --tw-border-opacity: 1 !important;
  border-right-color: rgb(0 0 0 / var(--tw-border-opacity, 1)) !important;
}
		.\!border-r-white {
  --tw-border-opacity: 1 !important;
  border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1)) !important;
}
		.\!border-t-accent {
  border-top-color: var(--accent-color) !important;
}
		.\!border-t-black {
  --tw-border-opacity: 1 !important;
  border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1)) !important;
}
		.\!border-t-white {
  --tw-border-opacity: 1 !important;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1)) !important;
}
		.bg-\[color-mix\(in_srgb\2c var\(--accent-color\)_10\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--accent-color) 10%,transparent);
}
		.bg-\[color-mix\(in_srgb\2c var\(--accent-color\)_20\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--accent-color) 20%,transparent);
}
		.bg-accent {
  background-color: var(--accent-color);
}
		.bg-bg-light {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
		.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
		.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
		.bg-black\/5 {
  background-color: rgb(0 0 0 / 0.05);
}
		.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
		.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
		.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
		.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
		.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
		.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}
		.bg-blue-600\/20 {
  background-color: rgb(37 99 235 / 0.2);
}
		.bg-border-light {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
		.bg-card-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
		.bg-card-light {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
		.bg-card-light\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
		.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
		.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
		.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
		.bg-gray-700\/50 {
  background-color: rgb(55 65 81 / 0.5);
}
		.bg-gray-800\/60 {
  background-color: rgb(31 41 55 / 0.6);
}
		.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
		.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}
		.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
		.bg-green-600\/20 {
  background-color: rgb(22 163 74 / 0.2);
}
		.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
		.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
		.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
		.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
		.bg-red-600\/10 {
  background-color: rgb(220 38 38 / 0.1);
}
		.bg-red-600\/20 {
  background-color: rgb(220 38 38 / 0.2);
}
		.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
		.bg-slate-100\/80 {
  background-color: rgb(241 245 249 / 0.8);
}
		.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
		.bg-slate-200\/50 {
  background-color: rgb(226 232 240 / 0.5);
}
		.bg-slate-200\/70 {
  background-color: rgb(226 232 240 / 0.7);
}
		.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
		.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
		.bg-slate-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
		.bg-slate-500\/10 {
  background-color: rgb(100 116 139 / 0.1);
}
		.bg-slate-500\/5 {
  background-color: rgb(100 116 139 / 0.05);
}
		.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
		.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
		.bg-slate-700\/70 {
  background-color: rgb(51 65 85 / 0.7);
}
		.bg-slate-700\/80 {
  background-color: rgb(51 65 85 / 0.8);
}
		.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
		.bg-slate-800\/50 {
  background-color: rgb(30 41 59 / 0.5);
}
		.bg-slate-800\/80 {
  background-color: rgb(30 41 59 / 0.8);
}
		.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
		.bg-transparent {
  background-color: transparent;
}
		.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
		.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
		.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
		.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
		.bg-yellow-500\/10 {
  background-color: rgb(234 179 8 / 0.1);
}
		.bg-yellow-500\/20 {
  background-color: rgb(234 179 8 / 0.2);
}
		.bg-yellow-600\/20 {
  background-color: rgb(202 138 4 / 0.2);
}
		.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
		.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
		.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
		.from-black\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
		.from-gray-900 {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
		.from-slate-200 {
  --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(226 232 240 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
		.via-bg-dark {
  --tw-gradient-to: rgb(15 18 26 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0F121A var(--tw-gradient-via-position), var(--tw-gradient-to);
}
		.via-bg-light {
  --tw-gradient-to: rgb(241 245 249 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #F1F5F9 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
		.to-black {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
		.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
		.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
		.stroke-current {
  stroke: currentColor;
}
		.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
		.p-1 {
  padding: 0.25rem;
}
		.p-2 {
  padding: 0.5rem;
}
		.p-3 {
  padding: 0.75rem;
}
		.p-4 {
  padding: 1rem;
}
		.p-5 {
  padding: 1.25rem;
}
		.p-6 {
  padding: 1.5rem;
}
		.p-8 {
  padding: 2rem;
}
		.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
		.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
		.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
		.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
		.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
		.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
		.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
		.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
		.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
		.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
		.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
		.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
		.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
		.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
		.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
		.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
		.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
		.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
		.pb-1 {
  padding-bottom: 0.25rem;
}
		.pb-24 {
  padding-bottom: 6rem;
}
		.pb-28 {
  padding-bottom: 7rem;
}
		.pb-4 {
  padding-bottom: 1rem;
}
		.pb-6 {
  padding-bottom: 1.5rem;
}
		.pl-10 {
  padding-left: 2.5rem;
}
		.pl-12 {
  padding-left: 3rem;
}
		.pl-14 {
  padding-left: 3.5rem;
}
		.pl-16 {
  padding-left: 4rem;
}
		.pl-2 {
  padding-left: 0.5rem;
}
		.pl-3 {
  padding-left: 0.75rem;
}
		.pl-8 {
  padding-left: 2rem;
}
		.pr-1 {
  padding-right: 0.25rem;
}
		.pr-12 {
  padding-right: 3rem;
}
		.pr-14 {
  padding-right: 3.5rem;
}
		.pr-2 {
  padding-right: 0.5rem;
}
		.pr-3 {
  padding-right: 0.75rem;
}
		.pr-4 {
  padding-right: 1rem;
}
		.pr-48 {
  padding-right: 12rem;
}
		.pt-0 {
  padding-top: 0px;
}
		.pt-1 {
  padding-top: 0.25rem;
}
		.pt-2 {
  padding-top: 0.5rem;
}
		.pt-3 {
  padding-top: 0.75rem;
}
		.pt-4 {
  padding-top: 1rem;
}
		.pt-\[15vh\] {
  padding-top: 15vh;
}
		.text-left {
  text-align: left;
}
		.text-center {
  text-align: center;
}
		.text-right {
  text-align: right;
}
		.align-middle {
  vertical-align: middle;
}
		.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
		.font-sans {
  font-family: Inter, sans-serif;
}
		.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
		.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
		.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
		.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
		.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
		.text-\[10px\] {
  font-size: 10px;
}
		.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
		.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
		.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
		.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
		.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
		.font-bold {
  font-weight: 700;
}
		.font-extrabold {
  font-weight: 800;
}
		.font-medium {
  font-weight: 500;
}
		.font-normal {
  font-weight: 400;
}
		.font-semibold {
  font-weight: 600;
}
		.uppercase {
  text-transform: uppercase;
}
		.capitalize {
  text-transform: capitalize;
}
		.italic {
  font-style: italic;
}
		.leading-none {
  line-height: 1;
}
		.leading-relaxed {
  line-height: 1.625;
}
		.tracking-wider {
  letter-spacing: 0.05em;
}
		.tracking-widest {
  letter-spacing: 0.1em;
}
		.\!text-red-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important;
}
		.text-accent {
  color: var(--accent-color);
}
		.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
		.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
		.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
		.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
		.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
		.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
		.text-emerald-200 {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
		.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
		.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
		.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
		.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
		.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
		.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
		.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
		.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
		.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
		.text-green-500\/50 {
  color: rgb(34 197 94 / 0.5);
}
		.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
		.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
		.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
		.text-pink-200 {
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}
		.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
		.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
		.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
		.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
		.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
		.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
		.text-sky-200 {
  --tw-text-opacity: 1;
  color: rgb(186 230 253 / var(--tw-text-opacity, 1));
}
		.text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
		.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
		.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
		.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
		.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
		.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
		.text-slate-500\/80 {
  color: rgb(100 116 139 / 0.8);
}
		.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
		.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
		.text-text-dark {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
		.text-text-light {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
		.text-violet-200 {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}
		.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
		.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
		.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
		.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
		.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
		.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
		.placeholder-gray-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
		.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
		.placeholder-slate-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
		.placeholder-slate-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
		.opacity-0 {
  opacity: 0;
}
		.opacity-20 {
  opacity: 0.2;
}
		.opacity-25 {
  opacity: 0.25;
}
		.opacity-50 {
  opacity: 0.5;
}
		.opacity-60 {
  opacity: 0.6;
}
		.opacity-75 {
  opacity: 0.75;
}
		.opacity-90 {
  opacity: 0.9;
}
		.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
		.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
		.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
		.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
		.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
		.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
		.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
		.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
		.backdrop-blur-2xl {
  --tw-backdrop-blur: blur(40px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
		.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
		.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
		.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
		.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
		.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
		.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
		.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
		.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
		.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
		.duration-150 {
  transition-duration: 150ms;
}
		.duration-200 {
  transition-duration: 200ms;
}
		.duration-300 {
  transition-duration: 300ms;
}
		.duration-500 {
  transition-duration: 500ms;
}
		.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
		.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
		.no-scrollbar::-webkit-scrollbar {
  display: none;
}
		.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
		#page-container { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-y; scroll-behavior: smooth; padding-top: var(--banner-height); transition: padding-top 0.4s ease-in-out; }
		#header-left, #header-right { top: calc(env(safe-area-inset-top) + 1rem + var(--banner-height)); transition: top 0.4s ease-in-out; }
		.page-view { width: 100dvw; }
		.h-dynamic-screen { height: calc(var(--vh) * 100); min-height: calc(var(--vh) * 100); }
		/* --- Page Variables --- */
		.tools-page-header { padding-top: calc(var(--safe-area-inset-top) + 1rem); padding-bottom: 8px; z-index: 10; --page-bg-color: #F1F5F9; }
		.dark .tools-page-header { --page-bg-color: #0F121A; }
		.page-content-flex { flex-grow: 1; }
		/* --- Footer Rules --- */
		body.invitation-view footer { display: none; }
		/* --- Loading Screen --- */
		html.dark { --overlay-bg: #0F121A; }
		#loading-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--overlay-bg); transition: opacity 0.5s ease-in-out; }
		#loading-overlay.hidden { opacity: 0; pointer-events: none; }
		.loading-logo { width: 100px; height: 100px; }
		.animations-paused .card-base-overflow *,
		.animations-paused .card-base * {
			animation-play-state: paused !important;
		}
		/* ==========================================================================
		   4. PWA & Safe Area Adjustments
		   ========================================================================== */
		@media screen and (display-mode: standalone), (navigator.standalone) {
			.main-header, .tools-page-header, #invitation-guide-header { padding-top: calc(env(safe-area-inset-top) + 0rem); }
			#page-container { height: 100vh; }
            #loading-overlay { height: 100vh; padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
			#slide-content-container { margin-bottom: -1rem; }
			#now-playing-banner.visible { transform: translateY(0); }
		}
		/* ==========================================================================
		   5. Scrolling & Touch Behavior
		   ========================================================================== */
		#scroll-to-top-area { position: fixed; top: env(safe-area-inset-top); left: 0; width: 100%; height: 50px; z-index: 40; -webkit-tap-highlight-color: transparent; }
		body.swipe-locked #page-container { overflow-x: hidden !important; scroll-snap-type: none !important; }
		body.swipe-disabled #page-container { overflow-x: hidden !important; touch-action: auto !important; }
		.cards-container.horizontal-scroll { touch-action: pan-x; overscroll-behavior-x: contain; }
		.cards-container { overscroll-behavior-x: none; touch-action: pan-y; }
		/* ==========================================================================
		   6. Layout Modes (Carousel, Grid)
		   ========================================================================== */
		/* --- Layout: Gap Carousel (3D gap + center scaling) --- */
		.layout-gap-carousel .cards-container { overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; display: flex; flex-wrap: nowrap; gap: 1rem; perspective: 1000px; touch-action: pan-x; overscroll-behavior-x: contain; }
		.layout-gap-carousel .card { flex: 0 0 auto; transition: border-color 0.3s ease; transform-origin: center center; border: 2px solid transparent; }
		.layout-gap-carousel .card.is-centered { border-color: var(--accent-color); border-radius: 1rem; }
		/* --- Layout: Horizontal Carousel --- */
		.layout-carousel-h .cards-container { scroll-snap-type: x mandatory; perspective: 1000px; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; }
		.layout-carousel-h .card { scroll-snap-align: center; transition: transform 0.2s ease-out, opacity 0.2s ease-out, border-color 0.3s ease; transform-origin: center center; border: 2px solid transparent; }
		.layout-carousel-h .card.is-active { border-color: var(--accent-color); border-radius: 1rem; }
		.layout-carousel-h .carousel-spacer { display: block; }
		/* --- Layout: Vertical Carousel --- */
		.layout-carousel-v #dashboard-page { display: flex; flex-direction: column; }
		.layout-carousel-v .main-content-container { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; }
		.layout-carousel-v .cards-container { flex-grow: 1; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; perspective: 1000px; flex-wrap: nowrap; padding-top: 1rem; padding-bottom: 2rem; }
		.layout-carousel-v .card { scroll-snap-align: center; transition: transform 0.2s ease-out, opacity 0.2s ease-out, border-color 0.3s ease; transform-origin: center center; border: 2px solid transparent; margin-bottom: 1rem; }
		.layout-carousel-v .card.is-active { border-color: var(--accent-color); border-radius: 1rem; }
		.layout-carousel-v .carousel-spacer { display: none; }
		/* --- Disabling Carousel Effects --- */
		.remove-carousel-effects .cards-container { perspective: none !important; scroll-snap-type: none !important; }
		.remove-carousel-effects .card { transform: none !important; opacity: 1 !important; transition: border-color 0.3s ease !important; border-color: transparent !important; scroll-snap-align: none !important; }
		.remove-carousel-effects .layout-carousel-h .cards-container { touch-action: pan-x; overscroll-behavior-x: contain; }
		.remove-carousel-effects .card.is-active,
		.remove-carousel-effects .card.is-centered { border-color: var(--accent-color) !important; border-radius: 1rem; }
		/* --- Layout: Grid --- */
		.layout-grid .card[data-target="#server-updates-page"] { display: none; }
		.layout-grid #grid-status-card-container { display: block; grid-column: 1 / -1; margin-top: 1rem; }
		.layout-grid #dashboard-page { overflow-y: auto; }
		.layout-grid .main-content-container { display: grid; flex-grow: 0; grid-template-rows: auto; align-items: start; padding-top: 45px; scroll-margin-top: 16px; }
		.layout-grid .main-header { grid-column: 1 / -1; text-align: center; margin: 0; }
		.layout-grid .main-header h1, .layout-grid .main-header p { max-width: none; margin: 0; }
		.layout-grid .cards-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; justify-items: stretch; align-items: stretch; text-align: center; overflow: visible; }
		@media (min-width: 640px) { .layout-grid .cards-container { grid-template-columns: repeat(3, 1fr); } }
		@media (min-width: 768px) { .layout-grid .cards-container { grid-template-columns: repeat(4, 1fr); } }
		@media (min-width: 1024px) { .layout-grid .cards-container { grid-template-columns: repeat(5, 1fr); } }
		@media (min-width: 1280px) { .layout-grid .cards-container { grid-template-columns: repeat(6, 1fr); } }
		.layout-grid .card { position: relative; aspect-ratio: 1 / 1; width: 100%; height: auto !important; min-height: 0 !important; display: grid; place-items: center; text-align: center; transform: translateZ(0) scale(1); transition: transform 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out; will-change: transform; padding: clamp(10px, 1.6vw, 16px); }
		.layout-grid .card[class*="h-"], .layout-grid .card[class*="min-h-"] { height: auto !important; min-height: 0 !important; }
		.layout-grid .card p { display: none; }
		.layout-grid .card > div:first-child, .layout-grid .card > h3 { margin-bottom: 0.5rem; }
		.layout-grid .card > span { margin-top: 0; }
		.layout-grid .carousel-spacer { display: none; }
		.layout-grid .card .self-start { align-self: center !important; }
		.layout-grid .card:hover { z-index: 2; transform: translateZ(0) scale(1.04); border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }
		.dark.oled-dark .layout-grid .card:hover { box-shadow: none; background-color: #0d0d0d; }
		@media (prefers-reduced-motion: reduce) { .layout-grid .card { transition: border-color 160ms ease-out; } .layout-grid .card:hover { transform: none; box-shadow: none; } }
		@supports not (aspect-ratio: 1 / 1) { .layout-grid .card { height: auto; } .layout-grid .card::before { content: ""; display: block; padding-top: 100%; } .layout-grid .card > * { position: absolute; inset: 0; display: grid; place-items: center; } }
		/* --- Layout: Swipe Navigation Tabs --- */
		#blade-nav-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; opacity: 0; transition: opacity 0.3s ease-in-out; }
		#blade-nav-container.visible { opacity: 1; }
		.blade-tab { position: absolute; top: 50%; width: 50px; height: 160px; background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); color: #a0aec0; cursor: pointer; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: all; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: mixed; transform-origin: center; font-size: 1.1rem; font-weight: 600; text-transform: capitalize; letter-spacing: 1px; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
		/* --- Left Tabs --- */
		.blade-tab[data-blade-pos="left"][data-blade-index="0"] { left: 0; transform: translateY(-50%) perspective(150px) rotateY(25deg); border-top-right-radius: 20px; border-bottom-right-radius: 20px; z-index: 4; }
		.blade-tab[data-blade-pos="left"][data-blade-index="1"] { left: 15px; transform: translateY(-50%) perspective(150px) rotateY(20deg); border-top-right-radius: 20px; border-bottom-right-radius: 20px; z-index: 3; }
		/* --- Right Tabs --- */
		.blade-tab[data-blade-pos="right"][data-blade-index="0"] { right: 0; transform: translateY(-50%) perspective(150px) rotateY(-25deg); border-top-left-radius: 20px; border-bottom-left-radius: 20px; z-index: 4; }
		.blade-tab[data-blade-pos="right"][data-blade-index="1"] { right: 15px; transform: translateY(-50%) perspective(150px) rotateY(-20deg); border-top-left-radius: 20px; border-bottom-left-radius: 20px; z-index: 3; }
		/* --- Active Tab Highlight --- */
		.blade-tab.active { color: white; z-index: 25 !important; transform: translateY(-50%) scale(1.1) !important; box-shadow: 0 0 30px rgba(0,0,0,0.5); background: rgba(59, 130, 246, 0.5); border-color: rgba(59, 130, 246, 0.8); }
		/* ==========================================================================
		   7. Sidebar
		   ========================================================================== */
		/* --- Collapsible Sidebar --- */
		body.sidebar-open { touch-action: none; }
		#sidebar-nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
		.sidebar-collapsed .nav-label.is-category-header { display: block; opacity: 1; pointer-events: auto; width: auto; text-align: center; padding: 0.75rem 0 0.25rem 0; }
		#sidebar-menu { transition: width 0.3s ease-in-out, transform 0.3s ease-in-out; }
		#sidebar-menu .nav-label, #sidebar-menu .sidebar-title-text { white-space: nowrap; transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out; }
		.sidebar-title-icon { display: none; }
		.sidebar-collapsed #sidebar-menu { width: 7rem; transition: width 0.3s ease-in-out, transform 0.3s ease-in-out; }
		.sidebar-collapsed .nav-label, .sidebar-collapsed .sidebar-title-text { opacity: 0; pointer-events: none; width: 0; display: none; }
		.sidebar-collapsed .sidebar-title-icon { display: block; margin-left: 3px; }
		.sidebar-collapsed .sidebar-title-link { justify-content: center; width: 100%; }
		.sidebar-collapsed .nav-icon { margin-left: auto; margin-right: auto; }
		.sidebar-collapsed #close-sidebar-button { opacity: 0; pointer-events: none; }
		.sidebar-collapsed #sidebar-collapse-toggle .collapse-icon { transform: rotate(180deg); }
		.sidebar-collapsed #sidebar-menu-theme-toggle .collapse-icon { margin-right: 10px; }
		#sidebar-copyright { opacity: 0; transition: opacity 0.1s ease-out; }
		.sidebar-collapsed #sidebar-copyright { opacity: 1; transition: opacity 0.3s ease-in 0.2s; }
		.sidebar-collapsed #sidebar-footer-controls button { justify-content: center; }
		.sidebar-collapsed .side-nav-link { justify-content: center; }
		.side-nav-link.active-nav-link { background-color: color-mix(in srgb, var(--accent-color) 20%, transparent); color: var(--accent-color); font-weight: 700; }
		.dark .side-nav-link.active-nav-link { background-color: color-mix(in srgb, var(--accent-color) 25%, transparent); }
		@media (min-width: 1024px) {
			.page-view { width: 100% !important; }
		    body:not(.sidebar-collapsed) { --sidebar-width: 18rem; }
		    body.sidebar-collapsed { --sidebar-width: 5rem; }
		    #sidebar-menu { transform: translateX(0); width: var(--sidebar-width); }
		    #open-sidebar-button, #sidebar-overlay, #close-sidebar-button { display: none; }
		    #page-container, footer, #now-playing-banner, #sessionDrawer, .bottom-nav { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out; }
		    #header-left { left: calc(var(--sidebar-width) + 1.5rem);  transition: left 0.3s ease-in-out; }
		}
		@media (max-width: 1023px) {
		    #sidebar-collapse-toggle { display: none; }
		}
		/* ==========================================================================
		   8. Invitation Guide
		   ========================================================================== */
		#guide-toggle-wrapper { position: relative; z-index: 10; }
		#invitation-guide-page { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-y; }
		#slides-wrapper { background-color: #F1F5F9; }
		.dark #slides-wrapper { background: linear-gradient( to bottom right, #111827, #1f2937, #000000 ); }
		#slide-content-container { margin-bottom: 3rem; }
		.slide-content { display: none; }
		.slide-content.active { display: block; animation: fadeIn 0.8s ease-in-out; }
		.bottom-nav { position: fixed; z-index: 50; bottom: 0; left: 0; right: 0; margin: 0 auto; padding-bottom: calc(1rem + var(--safe-area-inset-bottom)); }
		#nav-icons-container::-webkit-scrollbar { display: none; }
		#nav-icons-container { -ms-overflow-style: none; scrollbar-width: none; }
		.nav-icon-circle.locked { cursor: not-allowed; pointer-events: none; }
		.nav-icon-circle.clickable { cursor: pointer; }
		/* ==========================================================================
		   10. Miscellaneous
		   ========================================================================== */
		/* --- Capsule Toggles (Used by AI Spoiler, AI Trivia, Insights, Timelines ) --- */
		.control-selection { background-color: #e2e8f0; padding: 0.25rem; border-radius: 9999px; display: flex; align-items: center; }
		.dark .control-selection { background-color: #334155; }
		.control-btn { flex: 1 1 0%; padding: 0.5rem 0; border-radius: 9999px; font-weight: 600; transition: all 0.2s ease-in-out; border: none; background-color: transparent; color: #475569; }
		.dark .control-btn { color: #cbd5e1; }
		.control-btn.active { background-color: var(--accent-color); color: #1E293B; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
		.dark .control-btn.active { color: #1E293B; }
		/* --- I think part of capsule toggles? (Used by AI Spoiler and Polls ) --- */
		.custom-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
		.dark .custom-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); }
		/* --- Accordions (Used by AI Spoiler, AI Trivia, Invite Modal, Notification Preferences ) --- */
		details > summary { list-style: none; }
		details > summary::-webkit-details-marker { display: none; }
		details[open] .accordion-arrow { transform: rotate(90deg); }
		details[open] > summary .accordion-arrow { transform: rotate(90deg); }
		#advanced-options-container summary::-webkit-details-marker { display: none; }
		#advanced-options-container[open] .accordion-arrow { transform: rotate(90deg); }
		/* --- Rating Icons (Used by Film History, WILL BE USED BY AI Picker, AI Spoiler, Hot Take Hub, and Timeline Modal) --- */
		.rating-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; }
		.rating-item svg { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; }
		.dark .rating-item span { color: #cbd5e1; }
		.light .rating-item span { color: #475569; }
		.rating-item-link {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}
		.rating-item-link:hover {
  transform: scale(1.1);
}
		/* --- Notification Badges --- */
		.app-badge { pointer-events: none; z-index: 1; }
		.app-badge.pulse { width: 0.75rem; height: 0.75rem; background-color: #ef4444; border-radius: 9999px; border: 2px solid #F1F5F9; animation: pulse 2s infinite ease-in-out; }
		.dark .app-badge.pulse { border-color: #0F121A; }
		.app-badge.counter { min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; font-size: 0.875rem; font-weight: 700; line-height: 1.5rem; color: #FFFFFF; background-color: #ef4444; border-radius: 9999px; border: 2px solid #F1F5F9; display: flex; align-items: center; justify-content: center; }
		.dark .app-badge.counter { border-color: #0F121A; }
		@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.85); } }
		/* --- Text Size/Swipe Sensitivity/Virtual Streamers&Trivia Players Slider --- */
		.slider-container { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; }
		.slider-container .slider-icon-small { font-size: 0.8rem; font-weight: 600; }
		.slider-container .slider-icon-large { font-size: 1.2rem; font-weight: 600; }
		.slider-track-container { flex-grow: 1; position: relative; height: 28px; display: flex; align-items: center; }
		.slider-track-container input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 4px; background: transparent; outline: none; margin: 0; padding: 0; position: relative; z-index: 2; }
		.slider-track { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); height: 4px; background-color: #d1d5db; border-radius: 2px; z-index: 1; pointer-events: none; display: flex; justify-content: space-between; align-items: center; }
		.dark .slider-track { background-color: #4b5563; }
		.slider-tick { width: 2px; height: 8px; background-color: #9ca3af; }
		.dark .slider-tick { background-color: #6b7280; }
		.slider-track-container input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #fff; cursor: pointer; border-radius: 50%; border: 1px solid #d1d5db; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
		.dark .slider-track-container input[type=range]::-webkit-slider-thumb { background: #e2e8f0; border-color: #94a3b8; }
		.slider-track-container input[type=range]::-moz-range-thumb { width: 24px; height: 24px; background: #fff; cursor: pointer; border-radius: 50%; border: 1px solid #d1d5db; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
		.dark .slider-track-container input[type=range]::-moz-range-thumb { background: #e2e8f0; border-color: #94a3b8; }
		#globalSearchResults:empty { display: none; }
		/* --- Loading Spinners --- */
		.loading-spinner-submit { border: 2px solid transparent; border-top: 2px solid var(--accent-color); border-right: 2px solid var(--accent-color); border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; }
		.loading-spinner-history { width: 48px; height: 48px; border: 5px solid #E2E8F0; border-bottom-color: var(--accent-color); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
		.dark .loading-spinner-history { border-color: #334155; border-bottom-color: #E5A20A; }
		.spinner { width: 18px; height: 18px; border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 50%; border-top-color: #000; animation: spin 1s linear infinite; }
		/* --- Misc Media Rules --- */
		@media (max-width: 639px) {
		    #ai-spoiler-page.no-scrollbar::-webkit-scrollbar { display: initial; }
		    #ai-spoiler-page.no-scrollbar { -ms-overflow-style: auto; scrollbar-width: auto; }
		    .poll-summary-view { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
		    .poll-summary-badge-container { width: 100%; }
		    .poll-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
		}
		/* --- Potentially Unused --- */
		.no-snap { scroll-snap-type: none !important; }
		/* ==========================================================================
		   10. Intro Tour
		   ========================================================================== */
		/* --- Intro Tour --- */
		#intro-tour-overlay { position: fixed; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; z-index: 100; }
		#intro-tour-overlay.visible { opacity: 1; pointer-events: auto; }
		#tour-tooltip { position: absolute; width: 18rem; background: rgba(241,245,249,0.8); color: var(--text-dark); border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); padding: 1rem; opacity: 0; transition: all 0.3s ease-in-out; z-index: 102; }
		#tour-highlight-hole { position: absolute; box-shadow: 0 0 0 9999px rgba(15, 18, 26, 0.9); transition: all 0.3s ease-in-out; z-index: 101; }
		.dark #tour-tooltip { position: absolute; width: 18rem; background: rgba(45, 55, 72, 0.8); color: var(--text-dark); border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); padding: 1rem; opacity: 0; transition: all 0.3s ease-in-out; z-index: 102; }
		#tour-tooltip.visible { opacity: 1; }
		#tour-tooltip h3 { color: var(--accent-color); margin-bottom: 0.5rem; font-weight: 700; }
		.dark #tour-tooltip p { font-size: 0.875rem; margin-bottom: 1rem; color: #ccc; }
		#tour-tooltip p { font-size: 0.875rem; margin-bottom: 1rem; color: rgb(107, 114, 128); }
		#tour-tooltip button { font-size: 0.875rem; }
		#ios-share-icon { bottom: calc(env(safe-area-inset-bottom) + 0.5rem); }
		/* ==========================================================================
		   10. Now Playing Banner & Drawer (DON'T GET CONFUSED WITH NOW PLAYIING PAGE CARDS)
		   ========================================================================== */
		.drawer-backdrop { transition: opacity 0.4s ease-in-out; }
		.progress-bar-bg { background-color: rgba(255, 255, 255, 0.2); }
		.progress-bar-inner { background-color: var(--accent-color); }
		#sessionDrawer { z-index: 60; transition: opacity 0.3s ease-in-out; }
		#sessionDrawer:not(.open) { opacity: 0; pointer-events: none; }
		#sessionDrawer .drawer-content-wrapper { transform: translateY(100%); transition: transform 0.4s ease-in-out; padding-bottom: var(--safe-area-inset-bottom); background-color: #111827CC; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); min-height: 80vh; max-height: 90vh; touch-action: none; overscroll-behavior-y: contain; }
		#sessionDrawer.open .drawer-content-wrapper { transform: translateY(0); }
		#sessionDrawer.open .drawer-backdrop { opacity: 1; }
		#sessionDrawerContent .poster { width: 6rem; margin-top: -2rem; }
		.blurred-bg-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
		.blurred-bg { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; filter: blur(20px) brightness(0.5); background-size: cover; background-position: center; }
		/* --- Now Playing Drawer: Drag Handle --- */
		#sessionDrawer .drag-handle { position: relative; padding-top: 10px; padding-bottom: 6px; display: flex; justify-content: center; align-items: center; touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: grab; z-index: 10; }
		#sessionDrawer .drag-handle:active { cursor: grabbing; }
		#sessionDrawer .drag-bar { width: 44px; height: 5px; border-radius: 9999px; background: rgba(255,255,255,0.35); }
		#sessionDrawer .drawer-content-wrapper.drag-snap { transition: transform 0.25s ease; }
		/* --- Now Playing Banner --- */
		#now-playing-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 55; background-color: rgba(24, 28, 40, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: white; transform: translateY(-120%); transition: transform 0.4s ease-in-out; padding-top: var(--safe-area-inset-top); overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
		#now-playing-banner.visible { transform: translateY(0); }
		#now-playing-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; filter: blur(20px) brightness(0.5); transform: scale(1.2); opacity: 0.5; z-index: -1; transition: background-image 0.5s ease-in-out; }
		#now-playing-progress-bar { position: absolute; bottom: 0; left: 0; height: 3px; background-color: var(--accent-color); transition: width 0.5s linear; }
		/* ==========================================================================
		   10. Now Playing PAGE
		   ========================================================================== */
		/* --- Now Playing Page Card --- */
		.now-playing-card .blurred-bg { background-size: cover; background-position: center; filter: blur(8px); }
		.now-playing-card .progress-bar-bg { background-color: rgba(255, 255, 255, 0.2); }
		.now-playing-card .progress-bar-inner { background-color: var(--accent-color); }
		/* ==========================================================================
		   10. F.A.Q. and Pro Tips Accordions
		   ========================================================================== */
		/* --- Accordion --- */
		.accordion-item details { transition: background-color 0.2s ease-in-out; }
		.dark .accordion-item details { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
		.light .accordion-item details { border-bottom: 1px solid #e2e8f0; }
		.accordion-item:last-child details { border-bottom: none; }
		.dark .accordion-item details:hover { background-color: rgba(255, 255, 255, 0.03); }
		.light .accordion-item details:hover { background-color: #f8fafc; }
		.accordion-item summary { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.1rem; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 600; }
		.accordion-item summary::-webkit-details-marker { display: none; }
		.accordion-item summary .icon-plus { transition: transform 0.3s ease; color: var(--accent-color); flex-shrink: 0; }
		.accordion-item summary:hover { color: var(--accent-color); }
		details[open] summary .icon-plus { transform: rotate(45deg); }
		/* --- Prose Styles --- */
		.prose-plex { padding: 0 1.5rem 1.5rem 1.5rem; color: #334155; line-height: 1.7; }
		.prose-plex p, .prose-plex ul, .prose-plex ol { margin-top: 1rem; margin-bottom: 1rem; }
		.prose-plex ul, .prose-plex ol { padding-left: 1.5rem; }
		.prose-plex ul { list-style-type: none; }
		.prose-plex ul li::before { content: '•'; color: var(--accent-color); font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }
		.prose-plex ol { list-style: none; counter-reset: item; }
		.prose-plex ol li { counter-increment: item; }
		.prose-plex ol li::before { content: counter(item); color: var(--accent-color); background-color: color-mix(in srgb, var(--accent-color) 20%, transparent); border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; line-height: 1.5em; display: inline-block; margin-right: 0.5em; margin-left: -2em; font-weight: bold; }
		.prose-plex li { margin-bottom: 0.5rem; }
		.prose-plex strong { color: #0f172a; }
		.prose-plex code { background-color: #e2e8f0; color: var(--accent-color-dark); padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.9em; }
		.prose-plex .info-box { background-color: color-mix(in srgb, var(--accent-color) 10%, transparent); border-left: 4px solid var(--accent-color); padding: 1rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.5rem 0; }
		.prose-plex .info-box-title { font-weight: 700; color: var(--accent-color); margin-bottom: 0.5rem; }
		.prose-plex .info-box-content { color: var(--accent-color-dark); }
		.prose-plex table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; font-size: 0.9rem; }
		.prose-plex th, .prose-plex td { text-align: left; padding: 0.75rem 1rem; border: 1px solid #cbd5e1; }
		.prose-plex th { background-color: #f1f5f9; font-weight: 700; }
		.prose-plex tr:nth-child(even) { background-color: #f8fafc; }
		.prose-plex td strong { color: var(--accent-color); }
		.prose-plex .supported { color: #22C55E; font-weight: bold; }
		.prose-plex .partial { color: #EAB308; font-weight: bold; }
		.prose-plex .not-supported { color: #EF4444; font-weight: bold; }
		/* --- Prose Styles (Dark Mode) --- */
		.dark .prose-plex { color: #D1D5DB; }
		.dark .prose-plex strong { color: #F9FAFB; }
		.dark .prose-plex code { background-color: #374151; color: var(--accent-color); }
		.dark .prose-plex .info-box-content { color: color-mix(in srgb, var(--accent-color) 90%, transparent); }
		.dark .prose-plex th, .dark .prose-plex td { border: 1px solid #4B5563; }
		.dark .prose-plex th { background-color: #374151; }
		.dark .prose-plex tr:nth-child(even) { background-color: rgba(31, 41, 55, 0.3); }
		.dark .prose-plex td strong { color: var(--accent-color); }
		/* ==========================================================================
		   10. Admin page
		   ========================================================================== */
		/* --- Invites Table --- */
		.invite-table-row { cursor: pointer; transition: background-color 0.2s ease-in-out; }
		.invite-details-row { display: none; }
		.invite-details-content { background-color: rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; max-height: 0; overflow: hidden; padding: 0 1rem; }
		.invite-table-row.open + .invite-details-row { display: table-row; }
		.invite-table-row.open + .invite-details-row .invite-details-content { max-height: 200px; padding: 1rem; }
		#invites-table-body td:nth-child(1) { width: 30%; }
		/* Code */
		#invites-table-body td:nth-child(2) { width: 30%; }
		/* Assigned To */
		#invites-table-body td:nth-child(3) { width: 30%; }
		/* Expires */
		.invite-details-content { padding: 0.75rem 1rem; }
		.invite-table-row.open + .invite-details-row .invite-details-content { padding: 0.75rem 1rem; }
		#plexUsersCarousel::-webkit-scrollbar { height: 8px; }
		#plexUsersCarousel::-webkit-scrollbar-thumb { background: rgba(148,163,184,.5); border-radius: 9999px; }
		/* ================================================================= */
		/* --- 1. Toybox Modal Styling --- */
		/* ================================================================= */
		.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    /* This will be controlled by GSAP */
    background-color: rgba(0, 0, 0, 0);
    visibility: hidden;
    opacity: 0;
}
		.modal-content-wrapper {
    /* Base styles for the modal container, animations are handled by GSAP */
    width: 100%;
    max-width: 520px; /* A good default max-width */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 1.5rem; /* More rounded like an iOS folder */
    transform: scale(0.9);
    opacity: 0;
    visibility: hidden;
	position: relative;
    
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
		.dark .modal-content-wrapper {
    background: rgba(30, 41, 59, 0.6); /* slate-800 with transparency */
    border: 1px solid rgba(71, 85, 105, 0.3); /* slate-700 with transparency */
}
		/* Blur effect for the main page content when a modal is open */
		.page-blurred {
    transition: filter 0.4s cubic-bezier(0.45, 0, 0.1, 1);
    filter: blur(12px) brightness(0.7);
}
		/* ================================================================= */
		/* --- 2. Redesigned Form Elements & Modal Layouts --- */
		/* ================================================================= */
		/* Segmented Control for Invite Modal */
		.segmented-control {
    display: flex;
    padding: 4px;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 0.75rem;
    position: relative;
}
		.segmented-control .segment-button {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0.5rem;
    font-weight: 600;
    color: #64748b; /* slate-500 */
    transition: color 0.3s ease;
    z-index: 1;
}
		.dark .segmented-control .segment-button {
    color: #94a3b8; /* slate-400 */
}
		.segmented-control .segment-button.active {
    color: #0f172a; /* slate-900 */
}
		.dark .segmented-control .segment-button.active {
    color: #f8fafc; /* slate-50 */
}
		.segmented-control .slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 4px);
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s cubic-bezier(0.45, 0, 0.1, 1);
    z-index: 0;
}
		.dark .segmented-control .slider {
    background-color: #475569; /* slate-600 */
}
		/* Styled Scrollable List for Libraries */
		.styled-scroll-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
		.styled-scroll-list label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}
		.styled-scroll-list label:hover {
    background-color: rgba(128, 128, 128, 0.1);
}
		.styled-scroll-list input[type="checkbox"] {
    /* Hide default checkbox */
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid #94a3b8; /* slate-400 */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
		.dark .styled-scroll-list input[type="checkbox"] {
    border-color: #64748b; /* slate-500 */
}
		.styled-scroll-list input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
		.styled-scroll-list input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 6px;
    height: 12px;
    border: solid black;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
		/* Toggle Switch */
		.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
		.toggle-switch input { display: none; }
		.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1; /* slate-300 */
    transition: .4s;
    border-radius: 24px;
}
		.dark .toggle-slider { background-color: #475569; /* slate-600 */ }
		.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
		input:checked + .toggle-slider {
    background-color: var(--accent-color);
}
		input:checked + .toggle-slider:before {
    transform: translateX(20px);
}
		/* ================================================================= */
		/* --- 3. User Cards Layout Toggle --- */
		/* ================================================================= */
		/* Main container for users section */
		#plex-users-section {
    position: relative;
}
		/* --- FIX: New Layout Toggle Style --- */
		.layout-toggle {
    display: flex;
    gap: 0.5rem; /* Adds space between the buttons */
    align-items: center;
}
		.layout-toggle button {
    width: 40px;
    height: 40px;
    border-radius: 9999px; /* Makes it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: #cbd5e1; /* slate-300 */
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
}
		.dark .layout-toggle button {
    background-color: rgba(255, 255, 255, 0.1);
}
		.layout-toggle button:hover {
    background-color: rgba(0, 0, 0, 0.5);
}
		.dark .layout-toggle button:hover {
     background-color: rgba(255, 255, 255, 0.2);
}
		.layout-toggle button.active {
    background-color: var(--accent-color);
    color: black;
    transform: scale(1.1);
    box-shadow: 0 4px 15px -2px color-mix(in srgb, var(--accent-color) 40%, transparent);
}
		.layout-toggle button i {
    font-size: 1.5rem;
    line-height: 1;
}
		/* --- FIX: Truncate long usernames --- */
		.user-card .text-xl {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Adjust as needed to prevent pushing the manage button */
}
		/* Container for the user cards */
		#plexUsersContainer.user-layout-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem; /* for scrollbar */
}
		#plexUsersContainer.user-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
		/* Card styles adjustments for both layouts */
		.user-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
		.user-layout-carousel .user-card {
    scroll-snap-align: center;
    flex: 0 0 320px; /* Set a fixed width for carousel items */
}
		/* Highlight for active carousel card */
		.user-layout-carousel .user-card.is-active {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
}
		/* ================================================================= */
		/* --- 4. Invite Modal Component Styles --- */
		/* ================================================================= */
		/* --- Accordion --- */
		.accordion-section {
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 1rem;
    transition: background-color 0.2s ease;
}
		.dark .accordion-section {
    background-color: rgba(0, 0, 0, 0.2);
}
		.accordion-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none; /* Hide the default marker */
}
		.accordion-summary::-webkit-details-marker {
    display: none; /* Hide marker for Safari */
}
		.accordion-arrow {
    font-size: 1.25rem;
    color: #94a3b8; /* slate-400 */
    /* GSAP will handle the rotation, no CSS transition needed here */
}
		.accordion-content {
    padding: 1rem;
    padding-top: 0.5rem;
}
		/* --- Form Elements --- */
		.form-label {
    display: block;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #475569; /* slate-600 */
}
		.dark .form-label {
    color: #cbd5e1; /* slate-300 */
}
		.form-input {
    width: 100%;
    background-color: #f1f5f9; /* slate-100 */
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.75rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
		.dark .form-input {
    background-color: rgba(30, 41, 59, 0.7); /* dark:bg-slate-800/70 */
}
		.form-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 30%, transparent);
}
		.form-input:disabled, .form-input[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}
		/* --- Buttons --- */
		.btn {
    padding: 0.75rem 1rem;
    font-weight: 700;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
		.btn:active {
    transform: scale(0.98);
}
		.btn-primary {
    background-color: #2563eb; /* blue-600 */
    color: white;
}
		.btn-primary:hover {
    background-color: #1d4ed8; /* blue-700 */
}
		.btn-accent {
    background-color: var(--accent-color);
    color: black;
}
		.btn-accent:hover {
    background-color: color-mix(in srgb, var(--accent-color) 90%, black);
}
		.btn-secondary {
    background-color: #4f46e5; /* indigo-600 */
    color: white;
}
		.btn-secondary:hover {
    background-color: #4338ca; /* indigo-700 */
}
		/* Default close button style */
		.modal-footer .btn {
    background-color: #e2e8f0; /* slate-200 */
    color: #1e293b; /* slate-800 */
}
		.dark .modal-footer .btn {
    background-color: #475569; /* slate-600 */
    color: #f1f5f9; /* slate-100 */
}
		.modal-footer .btn:hover {
    background-color: #cbd5e1; /* slate-300 */
}
		.dark .modal-footer .btn:hover {
    background-color: #64748b; /* slate-500 */
}
		/* --- Utility & Toggles --- */
		.utility-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    margin-right: 0.25rem;
    background-color: #e2e8f0; /* slate-200 */
    color: #334155; /* slate-700 */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
		.dark .utility-btn {
    background-color: #475569; /* slate-600 */
    color: #cbd5e1; /* slate-300 */
}
		.utility-btn:hover {
    background-color: #cbd5e1; /* slate-300 */
}
		.dark .utility-btn:hover {
    background-color: #64748b; /* slate-500 */
}
		.toggle-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}
		.library-checkbox {
    /* Inherits from .styled-scroll-list label */
}
		.form-result-message {
    
    text-align: center;
    padding-top: 0.25rem;
    font-size: 0.875rem;
}
		/* ==========================================================================
		   10. Potentially Unused
		   ========================================================================== */
		.leaderboard-scroll-container {
    /* Sets a max height equivalent to about 5 list items */
    max-height: 260px;
    overflow-y: auto;
    /* Adds a little padding on the right to prevent scrollbar from touching content */
    padding-right: 8px; 
}
		/* --- Optional: Custom Scrollbar Styling --- */
		.leaderboard-scroll-container::-webkit-scrollbar {
    width: 6px;
}
		.leaderboard-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
		.leaderboard-scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4); /* gray-400 with opacity */
    border-radius: 10px;
}
		.leaderboard-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.6);
}
		.leaderboard-select {
    background-color: rgba(40, 40, 50, 0.5); /* Semi-transparent dark bg */
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}
		.leaderboard-select:focus {
    outline: none;
    border-color: rgba(var(--color-accent-rgb), 0.7);
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.3);
}
		/* ==========================================================================
		   10. Toybox
		   ========================================================================== */
		/* --- Toybox: iOS Zoom Animation --- */
		#animation-clone { position: fixed; z-index: 100; transform-origin: center center; transition: transform 0.45s cubic-bezier(0.45, 0, 0.1, 1), border-radius 0.45s cubic-bezier(0.45, 0, 0.1, 1), opacity 0.3s ease-out; display: flex; align-items: center; justify-content: center; pointer-events: none; }
		.page-content-wrapper { opacity: 0; transition: opacity 0.3s ease-in; }
		.page-content-wrapper.visible { opacity: 1; }
		#toybox-overlay { background-color: rgba(0, 0, 0, 0.3); }
		/* ==========================================================================
		   10. AI Picker
		   ========================================================================== */
		#suggestion-poster-container .opacity-0 { opacity: 50%; }
		#suggestion-poster-container:hover .opacity-0 { opacity: 80%; }
		#suggestion-poster-container .ph-fill-play { color: white; }
		/* ==========================================================================
		   10. AI Spoiler
		   ========================================================================== */
		.spoiler-content { filter: blur(5px); cursor: pointer; transition: filter 0.3s ease-in-out; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
		.spoiler-content.revealed { filter: blur(0); cursor: default; -webkit-user-select: text; -moz-user-select: text; user-select: text; }
		.prose-spoiler p { margin-top: 1rem; margin-bottom: 1rem; }
		/* ==========================================================================
		   10. AI Trivia
		   ========================================================================== */
		#trivia-card-container { perspective: 1000px; position: relative; }
		#trivia-card-inner { display: grid; transform-style: preserve-3d; transition: transform 0.6s; }
		#trivia-card-inner.flipped { transform: rotateY(180deg); }
		.trivia-card-front, .trivia-card-back, #trivia-card-sizer { grid-area: 1 / 1; backface-visibility: hidden; }
		.trivia-card-back { transform: rotateY(180deg); }
		/* --- Countdown Timer (exact same as Live Trivia but different css variable) --- */
		#countdown-progress { transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.2s linear; }
		.feedback-icon-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 10; }
		/* ==========================================================================
		   10. Live Trivia
		   ========================================================================== */
		/* --- Trivia Toast --- */
		#trivia-toast.show { transform: translateX(0); }
		.glowing-link { animation: glowing-pulse 2s infinite; box-shadow: 0 0 8px var(--accent-color); }
		@keyframes glowing-pulse { 0% { box-shadow: 0 0 8px var(--accent-color); } 50% { box-shadow: 0 0 16px var(--accent-color), 0 0 8px var(--accent-color); } 100% { box-shadow: 0 0 8px var(--accent-color); } }
		/* --- Answer Selection --- */
		#trivia-options-container button.correct { background-color: #22c55e !important; color: white !important; border-color: #16a34a !important; }
		#trivia-options-container button.incorrect { background-color: #ef4444 !important; color: white !important; border-color: #dc2626 !important; opacity: 0.6; }
		#trivia-options-container button.selected { transform: scale(1.05); border-color: var(--accent-color); }
		/* --- Countdown Timer (exact same as AI Trivia but different css variable) --- */
		#trivia-timer-progress { transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.2s linear; }
		/* --- Winner Overlay --- */
		.winner-card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(100, 116, 139, 0.5); }
		.medal-gold { color: #FFD700; }
		.medal-silver { color: #C0C0C0; }
		.medal-bronze { color: #CD7F32; }
		.medal-default { color: #64748B; }
		.poll-option-bar { display: flex; align-items: stretch; border-radius: 0.5rem; overflow: hidden; transition: all 0.2s ease-in-out; border: 2px solid transparent; cursor: pointer; }
		.poll-option-bar:hover { transform: scale(1.02); border-color: var(--accent-color); }
		.poll-option-text { flex-grow: 1; padding: 0.75rem 1rem; font-weight: 600; color: var(--text-light); }
		.dark .poll-option-text { color: var(--text-dark); }
		.poll-option-votes { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; font-weight: 700; min-width: 50px; color: white; }
		#trivia-poll-options .poll-option-bar:nth-child(1) { background-color: rgba(239, 68, 68, 0.2); }
		#trivia-poll-options .poll-option-bar:nth-child(1) .poll-option-votes { background-color: rgba(239, 68, 68, 0.5); }
		#trivia-poll-options .poll-option-bar:nth-child(2) { background-color: rgba(34, 197, 94, 0.2); }
		#trivia-poll-options .poll-option-bar:nth-child(2) .poll-option-votes { background-color: rgba(34, 197, 94, 0.5); }
		#trivia-poll-options .poll-option-bar:nth-child(3) { background-color: rgba(59, 130, 246, 0.2); }
		#trivia-poll-options .poll-option-bar:nth-child(3) .poll-option-votes { background-color: rgba(59, 130, 246, 0.5); }
		#trivia-poll-options .poll-option-bar:nth-child(4) { background-color: rgba(234, 179, 8, 0.2); }
		#trivia-poll-options .poll-option-bar:nth-child(4) .poll-option-votes { background-color: rgba(234, 179, 8, 0.5); }
		/* --- New Poll Voting Styles --- */
		.poll-option-bar.selected-vote {
    border-color: #22c55e; /* Green accent for selection */
    transform: scale(1.02);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}
		.poll-option-bar:disabled {
    cursor: not-allowed;
}
		/* Override Tailwind hover styles on disabled buttons */
		.poll-option-bar:disabled:hover {
    transform: none;
    border-color: transparent;
}
		#leaderboard-modal.visible {
    opacity: 1;
}
		/* --- Tooltip for Icon Button --- */
		.tooltip {
  position: relative;
}
		.tooltip::before, .tooltip::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
		.tooltip::before {
  content: '';
  bottom: 110%;
  border: 5px solid transparent;
  border-top-color: #1f2937; /* bg-gray-800 */
}
		.tooltip::after {
  content: attr(data-tooltip);
  bottom: calc(110% + 5px);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background-color: #1f2937; /* bg-gray-800 */
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
		.tooltip:hover::before, .tooltip:hover::after {
  opacity: 1;
}
		.dark .tooltip::before {
    border-top-color: #334155; /* bg-slate-700 */
}
		.dark .tooltip::after {
    background-color: #334155; /* bg-slate-700 */
}
		/* --- "Or" Divider Style --- */
		.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #64748b; /* text-slate-500 */
  margin: 1.5rem 0;
}
		.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #334155; /* border-slate-700 */
}
		.divider:not(:empty)::before {
  margin-right: .5em;
}
		.divider:not(:empty)::after {
  margin-left: .5em;
}
		/* ==========================================================================
		   16. Hot Take Page
		   ========================================================================== */
		/* --- ADD THIS NEW CSS --- */
		#recently-watched-container {
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
		#recently-watched-container.visible {
    max-height: 500px; /* Or enough height for your content */
    opacity: 1;
}
		#recently-watched-for-review {
    display: flex;
    gap: 1rem; /* 16px */
    overflow-x: auto;
    padding: 0.5rem 1rem 1rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}
		#recently-watched-for-review::-webkit-scrollbar { height: 6px; }
		#recently-watched-for-review::-webkit-scrollbar-track { background: transparent; }
		#recently-watched-for-review::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
    border-radius: 10px;
}
		.review-selection-card {
    flex-shrink: 0;
    width: 128px; /* w-32 */
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    position: relative; /* For the loading spinner */
}
		.review-selection-card:hover {
    transform: translateY(-4px);
}
		.review-selection-card .loading-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.6);
    border-radius: 0.5rem; /* rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
}
		/* --- Hot Take: Rating --- */
		.star-rating .ph-star { color: #CBD5E1; cursor: pointer; transition: color 0.2s; }
		.dark .star-rating .ph-star { color: #4B5563; }
		.star-rating .ph-star:hover, .star-rating .ph-star.filled { color: var(--accent-color); }
		.vote-btn.active { color: var(--accent-color); }
		.filter-btn.active { background-color: var(--accent-color); color: #000; }
		#star-rating-foreground i { margin-right: 0.15rem; }
		/* ==========================================================================
		   17. Timelines Page
		   ========================================================================== */
		.timeline-wrapper { position: relative; width: 100%; padding-top: 0.5rem; padding-bottom: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
		.timeline-grid { position: relative; display: flex; gap: 3.5rem; }
		.timeline-grid::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(56,189,248,.45), rgba(56,189,248,0) 70%) center/100% 20px no-repeat, linear-gradient(90deg, transparent 0%, rgba(56,189,248,.18) 10%, rgba(56,189,248,.55) 50%, rgba(56,189,248,.18) 90%, transparent 100%); filter: drop-shadow(0 0 10px rgba(56,189,248,.35)); }
		.dark .timeline-grid::before { background: radial-gradient(closest-side, rgba(99,102,241,.50), rgba(99,102,241,0) 70%) center/100% 20px no-repeat, linear-gradient(90deg, transparent 0%, rgba(99,102,241,.22) 10%, rgba(99,102,241,.65) 50%, rgba(99,102,241,.22) 90%, transparent 100%); filter: drop-shadow(0 0 12px rgba(99,102,241,.35)); }
		#timeline-order-toggle { background-color: #e2e8f0; padding: 0.25rem; }
		.dark #timeline-order-toggle { background-color: #334155; }
		#timeline-order-toggle .control-btn { padding: 0.25rem 1rem; font-size: 0.875rem; color: #475569; }
		.dark #timeline-order-toggle .control-btn { color: #cbd5e1; }
		#timeline-order-toggle .control-btn.active { background-color: var(--accent-color); color: #1E293B; }
		.dark #timeline-order-toggle .control-btn.active { color: #1E293B; }
		.timeline-entry { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 1rem; flex-shrink: 0; }
		.timeline-entry--above { padding-bottom: 100px; margin-bottom: auto; }
		.timeline-entry--below { padding-top: 100px; margin-top: auto; }
		.timeline-poster { width: 160px; aspect-ratio: 2 / 3; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); border: 2px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
		.timeline-entry:hover .timeline-poster, .timeline-poster:hover { transform: scale(1.1); box-shadow: 0 0 30px -5px var(--accent-color); }
		.timeline-title { width: 160px; text-align: center; margin-top: 0.5rem; font-weight: 600; font-size: 0.8rem; white-space: normal; line-height: 1.2; }
		.timeline-connector { position: absolute; left: 50%; width: 2px; height: 0; top: 0; transform: translateX(-50%); background: rgba(148,163,184,.55); box-shadow: 0 0 8px rgba(56,189,248,.35); pointer-events: none; }
		.dark .timeline-connector { background: rgba(203,213,225,.45); }
		.timeline-entry--above .timeline-connector { bottom: auto; }
		.timeline-entry--below .timeline-connector { top: auto; }
		.timeline-date { position: absolute; left: 50%; transform: translateX(-50%); background-color: var(--bg-light); color: var(--accent-color); border: 1px solid var(--border-light); padding: 4px 10px; border-radius: 9999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; transition: transform .18s ease, filter .18s ease; pointer-events: none; }
		.dark .timeline-date { background-color: var(--bg-dark); border-color: var(--border-dark); }
		.timeline-entry:hover .timeline-date { transform: scale(1.1); filter: brightness(1.06); }
		.timeline-entry--above .timeline-date { bottom: auto; }
		.timeline-entry--below .timeline-date { top: auto; }
		.timeline-group { margin-bottom: 2.5rem; }
		.timeline-title { font-weight: 800; letter-spacing: .02em; margin: 0 0 .75rem .5rem; color: var(--text-light); }
		.dark .timeline-title { color: #e5e7eb; }
		@media (max-width: 640px) {
        	.timeline-poster { width: 5.5rem !important; }
        	.timeline-title  { font-size: .75rem; width: 5.5rem !important; }
        	.timeline-meta   { font-size: .65rem; }
        	.timeline-grid   { gap: .75rem !important; }
        }
		/* ==========================================================================
		   18. Polls
		   ========================================================================== */
		.poll-card-wrapper { background-color: var(--card-light); border-radius: 1rem; padding: 1.25rem; border: 1px solid var(--border-light); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
		.dark .poll-card-wrapper { background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(30, 41, 59, 0.5)); border-color: var(--border-dark); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
		.poll-meta { font-size: 0.875rem; color: #64748B; }
		.dark .poll-meta { color: #94A3B8; }
		.poll-summary-view { display: flex; justify-content: space-between; align-items: left; gap: 1rem; }
		.poll-summary-info { min-width: 0; }
		.poll-summary-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
		.poll-summary-vote, .poll-summary-winner { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; padding: 0.375rem 0.875rem; border-radius: 9999px; flex-shrink: 0; }
		.poll-summary-vote { color: var(--accent-color); background-color: color-mix(in srgb, var(--accent-color) 15%, transparent); }
		.poll-summary-winner { color: #16a34a; background-color: #dcfce7; }
		.dark .poll-summary-winner { color: #4ade80; background-color: #166534; }
		.poll-card-wrapper details summary { list-style: none; cursor: pointer; display: block; }
		.poll-card-wrapper details summary::-webkit-details-marker { display: none; }
		.poll-vote-option, .poll-voted-option, .poll-results-option { display: flex; align-items: center; padding: 0.75rem; border-radius: 0.75rem; gap: 0.75rem; }
		.poll-vote-option { border: 2px solid var(--border-light); cursor: pointer; transition: all 0.2s ease-in-out; }
		.dark .poll-vote-option { border-color: var(--border-dark); }
		.poll-vote-option:hover { border-color: var(--accent-color); }
		.poll-vote-option input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; min-width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid #94A3B8; transition: all 0.2s; flex-shrink: 0; }
		.dark .poll-vote-option input[type="radio"] { border-color: #4B5563; }
		.poll-vote-option input[type="radio"]:checked { border: 6px solid var(--accent-color); background-color: var(--card-light); }
		.dark .poll-vote-option input[type="radio"]:checked { background-color: var(--card-dark); }
		.poll-voted-option { border: 2px solid transparent; opacity: 0.6; }
		.poll-voted-option.my-vote { border-color: var(--accent-color); background-color: color-mix(in srgb, var(--accent-color) 10%, transparent); opacity: 1; }
		.poll-voted-option .fake-radio { min-width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid #94A3B8; flex-shrink: 0; }
		.dark .poll-voted-option .fake-radio { border-color: #4B5563; }
		.poll-voted-option.my-vote .fake-radio { border: 6px solid var(--accent-color); background-color: var(--card-light); }
		.dark .poll-voted-option.my-vote .fake-radio { background-color: var(--card-dark); }
		.poll-results-option { position: relative; justify-content: space-between; overflow: hidden; color: var(--text-light); }
		.dark .poll-results-option { color: var(--text-dark); }
		.poll-results-option .progress-bar { position: absolute; left: 0; top: 0; height: 100%; background-color: #e2e8f0; border-radius: 0.6rem; transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); z-index: 0; }
		.dark .poll-results-option .progress-bar { background-color: #334155; }
		.poll-results-option .option-content, .poll-results-option .vote-count { z-index: 1; font-weight: 600; }
		.poll-results-option .option-content { display: flex; align-items: center; gap: 0.75rem; }
		.poll-results-option.is-winner .progress-bar { background-color: color-mix(in srgb, var(--accent-color) 80%, transparent); }
		.poll-results-option.my-vote { box-shadow: none; }
		.poll-results-option.my-vote .progress-bar { box-shadow: inset 0 0 0 2px var(--accent-color); }
		/* --- Bracket styles --- */
		.bracket-container{display:flex;overflow-x:auto;padding:1rem;gap:50px}
		.bracket-round{display:flex;flex-direction:column;justify-content:space-around;flex-shrink:0}
		.bracket-matchup{position:relative;background-color:rgba(0,0,0,.2);border-radius:.5rem;margin:20px 0;width:250px}
		.bracket-option{cursor:pointer;transition:background-color .2s}
		.bracket-option:hover{background-color:rgba(255,255,255,.1)}
		.bracket-option.winner{background-color:color-mix(in srgb,var(--accent-color) 25%,transparent);font-weight:700}
		.bracket-option.voted-for{box-shadow:inset 3px 0 0 var(--accent-color)}
		.bracket-connector{position:absolute;top:50%;width:25px;height:2px;background-color:#4b5563}
		.bracket-matchup:after{content:'';position:absolute;right:-25px;top:50%;transform:translateY(-50%);width:25px;height:2px;background:#4b5563}
		.bracket-matchup:nth-child(odd)::before{content:'';position:absolute;right:-50px;top:50%;height:calc(100% + 40px);width:2px;background:#4b5563}
		/* ==========================================================================
		   19. Chat Room
		   ========================================================================== */
		#chat-input { max-height: 200px; transition: height 0.2s ease; /* Animate the height change smoothly */ }
		#composer-attachments { display: none; }
		#composer-attachments.has-attachment { display: flex; }
		.attachment-chip { display: inline-flex; align-items: center; gap: .5rem; background: rgba(15, 23, 42, .7); border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; padding: .35rem .5rem .35rem .35rem; }
		.attachment-chip img { width: 48px; height: 48px; -o-object-fit: cover; object-fit: cover; border-radius: .5rem; }
		.attachment-chip button { color: #94a3b8; background: transparent; border: 0; border-radius: .375rem; }
		.attachment-chip button:hover { color: #e2e8f0; }
		#new-messages-indicator, #go-to-bottom-btn { animation: slideUpFadeIn 0.3s ease-out forwards; }
		@keyframes slideUpFadeIn {
			from { opacity: 0; transform: translateY(10px) translateX(var(--tw-translate-x, 0)); }
			to { opacity: 1; transform: translateY(0) translateX(var(--tw-translate-x, 0)); }
		}
		#gifDrawer .drawer-content-wrapper,
		#receiptsDrawer .drawer-content-wrapper {
		  transform: translateY(100%);
		  transition: transform 0.4s ease-in-out;
		  will-change: transform;
		  touch-action: none;
		  overscroll-behavior: contain;
		  padding-bottom: var(--safe-area-inset-bottom);
		  height: 90vh;
		  background: var(--card-dark);
		  backdrop-filter: blur(12px);
		  -webkit-backdrop-filter: blur(12px);
		  border-top-left-radius: 1rem;
		  border-top-right-radius: 1rem;
		  border: 1px solid var(--border-dark);
		  display: flex;
		  flex-direction: column;
		}
		#gifDrawer.open .drawer-content-wrapper, #receiptsDrawer.open .drawer-content-wrapper { transform: translateY(0); }
		#gifDrawer.open .drawer-backdrop, #receiptsDrawer.open .drawer-backdrop { opacity: 1; }
		#gifDrawer .drawer-content-wrapper.dragging { touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
		#gifDrawer .drawer-content-wrapper.drag-snap { transition: transform 0.25s ease; }
		#gifDrawer .drag-handle { position: relative; padding-top: 10px; padding-bottom: 6px; display: flex; justify-content: center; align-items: center; touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: grab; z-index: 10; }
		#gifDrawer .drag-handle:active { cursor: grabbing; }
		#gifDrawer .drag-bar { width: 44px; height: 5px; border-radius: 9999px; background: rgba(255,255,255,0.35); }
		#gif-grid { -moz-column-count: 2; column-count: 2; -moz-column-gap: 0.75rem; column-gap: 0.75rem; }
		@media (min-width: 640px) { #gif-grid { -moz-column-count: 3; column-count: 3; } }
		@media (min-width: 1024px){ #gif-grid { -moz-column-count: 4; column-count: 4; } }
		.gif-item { display:inline-block; width:100%; margin-bottom:0.75rem; background-color:#334155; border-radius:0.5rem; cursor:pointer; transition:transform 0.2s ease-out; overflow:hidden; }
		.gif-item:hover { transform: scale(1.03); }
		.gif-item img { display:block; width:100%; height:auto; border-radius:0.5rem; }
		#gifDrawer .drawer-header { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--border-dark); }
		body.drawer-open #page-container { overflow: hidden !important; }
		#gifDrawer .drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
		#receiptsDrawer .drawer-content-wrapper.dragging { touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
		#receiptsDrawer .drawer-content-wrapper.drag-snap { transition: transform 0.25s ease; }
		#receiptsDrawer .drag-handle { position: relative; padding-top: 10px; padding-bottom: 6px; display:flex; justify-content:center; align-items:center; touch-action:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; cursor:grab; z-index:10; }
		#receiptsDrawer .drag-handle:active { cursor: grabbing; }
		#receiptsDrawer .drag-bar { width: 44px; height: 5px; border-radius: 9999px; background: rgba(255,255,255,0.35); }
		#receiptsDrawer .drawer-header { display:flex; align-items:center; gap:.75rem; padding:1rem; border-bottom:1px solid var(--border-dark); }
		#receiptsDrawer .drawer-body { flex:1; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
		/* Always keep the receipts drawer above everything */
		#receiptsDrawer { position: fixed; inset: 0; z-index: 3000; }
		#receiptsDrawer .drawer-backdrop { position: fixed; inset: 0; z-index: 3000; }
		#receiptsDrawer .drawer-content-wrapper { position: fixed; inset-inline: 0; bottom: 0; z-index: 3001; }
		/* Put the close button in the top-right of the header */
		#receiptsDrawer .drawer-header { position: relative; justify-content: center; }
		#close-receipts-drawer-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}
		/* Two-column layout for receipts content (stacks on small screens) */
		#receiptsDrawer .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem; /* 20px */
}
		/* Optional: tidy section headers and counters in each column */
		#receiptsDrawer .section-head {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
		#receiptsDrawer .section-count {
  font-size: .75rem; line-height: 1;
  padding: 2px 8px; border-radius: 9999px;
  background: rgba(100,116,139,.35); color: #e5e7eb;
}
		/* ========================================================================== */
		/* --- Chat: Core Message & Layout Styles --- */
		/* ========================================================================== */
		#chat-form input,
#chat-form textarea,
#chat-form select {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
  -webkit-touch-callout: default;
}
		.receipt-user-item {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  padding: 0.5rem; /* 8px */
  border-radius: 0.5rem; /* 8px */
  background-color: rgba(100, 116, 139, 0.1); /* bg-slate-500/10 */
}
		.unread-counter {
  position: relative; /* Establish a stacking context */
  z-index: 10;        /* Lift it above its siblings */
  pointer-events: auto !important;
  -moz-user-select: auto !important;
       user-select: auto !important;         /* Allow interaction */
  -webkit-user-select: auto !important; /* Allow interaction (iOS) */
  touch-action: auto !important;
}
		.new-divider {
    position: sticky;
    top: 8px;
    z-index: 2;
    display: inline-block;
    margin: 8px auto;
    padding: 2px 8px;
    font-size: 12px;
    color: #64748b; /* slate-500 */
    background: #0f172a; /* slate-900 */
    border-radius: 9999px;
}
		.message-bubble {
    /* Prevents text selection on long press on mobile devices */
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  touch-action: manipulation; 
    -ms-user-select: none;     /* IE 10+ */
    /* Establishes a positioning context for child elements like menus and reactions */
    position: relative;
	pointer-events: auto !important;
}
		.message-body {
    /* Establishes a positioning context for reactions */
    position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  touch-action: manipulation; 
  -ms-user-select: none;  
    /* Adds space at the top for the reactions to sit in without overlapping text */
    padding-top: 8px;
    margin-top: -8px; /* Pulls the bubble back up to maintain original spacing */
}
		.message-body .reactions-container {
  position: absolute;
  bottom: -10px;
  display: inline-flex;
  gap: 4px;
}
		/* Mine (items-end) -> bottom-left */
		.message-bubble.items-end .reactions-container { left: 8px; right: auto; }
		/* Others (items-start) -> bottom-right */
		.message-bubble.items-start .reactions-container { right: 8px; left: auto; }
		/* --- Standard Text Bubble --- */
		.msg.bubble {
    background: #1f2937; /* gray-800 */
    color: #e5e7eb; /* gray-200 */
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    max-width: 80%;
    margin-top: 8px;
}
		/* --- Large Emoji-Only Message --- */
		.emoji-only-message {
    font-size: 3rem; /* 48px */
    line-height: 1.1;
    background: transparent;
    padding: 0.25rem;
    margin-top: 8px;
}
		/* Reduces the top margin for messages from the same user sent close together */
		.msg.grouped,
.emoji-only-message.grouped {
    margin-top: 2px;
}
		/* ========================================================================== */
		/* --- Chat: Reactions --- */
		/* ========================================================================== */
		/* 🎨 OVERRIDES: corner reactions + no bubble */
		.reactions-container {
  position: absolute;
  bottom: -4px;  /* tuck into the corner */
  transform: none;
  top: auto;
  z-index: 5;
  display: flex;
  gap: 4px;
}
		.items-start .reactions-container { right: -4px; left: auto; }
		.items-end   .reactions-container { left: -4px; right: auto; }
		.reaction-badge, .reaction-badge * {
  -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none;
}
		/* Make each reaction a simple inline emoji+count, no chip */
		.reaction-badge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 0.95rem; /* slightly larger */
  line-height: 1;
  color: #e5e7eb;
  opacity: 0.9;
  cursor: pointer;
  transition: transform 0.12s ease-out;
}
		.reaction-badge:hover { transform: scale(1.1); }
		/* Emoji-only messages: no bubble, larger like iPhone */
		.emoji-only-message {
  font-size: 3rem;
  line-height: 1.1;
  padding: 0.1rem 0.2rem;
  background: transparent !important;
}
		.reaction-badge.my-reaction {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: black;
    font-weight: 600;
}
		/* --- NEW: Reply UI Styles --- */
		#reply-context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #1f2937; /* gray-800 */
    border-bottom: 1px solid #374151; /* gray-700 */
    font-size: 0.875rem;
}
		#reply-context-banner .reply-text-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #d1d5db; /* gray-300 */
}
		#reply-context-banner .reply-author {
    font-weight: 600;
    color: #e5e7eb; /* gray-200 */
}
		#reply-context-banner .reply-preview {
    opacity: 0.7;
}
		#cancel-reply-btn {
    background: none;
    border: none;
    color: #9ca3af; /* gray-400 */
    cursor: pointer;
    padding: 4px;
    margin-left: 12px;
}
		#cancel-reply-btn:hover {
    color: #e5e7eb; /* gray-200 */
}
		/* --- NEW: In-Message Reply Quote --- */
		.reply-quote {
    padding-left: 10px;
    margin-bottom: 6px;
    border-left: 2px solid var(--accent-color);
    opacity: 0.8;
}
		.reply-quote .reply-quote-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-color);
}
		.reply-quote .reply-quote-text {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
		/* ========================================================================== */
		/* --- Chat: Long-Press Menu & Overlay --- */
		/* ========================================================================== */
		/* 📱 iOS: remove grey tap highlight + native callout, keep inputs editable */
		#chat-page,
#chat-messages,
#chat-messages *:not(input):not(textarea):not(select) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
		/* --- NEW: In-Message Inline Reply Quote --- */
		.inline-reply-quote {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 6px;
    margin-left: auto; /* Aligns to the right within the header */
    max-width: 180px; /* Constrains the width */
    border-left: 2px solid var(--accent-color);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0 4px 4px 0;
    font-size: 0.75rem; /* Smaller text */
    opacity: 0.8;
    overflow: hidden; /* Ensures contents don't spill out */
}
		.inline-reply-quote .reply-quote-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #cbd5e1; /* slate-300 */
}
		/* ========================================================================== */
		/* --- ☀️ Light Mode Theme --- */
		/* ========================================================================== */
		/* Assumes you have a `.light` class on your <body> or a parent container */
		.interaction-menu-section {
    border-color: rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.8); /* White with transparency */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	border-radius: 18px;
}
		#reaction-viewer-list {
    color: #374151; /* gray-700 */
}
		#interaction-actions .context-menu-btn {
    color: #1f2937; /* gray-800 */
}
		#interaction-actions .context-menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
		#interaction-actions .context-menu-btn i {
    color: #6b7280; /* gray-500 */
}
		#interaction-actions .context-menu-btn.text-red-400 {
    color: #ef4444; /* red-500 */
}
		#interaction-actions .context-menu-btn.text-red-400 i {
    color: #ef4444; /* red-500 */
}
		/* --- 3. Action Buttons (Reply, Edit, Delete) --- */
		#interaction-actions {
    display: flex;
    flex-direction: column;
}
		.dark #interaction-actions .context-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.9rem; /* 14.4px */
    font-weight: 500;
    border-radius: 12px;
    color: #e5e7eb; /* gray-200 */
    transition: background-color 0.15s;
    text-align: left;
    width: 100%;
}
		.dark #interaction-actions .context-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}
		.dark #interaction-actions .context-menu-btn i {
    font-size: 1.2rem; /* 19.2px */
    color: #9ca3af; /* gray-400 */
}
		.dark #interaction-actions .context-menu-btn.text-red-400 {
    color: #f87171; /* red-400 */
}
		.dark #interaction-actions .context-menu-btn.text-red-400 i {
    color: #f87171;
}
		/* --- 2. Emoji Picker --- */
		#interaction-emoji-picker {
    display: flex;
    justify-content: space-around;
    padding: 8px 4px;
}
		#interaction-emoji-picker .emoji-reaction-btn {
    font-size: 1.75rem; /* 28px */
    line-height: 1;
    padding: 4px;
    border-radius: 8px;
    transition: transform 0.15s ease, outline-color 0.15s ease;
}
		#interaction-emoji-picker .emoji-reaction-btn:hover {
    transform: scale(1.15);
}
		#interaction-emoji-picker .emoji-reaction-btn[aria-pressed="true"] {
    outline: 2px solid var(--accent-color);
    transform: scale(1.1);
}
		/* --- 1. "Who Reacted" List --- */
		#reaction-viewer-list {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.875rem; /* 14px */
    color: #d1d5db; /* gray-300 */
}
		#reaction-viewer-list .reaction-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
		#reaction-viewer-list .reaction-item .emoji {
    font-size: 1.125rem; /* 18px */
    line-height: 1.2;
    margin-top: -1px;
}
		#reaction-viewer-list .reaction-item .names {
    opacity: 0.9;
}
		/* Shared style for all sections within the menu for a consistent look */
		.dark .interaction-menu-section {
    border-radius: 18px; /* Beautifully rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(30, 41, 59, 0.8); /* slate-800 with transparency */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 8px;
    overflow: hidden;
}
		/* --- Unified Interaction Menu Container --- */
		#interaction-menu {
    /* REMOVED position, top, left, and keyframe animation */
    display: flex;
	position: relative;
    flex-direction: column;
    gap: 6px;
    z-index: 1100;
    max-width: 360px;
    width: min(92vw, 360px);
    will-change: opacity, transform;
    transform-origin: center center; /* For scaling from the center */
    /* GSAP will control opacity and transform */
}
		#interaction-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none; /* Hidden by default, GSAP controls this */
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4); /* Base background, can be tweened */
}
		#message-interaction-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40; /* Sits behind the highlighted message */
}
		#chat-messages { position: relative; }
		#reply-context-banner.hidden { display: none !important; }
		/* 🎨 Selected emoji in picker */
		#emoji-picker .emoji-reaction-btn[aria-pressed="true"] {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 8px;
  transform: scale(1.08);
}
		/* 👥 Reaction viewer popover */
		#reaction-viewer {
  backdrop-filter: blur(6px);
}
		body.menu-open, body.menu-open #chat-page { overscroll-behavior: contain; overflow: hidden; }
		body.menu-open,
body.menu-open *:not(input):not(textarea):not(select) {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
       user-select: none !important;
  -webkit-touch-callout: none !important;
}
		.message-bubble.highlighted {
    z-index: 1000; /* Sits on top of the overlay */
    transform: scale(1.02);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
		.message-bubble[data-grouped="1"] { /* FIX: grouped bubbles = no vertical gap */
  margin-top: 0 !important;
}
		@media (prefers-reduced-motion: reduce) {
  /* FIX: accessibility—reduce motion */
  #interaction-menu,
  #emoji-picker {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
		#emoji-picker {
    position: absolute;
    bottom: 100%;
    margin-bottom: 0.5rem;
    z-index: 51; /* Sits on top of the highlighted message */
    transform: scale(0.95);
    opacity: 0;
    animation: picker-fade-in 0.22s ease-out forwards;
}
		#message-context-menu {
    position: absolute;
    top: 100%;
    margin-top: 0.5rem;
    z-index: 51; /* Sits on top of the highlighted message */
}
		.context-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background-color: transparent;
    transition: background-color 0.15s;
    white-space: nowrap;
    color: #e5e7eb; /* gray-200 */
}
		.context-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
		.context-menu-btn i {
    font-size: 1.125rem;
}
		.context-menu-btn.text-red-400 {
    color: #f87171; /* red-400 */
}
		@keyframes picker-fade-in {
    to {
        transform: scale(1);
        opacity: 1;
    }
}
		.unread-counter {
  font-size: 0.65rem; /* 10.4px */
  line-height: 1;
  font-weight: 600;
  color: #64748b; /* slate-500 */
  padding-top: 2px;
  padding-right: 6px;
  padding-left: 6px;
}
		.dark .unread-counter {
  color: #64748b; /* dark:text-gray-500 */
}
		/* ========================================================================== */
		/* --- Chat: @Mentions --- */
		/* ========================================================================== */
		#mention-popup {
    display: none; /* Hidden by default, shown by JS */
    z-index: 20;   /* Appears above the chat input area */
}
		.mention-item .card-base,
.mention-item .card-base-overflow {
    transform: scale(0.9);
}
		.mention { 
  display: inline;                   /* prevent block bleed */
  background: rgba(14,165,233,.15);  /* subtle accent tint */
  padding: 0 2px;
  border-radius: 4px;
}
		/* In your own (accent) bubble, slightly tweak the chip to keep contrast */
		.items-end .mention {
  background-color: color-mix(in srgb, black 8%, var(--accent-color) 26%);
}
		.mention[data-uid] { cursor: pointer; }
		/* --- Add this to your CSS file --- */
		/* Styles for the new "add emoji" button */
		#interaction-emoji-picker .add-emoji-btn {
    font-size: 1.25rem; /* Icon size */
    color: #9ca3af;     /* A nice gray color */
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
		#interaction-emoji-picker .add-emoji-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}
		/* Styles for the emoji picker pop-up */
		.emoji-picker-popup {
    position: absolute;
    bottom: 100%; /* Position it above the menu */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px; /* Spacing from the menu */
    z-index: 1200;
}
		#interaction-emoji-picker.interaction-menu-section {
  position: relative;
  overflow: visible;     /* <— important */
  z-index: 1200;
}
		#interaction-menu .interaction-menu-section {
  overflow: visible;     /* safe, the modal has a backdrop */
}
		.emoji-picker-popup {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
  z-index: 1200;

  /* Size constraints */
  max-height: 300px;      /* keep it from spilling off screen */
  max-width: 320px;
  overflow-y: auto;       /* scroll if taller than allowed */
  overflow-x: hidden;

  /* Styling (optional) */
  background: var(--card-bg, #1e293b); /* or white/light depending on theme */
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
		/* shrink the native emoji-picker inside */
		.emoji-picker-popup emoji-picker {
  width: 100%;
  height: auto;
}
		/* ==========================================================================
		   20. Calling Card
		   ========================================================================== */
		@media (min-width: 1024px) {
            #calling-card-gallery { grid-auto-flow: dense; }
            #ai-card-generator-button { grid-column-start: 4; grid-row-start: 1; }
            body.sidebar-collapsed { --sidebar-width: 7rem; }
        }
		@media (min-width: 768px) and (max-width: 1023px) {
            #calling-card-gallery { grid-auto-flow: dense; }
            #ai-card-generator-button { grid-column-start: 3; grid-row-start: 1; }
        }
		/* --- Calling Card: Popup --- */
		#calling-card-modal .card-container { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem; border-radius: 1rem; min-height: 120px; cursor: pointer; transition: border-color .15s, background .15s, transform .2s ease-in-out; background: rgba(241,245,249,.5); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15); overflow-x: hidden; }
		.dark #calling-card-modal .card-container { border: 1px solid #374151; background: rgba(31,41,55,0.7); }
		#calling-card-modal .card-container:hover { transform: translateY(-4px); border-color: var(--accent-color); }
		#calling-card-modal .card-title { font-weight: 600; font-size: 1rem; letter-spacing: .05em; margin-bottom: auto; color: var(--text-light); }
		.dark #calling-card-modal .card-title { color: var(--text-dark); }
		.card-base { display: flex; align-items: center; justify-content: space-between; height: 2rem; min-width: 7rem; padding: 0 0.5rem; border-radius: 0.375rem; position: relative; overflow: hidden; }
		.card-base-overflow { display: flex; align-items: center; justify-content: space-between; height: 2rem; min-width: 7rem; padding: 0 0.5rem; border-radius: 0.375rem; position: relative; }
		.card-base-ai { display: flex; align-items: center; justify-content: space-between; height: 2rem; min-width: 7rem; padding: 0 0.5rem; border-radius: 0.375rem; position: relative; }
		.user-calling-card .card-base { transform: scale(0.8); margin-left: -12px; }
		#calling-card-gallery { overscroll-behavior: contain; }
		#current-calling-card .card-base-overflow { overflow: visible; }
		/* --- Calling Card: Styles --- */
		/* This pauses animations if the class is on the body OR the card itself */
		.animations-paused .card-base,
.animations-paused .card-base-overflow,
.card-base.animations-paused,
.card-base-overflow.animations-paused,
.animations-paused *::before,
.animations-paused *::after {
  animation-play-state: paused !important;
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
		/* Also pause animations on any children elements */
		.animations-paused .card-base *,
.animations-paused .card-base-overflow *,
.card-base.animations-paused *,
.card-base-overflow.animations-paused * {
  animation-play-state: paused !important;
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
		/* --- Korea: Taeguk --- */
		.taegeuk-card { font-family: 'Do Hyeon', sans-serif; background-color: #f9fafb; border: 2px solid #d1d5db; }
		.taegeuk-icon { animation: spin 8s linear infinite; }
		/* --- Korea: Yangyang --- */
		.yangyang-card { font-family: 'Do Hyeon', sans-serif; background: linear-gradient(to top, #fef3c7, #a5f3fc); border: 2px solid #e0f2fe; }
		.yangyang-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 200%; height: 60%; background: #0ea5e9; border-radius: 40% 50%; animation: wave 6s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; opacity: 0.3; }
		@keyframes wave { 0% { margin-left: 0; } 100% { margin-left: -100%; } }
		/* --- Korea: Naksansa --- */
		.naksansa-icon { animation: temple-glow 4s infinite alternate; }
		@keyframes temple-glow { from { filter: drop-shadow(0 0 2px #9333ea); } to { filter: drop-shadow(0 0 6px #c084fc); } }
		/* --- Korea: Soju --- */
		.soju-card { font-family: 'Do Hyeon', sans-serif; background-color: #15803d; border: 2px solid #bbf7d0; }
		.soju-icon { animation: soju-tilt 3s infinite ease-in-out; }
		@keyframes soju-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
		/* --- Korea: Hangeul --- */
		.hangeul-card { font-family: 'Do Hyeon', sans-serif; background-color: #000; border: 2px solid #4b5563; }
		.hangeul-char { position: absolute; color: #6ee7b7; animation: fall 5s linear infinite; opacity: 0; }
		@keyframes fall { 0% { transform: translateY(-10px); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
		/* --- Korea: Seoul Rain --- */
		.seoul-card { font-family: 'Audiowide', monospace; background-color: #1e1b4b; border: 2px solid #4f46e5; }
		.seoul-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, transparent 49%, #a5b4fc 50%, transparent 51%); background-size: 100% 5px; animation: rain-fall 1s linear infinite; opacity: 0.5; }
		@keyframes rain-fall { from { background-position: 0 0; } to { background-position: 0 50px; } }
		.tiger-card { font-family: 'Black Ops One', fantasy; background: linear-gradient(135deg, #1f2937, #374151); border: 2px solid #f97316; }
		/* --- Korea: Tiger --- */
		.tiger-icon { animation: tiger-breath 2.5s infinite ease-in-out; }
		@keyframes tiger-breath { 50% { transform: scale(1.1); filter: drop-shadow(0 0 5px #fb923c); } }
		/* --- Korea: Gwangbok --- */
		.gwangbok-card { font-family: 'Do Hyeon', sans-serif; background-color: #111827; border: 2px solid #d1d5db; }
		.gwangbok-icon { animation: light-ray 5s infinite; transform-origin: center; }
		@keyframes light-ray { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1); } }
		/* --- Halo: Cortana --- */
		.cortana-card { font-family: 'Share Tech Mono', monospace; background-color: #0c4a6e; border: 2px solid #7dd3fc; }
		.cortana-card::before { content: '0101001101'; color: rgba(125, 211, 252, 0.2); position: absolute; top: 2px; left: 5px; font-size: 0.5rem; animation: binary-scroll 2s linear infinite; }
		@keyframes binary-scroll { from { transform: translateY(0); } to { transform: translateY(-10px); } }
		/* --- Halo: The Covenant --- */
		.covenant-card { font-family: 'Exo 2', sans-serif; background-image: radial-gradient(circle, #4c1d95, #2e1065); border: 2px solid #a78bfa; }
		.covenant-icon { animation: plasma-flicker 3s infinite; }
		@keyframes plasma-flicker { 0%, 100% { filter: drop-shadow(0 0 4px #c4b5fd); } 50% { filter: drop-shadow(0 0 8px #ddd6fe); } }
		/* --- Marvel: Dr. Strange --- */
		.strange-card { font-family: 'Exo 2', sans-serif; background-color: #052e16; border: 2px solid #15803d; }
		.strange-glyph { animation: spin 10s linear infinite reverse; }
		.time-stone { background: #4ade80; border-radius: 50%; box-shadow: 0 0 8px #4ade80; animation: time-pulse 3s infinite; }
		@keyframes time-pulse { 50% { box-shadow: 0 0 15px #86efac; } }
		/* --- Holographic --- */
		.holographic-card { font-family: 'Orbitron', sans-serif; background-image: linear-gradient(135deg, #3b0764, #4f46e5, #0891b2); border: 1px solid #a78bfa; }
		.holographic-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 50%); background-size: 100% 4px; animation: scanlines 2s linear infinite; opacity: 0.5; }
		@keyframes scanlines { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }
		/* --- Ghost --- */
		.ghost-card { font-family: 'Share Tech Mono', monospace; background-color: rgba(209, 213, 219, 0.1); border: 1px solid rgba(229, 231, 235, 0.3); animation: ghost-fade 6s infinite; }
		@keyframes ghost-fade { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.3; } }
		/* --- Venom --- */
		.venom-card { font-family: 'Bungee', fantasy; background-color: #14532d; border: 2px solid #4ade80; }
		.venom-card::after { content: ''; position: absolute; bottom: -2px; left: 20%; width: 6px; height: 10px; background: #4ade80; border-radius: 0 0 50% 50%; animation: venom-drip 3s infinite ease-out; box-shadow: 0 0 5px #4ade80; }
		@keyframes venom-drip { 0% { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
		/* --- Tsunami --- */
		.tsunami-card { font-family: 'Russo One', sans-serif; background-color: #1e3a8a; border: 2px solid #60a5fa; }
		.tsunami-card::before { content: ""; position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; background: linear-gradient(90deg, #1d4ed8, #3b82f6); border-radius: 40% 50%; animation: wave 5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; transform: rotate(10deg) translateY(50%); }
		/* --- Burnout --- */
		.burnout-card { font-family: 'Audiowide', fantasy; background-color: #1e1b4b; border: 2px solid #ec4899; }
		.burnout-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, transparent 49%, #f9a8d4 50%, transparent 51%), linear-gradient(90deg, transparent 49%, #f9a8d4 50%, transparent 51%); background-size: 20px 20px; animation: grid-move 2s linear infinite; opacity: 0.3; }
		@keyframes grid-move { from { background-position: 0 0; } to { background-position: 0 -20px; } }
		/* --- Circuit --- */
		.circuit-card { font-family: 'Share Tech Mono', monospace; background-color: #064e3b; border: 2px solid #34d399; }
		.circuit-card::after { content: ''; position: absolute; left: 30%; top: -10%; width: 3px; height: 120%; background: #a7f3d0; animation: circuit-run 2s infinite linear; }
		@keyframes circuit-run { from { transform: translateY(-100%) skewY(10deg); } to { transform: translateY(100%) skewY(-10deg); } }
		/* --- Void --- */
		.void-card { font-family: 'Jolly Lodger', fantasy; background: #000; border: 2px solid #4c1d95; }
		.void-card::before { content: ''; position: absolute; width: 4px; height: 4px; background: #ddd6fe; border-radius: 50%; animation: black-hole 4s infinite; box-shadow: 0 0 8px 2px #a78bfa; }
		@keyframes black-hole { from { transform: rotate(0deg) translateX(40px) rotate(0deg); } to { transform: rotate(360deg) translateX(40px) rotate(-360deg); } }
		/* --- Fallout --- */
		.fallout-card { font-family: 'VT323', monospace; background-color: #292524; border: 2px solid #ca8a04; }
		.fallout-card::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: black; animation: fallout-flicker 0.15s infinite; }
		@keyframes fallout-flicker { 0% { opacity: 0; } 10% { opacity: 0.1; } 20% { opacity: 0.05; } 100% { opacity: 0.15; } }
		/* --- Oni --- */
		.oni-card { font-family: 'Staatliches', fantasy; background-color: #262626; border: 2px solid #7f1d1d; }
		.oni-icon { animation: oni-glow 2s infinite alternate; }
		@keyframes oni-glow { from { filter: drop-shadow(0 0 2px #ef4444); } to { filter: drop-shadow(0 0 6px #ef4444); } }
		/* --- Rocket League --- */
		.rl-card { font-family: 'Russo One', sans-serif; background-color: #0f172a; border: 2px solid #334155; }
		.rl-card::before { content: ''; position: absolute; bottom: 2px; left: 2px; height: 4px; width: 0%; background: linear-gradient(90deg, #f97316, #fb923c, #fdba74); border-radius: 2px; animation: boost-meter 4s infinite; }
		@keyframes boost-meter { 0%, 100% { width: 0%; } 50% { width: calc(100% - 4px); } 60% { width: calc(100% - 4px); } }
		.rl-ball { animation: ball-hop 2s infinite ease-in-out; }
		@keyframes ball-hop { 50% { transform: translateY(-3px); } }
		/* --- Captain America --- */
		.captain-america-card { font-family: 'Anton', monospace; background-color: #0a387a; border: 1px solid #991b1b; color: #f8fafc; align-items: flex-start; text-align: left; }
		.cap-shield-container { position: absolute; width: 40px; height: 40px; z-index: 20; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); transform: translateX(-300px) rotate(-720deg); animation: shield-enter 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards; transition: transform 0.3s ease-out; }
		.captain-america-card:hover .cap-shield-container { transform: translateX(90px) rotate(0deg) scale(1.2); }
		@keyframes shield-enter { from { transform: translateX(-300px) rotate(-720deg); } to { transform: translateX(60px) rotate(0deg) scale(1); } }
		/* --- Iron Man --- */
		.iron-man-card { font-family: 'Audiowide', sans-serif; background: radial-gradient(circle, #4c0519, #1e0208); border: 1px solid #f59e0b; color: #fef3c7; }
		.arc-reactor-container { position: absolute; width: 36px; height: 36px; right: 12px; top: 50%; transform: translateY(-50%); z-index: 20; animation: reactor-pulse 2s infinite alternate ease-in-out; }
		.arc-reactor-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #67e8f9; box-shadow: 0 0 8px #67e8f9, inset 0 0 8px #67e8f9; }
		.arc-reactor-ring:nth-child(2) { transform: scale(0.6); border-width: 3px; }
		.arc-reactor-ring:nth-child(3) { transform: scale(0.2); background: #fff; border-width: 1px; }
		@keyframes reactor-pulse { from { transform: translateY(-50%) scale(0.95); filter: drop-shadow(0 0 5px #67e8f9); } to { transform: translateY(-50%) scale(1.05); filter: drop-shadow(0 0 12px #67e8f9); } }
		/* --- Loki --- */
		.loki-card { font-family: 'Cinzel Decorative', serif; background: radial-gradient(circle, #042f2e, #021615); border: 1px solid #ca8a04; color: #fefce8; }
		.loki-horns { position: absolute; width: 32px; left: 10px; bottom: 50%; filter: drop-shadow(0 0 8px #fde047); animation: horns-appear 1.5s ease-out forwards; }
		@keyframes horns-appear { from { transform: translateY(20px) scale(0.5); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
		.tesseract-container { position: absolute; width: 40px; height: 40px; right: 2px; top: 50%; transform: translateY(-50%) scale(0.6); perspective: 400px; }
		.tesseract { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: tesseract-spin 10s linear infinite; }
		.tesseract-face { position: absolute; width: 40px; height: 40px; background: rgba(56, 189, 248, 0.7); border: 1px solid #e0f2fe; box-shadow: 0 0 15px #38bdf8, inset 0 0 8px #fff; }
		.front { transform: translateZ(20px); }
		.back { transform: rotateY(180deg) translateZ(20px); }
		.right { transform: rotateY(90deg) translateZ(20px); }
		.left { transform: rotateY(-90deg) translateZ(20px); }
		.top { transform: rotateX(90deg) translateZ(20px); }
		.bottom { transform: rotateX(-90deg) translateZ(20px); }
		@keyframes tesseract-spin { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } }
		/* --- Spider-Verse --- */
		.spider-verse-card { font-family: 'Bangers', serif; background-color: #111827; border: 1px solid #ec4899; color: #fef2f2; }
		.portal-ring { position: absolute; border-style: solid; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: portal-pulse 2s ease-in-out infinite alternate; width: 40px; height: 40px; border-width: 2px; border-color: #f472b6; }
		.portal-ring:nth-child(2) { width: 50px; height: 50px; border-color: #60a5fa; animation-direction: reverse; }
		.portal-ring:nth-child(3) { width: 60px; height: 60px; border-color: #fde047; }
		@keyframes portal-pulse { from { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 0.5; } to { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); opacity: 1; } }
		/* --- Scarlet Witch --- */
		.scarlet-witch-card { font-family: 'Playfair Display', serif; font-style: italic; background: radial-gradient(circle, #4a044e, #1e0208); border: 1px solid #be185d; color: #fce7f3; }
		.chaos-wisp { position: absolute; width: 80px; height: 80px; background: radial-gradient(circle, #f43f5e 10%, transparent 70%); border-radius: 50%; filter: blur(5px); animation: chaos-swirl 6s ease-in-out infinite alternate; }
		@keyframes chaos-swirl { from { transform: rotate(0deg) scale(1.2); opacity: 0; } to { transform: rotate(360deg) scale(0.4); opacity: 0.6; } }
		.witch-text { animation: text-distort 4s ease-in-out infinite alternate; }
		@keyframes text-distort { from { transform: skewX(0deg); filter: blur(0); } to { transform: skewX(15deg); filter: blur(1.5px); } }
		/* --- Thanos (more in js) --- */
		.thanos-card { font-family: 'Anton', sans-serif; background: #1e1b4b; border: 1px solid #fde047; color: #f3e8ff; }
		.infinity-stone { position: absolute; width: 8px; height: 8px; border-radius: 50%; filter: blur(1.5px); animation: stone-float 4s infinite ease-in-out; }
		@keyframes stone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
		/* --- Keyframe Animations --- */
		@keyframes spin { to { transform: rotate(360deg); } }
		@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
		.dark.oled-dark .after\:border::after { content: var(--tw-content); border-color: var(--border-dark) !important; }
		 .dark.oled-dark .hover\:shadow-lg:hover { box-shadow: none !important; filter: none !important; }
		 .dark.oled-dark .dark\:bg-card-dark:is(.dark *) { background-color: var(--card-dark) !important; color: var(--text-dark); }
		 .dark.oled-dark .dark\:border-border-dark:is(.dark *) { border-color: var(--border-dark) !important; }
		.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
		.after\:left-\[2px\]::after {
  content: var(--tw-content);
  left: 2px;
}
		.after\:top-\[2px\]::after {
  content: var(--tw-content);
  top: 2px;
}
		.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}
		.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}
		.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}
		.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}
		.after\:border-gray-300::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
		.after\:bg-white::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
		.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
		.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}
		.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
		.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.hover\:border-\[color-mix\(in_srgb\2c var\(--accent-color\)_40\%\2c transparent\)\]:hover {
  border-color: color-mix(in srgb,var(--accent-color) 40%,transparent);
}
		.hover\:bg-\[color-mix\(in_srgb\2c var\(--accent-color\)_30\%\2c transparent\)\]:hover {
  background-color: color-mix(in srgb,var(--accent-color) 30%,transparent);
}
		.hover\:bg-\[color-mix\(in_srgb\2c var\(--accent-color\)_50\%\2c transparent\)\]:hover {
  background-color: color-mix(in srgb,var(--accent-color) 50%,transparent);
}
		.hover\:bg-accent-dark:hover {
  background-color: var(--accent-color-dark);
}
		.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-blue-600\/30:hover {
  background-color: rgb(37 99 235 / 0.3);
}
		.hover\:bg-border-light:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-green-600\/30:hover {
  background-color: rgb(22 163 74 / 0.3);
}
		.hover\:bg-red-500\/20:hover {
  background-color: rgb(239 68 68 / 0.2);
}
		.hover\:bg-red-600\/20:hover {
  background-color: rgb(220 38 38 / 0.2);
}
		.hover\:bg-red-600\/30:hover {
  background-color: rgb(220 38 38 / 0.3);
}
		.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-slate-200\/80:hover {
  background-color: rgb(226 232 240 / 0.8);
}
		.hover\:bg-slate-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-slate-500\/20:hover {
  background-color: rgb(100 116 139 / 0.2);
}
		.hover\:bg-slate-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-slate-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
		.hover\:bg-slate-700\/50:hover {
  background-color: rgb(51 65 85 / 0.5);
}
		.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
		.hover\:bg-white\/80:hover {
  background-color: rgb(255 255 255 / 0.8);
}
		.hover\:text-\[\#E5A00D\]:hover {
  --tw-text-opacity: 1;
  color: rgb(229 160 13 / var(--tw-text-opacity, 1));
}
		.hover\:text-accent:hover {
  color: var(--accent-color);
}
		.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
		.hover\:text-slate-600:hover {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
		.hover\:text-slate-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
		.hover\:text-text-light:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
		.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
		.hover\:underline:hover {
  text-decoration-line: underline;
}
		.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
		.hover\:shadow-\[color-mix\(in_srgb\2c var\(--accent-color\)_30\%\2c transparent\)\]:hover {
  --tw-shadow-color: color-mix(in srgb,var(--accent-color) 30%,transparent);
  --tw-shadow: var(--tw-shadow-colored);
}
		.hover\:shadow-blue-500\/30:hover {
  --tw-shadow-color: rgb(59 130 246 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
		.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
		.focus\:border-accent:focus {
  border-color: var(--accent-color);
}
		.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
		.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
		.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}
		.focus\:ring-accent:focus {
  --tw-ring-color: var(--accent-color);
}
		.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
		.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
		.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
		.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
		.disabled\:hover\:scale-100:hover:disabled {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.disabled\:hover\:bg-accent:hover:disabled {
  background-color: var(--accent-color);
}
		.disabled\:hover\:bg-slate-200:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
		.group:last-child .group-last\:h-1\/2 {
  height: 50%;
}
		.group:hover .group-hover\:rotate-12 {
  --tw-rotate: 12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.group:hover .group-hover\:border-accent {
  border-color: var(--accent-color);
}
		.group:hover .group-hover\:bg-slate-200\/50 {
  background-color: rgb(226 232 240 / 0.5);
}
		.group:hover .group-hover\:text-accent {
  color: var(--accent-color);
}
		.group:hover .group-hover\:opacity-0 {
  opacity: 0;
}
		.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
		.peer:checked ~ .peer-checked\:border-accent {
  border-color: var(--accent-color);
}
		.peer:checked ~ .peer-checked\:bg-accent {
  background-color: var(--accent-color);
}
		.peer:checked ~ .peer-checked\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
		.peer:checked ~ .peer-checked\:ring-accent {
  --tw-ring-color: var(--accent-color);
}
		.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  content: var(--tw-content);
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
		.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
		.peer:focus ~ .peer-focus\:outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
		.peer:focus ~ .peer-focus\:ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
		.peer:focus ~ .peer-focus\:ring-\[color-mix\(in_srgb\2c var\(--accent-color\)_5\%\2c transparent\)\] {
  --tw-ring-color: color-mix(in srgb,var(--accent-color) 5%,transparent);
}
		.dark\:border-\[color-mix\(in_srgb\2c var\(--accent-color\)_30\%\2c transparent\)\]:is(.dark *) {
  border-color: color-mix(in srgb,var(--accent-color) 30%,transparent);
}
		.dark\:border-border-dark:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
		.dark\:border-border-dark\/50:is(.dark *) {
  border-color: rgb(51 65 85 / 0.5);
}
		.dark\:border-card-dark:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
		.dark\:border-gray-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
		.dark\:border-gray-600\/20:is(.dark *) {
  border-color: rgb(75 85 99 / 0.2);
}
		.dark\:border-gray-700\/50:is(.dark *) {
  border-color: rgb(55 65 81 / 0.5);
}
		.dark\:border-red-500\/80:is(.dark *) {
  border-color: rgb(239 68 68 / 0.8);
}
		.dark\:border-slate-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
		.dark\:border-slate-900:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
		.dark\:border-white\/10:is(.dark *) {
  border-color: rgb(255 255 255 / 0.1);
}
		.dark\:bg-\[color-mix\(in_srgb\2c var\(--accent-color\)_5\%\2c transparent\)\]:is(.dark *) {
  background-color: color-mix(in srgb,var(--accent-color) 5%,transparent);
}
		.dark\:bg-\[color-mix\(in_srgb\2c var\(--accent-color\)_6\%\2c transparent\)\]:is(.dark *) {
  background-color: color-mix(in srgb,var(--accent-color) 6%,transparent);
}
		.dark\:bg-bg-dark:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 18 26 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-bg-dark\/80:is(.dark *) {
  background-color: rgb(15 18 26 / 0.8);
}
		.dark\:bg-black\/20:is(.dark *) {
  background-color: rgb(0 0 0 / 0.2);
}
		.dark\:bg-black\/30:is(.dark *) {
  background-color: rgb(0 0 0 / 0.3);
}
		.dark\:bg-black\/70:is(.dark *) {
  background-color: rgb(0 0 0 / 0.7);
}
		.dark\:bg-blue-500\/20:is(.dark *) {
  background-color: rgb(59 130 246 / 0.2);
}
		.dark\:bg-border-dark:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-border-dark\/50:is(.dark *) {
  background-color: rgb(51 65 85 / 0.5);
}
		.dark\:bg-card-dark:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-card-dark\/50:is(.dark *) {
  background-color: rgb(30 41 59 / 0.5);
}
		.dark\:bg-card-dark\/80:is(.dark *) {
  background-color: rgb(30 41 59 / 0.8);
}
		.dark\:bg-gray-600:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-gray-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-gray-700\/30:is(.dark *) {
  background-color: rgb(55 65 81 / 0.3);
}
		.dark\:bg-gray-800\/60:is(.dark *) {
  background-color: rgb(31 41 55 / 0.6);
}
		.dark\:bg-gray-800\/70:is(.dark *) {
  background-color: rgb(31 41 55 / 0.7);
}
		.dark\:bg-green-500\/20:is(.dark *) {
  background-color: rgb(34 197 94 / 0.2);
}
		.dark\:bg-slate-600:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-slate-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-slate-700\/50:is(.dark *) {
  background-color: rgb(51 65 85 / 0.5);
}
		.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-slate-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
		.dark\:bg-slate-900\/50:is(.dark *) {
  background-color: rgb(15 23 42 / 0.5);
}
		.dark\:bg-slate-900\/70:is(.dark *) {
  background-color: rgb(15 23 42 / 0.7);
}
		.dark\:bg-yellow-500\/20:is(.dark *) {
  background-color: rgb(234 179 8 / 0.2);
}
		.dark\:from-gray-900:is(.dark *) {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
		.dark\:via-bg-dark:is(.dark *) {
  --tw-gradient-to: rgb(15 18 26 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0F121A var(--tw-gradient-via-position), var(--tw-gradient-to);
}
		.dark\:to-black:is(.dark *) {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
		.dark\:text-black:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
		.dark\:text-gray-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
		.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
		.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
		.dark\:text-gray-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
		.dark\:text-gray-500\/80:is(.dark *) {
  color: rgb(107 114 128 / 0.8);
}
		.dark\:text-gray-600:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
		.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
		.dark\:text-slate-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
		.dark\:text-slate-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
		.dark\:text-slate-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
		.dark\:text-slate-600:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
		.dark\:text-text-dark:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
		.dark\:text-text-light:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
		.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
		.dark\:placeholder-gray-500:is(.dark *)::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
		.dark\:placeholder-gray-500:is(.dark *)::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
		.dark\:hover\:border-\[color-mix\(in_srgb\2c var\(--accent-color\)_40\%\2c transparent\)\]:hover:is(.dark *) {
  border-color: color-mix(in srgb,var(--accent-color) 40%,transparent);
}
		.dark\:hover\:bg-\[color-mix\(in_srgb\2c var\(--accent-color\)_50\%\2c transparent\)\]:hover:is(.dark *) {
  background-color: color-mix(in srgb,var(--accent-color) 50%,transparent);
}
		.dark\:hover\:bg-border-dark:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
		.dark\:hover\:bg-gray-500:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
		.dark\:hover\:bg-gray-600:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
		.dark\:hover\:bg-gray-700\/70:hover:is(.dark *) {
  background-color: rgb(55 65 81 / 0.7);
}
		.dark\:hover\:bg-slate-500:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
		.dark\:hover\:bg-slate-600:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
		.dark\:hover\:bg-slate-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
		.dark\:hover\:bg-slate-700\/80:hover:is(.dark *) {
  background-color: rgb(51 65 85 / 0.8);
}
		.dark\:hover\:bg-slate-800:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
		.dark\:hover\:bg-slate-800\/50:hover:is(.dark *) {
  background-color: rgb(30 41 59 / 0.5);
}
		.dark\:hover\:text-accent:hover:is(.dark *) {
  color: var(--accent-color);
}
		.dark\:hover\:text-slate-200:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
		.dark\:hover\:text-white:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
		.dark\:disabled\:hover\:bg-slate-700:hover:disabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
		.group:hover .dark\:group-hover\:bg-black\/30:is(.dark *) {
  background-color: rgb(0 0 0 / 0.3);
}
		@media (min-width: 640px) {
  .sm\:left-0 {
    left: 0px;
  }
  .sm\:left-4 {
    left: 1rem;
  }
  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .sm\:mb-0 {
    margin-bottom: 0px;
  }
  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }
  .sm\:w-40 {
    width: 10rem;
  }
  .sm\:w-48 {
    width: 12rem;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-start {
    align-items: flex-start;
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:pb-2 {
    padding-bottom: 0.5rem;
  }
  .sm\:pl-12 {
    padding-left: 3rem;
  }
  .sm\:text-left {
    text-align: left;
  }
}
		@media (min-width: 768px) {
  .md\:bottom-8 {
    bottom: 2rem;
  }
  .md\:right-8 {
    right: 2rem;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:mb-4 {
    margin-bottom: 1rem;
  }
  .md\:mb-8 {
    margin-bottom: 2rem;
  }
  .md\:max-w-6xl {
    max-width: 72rem;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:gap-6 {
    gap: 1.5rem;
  }
  .md\:self-start {
    align-self: flex-start;
  }
  .md\:p-8 {
    padding: 2rem;
  }
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
		@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:mb-4 {
    margin-bottom: 1rem;
  }
  .lg\:mb-8 {
    margin-bottom: 2rem;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}
		@media (min-width: 1280px) {
  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}